{"version":3,"file":"vendor-CEp9xE5g.js","sources":["../../../node_modules/object-assign/index.js","../../../node_modules/react/cjs/react.production.min.js","../../../node_modules/react/index.js","../../../node_modules/react/cjs/react-jsx-runtime.production.min.js","../../../node_modules/react/jsx-runtime.js","../../../node_modules/scheduler/cjs/scheduler.production.min.js","../../../node_modules/scheduler/index.js","../../../node_modules/react-dom/cjs/react-dom.production.min.js","../../../node_modules/react-dom/index.js","../../../node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js","../../../node_modules/@babel/runtime/helpers/esm/inheritsLoose.js","../../../node_modules/prop-types/lib/ReactPropTypesSecret.js","../../../node_modules/prop-types/factoryWithThrowingShims.js","../../../node_modules/prop-types/index.js","../../../node_modules/@babel/runtime/helpers/esm/extends.js","../../../node_modules/resolve-pathname/esm/resolve-pathname.js","../../../node_modules/tiny-invariant/dist/tiny-invariant.esm.js","../../../node_modules/history/esm/history.js","../../../node_modules/mini-create-react-context/dist/esm/index.js","../../../node_modules/isarray/index.js","../../../node_modules/path-to-regexp/index.js","../../../node_modules/react-is/cjs/react-is.production.min.js","../../../node_modules/react-is/index.js","../../../node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js","../../../node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js","../../../node_modules/react-router/modules/createNamedContext.js","../../../node_modules/react-router/modules/HistoryContext.js","../../../node_modules/react-router/modules/RouterContext.js","../../../node_modules/react-router/modules/Router.js","../../../node_modules/react-router/modules/MemoryRouter.js","../../../node_modules/react-router/modules/Lifecycle.js","../../../node_modules/react-router/modules/matchPath.js","../../../node_modules/react-router/modules/Route.js","../../../node_modules/react-router/modules/StaticRouter.js","../../../node_modules/react-router/modules/Switch.js","../../../node_modules/react-router/modules/hooks.js","../../../node_modules/lodash/_listCacheClear.js","../../../node_modules/lodash/eq.js","../../../node_modules/lodash/_assocIndexOf.js","../../../node_modules/lodash/_listCacheDelete.js","../../../node_modules/lodash/_listCacheGet.js","../../../node_modules/lodash/_listCacheHas.js","../../../node_modules/lodash/_listCacheSet.js","../../../node_modules/lodash/_ListCache.js","../../../node_modules/lodash/_stackClear.js","../../../node_modules/lodash/_stackDelete.js","../../../node_modules/lodash/_stackGet.js","../../../node_modules/lodash/_stackHas.js","../../../node_modules/lodash/_freeGlobal.js","../../../node_modules/lodash/_root.js","../../../node_modules/lodash/_Symbol.js","../../../node_modules/lodash/_getRawTag.js","../../../node_modules/lodash/_objectToString.js","../../../node_modules/lodash/_baseGetTag.js","../../../node_modules/lodash/isObject.js","../../../node_modules/lodash/isFunction.js","../../../node_modules/lodash/_coreJsData.js","../../../node_modules/lodash/_isMasked.js","../../../node_modules/lodash/_toSource.js","../../../node_modules/lodash/_baseIsNative.js","../../../node_modules/lodash/_getValue.js","../../../node_modules/lodash/_getNative.js","../../../node_modules/lodash/_Map.js","../../../node_modules/lodash/_nativeCreate.js","../../../node_modules/lodash/_hashClear.js","../../../node_modules/lodash/_hashDelete.js","../../../node_modules/lodash/_hashGet.js","../../../node_modules/lodash/_hashHas.js","../../../node_modules/lodash/_hashSet.js","../../../node_modules/lodash/_Hash.js","../../../node_modules/lodash/_mapCacheClear.js","../../../node_modules/lodash/_isKeyable.js","../../../node_modules/lodash/_getMapData.js","../../../node_modules/lodash/_mapCacheDelete.js","../../../node_modules/lodash/_mapCacheGet.js","../../../node_modules/lodash/_mapCacheHas.js","../../../node_modules/lodash/_mapCacheSet.js","../../../node_modules/lodash/_MapCache.js","../../../node_modules/lodash/_stackSet.js","../../../node_modules/lodash/_Stack.js","../../../node_modules/lodash/_arrayEach.js","../../../node_modules/lodash/_defineProperty.js","../../../node_modules/lodash/_baseAssignValue.js","../../../node_modules/lodash/_assignValue.js","../../../node_modules/lodash/_copyObject.js","../../../node_modules/lodash/_baseTimes.js","../../../node_modules/lodash/isObjectLike.js","../../../node_modules/lodash/_baseIsArguments.js","../../../node_modules/lodash/isArguments.js","../../../node_modules/lodash/isArray.js","../../../node_modules/lodash/stubFalse.js","../../../node_modules/lodash/isBuffer.js","../../../node_modules/lodash/_isIndex.js","../../../node_modules/lodash/isLength.js","../../../node_modules/lodash/_baseIsTypedArray.js","../../../node_modules/lodash/_baseUnary.js","../../../node_modules/lodash/_nodeUtil.js","../../../node_modules/lodash/isTypedArray.js","../../../node_modules/lodash/_arrayLikeKeys.js","../../../node_modules/lodash/_isPrototype.js","../../../node_modules/lodash/_overArg.js","../../../node_modules/lodash/_nativeKeys.js","../../../node_modules/lodash/_baseKeys.js","../../../node_modules/lodash/isArrayLike.js","../../../node_modules/lodash/keys.js","../../../node_modules/lodash/_baseAssign.js","../../../node_modules/lodash/_nativeKeysIn.js","../../../node_modules/lodash/_baseKeysIn.js","../../../node_modules/lodash/keysIn.js","../../../node_modules/lodash/_baseAssignIn.js","../../../node_modules/lodash/_cloneBuffer.js","../../../node_modules/lodash/_copyArray.js","../../../node_modules/lodash/_arrayFilter.js","../../../node_modules/lodash/stubArray.js","../../../node_modules/lodash/_getSymbols.js","../../../node_modules/lodash/_copySymbols.js","../../../node_modules/lodash/_arrayPush.js","../../../node_modules/lodash/_getPrototype.js","../../../node_modules/lodash/_getSymbolsIn.js","../../../node_modules/lodash/_copySymbolsIn.js","../../../node_modules/lodash/_baseGetAllKeys.js","../../../node_modules/lodash/_getAllKeys.js","../../../node_modules/lodash/_getAllKeysIn.js","../../../node_modules/lodash/_DataView.js","../../../node_modules/lodash/_Promise.js","../../../node_modules/lodash/_Set.js","../../../node_modules/lodash/_WeakMap.js","../../../node_modules/lodash/_getTag.js","../../../node_modules/lodash/_initCloneArray.js","../../../node_modules/lodash/_Uint8Array.js","../../../node_modules/lodash/_cloneArrayBuffer.js","../../../node_modules/lodash/_cloneDataView.js","../../../node_modules/lodash/_cloneRegExp.js","../../../node_modules/lodash/_cloneSymbol.js","../../../node_modules/lodash/_cloneTypedArray.js","../../../node_modules/lodash/_initCloneByTag.js","../../../node_modules/lodash/_baseCreate.js","../../../node_modules/lodash/_initCloneObject.js","../../../node_modules/lodash/_baseIsMap.js","../../../node_modules/lodash/isMap.js","../../../node_modules/lodash/_baseIsSet.js","../../../node_modules/lodash/isSet.js","../../../node_modules/lodash/_baseClone.js","../../../node_modules/lodash/cloneDeep.js","../../../node_modules/is-what/dist/index.js","../../../node_modules/merge-anything/dist/index.js","../../../node_modules/liquidjs/dist/liquid.browser.esm.js","../../../node_modules/@fluentui/react/node_modules/tslib/tslib.es6.mjs","../../../node_modules/@fluentui/set-version/src/setVersion.ts","../../../node_modules/@fluentui/set-version/src/index.ts","../../../node_modules/@fluentui/merge-styles/src/shadowConfig.ts","../../../node_modules/@fluentui/merge-styles/src/extractStyleParts.ts","../../../node_modules/@fluentui/merge-styles/src/StyleOptionsState.ts","../../../node_modules/@fluentui/merge-styles/node_modules/tslib/tslib.es6.mjs","../../../node_modules/@fluentui/merge-styles/src/Stylesheet.ts","../../../node_modules/@fluentui/merge-styles/lib/src/transforms/kebabRules.ts","../../../node_modules/@fluentui/merge-styles/src/getVendorSettings.ts","../../../node_modules/@fluentui/merge-styles/lib/src/transforms/prefixRules.ts","../../../node_modules/@fluentui/merge-styles/lib/src/transforms/provideUnits.ts","../../../node_modules/@fluentui/merge-styles/lib/src/transforms/rtlifyRules.ts","../../../node_modules/@fluentui/merge-styles/src/tokenizeWithParentheses.ts","../../../node_modules/@fluentui/merge-styles/src/styleToClassName.ts","../../../node_modules/@fluentui/merge-styles/src/mergeStyles.ts","../../../node_modules/@fluentui/merge-styles/src/concatStyleSets.ts","../../../node_modules/@fluentui/merge-styles/src/mergeStyleSets.ts","../../../node_modules/@fluentui/merge-styles/src/concatStyleSetsWithProps.ts","../../../node_modules/@fluentui/merge-styles/src/fontFace.ts","../../../node_modules/@fluentui/merge-styles/src/keyframes.ts","../../../node_modules/@fluentui/style-utilities/lib/src/utilities/buildClassMap.ts","../../../node_modules/@fluentui/style-utilities/node_modules/tslib/tslib.es6.mjs","../../../node_modules/@fluentui/utilities/lib/src/dom/canUseDOM.ts","../../../node_modules/@fluentui/utilities/lib/src/dom/getWindow.ts","../../../node_modules/@fluentui/utilities/src/Async.ts","../../../node_modules/@fluentui/dom-utilities/src/isVirtualElement.ts","../../../node_modules/@fluentui/dom-utilities/src/getVirtualParent.ts","../../../node_modules/@fluentui/dom-utilities/src/getParent.ts","../../../node_modules/@fluentui/dom-utilities/src/elementContains.ts","../../../node_modules/@fluentui/dom-utilities/src/findElementRecursive.ts","../../../node_modules/@fluentui/dom-utilities/src/elementContainsAttribute.ts","../../../node_modules/@fluentui/dom-utilities/src/getActiveElement.ts","../../../node_modules/@fluentui/dom-utilities/src/getChildren.ts","../../../node_modules/@fluentui/dom-utilities/src/getEventTarget.ts","../../../node_modules/@fluentui/dom-utilities/src/setPortalAttribute.ts","../../../node_modules/@fluentui/dom-utilities/src/portalContainsElement.ts","../../../node_modules/@fluentui/dom-utilities/src/setVirtualParent.ts","../../../node_modules/@fluentui/utilities/lib/src/dom/getDocument.ts","../../../node_modules/@fluentui/utilities/src/focus.ts","../../../node_modules/@fluentui/utilities/lib/src/dom/getRect.ts","../../../node_modules/@fluentui/utilities/lib/src/dom/on.ts","../../../node_modules/@fluentui/utilities/src/object.ts","../../../node_modules/@fluentui/utilities/src/EventGroup.ts","../../../node_modules/@fluentui/utilities/src/scroll.ts","../../../node_modules/@fluentui/utilities/node_modules/tslib/tslib.es6.mjs","../../../node_modules/@fluentui/utilities/lib/src/warn/warn.ts","../../../node_modules/@fluentui/utilities/lib/src/warn/warnConditionallyRequiredProps.ts","../../../node_modules/@fluentui/utilities/src/BaseComponent.ts","../../../node_modules/@fluentui/utilities/src/DelayedRender.tsx","../../../node_modules/@fluentui/utilities/src/GlobalSettings.ts","../../../node_modules/@fluentui/utilities/src/KeyCodes.ts","../../../node_modules/@fluentui/utilities/src/Rectangle.ts","../../../node_modules/@fluentui/utilities/src/appendFunction.ts","../../../node_modules/@fluentui/utilities/src/aria.ts","../../../node_modules/@fluentui/utilities/src/array.ts","../../../node_modules/@fluentui/utilities/src/sessionStorage.ts","../../../node_modules/@fluentui/utilities/src/rtl.ts","../../../node_modules/@fluentui/utilities/src/classNamesFunction.ts","../../../node_modules/@fluentui/utilities/src/memoize.ts","../../../node_modules/@fluentui/utilities/lib/src/componentAs/composeComponentAs.tsx","../../../node_modules/@fluentui/utilities/src/controlled.ts","../../../node_modules/@fluentui/utilities/src/css.ts","../../../node_modules/@fluentui/utilities/lib/src/customizations/Customizations.ts","../../../node_modules/@fluentui/utilities/lib/src/customizations/CustomizerContext.ts","../../../node_modules/@fluentui/utilities/lib/src/customizations/mergeSettings.ts","../../../node_modules/@fluentui/utilities/lib/src/customizations/mergeCustomizations.ts","../../../node_modules/@fluentui/utilities/lib/src/customizations/Customizer.tsx","../../../node_modules/@fluentui/utilities/src/hoistStatics.ts","../../../node_modules/@fluentui/utilities/lib/shadowDom/src/shadowDom/contexts/MergeStylesDefaultContext.tsx","../../../node_modules/@fluentui/utilities/lib/shadowDom/src/shadowDom/hooks/useMergeStylesHooks.ts","../../../node_modules/@fluentui/utilities/lib/shadowDom/src/shadowDom/contexts/MergeStylesShadowRootContext.tsx","../../../node_modules/@fluentui/utilities/lib/shadowDom/src/shadowDom/hooks/useMergeStylesShadowRoot.ts","../../../node_modules/@fluentui/utilities/lib/shadowDom/src/shadowDom/contexts/MergeStylesShadowRootConsumer.ts","../../../node_modules/@fluentui/react-window-provider/src/WindowProvider.tsx","../../../node_modules/@fluentui/utilities/lib/src/customizations/customizable.tsx","../../../node_modules/@fluentui/utilities/lib/src/customizations/useCustomizationSettings.ts","../../../node_modules/@fluentui/utilities/src/extendComponent.ts","../../../node_modules/@fluentui/utilities/src/getId.ts","../../../node_modules/@fluentui/utilities/src/properties.ts","../../../node_modules/@fluentui/utilities/src/getNativeElementProps.ts","../../../node_modules/@fluentui/utilities/src/hoist.ts","../../../node_modules/@fluentui/utilities/src/initializeComponentRef.ts","../../../node_modules/@fluentui/utilities/src/keyboard.ts","../../../node_modules/@fluentui/utilities/src/setFocusVisibility.ts","../../../node_modules/@fluentui/utilities/src/useFocusRects.ts","../../../node_modules/@fluentui/utilities/src/FocusRectsProvider.tsx","../../../node_modules/@fluentui/utilities/src/initials.ts","../../../node_modules/@fluentui/utilities/src/localStorage.ts","../../../node_modules/@fluentui/utilities/src/language.ts","../../../node_modules/@fluentui/utilities/src/merge.ts","../../../node_modules/@fluentui/utilities/src/mobileDetector.ts","../../../node_modules/@fluentui/utilities/src/modalize.ts","../../../node_modules/@fluentui/utilities/src/osDetector.ts","../../../node_modules/@fluentui/utilities/src/overflow.ts","../../../node_modules/@fluentui/utilities/lib/src/renderFunction/composeRenderFunction.tsx","../../../node_modules/@fluentui/utilities/src/safeRequestAnimationFrame.ts","../../../node_modules/@fluentui/utilities/lib/src/selection/Selection.types.ts","../../../node_modules/@fluentui/utilities/lib/src/selection/Selection.ts","../../../node_modules/@fluentui/utilities/src/string.ts","../../../node_modules/@fluentui/utilities/src/styled.tsx","../../../node_modules/@fluentui/utilities/src/ie11Detector.ts","../../../node_modules/@fluentui/utilities/src/getPropsWithDefaults.ts","../../../node_modules/@fluentui/utilities/src/createMergedRef.ts","../../../node_modules/@fluentui/utilities/src/useIsomorphicLayoutEffect.ts","../../../node_modules/@fluentui/style-utilities/lib/src/utilities/icons.ts","../../../node_modules/@fluentui/theme/node_modules/tslib/tslib.es6.mjs","../../../node_modules/@fluentui/theme/lib/src/utilities/makeSemanticColors.ts","../../../node_modules/@fluentui/theme/src/mergeThemes.ts","../../../node_modules/@fluentui/theme/lib/src/colors/DefaultPalette.ts","../../../node_modules/@fluentui/theme/lib/src/effects/FluentDepths.ts","../../../node_modules/@fluentui/theme/lib/src/effects/DefaultEffects.ts","../../../node_modules/@fluentui/theme/lib/src/spacing/DefaultSpacing.ts","../../../node_modules/@fluentui/theme/lib/src/motion/AnimationStyles.ts","../../../node_modules/@fluentui/theme/lib/src/fonts/FluentFonts.ts","../../../node_modules/@fluentui/theme/lib/src/fonts/createFontStyles.ts","../../../node_modules/@fluentui/theme/lib/src/fonts/DefaultFontStyles.ts","../../../node_modules/@fluentui/theme/src/createTheme.ts","../../../node_modules/@fluentui/style-utilities/lib/src/styles/CommonStyles.ts","../../../node_modules/@fluentui/style-utilities/lib/src/styles/zIndexes.ts","../../../node_modules/@fluentui/style-utilities/lib/src/styles/getFocusStyle.ts","../../../node_modules/@fluentui/style-utilities/lib/src/styles/hiddenContentStyle.ts","../../../node_modules/@fluentui/style-utilities/lib/src/styles/getGlobalClassNames.ts","../../../node_modules/@microsoft/load-themed-styles/src/index.ts","../../../node_modules/@fluentui/style-utilities/lib/src/styles/theme.ts","../../../node_modules/@fluentui/style-utilities/lib/src/styles/GeneralStyles.ts","../../../node_modules/@fluentui/style-utilities/lib/src/styles/getPlaceholderStyles.ts","../../../node_modules/@fluentui/style-utilities/lib/src/classNames/AnimationClassNames.ts","../../../node_modules/@fluentui/style-utilities/src/cdn.ts","../../../node_modules/@fluentui/style-utilities/src/version.ts","../../../node_modules/@fluentui/style-utilities/src/index.ts","../../../node_modules/@fluentui/react/lib/src/common/DirectionalHint.ts","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/positioning/positioning.types.ts","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/positioning/positioning.ts","../../../node_modules/@fluentui/react-hooks/src/useAsync.ts","../../../node_modules/@fluentui/react-hooks/src/useConst.ts","../../../node_modules/@fluentui/react-hooks/src/useBoolean.ts","../../../node_modules/@fluentui/react-hooks/src/useControllableValue.ts","../../../node_modules/@fluentui/react-hooks/src/useEventCallback.ts","../../../node_modules/@fluentui/react-hooks/src/useId.ts","../../../node_modules/@fluentui/react-hooks/node_modules/tslib/tslib.es6.mjs","../../../node_modules/@fluentui/react-hooks/src/useMergedRefs.ts","../../../node_modules/@fluentui/react-hooks/src/useOnEvent.ts","../../../node_modules/@fluentui/react-hooks/src/usePrevious.ts","../../../node_modules/@fluentui/react-hooks/src/useSetTimeout.ts","../../../node_modules/@fluentui/react-hooks/src/useTarget.ts","../../../node_modules/@fluentui/react-hooks/src/useUnmount.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Popup/Popup.tsx","../../../node_modules/@fluentui/react/lib/src/utilities/dom.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Callout/CalloutContent.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Callout/CalloutContent.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Callout/CalloutContent.tsx","../../../node_modules/@fluentui/react-portal-compat-context/lib/PortalCompatContext.js","../../../node_modules/@fluentui/react/lib/components/src/components/Fabric/Fabric.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Fabric/Fabric.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Fabric/Fabric.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Layer/Layer.notification.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Layer/Layer.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Layer/Layer.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Layer/Layer.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Callout/Callout.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/FocusTrapZone/FocusTrapZone.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Tooltip/Tooltip.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Tooltip/Tooltip.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Tooltip/Tooltip.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Tooltip/Tooltip.types.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Tooltip/TooltipHost.types.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Tooltip/TooltipHost.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Tooltip/TooltipHost.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Tooltip/TooltipHost.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Icon/Icon.types.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Image/Image.types.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Image/Image.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Image/Image.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Image/Image.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Icon/Icon.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Icon/FontIcon.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Icon/Icon.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Icon/Icon.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Icon/ImageIcon.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Persona/Persona.types.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Persona/PersonaConsts.tsx","../../../node_modules/@fluentui/react/lib/components/Persona/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx","../../../node_modules/@fluentui/react/lib/components/Persona/src/components/Persona/PersonaPresence/PersonaPresence.styles.ts","../../../node_modules/@fluentui/react/lib/components/Persona/src/components/Persona/PersonaPresence/PersonaPresence.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Persona/PersonaInitialsColor.ts","../../../node_modules/@fluentui/react/lib/components/Persona/src/components/Persona/PersonaCoin/PersonaCoin.base.tsx","../../../node_modules/@fluentui/react/lib/components/Persona/src/components/Persona/PersonaCoin/PersonaCoin.styles.ts","../../../node_modules/@fluentui/react/lib/components/Persona/src/components/Persona/PersonaCoin/PersonaCoin.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Persona/Persona.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Persona/Persona.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Persona/Persona.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Autofill/Autofill.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Announced/Announced.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Announced/Announced.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Announced/Announced.ts","../../../node_modules/@fluentui/react-focus/node_modules/tslib/tslib.es6.mjs","../../../node_modules/@fluentui/react-focus/lib/components/src/components/FocusZone/FocusZone.types.ts","../../../node_modules/@fluentui/react-focus/lib/components/src/components/FocusZone/FocusZone.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Link/useLink.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Link/Link.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Link/Link.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Link/Link.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/ContextualMenu/ContextualMenu.types.ts","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/contextualMenu/contextualMenuUtility.ts","../../../node_modules/@fluentui/react/lib/components/src/components/ContextualMenu/ContextualMenuItem.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Divider/VerticalDivider.classNames.ts","../../../node_modules/@fluentui/react/lib/components/src/components/ContextualMenu/ContextualMenu.cnstyles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/ContextualMenu/ContextualMenu.classNames.ts","../../../node_modules/@fluentui/react/lib/components/src/components/ContextualMenu/ContextualMenuItem.ts","../../../node_modules/@fluentui/react/lib/components/ContextualMenu/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.tsx","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/keytips/KeytipConstants.ts","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/keytips/KeytipManager.ts","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/keytips/KeytipUtils.ts","../../../node_modules/@fluentui/react/lib/components/src/components/KeytipData/useKeytipData.ts","../../../node_modules/@fluentui/react/lib/components/src/components/KeytipData/KeytipData.tsx","../../../node_modules/@fluentui/react/lib/components/ContextualMenu/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.tsx","../../../node_modules/@fluentui/react/lib/components/ContextualMenu/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Divider/VerticalDivider.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Divider/VerticalDivider.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Divider/VerticalDivider.tsx","../../../node_modules/@fluentui/react/lib/components/ContextualMenu/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/decorators/BaseDecorator.ts","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/decorators/withResponsiveMode.tsx","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/hooks/useResponsiveMode.tsx","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/MenuContext/MenuContext.ts","../../../node_modules/@fluentui/react/lib/components/src/components/ContextualMenu/ContextualMenu.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/ContextualMenu/ContextualMenu.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/ContextualMenu/ContextualMenu.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Button/BaseButton.classNames.ts","../../../node_modules/@fluentui/react/lib/components/Button/src/components/Button/SplitButton/SplitButton.classNames.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Button/BaseButton.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Button/Button.types.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Button/BaseButton.styles.ts","../../../node_modules/@fluentui/react/lib/components/Button/src/components/Button/SplitButton/SplitButton.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Button/ButtonThemes.ts","../../../node_modules/@fluentui/react/lib/components/Button/src/components/Button/DefaultButton/DefaultButton.styles.ts","../../../node_modules/@fluentui/react/lib/components/Button/src/components/Button/DefaultButton/DefaultButton.tsx","../../../node_modules/@fluentui/react/lib/components/Button/src/components/Button/ActionButton/ActionButton.styles.ts","../../../node_modules/@fluentui/react/lib/components/Button/src/components/Button/ActionButton/ActionButton.tsx","../../../node_modules/@fluentui/react/lib/components/Button/src/components/Button/CompoundButton/CompoundButton.styles.ts","../../../node_modules/@fluentui/react/lib/components/Button/src/components/Button/CompoundButton/CompoundButton.tsx","../../../node_modules/@fluentui/react/lib/components/Button/src/components/Button/IconButton/IconButton.styles.ts","../../../node_modules/@fluentui/react/lib/components/Button/src/components/Button/IconButton/IconButton.tsx","../../../node_modules/@fluentui/react/lib/components/Button/src/components/Button/PrimaryButton/PrimaryButton.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Button/Button.tsx","../../../node_modules/@fluentui/react/lib/components/Button/src/components/Button/CommandBarButton/CommandBarButton.styles.ts","../../../node_modules/@fluentui/react/lib/components/Button/src/components/Button/CommandBarButton/CommandBarButton.tsx","../../../node_modules/@fluentui/react/lib/components/Button/src/components/Button/CommandButton/CommandButton.tsx","../../../node_modules/@fluentui/react/lib/components/Button/src/components/Button/MessageBarButton/MessageBarButton.styles.ts","../../../node_modules/@fluentui/react/lib/components/Button/src/components/Button/MessageBarButton/MessageBarButton.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/ResizeGroup/ResizeGroup.types.ts","../../../node_modules/@fluentui/react/lib/components/src/components/ResizeGroup/ResizeGroup.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/ResizeGroup/ResizeGroup.tsx","../../../node_modules/@fluentui/date-time-utilities/lib/src/dateValues/dateValues.ts","../../../node_modules/@fluentui/date-time-utilities/lib/src/dateValues/timeConstants.ts","../../../node_modules/@fluentui/date-time-utilities/lib/src/dateMath/dateMath.ts","../../../node_modules/@fluentui/date-time-utilities/node_modules/tslib/tslib.es6.mjs","../../../node_modules/@fluentui/date-time-utilities/lib/src/dateFormatting/dateFormatting.defaults.ts","../../../node_modules/@fluentui/date-time-utilities/lib/src/dateGrid/isBeforeMinDate.ts","../../../node_modules/@fluentui/date-time-utilities/lib/src/dateGrid/isAfterMaxDate.ts","../../../node_modules/@fluentui/date-time-utilities/lib/src/dateGrid/isRestrictedDate.ts","../../../node_modules/@fluentui/date-time-utilities/lib/src/dateGrid/findAvailableDate.ts","../../../node_modules/@fluentui/date-time-utilities/lib/src/dateGrid/getBoundedDateRange.ts","../../../node_modules/@fluentui/date-time-utilities/lib/src/dateGrid/isContiguous.ts","../../../node_modules/@fluentui/date-time-utilities/lib/src/dateGrid/getDateRangeTypeToUse.ts","../../../node_modules/@fluentui/date-time-utilities/lib/src/dateGrid/getDayGrid.ts","../../../node_modules/@fluentui/date-time-utilities/lib/src/timeMath/timeMath.ts","../../../node_modules/@fluentui/date-time-utilities/lib/src/timeFormatting/index.ts","../../../node_modules/@fluentui/react/lib/components/src/components/CalendarDayGrid/CalendarMonthHeaderRow.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/CalendarDayGrid/CalendarGridDayCell.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/CalendarDayGrid/CalendarGridRow.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/CalendarDayGrid/CalendarDayGrid.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Calendar/Calendar.types.ts","../../../node_modules/@fluentui/react/lib/components/src/components/CalendarDayGrid/CalendarDayGrid.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/CalendarDayGrid/CalendarDayGrid.tsx","../../../node_modules/@fluentui/react/lib/components/Calendar/src/components/Calendar/CalendarDay/CalendarDay.base.tsx","../../../node_modules/@fluentui/react/lib/components/Calendar/src/components/Calendar/CalendarDay/CalendarDay.styles.ts","../../../node_modules/@fluentui/react/lib/components/Calendar/src/components/Calendar/CalendarDay/CalendarDay.tsx","../../../node_modules/@fluentui/react/lib/components/Calendar/src/components/Calendar/CalendarPicker/CalendarPicker.styles.ts","../../../node_modules/@fluentui/react/lib/components/Calendar/src/components/Calendar/CalendarMonth/CalendarMonth.styles.ts","../../../node_modules/@fluentui/react/lib/components/Calendar/src/components/Calendar/CalendarYear/CalendarYear.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Calendar/defaults.ts","../../../node_modules/@fluentui/react/lib/components/Calendar/src/components/Calendar/CalendarYear/CalendarYear.base.tsx","../../../node_modules/@fluentui/react/lib/components/Calendar/src/components/Calendar/CalendarYear/CalendarYear.tsx","../../../node_modules/@fluentui/react/lib/components/Calendar/src/components/Calendar/CalendarMonth/CalendarMonth.base.tsx","../../../node_modules/@fluentui/react/lib/components/Calendar/src/components/Calendar/CalendarMonth/CalendarMonth.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Calendar/Calendar.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Calendar/Calendar.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Calendar/Calendar.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Check/Check.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Check/Check.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Check/Check.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Checkbox/Checkbox.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Checkbox/Checkbox.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Checkbox/Checkbox.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Label/Label.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Label/Label.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Label/Label.tsx","../../../node_modules/@fluentui/react/lib/components/ChoiceGroup/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.base.tsx","../../../node_modules/@fluentui/react/lib/components/ChoiceGroup/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.styles.ts","../../../node_modules/@fluentui/react/lib/components/ChoiceGroup/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/ChoiceGroup/ChoiceGroup.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/ChoiceGroup/ChoiceGroup.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/ChoiceGroup/ChoiceGroup.tsx","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/color/consts.ts","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/color/hsl2hsv.ts","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/color/hsv2rgb.ts","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/color/hsl2rgb.ts","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/color/cssColor.ts","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/color/clamp.ts","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/color/rgb2hex.ts","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/color/rgb2hsv.ts","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/color/hsv2hsl.ts","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/color/_rgbaOrHexString.ts","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/color/getColorFromRGBA.ts","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/color/getColorFromString.ts","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/color/shades.ts","../../../node_modules/@fluentui/react/lib/components/src/components/TextField/TextField.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/TextField/TextField.styles.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/TextField/TextField.ts","../../../node_modules/@fluentui/react/lib/components/src/components/ComboBox/ComboBox.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/ComboBox/ComboBox.classNames.ts","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/selectableOption/SelectableOption.ts","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/selectableOption/SelectableOption.types.ts","../../../node_modules/@fluentui/react/lib/components/src/components/ComboBox/ComboBox.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/List/List.types.ts","../../../node_modules/@fluentui/react/lib/components/List/src/components/List/utils/scroll.ts","../../../node_modules/@fluentui/react/lib/components/src/components/List/List.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/CommandBar/CommandBar.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/OverflowSet/OverflowButton.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/OverflowSet/OverflowSet.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/OverflowSet/OverflowSet.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/OverflowSet/OverflowSet.ts","../../../node_modules/@fluentui/react/lib/components/src/components/CommandBar/CommandBar.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/CommandBar/CommandBar.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/DatePicker/defaults.ts","../../../node_modules/@fluentui/react/lib/components/src/components/DatePicker/DatePicker.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/DatePicker/DatePicker.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/DatePicker/DatePicker.tsx","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/selection/SelectionZone.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/GroupedList/GroupedList.types.ts","../../../node_modules/@fluentui/react/lib/components/src/components/DetailsList/DetailsList.types.ts","../../../node_modules/@fluentui/react/lib/components/src/components/GroupedList/GroupSpacer.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/GroupedList/GroupedList.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/DetailsList/DetailsRow.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/DetailsList/DetailsHeader.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/DetailsList/DetailsRowCheck.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/GroupedList/GroupHeader.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Spinner/Spinner.types.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Spinner/Spinner.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Spinner/Spinner.styles.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Spinner/Spinner.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/GroupedList/GroupHeader.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/GroupedList/GroupHeader.ts","../../../node_modules/@fluentui/react/lib/components/src/components/GroupedList/GroupShowAll.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/GroupedList/GroupShowAll.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/GroupedList/GroupShowAll.ts","../../../node_modules/@fluentui/react/lib/components/src/components/GroupedList/GroupFooter.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/GroupedList/GroupFooter.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/GroupedList/GroupFooter.ts","../../../node_modules/@fluentui/react/lib/components/src/components/GroupedList/GroupedListSection.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/GroupedList/GroupedList.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/GroupedList/GroupedList.ts","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/groupedList/GroupedListUtility.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/DetailsList/DetailsRowCheck.tsx","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/dragdrop/DragDropHelper.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/DetailsList/DetailsColumn.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/DetailsList/DetailsColumn.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/DetailsList/DetailsColumn.ts","../../../node_modules/@fluentui/react/lib/components/src/components/DetailsList/DetailsHeader.types.ts","../../../node_modules/@fluentui/react/lib/components/src/components/DetailsList/DetailsHeader.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/DetailsList/DetailsHeader.ts","../../../node_modules/@fluentui/react/lib/components/src/components/DetailsList/DetailsRowFields.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/DetailsList/DetailsRow.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/DetailsList/DetailsRow.ts","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/decorators/withViewport.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/DetailsList/DetailsList.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/DetailsList/DetailsList.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/DetailsList/DetailsList.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Dialog/DialogContent.types.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Modal/Modal.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Overlay/Overlay.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Overlay/Overlay.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Overlay/Overlay.tsx","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/DraggableZone/DraggableZone.styles.ts","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/DraggableZone/DraggableZone.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Modal/Modal.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Modal/Modal.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Dialog/DialogFooter.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Dialog/DialogFooter.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Dialog/DialogFooter.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Dialog/DialogContent.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Dialog/DialogContent.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Dialog/DialogContent.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Dialog/Dialog.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Dialog/Dialog.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Dialog/Dialog.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/DocumentCard/DocumentCard.types.ts","../../../node_modules/@fluentui/react/lib/components/src/components/DocumentCard/DocumentCard.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/DocumentCard/DocumentCardPreview.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/DocumentCard/DocumentCardActivity.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/DocumentCard/DocumentCardTitle.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/DocumentCard/DocumentCardLocation.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/DocumentCard/DocumentCard.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/DocumentCard/DocumentCard.ts","../../../node_modules/@fluentui/react/lib/components/src/components/DocumentCard/DocumentCardDetails.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/DocumentCard/DocumentCardDetails.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/DocumentCard/DocumentCardDetails.ts","../../../node_modules/@fluentui/react/lib/components/src/components/DocumentCard/DocumentCardImage.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/DocumentCard/DocumentCardImage.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/DocumentCard/DocumentCardImage.ts","../../../node_modules/@fluentui/react/lib/components/src/components/DocumentCard/DocumentCardTitle.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/DocumentCard/DocumentCardTitle.ts","../../../node_modules/@fluentui/react/lib/components/Dropdown/src/components/Dropdown/utilities/DropdownSizePosCache.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Panel/Panel.types.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Panel/Panel.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Panel/Panel.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Panel/Panel.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Dropdown/Dropdown.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Dropdown/Dropdown.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Dropdown/Dropdown.tsx","../../../node_modules/@fluentui/react/lib/components/pickers/src/components/pickers/Suggestions/Suggestions.types.ts","../../../node_modules/@fluentui/react/lib/components/pickers/src/components/pickers/Suggestions/Suggestions.scss.ts","../../../node_modules/@fluentui/react/lib/components/pickers/src/components/pickers/Suggestions/SuggestionsItem.tsx","../../../node_modules/@fluentui/react/lib/components/pickers/src/components/pickers/Suggestions/SuggestionsItem.styles.ts","../../../node_modules/@fluentui/react/lib/components/pickers/src/components/pickers/Suggestions/Suggestions.tsx","../../../node_modules/@fluentui/react/lib/components/pickers/src/components/pickers/Suggestions/Suggestions.styles.ts","../../../node_modules/@fluentui/react/lib/components/pickers/src/components/pickers/Suggestions/SuggestionsController.ts","../../../node_modules/@fluentui/react/lib/components/src/components/pickers/BasePicker.types.ts","../../../node_modules/@fluentui/react/lib/components/src/components/pickers/BasePicker.scss.ts","../../../node_modules/@fluentui/react/lib/components/src/components/pickers/BasePicker.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/pickers/BasePicker.styles.ts","../../../node_modules/@fluentui/react/lib/components/pickers/src/components/pickers/TagPicker/TagItem.styles.ts","../../../node_modules/@fluentui/react/lib/components/pickers/src/components/pickers/TagPicker/TagItem.tsx","../../../node_modules/@fluentui/react/lib/components/pickers/src/components/pickers/TagPicker/TagItemSuggestion.styles.ts","../../../node_modules/@fluentui/react/lib/components/pickers/src/components/pickers/TagPicker/TagItemSuggestion.tsx","../../../node_modules/@fluentui/react/lib/components/pickers/src/components/pickers/TagPicker/TagPicker.tsx","../../../node_modules/@fluentui/font-icons-mdl2/src/fabric-icons.ts","../../../node_modules/@fluentui/font-icons-mdl2/src/fabric-icons-0.ts","../../../node_modules/@fluentui/font-icons-mdl2/src/fabric-icons-1.ts","../../../node_modules/@fluentui/font-icons-mdl2/src/fabric-icons-2.ts","../../../node_modules/@fluentui/font-icons-mdl2/src/fabric-icons-3.ts","../../../node_modules/@fluentui/font-icons-mdl2/src/fabric-icons-4.ts","../../../node_modules/@fluentui/font-icons-mdl2/src/fabric-icons-5.ts","../../../node_modules/@fluentui/font-icons-mdl2/src/fabric-icons-6.ts","../../../node_modules/@fluentui/font-icons-mdl2/src/fabric-icons-7.ts","../../../node_modules/@fluentui/font-icons-mdl2/src/fabric-icons-8.ts","../../../node_modules/@fluentui/font-icons-mdl2/src/fabric-icons-9.ts","../../../node_modules/@fluentui/font-icons-mdl2/src/fabric-icons-10.ts","../../../node_modules/@fluentui/font-icons-mdl2/src/fabric-icons-11.ts","../../../node_modules/@fluentui/font-icons-mdl2/src/fabric-icons-12.ts","../../../node_modules/@fluentui/font-icons-mdl2/src/fabric-icons-13.ts","../../../node_modules/@fluentui/font-icons-mdl2/src/fabric-icons-14.ts","../../../node_modules/@fluentui/font-icons-mdl2/src/fabric-icons-15.ts","../../../node_modules/@fluentui/font-icons-mdl2/src/fabric-icons-16.ts","../../../node_modules/@fluentui/font-icons-mdl2/src/fabric-icons-17.ts","../../../node_modules/@fluentui/font-icons-mdl2/src/iconAliases.ts","../../../node_modules/@fluentui/font-icons-mdl2/src/version.ts","../../../node_modules/@fluentui/font-icons-mdl2/src/index.ts","../../../node_modules/@fluentui/react/lib/components/src/components/MessageBar/MessageBar.types.ts","../../../node_modules/@fluentui/react/lib/components/src/components/MessageBar/MessageBar.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/MessageBar/MessageBar.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/MessageBar/MessageBar.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Nav/Nav.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Nav/Nav.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Nav/Nav.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/SearchBox/SearchBox.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/SearchBox/SearchBox.styles.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/SearchBox/SearchBox.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Shimmer/Shimmer.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Shimmer/Shimmer.types.ts","../../../node_modules/@fluentui/react/lib/components/Shimmer/src/components/Shimmer/ShimmerLine/ShimmerLine.base.tsx","../../../node_modules/@fluentui/react/lib/components/Shimmer/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts","../../../node_modules/@fluentui/react/lib/components/Shimmer/src/components/Shimmer/ShimmerLine/ShimmerLine.tsx","../../../node_modules/@fluentui/react/lib/components/Shimmer/src/components/Shimmer/ShimmerGap/ShimmerGap.base.tsx","../../../node_modules/@fluentui/react/lib/components/Shimmer/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts","../../../node_modules/@fluentui/react/lib/components/Shimmer/src/components/Shimmer/ShimmerGap/ShimmerGap.tsx","../../../node_modules/@fluentui/react/lib/components/Shimmer/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts","../../../node_modules/@fluentui/react/lib/components/Shimmer/src/components/Shimmer/ShimmerCircle/ShimmerCircle.base.tsx","../../../node_modules/@fluentui/react/lib/components/Shimmer/src/components/Shimmer/ShimmerCircle/ShimmerCircle.tsx","../../../node_modules/@fluentui/react/lib/components/Shimmer/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.tsx","../../../node_modules/@fluentui/react/lib/components/Shimmer/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.styles.ts","../../../node_modules/@fluentui/react/lib/components/Shimmer/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Shimmer/Shimmer.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Shimmer/Shimmer.tsx","../../../node_modules/@fluentui/foundation-legacy/node_modules/tslib/tslib.es6.mjs","../../../node_modules/@fluentui/foundation-legacy/src/utilities.ts","../../../node_modules/@fluentui/foundation-legacy/src/slots.tsx","../../../node_modules/@fluentui/foundation-legacy/src/createComponent.tsx","../../../node_modules/@fluentui/react/lib/components/Stack/src/components/Stack/StackItem/StackItem.styles.ts","../../../node_modules/@fluentui/react/lib/components/Stack/src/components/Stack/StackItem/StackItem.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Stack/StackUtils.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Stack/Stack.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Stack/Stack.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Text/Text.view.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Text/Text.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Text/Text.ts","../../../node_modules/@fluentui/react/lib/components/src/components/ThemeGenerator/ThemeGenerator.ts","../../../node_modules/@fluentui/react/lib/components/src/components/ThemeGenerator/ThemeRulesStandard.ts","../../../node_modules/@fluentui/react/lib/components/src/components/TimePicker/TimePicker.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Toggle/Toggle.base.tsx","../../../node_modules/@fluentui/react/lib/components/src/components/Toggle/Toggle.styles.ts","../../../node_modules/@fluentui/react/lib/components/src/components/Toggle/Toggle.tsx","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/ThemeProvider/ThemeContext.ts","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/ThemeProvider/useTheme.ts","../../../node_modules/@fluentui/react/lib/utilities/ThemeProvider/src/utilities/ThemeProvider/styleRenderers/mergeStylesRenderer.tsx","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/ThemeProvider/makeStyles.ts","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/ThemeProvider/useThemeProviderClasses.tsx","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/ThemeProvider/renderThemeProvider.tsx","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/ThemeProvider/useThemeProviderState.tsx","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/ThemeProvider/useThemeProvider.tsx","../../../node_modules/@fluentui/react/lib/utilities/src/utilities/ThemeProvider/ThemeProvider.tsx","../../../node_modules/@fluentui/tokens/lib/global/colors.js","../../../node_modules/@fluentui/tokens/lib/global/colorPalette.js","../../../node_modules/@fluentui/tokens/lib/sharedColorNames.js","../../../node_modules/@fluentui/tokens/lib/statusColorMapping.js","../../../node_modules/@fluentui/tokens/lib/alias/lightColorPalette.js","../../../node_modules/@fluentui/tokens/lib/alias/lightColor.js","../../../node_modules/@fluentui/tokens/lib/global/borderRadius.js","../../../node_modules/@fluentui/tokens/lib/global/curves.js","../../../node_modules/@fluentui/tokens/lib/global/durations.js","../../../node_modules/@fluentui/tokens/lib/global/fonts.js","../../../node_modules/@fluentui/tokens/lib/global/spacings.js","../../../node_modules/@fluentui/tokens/lib/global/strokeWidths.js","../../../node_modules/@fluentui/tokens/lib/utils/shadows.js","../../../node_modules/@fluentui/tokens/lib/utils/createLightTheme.js","../../../node_modules/@fluentui/tokens/lib/global/brandColors.js","../../../node_modules/@fluentui/tokens/lib/themes/web/lightTheme.js","../../../node_modules/dom-helpers/esm/hasClass.js","../../../node_modules/dom-helpers/esm/addClass.js","../../../node_modules/dom-helpers/esm/removeClass.js","../../../node_modules/react-transition-group/esm/config.js","../../../node_modules/react-transition-group/esm/TransitionGroupContext.js","../../../node_modules/react-transition-group/esm/utils/reflow.js","../../../node_modules/react-transition-group/esm/Transition.js","../../../node_modules/react-transition-group/esm/CSSTransition.js","../../../node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js","../../../node_modules/@fluentui/react-migration-v8-v9/lib/components/Theme/themeDuplicates.js","../../../node_modules/@fluentui/fluent2-theme/node_modules/tslib/tslib.es6.mjs","../../../node_modules/@fluentui/fluent2-theme/node_modules/@fluentui/react/lib/components/src/components/Spinner/Spinner.types.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/BasePicker.styles.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/Breadcrumb.styles.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/Button.styles.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/Callout.styles.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/Checkbox.styles.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/ChoiceGroup.styles.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/ChoiceGroupOption.styles.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/ColorPickerGridStyles.styles.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/CommandBar.styles.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/CommandBarButton.styles.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/ContextualMenu.styles.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/Dialog.styles.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/inputStyleHelpers.utils.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/Dropdown.styles.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/MessageBar.styles.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/Modal.styles.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/Pivot.styles.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/SearchBox.styles.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/Slider.styles.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/SpinButton.styles.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/Spinner.styles.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/TagItem.styles.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/TextField.styles.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/Toggle.styles.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/DetailsRowCheck.styles.ts","../../../node_modules/@fluentui/fluent2-theme/lib/src/componentStyles/Check.styles.ts","../../../node_modules/@fluentui/fluent2-theme/src/fluent2ComponentStyles.ts","../../../node_modules/@fluentui/react-migration-v8-v9/lib/components/Theme/v8ThemeShim.js","../../../node_modules/@ctrl/tinycolor/dist/module/util.js","../../../node_modules/@ctrl/tinycolor/dist/module/conversion.js","../../../node_modules/@ctrl/tinycolor/dist/module/css-color-names.js","../../../node_modules/@ctrl/tinycolor/dist/module/format-input.js","../../../node_modules/@ctrl/tinycolor/dist/module/index.js","../../../node_modules/@fluentui/react-migration-v8-v9/lib/components/Theme/v9BrandVariantsShim.js","../../../node_modules/@fluentui/react-migration-v8-v9/lib/components/Theme/v9ThemeShim.js","../../../node_modules/@talxis/base-controls/src/utils/Theme.ts","../../../node_modules/@talxis/base-controls/src/hooks/useControlTheme.ts","../../../node_modules/@talxis/base-controls/src/hooks/useControlSizing.ts","../../../node_modules/fast-deep-equal/es6/index.js","../../../node_modules/@talxis/base-controls/src/hooks/useControl.ts","../../../node_modules/@talxis/base-controls/src/hooks/useFocusIn.ts","../../../node_modules/@talxis/base-controls/src/hooks/useInputBasedControl.ts","../../../node_modules/@talxis/base-controls/src/hooks/useMouseOver.ts","../../../node_modules/@talxis/base-controls/src/components/DateTime/styles.ts","../../../node_modules/dayjs/dayjs.min.js","../../../node_modules/dayjs/plugin/utc.js","../../../node_modules/dayjs/plugin/customParseFormat.js","../../../node_modules/@talxis/base-controls/src/components/DateTime/translations.ts","../../../node_modules/@talxis/base-controls/src/components/DateTime/hooks/useDateTime.ts","../../../node_modules/@talxis/react-components/src/hooks/useClassNames.ts","../../../node_modules/lodash/lodash.js","../../../node_modules/fast-deep-equal/index.js","../../../node_modules/@talxis/react-components/src/hooks/useStateValues.ts","../../../node_modules/@talxis/react-components/src/hooks/useControlledStateValues.ts","../../../node_modules/@talxis/react-components/src/hooks/useV9CustomizedV8Theme.ts","../../../node_modules/@talxis/react-components/src/utilities/styles.ts","../../../node_modules/@talxis/react-components/src/components/TextField/styles.ts","../../../node_modules/@talxis/react-components/src/utilities/components/InputButtons/styles.ts","../../../node_modules/@talxis/react-components/src/utilities/components/InputButtons/useInputButtons.ts","../../../node_modules/@talxis/react-components/src/components/CommandBar/styles.ts","../../../node_modules/@talxis/react-components/src/components/CommandBar/CommandBar.tsx","../../../node_modules/@talxis/react-components/src/utilities/ThemeDesigner.ts","../../../node_modules/@talxis/react-components/src/utilities/components/InputButtons/InputButtons.tsx","../../../node_modules/@talxis/react-components/src/components/TextField/TextField.tsx","../../../node_modules/@talxis/react-components/src/components/TagPicker/styles.ts","../../../node_modules/@talxis/react-components/src/utilities/components/InputErrorMessage/styles.ts","../../../node_modules/@talxis/react-components/src/utilities/components/InputErrorMessage/InputErrorMessage.tsx","../../../node_modules/@talxis/react-components/src/components/TagPicker/TagPicker.tsx","../../../node_modules/@talxis/react-components/src/components/ComboBox/styles.ts","../../../node_modules/@talxis/react-components/src/components/ComboBox/ComboBox.tsx","../../../node_modules/@talxis/react-components/src/components/ComboBox/ColorfulOption/styles.ts","../../../node_modules/@talxis/react-components/src/components/ComboBox/ColorfulOption/ColorfulOption.tsx","../../../node_modules/@talxis/react-components/src/components/TimePicker/TimePicker.tsx","../../../node_modules/memoize-one/dist/memoize-one.esm.js","../../../node_modules/react-window/src/timer.js","../../../node_modules/react-window/src/domHelpers.js","../../../node_modules/react-window/src/createListComponent.js","../../../node_modules/react-window/src/FixedSizeList.js","../../../node_modules/react-window/src/shallowDiffers.js","../../../node_modules/react-window/src/areEqual.js","../../../node_modules/@talxis/react-components/src/components/Autocomplete/styles.ts","../../../node_modules/@talxis/react-components/src/components/Autocomplete/Autocomplete.tsx","../../../node_modules/@talxis/react-components/src/components/Multistage/styles.ts","../../../node_modules/@talxis/react-components/src/components/Multistage/IndicatorService.ts","../../../node_modules/@talxis/react-components/src/components/Multistage/Multistage.tsx","../../../node_modules/@talxis/react-components/src/components/DatePicker/styles.ts","../../../node_modules/@talxis/react-components/src/components/DatePicker/DatePicker.tsx","../../../node_modules/@talxis/react-components/src/components/Spinner/Spinner.tsx","../../../node_modules/@talxis/base-controls/src/components/DateTime/components/Calendar.tsx","../../../node_modules/@talxis/base-controls/src/components/DateTime/DateTime.tsx","../../../node_modules/numeral/numeral.js","../../../node_modules/@talxis/base-controls/src/constants.ts","../../../node_modules/@talxis/base-controls/src/components/Decimal/components/styles.ts","../../../node_modules/@talxis/base-controls/src/components/Decimal/components/ArrowButtons.tsx","../../../node_modules/@azure/msal-common/src/utils/Constants.ts","../../../node_modules/@azure/msal-common/src/error/AuthError.ts","../../../node_modules/@azure/msal-common/src/crypto/ICrypto.ts","../../../node_modules/@azure/msal-common/src/error/ClientAuthError.ts","../../../node_modules/@azure/msal-common/src/utils/StringUtils.ts","../../../node_modules/@azure/msal-common/src/logger/Logger.ts","../../../node_modules/@azure/msal-common/src/packageMetadata.ts","../../../node_modules/@azure/msal-common/src/authority/AuthorityOptions.ts","../../../node_modules/@azure/msal-common/src/error/ClientConfigurationError.ts","../../../node_modules/@azure/msal-common/src/request/ScopeSet.ts","../../../node_modules/@azure/msal-common/src/account/ClientInfo.ts","../../../node_modules/@azure/msal-common/src/authority/AuthorityType.ts","../../../node_modules/@azure/msal-common/src/cache/entities/AccountEntity.ts","../../../node_modules/@azure/msal-common/src/account/AuthToken.ts","../../../node_modules/@azure/msal-common/src/cache/CacheManager.ts","../../../node_modules/@azure/msal-common/src/config/ClientConfiguration.ts","../../../node_modules/@azure/msal-common/src/error/ServerError.ts","../../../node_modules/@azure/msal-common/src/network/ThrottlingUtils.ts","../../../node_modules/@azure/msal-common/src/network/NetworkManager.ts","../../../node_modules/@azure/msal-common/src/account/CcsCredential.ts","../../../node_modules/@azure/msal-common/src/request/RequestValidator.ts","../../../node_modules/@azure/msal-common/src/request/RequestParameterBuilder.ts","../../../node_modules/@azure/msal-common/src/client/BaseClient.ts","../../../node_modules/@azure/msal-common/src/cache/entities/CredentialEntity.ts","../../../node_modules/@azure/msal-common/src/cache/entities/IdTokenEntity.ts","../../../node_modules/@azure/msal-common/src/utils/TimeUtils.ts","../../../node_modules/@azure/msal-common/src/cache/entities/AccessTokenEntity.ts","../../../node_modules/@azure/msal-common/src/cache/entities/RefreshTokenEntity.ts","../../../node_modules/@azure/msal-common/src/error/InteractionRequiredAuthError.ts","../../../node_modules/@azure/msal-common/src/cache/entities/CacheRecord.ts","../../../node_modules/@azure/msal-common/src/utils/ProtocolUtils.ts","../../../node_modules/@azure/msal-common/src/url/UrlString.ts","../../../node_modules/@azure/msal-common/src/telemetry/performance/PerformanceEvent.ts","../../../node_modules/@azure/msal-common/src/crypto/PopTokenGenerator.ts","../../../node_modules/@azure/msal-common/src/cache/entities/AppMetadataEntity.ts","../../../node_modules/@azure/msal-common/src/cache/persistence/TokenCacheContext.ts","../../../node_modules/@azure/msal-common/src/response/ResponseHandler.ts","../../../node_modules/@azure/msal-common/src/client/AuthorizationCodeClient.ts","../../../node_modules/@azure/msal-common/src/client/RefreshTokenClient.ts","../../../node_modules/@azure/msal-common/src/client/SilentFlowClient.ts","../../../node_modules/@azure/msal-common/src/authority/OpenIdConfigResponse.ts","../../../node_modules/@azure/msal-common/src/authority/AuthorityMetadata.ts","../../../node_modules/@azure/msal-common/src/authority/ProtocolMode.ts","../../../node_modules/@azure/msal-common/src/cache/entities/AuthorityMetadataEntity.ts","../../../node_modules/@azure/msal-common/src/authority/CloudInstanceDiscoveryResponse.ts","../../../node_modules/@azure/msal-common/src/authority/CloudInstanceDiscoveryErrorResponse.ts","../../../node_modules/@azure/msal-common/src/authority/RegionDiscovery.ts","../../../node_modules/@azure/msal-common/src/authority/Authority.ts","../../../node_modules/@azure/msal-common/src/authority/AuthorityFactory.ts","../../../node_modules/@azure/msal-common/src/cache/entities/ServerTelemetryEntity.ts","../../../node_modules/@azure/msal-common/src/cache/entities/ThrottlingEntity.ts","../../../node_modules/@azure/msal-common/src/network/INetworkModule.ts","../../../node_modules/@azure/msal-common/src/error/JoseHeaderError.ts","../../../node_modules/@azure/msal-common/src/crypto/JoseHeader.ts","../../../node_modules/@azure/msal-common/src/telemetry/server/ServerTelemetryManager.ts","../../../node_modules/@azure/msal-common/src/telemetry/performance/PerformanceClient.ts","../../../node_modules/@azure/msal-common/src/telemetry/performance/StubPerformanceClient.ts","../../../node_modules/@azure/msal-browser/src/error/BrowserAuthError.ts","../../../node_modules/@azure/msal-browser/src/utils/BrowserConstants.ts","../../../node_modules/@azure/msal-browser/src/error/BrowserConfigurationAuthError.ts","../../../node_modules/@azure/msal-browser/src/cache/BrowserStorage.ts","../../../node_modules/@azure/msal-browser/src/cache/MemoryStorage.ts","../../../node_modules/@azure/msal-browser/src/utils/BrowserProtocolUtils.ts","../../../node_modules/@azure/msal-browser/src/cache/BrowserCacheManager.ts","../../../node_modules/@azure/msal-browser/src/packageMetadata.ts","../../../node_modules/@azure/msal-browser/src/network/FetchClient.ts","../../../node_modules/@azure/msal-browser/src/network/XhrClient.ts","../../../node_modules/@azure/msal-browser/src/utils/BrowserUtils.ts","../../../node_modules/@azure/msal-browser/src/interaction_client/BaseInteractionClient.ts","../../../node_modules/@azure/msal-browser/src/interaction_client/StandardInteractionClient.ts","../../../node_modules/@azure/msal-browser/src/interaction_handler/InteractionHandler.ts","../../../node_modules/@azure/msal-browser/src/interaction_handler/RedirectHandler.ts","../../../node_modules/@azure/msal-browser/src/event/EventType.ts","../../../node_modules/@azure/msal-browser/src/error/NativeAuthError.ts","../../../node_modules/@azure/msal-browser/src/interaction_client/SilentCacheClient.ts","../../../node_modules/@azure/msal-browser/src/interaction_client/NativeInteractionClient.ts","../../../node_modules/@azure/msal-browser/src/broker/nativeBroker/NativeMessageHandler.ts","../../../node_modules/@azure/msal-browser/src/interaction_client/RedirectClient.ts","../../../node_modules/@azure/msal-browser/src/interaction_client/PopupClient.ts","../../../node_modules/@azure/msal-browser/src/navigation/NavigationClient.ts","../../../node_modules/@azure/msal-browser/src/config/Configuration.ts","../../../node_modules/@azure/msal-browser/src/interaction_handler/SilentHandler.ts","../../../node_modules/@azure/msal-browser/src/interaction_client/SilentIframeClient.ts","../../../node_modules/@azure/msal-browser/src/interaction_client/SilentRefreshClient.ts","../../../node_modules/@azure/msal-browser/src/event/EventHandler.ts","../../../node_modules/@azure/msal-browser/src/utils/MathUtils.ts","../../../node_modules/@azure/msal-browser/src/crypto/GuidGenerator.ts","../../../node_modules/@azure/msal-browser/src/utils/BrowserStringUtils.ts","../../../node_modules/@azure/msal-browser/src/encode/Base64Encode.ts","../../../node_modules/@azure/msal-browser/src/encode/Base64Decode.ts","../../../node_modules/@azure/msal-browser/src/crypto/PkceGenerator.ts","../../../node_modules/@azure/msal-browser/src/crypto/ModernBrowserCrypto.ts","../../../node_modules/@azure/msal-browser/src/crypto/MsrBrowserCrypto.ts","../../../node_modules/@azure/msal-browser/src/crypto/MsBrowserCrypto.ts","../../../node_modules/@azure/msal-browser/src/crypto/BrowserCrypto.ts","../../../node_modules/@azure/msal-browser/src/cache/DatabaseStorage.ts","../../../node_modules/@azure/msal-browser/src/cache/AsyncMemoryStorage.ts","../../../node_modules/@azure/msal-browser/src/cache/CryptoKeyStore.ts","../../../node_modules/@azure/msal-browser/src/crypto/CryptoOps.ts","../../../node_modules/@azure/msal-browser/src/telemetry/BrowserPerformanceMeasurement.ts","../../../node_modules/@azure/msal-browser/src/telemetry/BrowserPerformanceClient.ts","../../../node_modules/@azure/msal-browser/src/cache/TokenCache.ts","../../../node_modules/@azure/msal-browser/src/interaction_client/HybridSpaAuthorizationCodeClient.ts","../../../node_modules/@azure/msal-browser/src/interaction_client/SilentAuthCodeClient.ts","../../../node_modules/@azure/msal-browser/src/app/ClientApplication.ts","../../../node_modules/@azure/msal-browser/src/app/PublicClientApplication.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/helpers/sanitizers/GuidSanitizer.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/helpers/sanitizers/LookupSanitizer.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/helpers/sanitizers/Sanitizer.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/file/blobToBase64.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/interoperability/WebApi.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/interoperability/UCIClientExtensions.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/file/FileAttribute.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/metadata/Datatypes.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/metadata/Attribute.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/fetch-xml/filter/Operators.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/fetch-xml/filter/Type.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/fetch-xml/Constants.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/fetch-xml/FetchXmlBuilder.ts","../../../node_modules/humanize-duration/humanize-duration.js","../../../node_modules/dayjs/plugin/weekOfYear.js","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/formatting/Numeral.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/formatting/DateFormattingInfo.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/formatting/NumberFormattingInfo.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/formatting/Formatting.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/dataset/Dataset.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/dataset/data-providers/DataProvider.ts","../../../node_modules/validator/lib/util/assertString.js","../../../node_modules/validator/lib/util/merge.js","../../../node_modules/validator/lib/isFQDN.js","../../../node_modules/validator/lib/isIP.js","../../../node_modules/validator/lib/isURL.js","../../../node_modules/validator/es/lib/util/assertString.js","../../../node_modules/validator/es/lib/isByteLength.js","../../../node_modules/validator/es/lib/util/merge.js","../../../node_modules/validator/es/lib/isFQDN.js","../../../node_modules/validator/es/lib/isIP.js","../../../node_modules/validator/es/lib/isEmail.js","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/localization/Localization.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/dataset/data-providers/Record/Field/FieldValidation.ts","../../../node_modules/deep-eql/index.js","../../../node_modules/fast-sort/dist/sort.mjs","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/dataset/data-providers/Record/Field/Field.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/dataset/data-providers/Record/RecordUi.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/dataset/data-providers/Record/Record.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/dataset/data-providers/memory-provider/filtering/TextFiltering.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/dataset/data-providers/memory-provider/filtering/NumberCondition.ts","../../../node_modules/dayjs/plugin/isBetween.js","../../../node_modules/dayjs/plugin/isSameOrBefore.js","../../../node_modules/dayjs/plugin/isSameOrAfter.js","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/dataset/data-providers/memory-provider/filtering/DateCondition.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/dataset/data-providers/memory-provider/filtering/OptionSetCondition.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/dataset/data-providers/memory-provider/filtering/MultiSelectOptionSetCondition.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/dataset/data-providers/memory-provider/filtering/LookupCondition.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/dataset/data-providers/memory-provider/filtering/RecordFilter.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/dataset/data-providers/memory-provider/DataBuilder.ts","../../../node_modules/@talxis/base-controls/node_modules/@talxis/client-libraries/src/utils/dataset/data-providers/memory-provider/MemoryDataProvider.ts","../../../node_modules/exceljs/dist/node_modules/browser-pack/_prelude.js","../../../node_modules/exceljs/dist/lib/csv/csv.js","../../../node_modules/exceljs/dist/lib/doc/anchor.js","../../../node_modules/exceljs/dist/lib/doc/cell.js","../../../node_modules/exceljs/dist/lib/doc/column.js","../../../node_modules/exceljs/dist/lib/doc/data-validations.js","../../../node_modules/exceljs/dist/lib/doc/defined-names.js","../../../node_modules/exceljs/dist/lib/doc/enums.js","../../../node_modules/exceljs/dist/lib/doc/image.js","../../../node_modules/exceljs/dist/lib/doc/note.js","../../../node_modules/exceljs/dist/lib/doc/range.js","../../../node_modules/exceljs/dist/lib/doc/row.js","../../../node_modules/exceljs/dist/lib/doc/table.js","../../../node_modules/exceljs/dist/lib/doc/workbook.js","../../../node_modules/exceljs/dist/lib/doc/worksheet.js","../../../node_modules/exceljs/dist/lib/exceljs.browser.js","../../../node_modules/exceljs/dist/lib/utils/browser-buffer-decode.js","../../../node_modules/exceljs/dist/lib/utils/browser-buffer-encode.js","../../../node_modules/exceljs/dist/lib/utils/cell-matrix.js","../../../node_modules/exceljs/dist/lib/utils/col-cache.js","../../../node_modules/exceljs/dist/lib/utils/copy-style.js","../../../node_modules/exceljs/dist/lib/utils/encryptor.js","../../../node_modules/exceljs/dist/lib/utils/parse-sax.js","../../../node_modules/exceljs/dist/lib/utils/shared-formula.js","../../../node_modules/exceljs/dist/lib/utils/stream-buf.js","../../../node_modules/exceljs/dist/lib/utils/string-buf.js","../../../node_modules/exceljs/dist/lib/utils/under-dash.js","../../../node_modules/exceljs/dist/lib/utils/utils.js","../../../node_modules/exceljs/dist/lib/utils/xml-stream.js","../../../node_modules/exceljs/dist/lib/utils/zip-stream.js","../../../node_modules/exceljs/dist/lib/xlsx/defaultnumformats.js","../../../node_modules/exceljs/dist/lib/xlsx/rel-type.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/base-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/book/defined-name-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/book/sheet-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/book/workbook-calc-properties-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/book/workbook-properties-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/book/workbook-view-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/book/workbook-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/comment/comment-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/comment/comments-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/comment/style/vml-position-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/comment/style/vml-protection-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/comment/vml-anchor-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/comment/vml-client-data-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/comment/vml-notes-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/comment/vml-shape-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/comment/vml-textbox-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/composite-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/core/app-heading-pairs-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/core/app-titles-of-parts-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/core/app-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/core/content-types-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/core/core-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/core/relationship-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/core/relationships-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/drawing/base-cell-anchor-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/drawing/blip-fill-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/drawing/blip-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/drawing/c-nv-pic-pr-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/drawing/c-nv-pr-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/drawing/cell-position-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/drawing/drawing-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/drawing/ext-lst-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/drawing/ext-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/drawing/hlink-click-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/drawing/nv-pic-pr-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/drawing/one-cell-anchor-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/drawing/pic-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/drawing/sp-pr.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/drawing/two-cell-anchor-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/list-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/auto-filter-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/cell-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/cf-ext/cf-icon-ext-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/cf-ext/cf-rule-ext-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/cf-ext/cfvo-ext-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/cf-ext/conditional-formatting-ext-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/cf-ext/conditional-formattings-ext-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/cf-ext/databar-ext-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/cf-ext/f-ext-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/cf-ext/icon-set-ext-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/cf-ext/sqref-ext-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/cf/cf-rule-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/cf/cfvo-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/cf/color-scale-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/cf/conditional-formatting-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/cf/conditional-formattings-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/cf/databar-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/cf/ext-lst-ref-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/cf/formula-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/cf/icon-set-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/col-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/data-validations-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/dimension-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/drawing-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/ext-lst-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/header-footer-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/hyperlink-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/merge-cell-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/merges.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/outline-properties-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/page-breaks-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/page-margins-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/page-setup-properties-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/page-setup-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/picture-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/print-options-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/row-breaks-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/row-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/sheet-format-properties-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/sheet-properties-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/sheet-protection-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/sheet-view-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/table-part-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/sheet/worksheet-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/simple/boolean-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/simple/date-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/simple/integer-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/simple/string-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/static-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/strings/phonetic-text-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/strings/rich-text-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/strings/shared-string-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/strings/shared-strings-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/strings/text-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/style/alignment-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/style/border-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/style/color-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/style/dxf-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/style/fill-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/style/font-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/style/numfmt-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/style/protection-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/style/style-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/style/styles-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/style/underline-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/table/auto-filter-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/table/custom-filter-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/table/filter-column-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/table/filter-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/table/table-column-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/table/table-style-info-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xform/table/table-xform.js","../../../node_modules/exceljs/dist/lib/xlsx/xlsx.js","../../../node_modules/exceljs/dist/lib/xlsx/xml/theme1.js","../../../node_modules/exceljs/dist/node_modules/@fast-csv/format/build/src/CsvFormatterStream.js","../../../node_modules/exceljs/dist/node_modules/@fast-csv/format/build/src/FormatterOptions.js","../../../node_modules/exceljs/dist/node_modules/@fast-csv/format/build/src/formatter/FieldFormatter.js","../../../node_modules/exceljs/dist/node_modules/@fast-csv/format/build/src/formatter/RowFormatter.js","../../../node_modules/exceljs/dist/node_modules/@fast-csv/format/build/src/formatter/index.js","../../../node_modules/exceljs/dist/node_modules/@fast-csv/format/build/src/index.js","../../../node_modules/exceljs/dist/node_modules/@fast-csv/format/build/src/types.js","../../../node_modules/exceljs/dist/node_modules/@fast-csv/parse/build/src/CsvParserStream.js","../../../node_modules/exceljs/dist/node_modules/@fast-csv/parse/build/src/ParserOptions.js","../../../node_modules/exceljs/dist/node_modules/@fast-csv/parse/build/src/index.js","../../../node_modules/exceljs/dist/node_modules/@fast-csv/parse/build/src/parser/Parser.js","../../../node_modules/exceljs/dist/node_modules/@fast-csv/parse/build/src/parser/RowParser.js","../../../node_modules/exceljs/dist/node_modules/@fast-csv/parse/build/src/parser/Scanner.js","../../../node_modules/exceljs/dist/node_modules/@fast-csv/parse/build/src/parser/Token.js","../../../node_modules/exceljs/dist/node_modules/@fast-csv/parse/build/src/parser/column/ColumnFormatter.js","../../../node_modules/exceljs/dist/node_modules/@fast-csv/parse/build/src/parser/column/ColumnParser.js","../../../node_modules/exceljs/dist/node_modules/@fast-csv/parse/build/src/parser/column/NonQuotedColumnParser.js","../../../node_modules/exceljs/dist/node_modules/@fast-csv/parse/build/src/parser/column/QuotedColumnParser.js","../../../node_modules/exceljs/dist/node_modules/@fast-csv/parse/build/src/parser/column/index.js","../../../node_modules/exceljs/dist/node_modules/@fast-csv/parse/build/src/parser/index.js","../../../node_modules/exceljs/dist/node_modules/@fast-csv/parse/build/src/transforms/HeaderTransformer.js","../../../node_modules/exceljs/dist/node_modules/@fast-csv/parse/build/src/transforms/RowTransformerValidator.js","../../../node_modules/exceljs/dist/node_modules/@fast-csv/parse/build/src/transforms/index.js","../../../node_modules/exceljs/dist/node_modules/@fast-csv/parse/build/src/types.js","../../../node_modules/exceljs/dist/node_modules/asn1.js/lib/asn1.js","../../../node_modules/exceljs/dist/node_modules/asn1.js/lib/asn1/api.js","../../../node_modules/exceljs/dist/node_modules/asn1.js/lib/asn1/base/buffer.js","../../../node_modules/exceljs/dist/node_modules/asn1.js/lib/asn1/base/index.js","../../../node_modules/exceljs/dist/node_modules/asn1.js/lib/asn1/base/node.js","../../../node_modules/exceljs/dist/node_modules/asn1.js/lib/asn1/base/reporter.js","../../../node_modules/exceljs/dist/node_modules/asn1.js/lib/asn1/constants/der.js","../../../node_modules/exceljs/dist/node_modules/asn1.js/lib/asn1/constants/index.js","../../../node_modules/exceljs/dist/node_modules/asn1.js/lib/asn1/decoders/der.js","../../../node_modules/exceljs/dist/node_modules/asn1.js/lib/asn1/decoders/index.js","../../../node_modules/exceljs/dist/node_modules/asn1.js/lib/asn1/decoders/pem.js","../../../node_modules/exceljs/dist/node_modules/asn1.js/lib/asn1/encoders/der.js","../../../node_modules/exceljs/dist/node_modules/asn1.js/lib/asn1/encoders/index.js","../../../node_modules/exceljs/dist/node_modules/asn1.js/lib/asn1/encoders/pem.js","../../../node_modules/exceljs/dist/node_modules/asn1.js/node_modules/bn.js/lib/bn.js","../../../node_modules/exceljs/dist/node_modules/base64-js/index.js","../../../node_modules/exceljs/dist/node_modules/bn.js/lib/bn.js","../../../node_modules/exceljs/dist/node_modules/brorand/index.js","../../../node_modules/exceljs/dist/node_modules/browserify-aes/aes.js","../../../node_modules/exceljs/dist/node_modules/browserify-aes/authCipher.js","../../../node_modules/exceljs/dist/node_modules/browserify-aes/browser.js","../../../node_modules/exceljs/dist/node_modules/browserify-aes/decrypter.js","../../../node_modules/exceljs/dist/node_modules/browserify-aes/encrypter.js","../../../node_modules/exceljs/dist/node_modules/browserify-aes/ghash.js","../../../node_modules/exceljs/dist/node_modules/browserify-aes/incr32.js","../../../node_modules/exceljs/dist/node_modules/browserify-aes/modes/cbc.js","../../../node_modules/exceljs/dist/node_modules/browserify-aes/modes/cfb.js","../../../node_modules/exceljs/dist/node_modules/browserify-aes/modes/cfb1.js","../../../node_modules/exceljs/dist/node_modules/browserify-aes/modes/cfb8.js","../../../node_modules/exceljs/dist/node_modules/browserify-aes/modes/ctr.js","../../../node_modules/exceljs/dist/node_modules/browserify-aes/modes/ecb.js","../../../node_modules/exceljs/dist/node_modules/browserify-aes/modes/index.js","../../../node_modules/exceljs/dist/node_modules/browserify-aes/modes/list.json","../../../node_modules/exceljs/dist/node_modules/browserify-aes/modes/ofb.js","../../../node_modules/exceljs/dist/node_modules/browserify-aes/streamCipher.js","../../../node_modules/exceljs/dist/node_modules/browserify-cipher/browser.js","../../../node_modules/exceljs/dist/node_modules/browserify-des/index.js","../../../node_modules/exceljs/dist/node_modules/browserify-des/modes.js","../../../node_modules/exceljs/dist/node_modules/browserify-rsa/index.js","../../../node_modules/exceljs/dist/node_modules/browserify-sign/algos.js","../../../node_modules/exceljs/dist/node_modules/browserify-sign/browser/algorithms.json","../../../node_modules/exceljs/dist/node_modules/browserify-sign/browser/curves.json","../../../node_modules/exceljs/dist/node_modules/browserify-sign/browser/index.js","../../../node_modules/exceljs/dist/node_modules/browserify-sign/browser/sign.js","../../../node_modules/exceljs/dist/node_modules/browserify-sign/browser/verify.js","../../../node_modules/exceljs/dist/node_modules/browserify/node_modules/safe-buffer/index.js","../../../node_modules/exceljs/dist/node_modules/browserify/node_modules/string_decoder/lib/string_decoder.js","../../../node_modules/exceljs/dist/node_modules/buffer-xor/index.js","../../../node_modules/exceljs/dist/node_modules/buffer/index.js","../../../node_modules/exceljs/dist/node_modules/cipher-base/index.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/a-callable.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/a-constructor.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/a-possible-prototype.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/add-to-unscopables.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/an-instance.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/an-object.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/array-includes.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/array-iteration.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/array-slice-simple.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/array-slice.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/array-species-constructor.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/array-species-create.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/check-correctness-of-iteration.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/classof-raw.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/classof.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/copy-constructor-properties.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/correct-is-regexp-logic.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/correct-prototype-getter.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/create-iter-result-object.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/create-non-enumerable-property.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/create-property-descriptor.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/create-property.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/define-built-in-accessor.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/define-built-in.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/define-global-property.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/descriptors.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/document-all.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/document-create-element.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/engine-is-browser.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/engine-is-deno.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/engine-is-ios-pebble.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/engine-is-ios.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/engine-is-node.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/engine-is-webos-webkit.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/engine-user-agent.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/engine-v8-version.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/enum-bug-keys.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/export.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/fails.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/function-apply.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/function-bind-context.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/function-bind-native.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/function-call.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/function-name.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/function-uncurry-this-accessor.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/function-uncurry-this-clause.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/function-uncurry-this.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/get-built-in.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/get-iterator-method.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/get-iterator.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/get-json-replacer-function.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/get-method.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/global.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/has-own-property.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/hidden-keys.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/host-report-errors.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/html.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/ie8-dom-define.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/indexed-object.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/inspect-source.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/internal-state.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/is-array-iterator-method.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/is-array.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/is-callable.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/is-constructor.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/is-forced.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/is-null-or-undefined.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/is-object.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/is-pure.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/is-regexp.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/is-symbol.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/iterate.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/iterator-close.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/iterator-create-constructor.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/iterator-define.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/iterators-core.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/length-of-array-like.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/make-built-in.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/math-trunc.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/microtask.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/new-promise-capability.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/not-a-regexp.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/object-assign.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/object-create.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/object-define-properties.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/object-define-property.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/object-get-own-property-descriptor.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/object-get-own-property-names-external.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/object-get-own-property-names.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/object-get-own-property-symbols.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/object-get-prototype-of.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/object-is-prototype-of.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/object-keys-internal.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/object-keys.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/object-property-is-enumerable.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/object-set-prototype-of.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/object-to-array.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/ordinary-to-primitive.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/own-keys.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/path.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/perform.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/promise-constructor-detection.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/promise-native-constructor.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/promise-resolve.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/promise-statics-incorrect-iteration.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/queue.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/require-object-coercible.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/set-species.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/set-to-string-tag.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/shared-key.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/shared-store.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/shared.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/species-constructor.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/symbol-constructor-detection.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/symbol-define-to-primitive.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/symbol-registry-detection.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/task.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/to-absolute-index.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/to-indexed-object.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/to-integer-or-infinity.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/to-length.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/to-object.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/to-primitive.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/to-property-key.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/to-string-tag-support.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/to-string.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/try-to-string.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/uid.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/use-symbol-as-uid.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/v8-prototype-define-bug.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/validate-arguments-length.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/weak-map-basic-detection.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/well-known-symbol-define.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/well-known-symbol-wrapped.js","../../../node_modules/exceljs/dist/node_modules/core-js/internals/well-known-symbol.js","../../../node_modules/exceljs/dist/node_modules/core-js/modules/es.array.find-index.js","../../../node_modules/exceljs/dist/node_modules/core-js/modules/es.array.find.js","../../../node_modules/exceljs/dist/node_modules/core-js/modules/es.array.includes.js","../../../node_modules/exceljs/dist/node_modules/core-js/modules/es.array.iterator.js","../../../node_modules/exceljs/dist/node_modules/core-js/modules/es.json.stringify.js","../../../node_modules/exceljs/dist/node_modules/core-js/modules/es.number.is-nan.js","../../../node_modules/exceljs/dist/node_modules/core-js/modules/es.object.assign.js","../../../node_modules/exceljs/dist/node_modules/core-js/modules/es.object.get-own-property-symbols.js","../../../node_modules/exceljs/dist/node_modules/core-js/modules/es.object.keys.js","../../../node_modules/exceljs/dist/node_modules/core-js/modules/es.object.values.js","../../../node_modules/exceljs/dist/node_modules/core-js/modules/es.promise.all.js","../../../node_modules/exceljs/dist/node_modules/core-js/modules/es.promise.catch.js","../../../node_modules/exceljs/dist/node_modules/core-js/modules/es.promise.constructor.js","../../../node_modules/exceljs/dist/node_modules/core-js/modules/es.promise.finally.js","../../../node_modules/exceljs/dist/node_modules/core-js/modules/es.promise.js","../../../node_modules/exceljs/dist/node_modules/core-js/modules/es.promise.race.js","../../../node_modules/exceljs/dist/node_modules/core-js/modules/es.promise.reject.js","../../../node_modules/exceljs/dist/node_modules/core-js/modules/es.promise.resolve.js","../../../node_modules/exceljs/dist/node_modules/core-js/modules/es.string.from-code-point.js","../../../node_modules/exceljs/dist/node_modules/core-js/modules/es.string.includes.js","../../../node_modules/exceljs/dist/node_modules/core-js/modules/es.symbol.async-iterator.js","../../../node_modules/exceljs/dist/node_modules/core-js/modules/es.symbol.constructor.js","../../../node_modules/exceljs/dist/node_modules/core-js/modules/es.symbol.for.js","../../../node_modules/exceljs/dist/node_modules/core-js/modules/es.symbol.js","../../../node_modules/exceljs/dist/node_modules/core-js/modules/es.symbol.key-for.js","../../../node_modules/exceljs/dist/node_modules/core-util-is/lib/util.js","../../../node_modules/exceljs/dist/node_modules/create-ecdh/browser.js","../../../node_modules/exceljs/dist/node_modules/create-hash/browser.js","../../../node_modules/exceljs/dist/node_modules/create-hash/md5.js","../../../node_modules/exceljs/dist/node_modules/create-hmac/browser.js","../../../node_modules/exceljs/dist/node_modules/create-hmac/legacy.js","../../../node_modules/exceljs/dist/node_modules/crypto-browserify/index.js","../../../node_modules/exceljs/dist/node_modules/dayjs/dayjs.min.js","../../../node_modules/exceljs/dist/node_modules/dayjs/plugin/customParseFormat.js","../../../node_modules/exceljs/dist/node_modules/dayjs/plugin/utc.js","../../../node_modules/exceljs/dist/node_modules/des.js/lib/des.js","../../../node_modules/exceljs/dist/node_modules/des.js/lib/des/cbc.js","../../../node_modules/exceljs/dist/node_modules/des.js/lib/des/cipher.js","../../../node_modules/exceljs/dist/node_modules/des.js/lib/des/des.js","../../../node_modules/exceljs/dist/node_modules/des.js/lib/des/ede.js","../../../node_modules/exceljs/dist/node_modules/des.js/lib/des/utils.js","../../../node_modules/exceljs/dist/node_modules/diffie-hellman/browser.js","../../../node_modules/exceljs/dist/node_modules/diffie-hellman/lib/dh.js","../../../node_modules/exceljs/dist/node_modules/diffie-hellman/lib/generatePrime.js","../../../node_modules/exceljs/dist/node_modules/diffie-hellman/lib/primes.json","../../../node_modules/exceljs/dist/node_modules/elliptic/lib/elliptic.js","../../../node_modules/exceljs/dist/node_modules/elliptic/lib/elliptic/curve/base.js","../../../node_modules/exceljs/dist/node_modules/elliptic/lib/elliptic/curve/edwards.js","../../../node_modules/exceljs/dist/node_modules/elliptic/lib/elliptic/curve/index.js","../../../node_modules/exceljs/dist/node_modules/elliptic/lib/elliptic/curve/mont.js","../../../node_modules/exceljs/dist/node_modules/elliptic/lib/elliptic/curve/short.js","../../../node_modules/exceljs/dist/node_modules/elliptic/lib/elliptic/curves.js","../../../node_modules/exceljs/dist/node_modules/elliptic/lib/elliptic/ec/index.js","../../../node_modules/exceljs/dist/node_modules/elliptic/lib/elliptic/ec/key.js","../../../node_modules/exceljs/dist/node_modules/elliptic/lib/elliptic/ec/signature.js","../../../node_modules/exceljs/dist/node_modules/elliptic/lib/elliptic/eddsa/index.js","../../../node_modules/exceljs/dist/node_modules/elliptic/lib/elliptic/eddsa/key.js","../../../node_modules/exceljs/dist/node_modules/elliptic/lib/elliptic/eddsa/signature.js","../../../node_modules/exceljs/dist/node_modules/elliptic/lib/elliptic/precomputed/secp256k1.js","../../../node_modules/exceljs/dist/node_modules/elliptic/lib/elliptic/utils.js","../../../node_modules/exceljs/dist/node_modules/elliptic/package.json","../../../node_modules/exceljs/dist/node_modules/events/events.js","../../../node_modules/exceljs/dist/node_modules/evp_bytestokey/index.js","../../../node_modules/exceljs/dist/node_modules/fast-csv/build/src/index.js","../../../node_modules/exceljs/dist/node_modules/hash-base/index.js","../../../node_modules/exceljs/dist/node_modules/hash.js/lib/hash.js","../../../node_modules/exceljs/dist/node_modules/hash.js/lib/hash/common.js","../../../node_modules/exceljs/dist/node_modules/hash.js/lib/hash/hmac.js","../../../node_modules/exceljs/dist/node_modules/hash.js/lib/hash/ripemd.js","../../../node_modules/exceljs/dist/node_modules/hash.js/lib/hash/sha.js","../../../node_modules/exceljs/dist/node_modules/hash.js/lib/hash/sha/1.js","../../../node_modules/exceljs/dist/node_modules/hash.js/lib/hash/sha/224.js","../../../node_modules/exceljs/dist/node_modules/hash.js/lib/hash/sha/256.js","../../../node_modules/exceljs/dist/node_modules/hash.js/lib/hash/sha/384.js","../../../node_modules/exceljs/dist/node_modules/hash.js/lib/hash/sha/512.js","../../../node_modules/exceljs/dist/node_modules/hash.js/lib/hash/sha/common.js","../../../node_modules/exceljs/dist/node_modules/hash.js/lib/hash/utils.js","../../../node_modules/exceljs/dist/node_modules/hmac-drbg/lib/hmac-drbg.js","../../../node_modules/exceljs/dist/node_modules/ieee754/index.js","../../../node_modules/exceljs/dist/node_modules/inherits/inherits_browser.js","../../../node_modules/exceljs/dist/node_modules/jszip/dist/jszip.min.js","../../../node_modules/exceljs/dist/node_modules/lodash.escaperegexp/index.js","../../../node_modules/exceljs/dist/node_modules/lodash.groupby/index.js","../../../node_modules/exceljs/dist/node_modules/lodash.isboolean/index.js","../../../node_modules/exceljs/dist/node_modules/lodash.isequal/index.js","../../../node_modules/exceljs/dist/node_modules/lodash.isfunction/index.js","../../../node_modules/exceljs/dist/node_modules/lodash.isnil/index.js","../../../node_modules/exceljs/dist/node_modules/lodash.isundefined/index.js","../../../node_modules/exceljs/dist/node_modules/lodash.uniq/index.js","../../../node_modules/exceljs/dist/node_modules/md5.js/index.js","../../../node_modules/exceljs/dist/node_modules/miller-rabin/lib/mr.js","../../../node_modules/exceljs/dist/node_modules/minimalistic-assert/index.js","../../../node_modules/exceljs/dist/node_modules/minimalistic-crypto-utils/lib/utils.js","../../../node_modules/exceljs/dist/node_modules/parse-asn1/aesid.json","../../../node_modules/exceljs/dist/node_modules/parse-asn1/asn1.js","../../../node_modules/exceljs/dist/node_modules/parse-asn1/certificate.js","../../../node_modules/exceljs/dist/node_modules/parse-asn1/fixProc.js","../../../node_modules/exceljs/dist/node_modules/parse-asn1/index.js","../../../node_modules/exceljs/dist/node_modules/pbkdf2/browser.js","../../../node_modules/exceljs/dist/node_modules/pbkdf2/lib/async.js","../../../node_modules/exceljs/dist/node_modules/pbkdf2/lib/default-encoding.js","../../../node_modules/exceljs/dist/node_modules/pbkdf2/lib/precondition.js","../../../node_modules/exceljs/dist/node_modules/pbkdf2/lib/sync-browser.js","../../../node_modules/exceljs/dist/node_modules/pbkdf2/lib/to-buffer.js","../../../node_modules/exceljs/dist/node_modules/process-nextick-args/index.js","../../../node_modules/exceljs/dist/node_modules/process/browser.js","../../../node_modules/exceljs/dist/node_modules/public-encrypt/browser.js","../../../node_modules/exceljs/dist/node_modules/public-encrypt/mgf.js","../../../node_modules/exceljs/dist/node_modules/public-encrypt/privateDecrypt.js","../../../node_modules/exceljs/dist/node_modules/public-encrypt/publicEncrypt.js","../../../node_modules/exceljs/dist/node_modules/public-encrypt/withPublic.js","../../../node_modules/exceljs/dist/node_modules/public-encrypt/xor.js","../../../node_modules/exceljs/dist/node_modules/randombytes/browser.js","../../../node_modules/exceljs/dist/node_modules/randomfill/browser.js","../../../node_modules/exceljs/dist/node_modules/readable-stream/errors-browser.js","../../../node_modules/exceljs/dist/node_modules/readable-stream/lib/_stream_duplex.js","../../../node_modules/exceljs/dist/node_modules/readable-stream/lib/_stream_passthrough.js","../../../node_modules/exceljs/dist/node_modules/readable-stream/lib/_stream_readable.js","../../../node_modules/exceljs/dist/node_modules/readable-stream/lib/_stream_transform.js","../../../node_modules/exceljs/dist/node_modules/readable-stream/lib/_stream_writable.js","../../../node_modules/exceljs/dist/node_modules/readable-stream/lib/internal/streams/async_iterator.js","../../../node_modules/exceljs/dist/node_modules/readable-stream/lib/internal/streams/buffer_list.js","../../../node_modules/exceljs/dist/node_modules/readable-stream/lib/internal/streams/destroy.js","../../../node_modules/exceljs/dist/node_modules/readable-stream/lib/internal/streams/end-of-stream.js","../../../node_modules/exceljs/dist/node_modules/readable-stream/lib/internal/streams/from-browser.js","../../../node_modules/exceljs/dist/node_modules/readable-stream/lib/internal/streams/pipeline.js","../../../node_modules/exceljs/dist/node_modules/readable-stream/lib/internal/streams/state.js","../../../node_modules/exceljs/dist/node_modules/readable-stream/lib/internal/streams/stream-browser.js","../../../node_modules/exceljs/dist/node_modules/readable-stream/readable-browser.js","../../../node_modules/exceljs/dist/node_modules/regenerator-runtime/runtime.js","../../../node_modules/exceljs/dist/node_modules/ripemd160/index.js","../../../node_modules/exceljs/dist/node_modules/safe-buffer/index.js","../../../node_modules/exceljs/dist/node_modules/safer-buffer/safer.js","../../../node_modules/exceljs/dist/node_modules/saxes/saxes.js","../../../node_modules/exceljs/dist/node_modules/sha.js/hash.js","../../../node_modules/exceljs/dist/node_modules/sha.js/index.js","../../../node_modules/exceljs/dist/node_modules/sha.js/sha.js","../../../node_modules/exceljs/dist/node_modules/sha.js/sha1.js","../../../node_modules/exceljs/dist/node_modules/sha.js/sha224.js","../../../node_modules/exceljs/dist/node_modules/sha.js/sha256.js","../../../node_modules/exceljs/dist/node_modules/sha.js/sha384.js","../../../node_modules/exceljs/dist/node_modules/sha.js/sha512.js","../../../node_modules/exceljs/dist/node_modules/stream-browserify/index.js","../../../node_modules/exceljs/dist/node_modules/stream-browserify/node_modules/isarray/index.js","../../../node_modules/exceljs/dist/node_modules/stream-browserify/node_modules/readable-stream/duplex-browser.js","../../../node_modules/exceljs/dist/node_modules/stream-browserify/node_modules/readable-stream/lib/_stream_duplex.js","../../../node_modules/exceljs/dist/node_modules/stream-browserify/node_modules/readable-stream/lib/_stream_passthrough.js","../../../node_modules/exceljs/dist/node_modules/stream-browserify/node_modules/readable-stream/lib/_stream_readable.js","../../../node_modules/exceljs/dist/node_modules/stream-browserify/node_modules/readable-stream/lib/_stream_transform.js","../../../node_modules/exceljs/dist/node_modules/stream-browserify/node_modules/readable-stream/lib/_stream_writable.js","../../../node_modules/exceljs/dist/node_modules/stream-browserify/node_modules/readable-stream/lib/internal/streams/BufferList.js","../../../node_modules/exceljs/dist/node_modules/stream-browserify/node_modules/readable-stream/lib/internal/streams/destroy.js","../../../node_modules/exceljs/dist/node_modules/stream-browserify/node_modules/readable-stream/passthrough.js","../../../node_modules/exceljs/dist/node_modules/stream-browserify/node_modules/readable-stream/readable-browser.js","../../../node_modules/exceljs/dist/node_modules/stream-browserify/node_modules/readable-stream/transform.js","../../../node_modules/exceljs/dist/node_modules/stream-browserify/node_modules/readable-stream/writable-browser.js","../../../node_modules/exceljs/dist/node_modules/timers-browserify/main.js","../../../node_modules/exceljs/dist/node_modules/util-deprecate/browser.js","../../../node_modules/exceljs/dist/node_modules/util/node_modules/inherits/inherits_browser.js","../../../node_modules/exceljs/dist/node_modules/util/support/isBufferBrowser.js","../../../node_modules/exceljs/dist/node_modules/util/util.js","../../../node_modules/exceljs/dist/node_modules/uuid/dist/index.js","../../../node_modules/exceljs/dist/node_modules/uuid/dist/md5-browser.js","../../../node_modules/exceljs/dist/node_modules/uuid/dist/nil.js","../../../node_modules/exceljs/dist/node_modules/uuid/dist/parse.js","../../../node_modules/exceljs/dist/node_modules/uuid/dist/regex.js","../../../node_modules/exceljs/dist/node_modules/uuid/dist/rng-browser.js","../../../node_modules/exceljs/dist/node_modules/uuid/dist/sha1-browser.js","../../../node_modules/exceljs/dist/node_modules/uuid/dist/stringify.js","../../../node_modules/exceljs/dist/node_modules/uuid/dist/v1.js","../../../node_modules/exceljs/dist/node_modules/uuid/dist/v3.js","../../../node_modules/exceljs/dist/node_modules/uuid/dist/v35.js","../../../node_modules/exceljs/dist/node_modules/uuid/dist/v4.js","../../../node_modules/exceljs/dist/node_modules/uuid/dist/v5.js","../../../node_modules/exceljs/dist/node_modules/uuid/dist/validate.js","../../../node_modules/exceljs/dist/node_modules/uuid/dist/version.js","../../../node_modules/exceljs/dist/node_modules/xmlchars/xml/1.0/ed5.js","../../../node_modules/exceljs/dist/node_modules/xmlchars/xml/1.1/ed2.js","../../../node_modules/exceljs/dist/node_modules/xmlchars/xmlns/1.0/ed3.js","../../../node_modules/@talxis/base-controls/src/components/Decimal/Decimal.tsx","../../../node_modules/@talxis/base-controls/src/components/Duration/translations.ts","../../../node_modules/@talxis/base-controls/src/components/Duration/durationOptions.ts","../../../node_modules/@talxis/base-controls/src/components/Duration/Duration.tsx","../../../node_modules/@talxis/base-controls/src/components/Grid/core/model/GridDependency.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/core/enums/ConditionOperator.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/core/enums/DataType.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/filtering/constants.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/filtering/utils/FilteringUtilts.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/filtering/model/Condition.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/filtering/model/Filtering.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/paging/model/Paging.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/selection/model/Selection.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/sorting/Sorting.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/core/model/Metadata.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/constants.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/core/model/Grid.ts","../../../node_modules/@ag-grid-community/core/dist/package/main.esm.mjs","../../../node_modules/react-dom/cjs/react-dom-server.browser.production.min.js","../../../node_modules/react-dom/server.browser.js","../../../node_modules/@ag-grid-community/react/dist/package/index.esm.mjs","../../../node_modules/@talxis/base-controls/src/components/Grid/GridContext.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/core/hooks/useGridInstance.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/selection/controllers/useSelectionController.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/AgGrid/styles.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/paging/controllers/usePagingController.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/paging/components/Paging/styles.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/paging/components/Paging/Paging.tsx","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/AgGrid/components/EmptyRecordsOverlay/styles.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/AgGrid/components/EmptyRecordsOverlay/EmptyRecords.tsx","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/Save/styles.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/Dialog/Constants.tsx","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/Dialog/Styles.tsx","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/Dialog/index.tsx","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/Save/components/ChangeEditor/styles.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/Save/components/ChangeEditor/components/ChangeGrid/styles.ts","../../../node_modules/@talxis/base-controls/src/components/DatasetControl/translations.ts","../../../node_modules/@talxis/base-controls/src/components/DatasetControl/styles.ts","../../../node_modules/@talxis/base-controls/src/hooks/useRerender.ts","../../../node_modules/@talxis/base-controls/src/components/DatasetControl/DatasetControl.tsx","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/Save/components/ChangeEditor/components/ChangeGrid/ChangeGrid.tsx","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/Save/components/ChangeEditor/ChangeEditor.tsx","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/Save/Save.tsx","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/AgGrid/components/LoadingOverlay/LoadingOverlay.tsx","../../../node_modules/use-debounce/src/useDebouncedCallback.ts","../../../node_modules/use-debounce/src/useDebounce.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/core/controllers/useGridController.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/Cell/ReadOnlyCell/styles.ts","../../../node_modules/external-svg-loader/dist/webpack:/external-svg-loader/lib/counter.js","../../../node_modules/external-svg-loader/dist/webpack:/external-svg-loader/lib/css-url-fixer.js","../../../node_modules/external-svg-loader/dist/webpack:/external-svg-loader/lib/scope-css.js","../../../node_modules/external-svg-loader/dist/webpack:/external-svg-loader/node_modules/idb-keyval/dist/index.js","../../../node_modules/external-svg-loader/dist/webpack:/external-svg-loader/webpack/bootstrap","../../../node_modules/external-svg-loader/dist/webpack:/external-svg-loader/webpack/runtime/define property getters","../../../node_modules/external-svg-loader/dist/webpack:/external-svg-loader/webpack/runtime/hasOwnProperty shorthand","../../../node_modules/external-svg-loader/dist/webpack:/external-svg-loader/webpack/runtime/make namespace object","../../../node_modules/external-svg-loader/dist/webpack:/external-svg-loader/svg-loader.js","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/Cell/Commands/styles.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/Cell/Commands/Icon.tsx","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/Cell/Commands/useCommands.tsx","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/Cell/Commands/Commands.tsx","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyOptionSet/styles.ts","../../../node_modules/color-name/index.js","../../../node_modules/simple-swizzle/node_modules/is-arrayish/index.js","../../../node_modules/simple-swizzle/index.js","../../../node_modules/color-string/index.js","../../../node_modules/color/node_modules/color-name/index.js","../../../node_modules/color/node_modules/color-convert/conversions.js","../../../node_modules/color/node_modules/color-convert/route.js","../../../node_modules/color/node_modules/color-convert/index.js","../../../node_modules/color/index.js","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyOptionSet/ReadOnlyOptionSet.tsx","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/Cell/ReadOnlyCell/Notifications/styles.ts","../../../node_modules/@talxis/base-controls/src/hooks/useThemeOverride.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/Cell/ReadOnlyCell/Notifications/Notifications.tsx","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyCell.tsx","../../../node_modules/@talxis/base-controls/src/components/Lookup/translations.ts","../../../node_modules/@talxis/base-controls/src/components/Lookup/hooks/useFetchXml.ts","../../../node_modules/@talxis/base-controls/src/components/Lookup/hooks/useLookup.ts","../../../node_modules/@talxis/base-controls/src/components/Lookup/styles.ts","../../../node_modules/@talxis/base-controls/src/components/Lookup/hooks/useLoadedEntities.ts","../../../node_modules/@talxis/base-controls/src/components/Lookup/components/TargetSelector.tsx","../../../node_modules/@talxis/base-controls/src/components/Lookup/components/RecordCreator.tsx","../../../node_modules/@talxis/base-controls/src/components/Lookup/Lookup.tsx","../../../node_modules/@talxis/base-controls/src/components/MultiSelectOptionSet/MultiSelectOptionSet.tsx","../../../node_modules/@talxis/base-controls/src/components/OptionSet/useComboBoxTheme.ts","../../../node_modules/@talxis/base-controls/src/components/OptionSet/styles.ts","../../../node_modules/@talxis/base-controls/src/components/OptionSet/OptionSet.tsx","../../../node_modules/@talxis/base-controls/src/components/TextField/TextField.tsx","../../../node_modules/@talxis/base-controls/src/components/TwoOptions/TwoOptions.tsx","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/Component/model/Component.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/Component/controller/useComponentController.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/Component/Component.tsx","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/Cell/EditableCell/EditableCell.tsx","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/styles.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/GlobalCheckbox.tsx","../../../node_modules/@talxis/base-controls/src/components/Grid/filtering/components/FilterCallout/styles.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/core/hooks/useRefreshCallback.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/filtering/controller/useColumnFilterConditionController.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/filtering/components/FilterCallout/components/ConditionOperator/ConditionOperator.tsx","../../../node_modules/@talxis/base-controls/src/components/Grid/filtering/components/FilterCallout/components/ConditionValue/model/ConditionComponentValue.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/filtering/components/FilterCallout/components/ConditionValue/ConditionValue.tsx","../../../node_modules/@talxis/base-controls/src/components/Grid/filtering/components/FilterCallout/FilterCallout.tsx","../../../node_modules/@talxis/base-controls/src/components/Grid/sorting/components/SortingContextualMenu/styles.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/sorting/controllers/useColumnSortingController.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/sorting/components/SortingContextualMenu/SortingContextualMenu.tsx","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/ColumnHeader/styles.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/ColumnHeader/ColumnHeader.tsx","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/AgGrid/model/AgGrid.ts","../../../node_modules/@ag-grid-community/client-side-row-model/dist/package/main.esm.mjs","../../../node_modules/@talxis/base-controls/src/components/Grid/core/components/AgGrid/AgGrid.tsx","../../../node_modules/@talxis/base-controls/src/components/Grid/translations.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/core/services/KeyListener.ts","../../../node_modules/@talxis/base-controls/src/components/Grid/Grid.tsx","../../../node_modules/@nevware21/ts-utils/build/es5/mod/internal/treeshake_helpers.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/internal/constants.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/helpers/safe.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/helpers/safe_get.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/helpers/base.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/object/get_own_prop_desc.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/object/has_own_prop.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/object/has_own.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/object/for_each_key.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/internal/map.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/string/as_string.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/helpers/diagnostics.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/helpers/throw.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/object/object.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/helpers/enum.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/symbol/well_known.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/internal/global.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/internal/unwrapFunction.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/math/min_max.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/string/slice.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/string/substring.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/polyfills/symbol.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/object/define.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/helpers/lazy.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/helpers/cache.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/helpers/environment.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/symbol/symbol.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/iterator/iterator.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/iterator/forOf.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/funcs/funcs.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/array/append.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/array/forEach.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/array/indexOf.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/array/map.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/array/slice.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/array/reduce.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/object/create.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/object/set_proto.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/helpers/customError.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/helpers/date.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/polyfills/trim.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/string/trim.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/object/is_plain_object.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/object/copy.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/helpers/extend.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/helpers/length.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/helpers/perf.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/string/split.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/helpers/get_set_value.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/string/ends_with.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/string/index_of.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/timer/handler.js","../../../node_modules/@nevware21/ts-utils/build/es5/mod/timer/timeout.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/dynamicproto-js/src/DynamicProto.ts","../../../node_modules/@microsoft/applicationinsights-shims/src/Constants.ts","../../../node_modules/@microsoft/applicationinsights-shims/src/TsLibShims.ts","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/dynamicproto-js/src/DynamicProto.ts","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK.Enums/EnumHelperFuncs.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/__DynamicConstants.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/AggregationError.js","../../../node_modules/@nevware21/ts-async/build/es5/mod/internal/constants.js","../../../node_modules/@nevware21/ts-async/build/es5/mod/promise/await.js","../../../node_modules/@nevware21/ts-async/build/es5/mod/internal/state.js","../../../node_modules/@nevware21/ts-async/build/es5/mod/promise/event.js","../../../node_modules/@nevware21/ts-async/build/es5/mod/promise/base.js","../../../node_modules/@nevware21/ts-async/build/es5/mod/promise/itemProcessor.js","../../../node_modules/@nevware21/ts-async/build/es5/mod/promise/asyncPromise.js","../../../node_modules/@nevware21/ts-async/build/es5/mod/promise/nativePromise.js","../../../node_modules/@nevware21/ts-async/build/es5/mod/promise/promise.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/InternalConstants.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/HelperFuncs.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/EnvUtils.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/RandomHelper.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/DataCacheHelper.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/ConfigDefaults.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicSupport.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicProperty.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicState.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicConfig.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/ConfigDefaultHelpers.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/DbgExtensionUtils.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/DiagnosticLogger.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/CookieMgr.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/PerfManager.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/CoreUtils.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/W3cTraceParent.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/TelemetryHelpers.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/ProcessTelemetryContext.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/UnloadHandlerContainer.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/UnloadHookContainer.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/BaseTelemetryPlugin.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/EventHelpers.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/InstrumentHooks.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Constants.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-common/dist-es5/__DynamicConstants.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Telemetry/Common/DataSanitizer.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-common/dist-es5/UrlHelperFuncs.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Util.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Enums.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-common/dist-es5/StorageHelperFuncs.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Telemetry/Event.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Telemetry/Exception.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Telemetry/Common/DataPoint.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Telemetry/Metric.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-common/dist-es5/HelperFuncs.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Telemetry/PageView.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Telemetry/RemoteDependencyData.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Telemetry/Trace.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Telemetry/PageViewPerformance.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-common/dist-es5/TelemetryItemCreator.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-common/dist-es5/DomHelperFuncs.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-common/dist-es5/applicationinsights-common.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/dist-es5/__DynamicConstants.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/dist-es5/JavaScriptSDK/Telemetry/PageViewManager.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/dist-es5/JavaScriptSDK/Telemetry/PageViewPerformanceManager.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/dist-es5/JavaScriptSDK/Telemetry/PageVisitTimeManager.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/dist-es5/JavaScriptSDK/Timing.js","../../../node_modules/@microsoft/applicationinsights-analytics-js/dist-es5/JavaScriptSDK/AnalyticsPlugin.js","../../../node_modules/@microsoft/applicationinsights-cfgsync-js/node_modules/@microsoft/dynamicproto-js/src/DynamicProto.ts","../../../node_modules/@microsoft/applicationinsights-cfgsync-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/__DynamicConstants.js","../../../node_modules/@microsoft/applicationinsights-cfgsync-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/AggregationError.js","../../../node_modules/@microsoft/applicationinsights-cfgsync-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/InternalConstants.js","../../../node_modules/@microsoft/applicationinsights-cfgsync-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/HelperFuncs.js","../../../node_modules/@microsoft/applicationinsights-cfgsync-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/EnvUtils.js","../../../node_modules/@microsoft/applicationinsights-cfgsync-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/RandomHelper.js","../../../node_modules/@microsoft/applicationinsights-cfgsync-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/DataCacheHelper.js","../../../node_modules/@microsoft/applicationinsights-cfgsync-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/ConfigDefaults.js","../../../node_modules/@microsoft/applicationinsights-cfgsync-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicSupport.js","../../../node_modules/@microsoft/applicationinsights-cfgsync-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicProperty.js","../../../node_modules/@microsoft/applicationinsights-cfgsync-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicState.js","../../../node_modules/@microsoft/applicationinsights-cfgsync-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicConfig.js","../../../node_modules/@microsoft/applicationinsights-cfgsync-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/DbgExtensionUtils.js","../../../node_modules/@microsoft/applicationinsights-cfgsync-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/DiagnosticLogger.js","../../../node_modules/@microsoft/applicationinsights-cfgsync-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/PerfManager.js","../../../node_modules/@microsoft/applicationinsights-cfgsync-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/TelemetryHelpers.js","../../../node_modules/@microsoft/applicationinsights-cfgsync-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/ProcessTelemetryContext.js","../../../node_modules/@microsoft/applicationinsights-cfgsync-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/UnloadHandlerContainer.js","../../../node_modules/@microsoft/applicationinsights-cfgsync-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/UnloadHookContainer.js","../../../node_modules/@microsoft/applicationinsights-cfgsync-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/BaseTelemetryPlugin.js","../../../node_modules/@microsoft/applicationinsights-cfgsync-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/EventHelpers.js","../../../node_modules/@microsoft/applicationinsights-cfgsync-js/dist-es5/__DynamicConstants.js","../../../node_modules/@microsoft/applicationinsights-cfgsync-js/dist-es5/CfgSyncHelperFuncs.js","../../../node_modules/@microsoft/applicationinsights-cfgsync-js/dist-es5/CfgSyncPlugin.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/dynamicproto-js/src/DynamicProto.ts","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK.Enums/EnumHelperFuncs.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/__DynamicConstants.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/AggregationError.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/InternalConstants.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/HelperFuncs.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/EnvUtils.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/RandomHelper.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/DataCacheHelper.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/ConfigDefaults.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicSupport.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicProperty.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicState.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicConfig.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/AsyncUtils.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/Constants.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/ConfigDefaultHelpers.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/DbgExtensionUtils.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/DiagnosticLogger.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/PerfManager.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/TelemetryHelpers.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/ProcessTelemetryContext.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/UnloadHandlerContainer.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/UnloadHookContainer.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/BaseTelemetryPlugin.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/ResponseHelpers.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/SenderPostManager.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/EventHelpers.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Constants.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-common/dist-es5/RequestResponseHeaders.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-common/dist-es5/__DynamicConstants.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Telemetry/Common/DataSanitizer.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-common/dist-es5/UrlHelperFuncs.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Util.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Enums.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-common/dist-es5/StorageHelperFuncs.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Telemetry/Common/Envelope.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Telemetry/Event.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Telemetry/Exception.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Telemetry/Common/DataPoint.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Telemetry/Metric.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-common/dist-es5/HelperFuncs.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Telemetry/PageView.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Telemetry/RemoteDependencyData.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Telemetry/Trace.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Telemetry/PageViewPerformance.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Telemetry/Common/Data.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Interfaces/Contracts/ContextTagKeys.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Interfaces/PartAExtensions.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Offline.js","../../../node_modules/@microsoft/applicationinsights-channel-js/node_modules/@microsoft/applicationinsights-common/dist-es5/applicationinsights-common.js","../../../node_modules/@microsoft/applicationinsights-channel-js/dist-es5/InternalConstants.js","../../../node_modules/@microsoft/applicationinsights-channel-js/dist-es5/__DynamicConstants.js","../../../node_modules/@microsoft/applicationinsights-channel-js/dist-es5/EnvelopeCreator.js","../../../node_modules/@microsoft/applicationinsights-channel-js/dist-es5/SendBuffer.js","../../../node_modules/@microsoft/applicationinsights-channel-js/dist-es5/Serializer.js","../../../node_modules/@microsoft/applicationinsights-channel-js/dist-es5/TelemetryProcessors/SamplingScoreGenerators/HashCodeScoreGenerator.js","../../../node_modules/@microsoft/applicationinsights-channel-js/dist-es5/TelemetryProcessors/SamplingScoreGenerators/SamplingScoreGenerator.js","../../../node_modules/@microsoft/applicationinsights-channel-js/dist-es5/TelemetryProcessors/Sample.js","../../../node_modules/@microsoft/applicationinsights-channel-js/dist-es5/Sender.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK.Enums/EnumHelperFuncs.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/__DynamicConstants.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/AggregationError.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/InternalConstants.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/HelperFuncs.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/EnvUtils.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/RandomHelper.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/DataCacheHelper.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/ConfigDefaults.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicSupport.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicProperty.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicState.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicConfig.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/AsyncUtils.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/Constants.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/ConfigDefaultHelpers.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/DbgExtensionUtils.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/DiagnosticLogger.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/CookieMgr.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/NotificationManager.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/PerfManager.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/W3cTraceParent.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/TelemetryHelpers.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/ProcessTelemetryContext.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/UnloadHandlerContainer.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/UnloadHookContainer.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/BaseTelemetryPlugin.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/TelemetryInitializerPlugin.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/AppInsightsCore.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/EventHelpers.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-common/dist-es5/Constants.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-common/dist-es5/__DynamicConstants.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-common/dist-es5/Enums.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-common/dist-es5/StorageHelperFuncs.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-common/dist-es5/ThrottleMgr.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-common/dist-es5/ConnectionStringParser.js","../../../node_modules/@microsoft/applicationinsights-web/node_modules/@microsoft/applicationinsights-common/dist-es5/applicationinsights-common.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/dynamicproto-js/src/DynamicProto.ts","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK.Enums/EnumHelperFuncs.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/__DynamicConstants.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/AggregationError.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/InternalConstants.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/HelperFuncs.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/EnvUtils.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/RandomHelper.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/DataCacheHelper.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/ConfigDefaults.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicSupport.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicProperty.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicState.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicConfig.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/DbgExtensionUtils.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/DiagnosticLogger.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/PerfManager.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/CoreUtils.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/W3cTraceParent.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/TelemetryHelpers.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/ProcessTelemetryContext.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/UnloadHandlerContainer.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/UnloadHookContainer.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/BaseTelemetryPlugin.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/EventHelpers.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/InstrumentHooks.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Constants.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-common/dist-es5/RequestResponseHeaders.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-common/dist-es5/__DynamicConstants.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Telemetry/Common/DataSanitizer.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-common/dist-es5/UrlHelperFuncs.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Util.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-common/dist-es5/HelperFuncs.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Telemetry/RemoteDependencyData.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Interfaces/Contracts/ContextTagKeys.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-common/dist-es5/TelemetryItemCreator.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Interfaces/PartAExtensions.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/node_modules/@microsoft/applicationinsights-common/dist-es5/applicationinsights-common.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/dist-es5/InternalConstants.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/dist-es5/__DynamicConstants.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/dist-es5/ajaxRecord.js","../../../node_modules/@microsoft/applicationinsights-dependencies-js/dist-es5/ajax.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/dynamicproto-js/src/DynamicProto.ts","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK.Enums/EnumHelperFuncs.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/__DynamicConstants.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/AggregationError.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/InternalConstants.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/HelperFuncs.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/EnvUtils.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/RandomHelper.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/DataCacheHelper.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/ConfigDefaults.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicSupport.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicProperty.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicState.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicConfig.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/ConfigDefaultHelpers.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/DbgExtensionUtils.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/DiagnosticLogger.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/CookieMgr.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/PerfManager.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/CoreUtils.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/W3cTraceParent.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/TelemetryHelpers.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/ProcessTelemetryContext.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/UnloadHandlerContainer.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/UnloadHookContainer.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/BaseTelemetryPlugin.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Constants.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-common/dist-es5/__DynamicConstants.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Telemetry/Common/DataSanitizer.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Util.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Enums.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-common/dist-es5/StorageHelperFuncs.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-common/dist-es5/HelperFuncs.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Telemetry/PageView.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Interfaces/Contracts/ContextTagKeys.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-common/dist-es5/Interfaces/PartAExtensions.js","../../../node_modules/@microsoft/applicationinsights-properties-js/node_modules/@microsoft/applicationinsights-common/dist-es5/applicationinsights-common.js","../../../node_modules/@microsoft/applicationinsights-properties-js/dist-es5/Context/Application.js","../../../node_modules/@microsoft/applicationinsights-properties-js/dist-es5/Context/Device.js","../../../node_modules/@microsoft/applicationinsights-properties-js/dist-es5/Context/Internal.js","../../../node_modules/@microsoft/applicationinsights-properties-js/dist-es5/Context/Location.js","../../../node_modules/@microsoft/applicationinsights-properties-js/dist-es5/__DynamicConstants.js","../../../node_modules/@microsoft/applicationinsights-properties-js/dist-es5/Context/Session.js","../../../node_modules/@microsoft/applicationinsights-properties-js/dist-es5/Context/TelemetryTrace.js","../../../node_modules/@microsoft/applicationinsights-properties-js/dist-es5/Context/User.js","../../../node_modules/@microsoft/applicationinsights-properties-js/dist-es5/TelemetryContext.js","../../../node_modules/@microsoft/applicationinsights-properties-js/dist-es5/PropertiesPlugin.js","../../../node_modules/@microsoft/applicationinsights-web/dist-es5/InternalConstants.js","../../../node_modules/@microsoft/applicationinsights-web/dist-es5/__DynamicConstants.js","../../../node_modules/@microsoft/applicationinsights-web/dist-es5/AISku.js","../../../node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/dynamicproto-js/src/DynamicProto.ts","../../../node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/__DynamicConstants.js","../../../node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/AggregationError.js","../../../node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/InternalConstants.js","../../../node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/HelperFuncs.js","../../../node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/EnvUtils.js","../../../node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/RandomHelper.js","../../../node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/DataCacheHelper.js","../../../node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/ConfigDefaults.js","../../../node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicSupport.js","../../../node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicProperty.js","../../../node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicState.js","../../../node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/DynamicConfig.js","../../../node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/Config/ConfigDefaultHelpers.js","../../../node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/DbgExtensionUtils.js","../../../node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/DiagnosticLogger.js","../../../node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/CookieMgr.js","../../../node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/PerfManager.js","../../../node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/TelemetryHelpers.js","../../../node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/ProcessTelemetryContext.js","../../../node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/UnloadHandlerContainer.js","../../../node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/UnloadHookContainer.js","../../../node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-core-js/dist-es5/JavaScriptSDK/BaseTelemetryPlugin.js","../../../node_modules/@microsoft/applicationinsights-react-js/node_modules/@microsoft/applicationinsights-common/dist-es5/applicationinsights-common.js","../../../node_modules/@microsoft/applicationinsights-react-js/dist-esm/ReactPlugin.js","../../../node_modules/@microsoft/applicationinsights-react-js/dist-esm/withAITracking.js","../../../node_modules/invert-kv/index.js","../../../node_modules/lcid/index.js","../../../node_modules/@talxis/client-libraries/src/exceptions/Exception.ts","../../../node_modules/@talxis/client-libraries/src/helpers/cache/MemoryCache.ts","../../../node_modules/@talxis/client-libraries/src/helpers/cache/PromiseCache.ts","../../../node_modules/@talxis/client-libraries/src/helpers/sanitizers/GuidSanitizer.ts","../../../node_modules/@talxis/client-libraries/src/helpers/sanitizers/LookupSanitizer.ts","../../../node_modules/@talxis/client-libraries/src/helpers/sanitizers/Sanitizer.ts","../../../node_modules/@talxis/client-libraries/src/utils/file/blobToBase64.ts","../../../node_modules/@talxis/client-libraries/src/utils/interoperability/WebApi.ts","../../../node_modules/@talxis/client-libraries/src/utils/interoperability/UCIClientExtensions.ts","../../../node_modules/@talxis/client-libraries/src/utils/file/FileAttribute.ts","../../../node_modules/@talxis/client-libraries/src/utils/metadata/Datatypes.ts","../../../node_modules/@talxis/client-libraries/src/utils/metadata/Attribute.ts","../../../node_modules/@talxis/client-libraries/src/utils/fetch-xml/filter/Operators.ts","../../../node_modules/@talxis/client-libraries/src/utils/fetch-xml/filter/Type.ts","../../../node_modules/@talxis/client-libraries/src/utils/fetch-xml/Constants.ts","../../../node_modules/@talxis/client-libraries/src/utils/fetch-xml/Direction.ts","../../../node_modules/@talxis/client-libraries/src/utils/fetch-xml/FetchXmlBuilder.ts","../../../node_modules/@talxis/client-libraries/src/utils/fetch-xml/FetchXmlParser.ts","../../../node_modules/@talxis/client-libraries/src/helpers/hashing/Hashing.ts","../../../node_modules/@talxis/client-libraries/src/utils/fetch-xml/FetchXml.ts","../../../node_modules/@talxis/client-libraries/src/utils/fetch-xml/FetchXmlFactory.ts","../../../node_modules/@talxis/client-libraries/src/utils/formatting/Numeral.ts","../../../node_modules/@talxis/client-libraries/src/utils/formatting/DateFormattingInfo.ts","../../../node_modules/@talxis/client-libraries/src/utils/formatting/NumberFormattingInfo.ts","../../../node_modules/@talxis/client-libraries/src/utils/formatting/Formatting.ts","../../../node_modules/@talxis/client-libraries/src/utils/dataset/Dataset.ts","../../../node_modules/@talxis/client-libraries/src/utils/dataset/data-providers/DataProvider.ts","../../../node_modules/@talxis/client-libraries/src/localization/Localization.ts","../../../node_modules/@talxis/client-libraries/src/utils/dataset/data-providers/Record/Field/FieldValidation.ts","../../../node_modules/@talxis/client-libraries/src/utils/dataset/data-providers/Record/Field/Field.ts","../../../node_modules/@talxis/client-libraries/src/utils/dataset/data-providers/Record/RecordUi.ts","../../../node_modules/@talxis/client-libraries/src/utils/dataset/data-providers/Record/Record.ts","../../../node_modules/@talxis/client-libraries/src/utils/dataset/data-providers/FetchXmlDataProvider/SaveHandler.ts","../../../node_modules/@talxis/client-libraries/src/utils/dataset/data-providers/FetchXmlDataProvider/FetchXmlDataProvider.ts","../../../node_modules/@talxis/client-libraries/src/utils/export-to-excel/Dataset.ts","../../../node_modules/lodash/now.js","../../../node_modules/lodash/_trimmedEndIndex.js","../../../node_modules/lodash/_baseTrim.js","../../../node_modules/lodash/isSymbol.js","../../../node_modules/lodash/toNumber.js","../../../node_modules/lodash/debounce.js","../../../node_modules/lodash/throttle.js","../../../node_modules/react-resize-detector/node_modules/.pnpm/@rollup+plugin-typescript@11.1.5_rollup@4.9.1_tslib@2.6.2_typescript@5.3.3/node_modules/tslib/tslib.es6.js","../../../node_modules/react-resize-detector/src/utils.ts","../../../node_modules/react-resize-detector/src/ResizeDetector.tsx","../../../node_modules/react-resize-detector/src/useResizeDetector.ts","../../../node_modules/strict-uri-encode/index.js","../../../node_modules/decode-uri-component/index.js","../../../node_modules/split-on-first/index.js","../../../node_modules/filter-obj/index.js","../../../node_modules/query-string/index.js","../../../node_modules/flatted/esm/index.js","../../../node_modules/sprintf-js/src/sprintf.js","../../../node_modules/validator/lib/isByteLength.js","../../../node_modules/validator/lib/isEmail.js","../../../node_modules/react-error-boundary/dist/react-error-boundary.esm.js","../../../node_modules/immer/src/utils/errors.ts","../../../node_modules/immer/src/utils/common.ts","../../../node_modules/immer/src/utils/plugins.ts","../../../node_modules/immer/src/core/scope.ts","../../../node_modules/immer/src/core/finalize.ts","../../../node_modules/immer/src/core/proxy.ts","../../../node_modules/immer/src/core/immerClass.ts","../../../node_modules/immer/src/core/current.ts","../../../node_modules/immer/src/immer.ts","../../../node_modules/immer/src/utils/env.ts","../../../node_modules/@babel/runtime/helpers/esm/typeof.js","../../../node_modules/@babel/runtime/helpers/esm/toPrimitive.js","../../../node_modules/@babel/runtime/helpers/esm/toPropertyKey.js","../../../node_modules/@babel/runtime/helpers/esm/defineProperty.js","../../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js","../../../node_modules/redux/es/redux.js","../../../node_modules/react-redux/es/components/Context.js","../../../node_modules/react-redux/es/utils/batch.js","../../../node_modules/react-redux/es/utils/Subscription.js","../../../node_modules/react-redux/es/utils/useIsomorphicLayoutEffect.js","../../../node_modules/react-redux/es/components/Provider.js","../../../node_modules/react-redux/node_modules/react-is/cjs/react-is.production.min.js","../../../node_modules/react-redux/node_modules/react-is/index.js","../../../node_modules/react-redux/es/components/connectAdvanced.js","../../../node_modules/react-redux/es/utils/shallowEqual.js","../../../node_modules/react-redux/es/utils/bindActionCreators.js","../../../node_modules/react-redux/es/connect/wrapMapToProps.js","../../../node_modules/react-redux/es/connect/mapDispatchToProps.js","../../../node_modules/react-redux/es/connect/mapStateToProps.js","../../../node_modules/react-redux/es/connect/mergeProps.js","../../../node_modules/react-redux/es/connect/selectorFactory.js","../../../node_modules/react-redux/es/connect/connect.js","../../../node_modules/react-redux/es/index.js","../../../node_modules/use-memo-one/dist/use-memo-one.esm.js","../../../node_modules/css-box-model/dist/css-box-model.esm.js","../../../node_modules/raf-schd/dist/raf-schd.esm.js","../../../node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js","../../../node_modules/yallist/iterator.js","../../../node_modules/yallist/yallist.js","../../../node_modules/lru-cache/index.js","../../../node_modules/lodash/_setCacheAdd.js","../../../node_modules/lodash/_setCacheHas.js","../../../node_modules/lodash/_SetCache.js","../../../node_modules/lodash/_arraySome.js","../../../node_modules/lodash/_cacheHas.js","../../../node_modules/lodash/_equalArrays.js","../../../node_modules/lodash/_mapToArray.js","../../../node_modules/lodash/_setToArray.js","../../../node_modules/lodash/_equalByTag.js","../../../node_modules/lodash/_equalObjects.js","../../../node_modules/lodash/_baseIsEqualDeep.js","../../../node_modules/lodash/_baseIsEqual.js","../../../node_modules/lodash/isEqual.js","../../../node_modules/xml2js/lib/defaults.js","../../../node_modules/xmlbuilder/lib/Utility.js","../../../node_modules/xmlbuilder/lib/XMLDOMImplementation.js","../../../node_modules/xmlbuilder/lib/XMLDOMErrorHandler.js","../../../node_modules/xmlbuilder/lib/XMLDOMStringList.js","../../../node_modules/xmlbuilder/lib/XMLDOMConfiguration.js","../../../node_modules/xmlbuilder/lib/NodeType.js","../../../node_modules/xmlbuilder/lib/XMLAttribute.js","../../../node_modules/xmlbuilder/lib/XMLNamedNodeMap.js","../../../node_modules/xmlbuilder/lib/XMLElement.js","../../../node_modules/xmlbuilder/lib/XMLCharacterData.js","../../../node_modules/xmlbuilder/lib/XMLCData.js","../../../node_modules/xmlbuilder/lib/XMLComment.js","../../../node_modules/xmlbuilder/lib/XMLDeclaration.js","../../../node_modules/xmlbuilder/lib/XMLDTDAttList.js","../../../node_modules/xmlbuilder/lib/XMLDTDEntity.js","../../../node_modules/xmlbuilder/lib/XMLDTDElement.js","../../../node_modules/xmlbuilder/lib/XMLDTDNotation.js","../../../node_modules/xmlbuilder/lib/XMLDocType.js","../../../node_modules/xmlbuilder/lib/XMLRaw.js","../../../node_modules/xmlbuilder/lib/XMLText.js","../../../node_modules/xmlbuilder/lib/XMLProcessingInstruction.js","../../../node_modules/xmlbuilder/lib/XMLDummy.js","../../../node_modules/xmlbuilder/lib/XMLNodeList.js","../../../node_modules/xmlbuilder/lib/DocumentPosition.js","../../../node_modules/xmlbuilder/lib/XMLNode.js","../../../node_modules/xmlbuilder/lib/XMLStringifier.js","../../../node_modules/xmlbuilder/lib/WriterState.js","../../../node_modules/xmlbuilder/lib/XMLWriterBase.js","../../../node_modules/xmlbuilder/lib/XMLStringWriter.js","../../../node_modules/xmlbuilder/lib/XMLDocument.js","../../../node_modules/xmlbuilder/lib/XMLDocumentCB.js","../../../node_modules/xmlbuilder/lib/XMLStreamWriter.js","../../../node_modules/xmlbuilder/lib/index.js","../../../node_modules/xml2js/lib/builder.js","../../../node_modules/events/events.js","../../../node_modules/inherits/inherits_browser.js","../../../node_modules/readable-stream/lib/internal/streams/stream-browser.js","../../../node_modules/base64-js/index.js","../../../node_modules/ieee754/index.js","../../../node_modules/buffer/index.js","../../../__vite-browser-external","../../../node_modules/readable-stream/lib/internal/streams/buffer_list.js","../../../node_modules/readable-stream/lib/internal/streams/destroy.js","../../../node_modules/readable-stream/errors-browser.js","../../../node_modules/readable-stream/lib/internal/streams/state.js","../../../node_modules/util-deprecate/browser.js","../../../node_modules/readable-stream/lib/_stream_writable.js","../../../node_modules/readable-stream/lib/_stream_duplex.js","../../../node_modules/string_decoder/node_modules/safe-buffer/index.js","../../../node_modules/string_decoder/lib/string_decoder.js","../../../node_modules/readable-stream/lib/internal/streams/end-of-stream.js","../../../node_modules/readable-stream/lib/internal/streams/async_iterator.js","../../../node_modules/readable-stream/lib/internal/streams/from-browser.js","../../../node_modules/readable-stream/lib/_stream_readable.js","../../../node_modules/readable-stream/lib/_stream_transform.js","../../../node_modules/readable-stream/lib/_stream_passthrough.js","../../../node_modules/readable-stream/lib/internal/streams/pipeline.js","../../../node_modules/stream-browserify/index.js","../../../node_modules/sax/lib/sax.js","../../../node_modules/xml2js/lib/bom.js","../../../node_modules/xml2js/lib/processors.js","../../../node_modules/xml2js/lib/parser.js","../../../node_modules/xml2js/lib/xml2js.js","../../../node_modules/resx/esm/resx2js.js","../../../node_modules/resx/esm/js2resx.js","../../../node_modules/resx/esm/index.js","../../../node_modules/js-cookie/dist/js.cookie.mjs","../../../node_modules/react-ios-pwa-prompt/dist/react-ios-pwa-prompt.js"],"sourcesContent":["/*\nobject-assign\n(c) Sindre Sorhus\n@license MIT\n*/\n\n'use strict';\n/* eslint-disable no-unused-vars */\nvar getOwnPropertySymbols = Object.getOwnPropertySymbols;\nvar hasOwnProperty = Object.prototype.hasOwnProperty;\nvar propIsEnumerable = Object.prototype.propertyIsEnumerable;\n\nfunction toObject(val) {\n\tif (val === null || val === undefined) {\n\t\tthrow new TypeError('Object.assign cannot be called with null or undefined');\n\t}\n\n\treturn Object(val);\n}\n\nfunction shouldUseNative() {\n\ttry {\n\t\tif (!Object.assign) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Detect buggy property enumeration order in older V8 versions.\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=4118\n\t\tvar test1 = new String('abc'); // eslint-disable-line no-new-wrappers\n\t\ttest1[5] = 'de';\n\t\tif (Object.getOwnPropertyNames(test1)[0] === '5') {\n\t\t\treturn false;\n\t\t}\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=3056\n\t\tvar test2 = {};\n\t\tfor (var i = 0; i < 10; i++) {\n\t\t\ttest2['_' + String.fromCharCode(i)] = i;\n\t\t}\n\t\tvar order2 = Object.getOwnPropertyNames(test2).map(function (n) {\n\t\t\treturn test2[n];\n\t\t});\n\t\tif (order2.join('') !== '0123456789') {\n\t\t\treturn false;\n\t\t}\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=3056\n\t\tvar test3 = {};\n\t\t'abcdefghijklmnopqrst'.split('').forEach(function (letter) {\n\t\t\ttest3[letter] = letter;\n\t\t});\n\t\tif (Object.keys(Object.assign({}, test3)).join('') !==\n\t\t\t\t'abcdefghijklmnopqrst') {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn true;\n\t} catch (err) {\n\t\t// We don't expect any of the above to throw, but better to be safe.\n\t\treturn false;\n\t}\n}\n\nmodule.exports = shouldUseNative() ? Object.assign : function (target, source) {\n\tvar from;\n\tvar to = toObject(target);\n\tvar symbols;\n\n\tfor (var s = 1; s < arguments.length; s++) {\n\t\tfrom = Object(arguments[s]);\n\n\t\tfor (var key in from) {\n\t\t\tif (hasOwnProperty.call(from, key)) {\n\t\t\t\tto[key] = from[key];\n\t\t\t}\n\t\t}\n\n\t\tif (getOwnPropertySymbols) {\n\t\t\tsymbols = getOwnPropertySymbols(from);\n\t\t\tfor (var i = 0; i < symbols.length; i++) {\n\t\t\t\tif (propIsEnumerable.call(from, symbols[i])) {\n\t\t\t\t\tto[symbols[i]] = from[symbols[i]];\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\treturn to;\n};\n","/** @license React v17.0.2\n * react.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var l=require(\"object-assign\"),n=60103,p=60106;exports.Fragment=60107;exports.StrictMode=60108;exports.Profiler=60114;var q=60109,r=60110,t=60112;exports.Suspense=60113;var u=60115,v=60116;\nif(\"function\"===typeof Symbol&&Symbol.for){var w=Symbol.for;n=w(\"react.element\");p=w(\"react.portal\");exports.Fragment=w(\"react.fragment\");exports.StrictMode=w(\"react.strict_mode\");exports.Profiler=w(\"react.profiler\");q=w(\"react.provider\");r=w(\"react.context\");t=w(\"react.forward_ref\");exports.Suspense=w(\"react.suspense\");u=w(\"react.memo\");v=w(\"react.lazy\")}var x=\"function\"===typeof Symbol&&Symbol.iterator;\nfunction y(a){if(null===a||\"object\"!==typeof a)return null;a=x&&a[x]||a[\"@@iterator\"];return\"function\"===typeof a?a:null}function z(a){for(var b=\"https://reactjs.org/docs/error-decoder.html?invariant=\"+a,c=1;c=\nE};k=function(){};exports.unstable_forceFrameRate=function(a){0>a||125>>1,e=a[d];if(void 0!==e&&0I(n,c))void 0!==r&&0>I(r,n)?(a[d]=r,a[v]=c,d=v):(a[d]=n,a[m]=c,d=m);else if(void 0!==r&&0>I(r,c))a[d]=r,a[v]=c,d=v;else break a}}return b}return null}function I(a,b){var c=a.sortIndex-b.sortIndex;return 0!==c?c:a.id-b.id}var L=[],M=[],N=1,O=null,P=3,Q=!1,R=!1,S=!1;\nfunction T(a){for(var b=J(M);null!==b;){if(null===b.callback)K(M);else if(b.startTime<=a)K(M),b.sortIndex=b.expirationTime,H(L,b);else break;b=J(M)}}function U(a){S=!1;T(a);if(!R)if(null!==J(L))R=!0,f(V);else{var b=J(M);null!==b&&g(U,b.startTime-a)}}\nfunction V(a,b){R=!1;S&&(S=!1,h());Q=!0;var c=P;try{T(b);for(O=J(L);null!==O&&(!(O.expirationTime>b)||a&&!exports.unstable_shouldYield());){var d=O.callback;if(\"function\"===typeof d){O.callback=null;P=O.priorityLevel;var e=d(O.expirationTime<=b);b=exports.unstable_now();\"function\"===typeof e?O.callback=e:O===J(L)&&K(L);T(b)}else K(L);O=J(L)}if(null!==O)var m=!0;else{var n=J(M);null!==n&&g(U,n.startTime-b);m=!1}return m}finally{O=null,P=c,Q=!1}}var W=k;exports.unstable_IdlePriority=5;\nexports.unstable_ImmediatePriority=1;exports.unstable_LowPriority=4;exports.unstable_NormalPriority=3;exports.unstable_Profiling=null;exports.unstable_UserBlockingPriority=2;exports.unstable_cancelCallback=function(a){a.callback=null};exports.unstable_continueExecution=function(){R||Q||(R=!0,f(V))};exports.unstable_getCurrentPriorityLevel=function(){return P};exports.unstable_getFirstCallbackNode=function(){return J(L)};\nexports.unstable_next=function(a){switch(P){case 1:case 2:case 3:var b=3;break;default:b=P}var c=P;P=b;try{return a()}finally{P=c}};exports.unstable_pauseExecution=function(){};exports.unstable_requestPaint=W;exports.unstable_runWithPriority=function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3}var c=P;P=a;try{return b()}finally{P=c}};\nexports.unstable_scheduleCallback=function(a,b,c){var d=exports.unstable_now();\"object\"===typeof c&&null!==c?(c=c.delay,c=\"number\"===typeof c&&0d?(a.sortIndex=c,H(M,a),null===J(L)&&a===J(M)&&(S?h():S=!0,g(U,c-d))):(a.sortIndex=e,H(L,a),R||Q||(R=!0,f(V)));return a};\nexports.unstable_wrapCallback=function(a){var b=P;return function(){var c=P;P=b;try{return a.apply(this,arguments)}finally{P=c}}};\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/scheduler.production.min.js');\n} else {\n module.exports = require('./cjs/scheduler.development.js');\n}\n","/** @license React v17.0.2\n * react-dom.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n/*\n Modernizr 3.0.0pre (Custom Build) | MIT\n*/\n'use strict';var aa=require(\"react\"),m=require(\"object-assign\"),r=require(\"scheduler\");function y(a){for(var b=\"https://reactjs.org/docs/error-decoder.html?invariant=\"+a,c=1;cb}return!1}function B(a,b,c,d,e,f,g){this.acceptsBooleans=2===b||3===b||4===b;this.attributeName=d;this.attributeNamespace=e;this.mustUseProperty=c;this.propertyName=a;this.type=b;this.sanitizeURL=f;this.removeEmptyString=g}var D={};\n\"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style\".split(\" \").forEach(function(a){D[a]=new B(a,0,!1,a,null,!1,!1)});[[\"acceptCharset\",\"accept-charset\"],[\"className\",\"class\"],[\"htmlFor\",\"for\"],[\"httpEquiv\",\"http-equiv\"]].forEach(function(a){var b=a[0];D[b]=new B(b,1,!1,a[1],null,!1,!1)});[\"contentEditable\",\"draggable\",\"spellCheck\",\"value\"].forEach(function(a){D[a]=new B(a,2,!1,a.toLowerCase(),null,!1,!1)});\n[\"autoReverse\",\"externalResourcesRequired\",\"focusable\",\"preserveAlpha\"].forEach(function(a){D[a]=new B(a,2,!1,a,null,!1,!1)});\"allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope\".split(\" \").forEach(function(a){D[a]=new B(a,3,!1,a.toLowerCase(),null,!1,!1)});\n[\"checked\",\"multiple\",\"muted\",\"selected\"].forEach(function(a){D[a]=new B(a,3,!0,a,null,!1,!1)});[\"capture\",\"download\"].forEach(function(a){D[a]=new B(a,4,!1,a,null,!1,!1)});[\"cols\",\"rows\",\"size\",\"span\"].forEach(function(a){D[a]=new B(a,6,!1,a,null,!1,!1)});[\"rowSpan\",\"start\"].forEach(function(a){D[a]=new B(a,5,!1,a.toLowerCase(),null,!1,!1)});var oa=/[\\-:]([a-z])/g;function pa(a){return a[1].toUpperCase()}\n\"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height\".split(\" \").forEach(function(a){var b=a.replace(oa,\npa);D[b]=new B(b,1,!1,a,null,!1,!1)});\"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type\".split(\" \").forEach(function(a){var b=a.replace(oa,pa);D[b]=new B(b,1,!1,a,\"http://www.w3.org/1999/xlink\",!1,!1)});[\"xml:base\",\"xml:lang\",\"xml:space\"].forEach(function(a){var b=a.replace(oa,pa);D[b]=new B(b,1,!1,a,\"http://www.w3.org/XML/1998/namespace\",!1,!1)});[\"tabIndex\",\"crossOrigin\"].forEach(function(a){D[a]=new B(a,1,!1,a.toLowerCase(),null,!1,!1)});\nD.xlinkHref=new B(\"xlinkHref\",1,!1,\"xlink:href\",\"http://www.w3.org/1999/xlink\",!0,!1);[\"src\",\"href\",\"action\",\"formAction\"].forEach(function(a){D[a]=new B(a,1,!1,a.toLowerCase(),null,!0,!0)});\nfunction qa(a,b,c,d){var e=D.hasOwnProperty(b)?D[b]:null;var f=null!==e?0===e.type:d?!1:!(2h||e[g]!==f[h])return\"\\n\"+e[g].replace(\" at new \",\" at \");while(1<=g&&0<=h)}break}}}finally{Oa=!1,Error.prepareStackTrace=c}return(a=a?a.displayName||a.name:\"\")?Na(a):\"\"}\nfunction Qa(a){switch(a.tag){case 5:return Na(a.type);case 16:return Na(\"Lazy\");case 13:return Na(\"Suspense\");case 19:return Na(\"SuspenseList\");case 0:case 2:case 15:return a=Pa(a.type,!1),a;case 11:return a=Pa(a.type.render,!1),a;case 22:return a=Pa(a.type._render,!1),a;case 1:return a=Pa(a.type,!0),a;default:return\"\"}}\nfunction Ra(a){if(null==a)return null;if(\"function\"===typeof a)return a.displayName||a.name||null;if(\"string\"===typeof a)return a;switch(a){case ua:return\"Fragment\";case ta:return\"Portal\";case xa:return\"Profiler\";case wa:return\"StrictMode\";case Ba:return\"Suspense\";case Ca:return\"SuspenseList\"}if(\"object\"===typeof a)switch(a.$$typeof){case za:return(a.displayName||\"Context\")+\".Consumer\";case ya:return(a._context.displayName||\"Context\")+\".Provider\";case Aa:var b=a.render;b=b.displayName||b.name||\"\";\nreturn a.displayName||(\"\"!==b?\"ForwardRef(\"+b+\")\":\"ForwardRef\");case Da:return Ra(a.type);case Fa:return Ra(a._render);case Ea:b=a._payload;a=a._init;try{return Ra(a(b))}catch(c){}}return null}function Sa(a){switch(typeof a){case \"boolean\":case \"number\":case \"object\":case \"string\":case \"undefined\":return a;default:return\"\"}}function Ta(a){var b=a.type;return(a=a.nodeName)&&\"input\"===a.toLowerCase()&&(\"checkbox\"===b||\"radio\"===b)}\nfunction Ua(a){var b=Ta(a)?\"checked\":\"value\",c=Object.getOwnPropertyDescriptor(a.constructor.prototype,b),d=\"\"+a[b];if(!a.hasOwnProperty(b)&&\"undefined\"!==typeof c&&\"function\"===typeof c.get&&\"function\"===typeof c.set){var e=c.get,f=c.set;Object.defineProperty(a,b,{configurable:!0,get:function(){return e.call(this)},set:function(a){d=\"\"+a;f.call(this,a)}});Object.defineProperty(a,b,{enumerable:c.enumerable});return{getValue:function(){return d},setValue:function(a){d=\"\"+a},stopTracking:function(){a._valueTracker=\nnull;delete a[b]}}}}function Va(a){a._valueTracker||(a._valueTracker=Ua(a))}function Wa(a){if(!a)return!1;var b=a._valueTracker;if(!b)return!0;var c=b.getValue();var d=\"\";a&&(d=Ta(a)?a.checked?\"true\":\"false\":a.value);a=d;return a!==c?(b.setValue(a),!0):!1}function Xa(a){a=a||(\"undefined\"!==typeof document?document:void 0);if(\"undefined\"===typeof a)return null;try{return a.activeElement||a.body}catch(b){return a.body}}\nfunction Ya(a,b){var c=b.checked;return m({},b,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:null!=c?c:a._wrapperState.initialChecked})}function Za(a,b){var c=null==b.defaultValue?\"\":b.defaultValue,d=null!=b.checked?b.checked:b.defaultChecked;c=Sa(null!=b.value?b.value:c);a._wrapperState={initialChecked:d,initialValue:c,controlled:\"checkbox\"===b.type||\"radio\"===b.type?null!=b.checked:null!=b.value}}function $a(a,b){b=b.checked;null!=b&&qa(a,\"checked\",b,!1)}\nfunction ab(a,b){$a(a,b);var c=Sa(b.value),d=b.type;if(null!=c)if(\"number\"===d){if(0===c&&\"\"===a.value||a.value!=c)a.value=\"\"+c}else a.value!==\"\"+c&&(a.value=\"\"+c);else if(\"submit\"===d||\"reset\"===d){a.removeAttribute(\"value\");return}b.hasOwnProperty(\"value\")?bb(a,b.type,c):b.hasOwnProperty(\"defaultValue\")&&bb(a,b.type,Sa(b.defaultValue));null==b.checked&&null!=b.defaultChecked&&(a.defaultChecked=!!b.defaultChecked)}\nfunction cb(a,b,c){if(b.hasOwnProperty(\"value\")||b.hasOwnProperty(\"defaultValue\")){var d=b.type;if(!(\"submit\"!==d&&\"reset\"!==d||void 0!==b.value&&null!==b.value))return;b=\"\"+a._wrapperState.initialValue;c||b===a.value||(a.value=b);a.defaultValue=b}c=a.name;\"\"!==c&&(a.name=\"\");a.defaultChecked=!!a._wrapperState.initialChecked;\"\"!==c&&(a.name=c)}\nfunction bb(a,b,c){if(\"number\"!==b||Xa(a.ownerDocument)!==a)null==c?a.defaultValue=\"\"+a._wrapperState.initialValue:a.defaultValue!==\"\"+c&&(a.defaultValue=\"\"+c)}function db(a){var b=\"\";aa.Children.forEach(a,function(a){null!=a&&(b+=a)});return b}function eb(a,b){a=m({children:void 0},b);if(b=db(b.children))a.children=b;return a}\nfunction fb(a,b,c,d){a=a.options;if(b){b={};for(var e=0;e=c.length))throw Error(y(93));c=c[0]}b=c}null==b&&(b=\"\");c=b}a._wrapperState={initialValue:Sa(c)}}\nfunction ib(a,b){var c=Sa(b.value),d=Sa(b.defaultValue);null!=c&&(c=\"\"+c,c!==a.value&&(a.value=c),null==b.defaultValue&&a.defaultValue!==c&&(a.defaultValue=c));null!=d&&(a.defaultValue=\"\"+d)}function jb(a){var b=a.textContent;b===a._wrapperState.initialValue&&\"\"!==b&&null!==b&&(a.value=b)}var kb={html:\"http://www.w3.org/1999/xhtml\",mathml:\"http://www.w3.org/1998/Math/MathML\",svg:\"http://www.w3.org/2000/svg\"};\nfunction lb(a){switch(a){case \"svg\":return\"http://www.w3.org/2000/svg\";case \"math\":return\"http://www.w3.org/1998/Math/MathML\";default:return\"http://www.w3.org/1999/xhtml\"}}function mb(a,b){return null==a||\"http://www.w3.org/1999/xhtml\"===a?lb(b):\"http://www.w3.org/2000/svg\"===a&&\"foreignObject\"===b?\"http://www.w3.org/1999/xhtml\":a}\nvar nb,ob=function(a){return\"undefined\"!==typeof MSApp&&MSApp.execUnsafeLocalFunction?function(b,c,d,e){MSApp.execUnsafeLocalFunction(function(){return a(b,c,d,e)})}:a}(function(a,b){if(a.namespaceURI!==kb.svg||\"innerHTML\"in a)a.innerHTML=b;else{nb=nb||document.createElement(\"div\");nb.innerHTML=\"\"+b.valueOf().toString()+\"\";for(b=nb.firstChild;a.firstChild;)a.removeChild(a.firstChild);for(;b.firstChild;)a.appendChild(b.firstChild)}});\nfunction pb(a,b){if(b){var c=a.firstChild;if(c&&c===a.lastChild&&3===c.nodeType){c.nodeValue=b;return}}a.textContent=b}\nvar qb={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,\nfloodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},rb=[\"Webkit\",\"ms\",\"Moz\",\"O\"];Object.keys(qb).forEach(function(a){rb.forEach(function(b){b=b+a.charAt(0).toUpperCase()+a.substring(1);qb[b]=qb[a]})});function sb(a,b,c){return null==b||\"boolean\"===typeof b||\"\"===b?\"\":c||\"number\"!==typeof b||0===b||qb.hasOwnProperty(a)&&qb[a]?(\"\"+b).trim():b+\"px\"}\nfunction tb(a,b){a=a.style;for(var c in b)if(b.hasOwnProperty(c)){var d=0===c.indexOf(\"--\"),e=sb(c,b[c],d);\"float\"===c&&(c=\"cssFloat\");d?a.setProperty(c,e):a[c]=e}}var ub=m({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0});\nfunction vb(a,b){if(b){if(ub[a]&&(null!=b.children||null!=b.dangerouslySetInnerHTML))throw Error(y(137,a));if(null!=b.dangerouslySetInnerHTML){if(null!=b.children)throw Error(y(60));if(!(\"object\"===typeof b.dangerouslySetInnerHTML&&\"__html\"in b.dangerouslySetInnerHTML))throw Error(y(61));}if(null!=b.style&&\"object\"!==typeof b.style)throw Error(y(62));}}\nfunction wb(a,b){if(-1===a.indexOf(\"-\"))return\"string\"===typeof b.is;switch(a){case \"annotation-xml\":case \"color-profile\":case \"font-face\":case \"font-face-src\":case \"font-face-uri\":case \"font-face-format\":case \"font-face-name\":case \"missing-glyph\":return!1;default:return!0}}function xb(a){a=a.target||a.srcElement||window;a.correspondingUseElement&&(a=a.correspondingUseElement);return 3===a.nodeType?a.parentNode:a}var yb=null,zb=null,Ab=null;\nfunction Bb(a){if(a=Cb(a)){if(\"function\"!==typeof yb)throw Error(y(280));var b=a.stateNode;b&&(b=Db(b),yb(a.stateNode,a.type,b))}}function Eb(a){zb?Ab?Ab.push(a):Ab=[a]:zb=a}function Fb(){if(zb){var a=zb,b=Ab;Ab=zb=null;Bb(a);if(b)for(a=0;ad?0:1<c;c++)b.push(a);return b}\nfunction $c(a,b,c){a.pendingLanes|=b;var d=b-1;a.suspendedLanes&=d;a.pingedLanes&=d;a=a.eventTimes;b=31-Vc(b);a[b]=c}var Vc=Math.clz32?Math.clz32:ad,bd=Math.log,cd=Math.LN2;function ad(a){return 0===a?32:31-(bd(a)/cd|0)|0}var dd=r.unstable_UserBlockingPriority,ed=r.unstable_runWithPriority,fd=!0;function gd(a,b,c,d){Kb||Ib();var e=hd,f=Kb;Kb=!0;try{Hb(e,a,b,c,d)}finally{(Kb=f)||Mb()}}function id(a,b,c,d){ed(dd,hd.bind(null,a,b,c,d))}\nfunction hd(a,b,c,d){if(fd){var e;if((e=0===(b&4))&&0=be),ee=String.fromCharCode(32),fe=!1;\nfunction ge(a,b){switch(a){case \"keyup\":return-1!==$d.indexOf(b.keyCode);case \"keydown\":return 229!==b.keyCode;case \"keypress\":case \"mousedown\":case \"focusout\":return!0;default:return!1}}function he(a){a=a.detail;return\"object\"===typeof a&&\"data\"in a?a.data:null}var ie=!1;function je(a,b){switch(a){case \"compositionend\":return he(b);case \"keypress\":if(32!==b.which)return null;fe=!0;return ee;case \"textInput\":return a=b.data,a===ee&&fe?null:a;default:return null}}\nfunction ke(a,b){if(ie)return\"compositionend\"===a||!ae&&ge(a,b)?(a=nd(),md=ld=kd=null,ie=!1,a):null;switch(a){case \"paste\":return null;case \"keypress\":if(!(b.ctrlKey||b.altKey||b.metaKey)||b.ctrlKey&&b.altKey){if(b.char&&1=b)return{node:c,offset:b-a};a=d}a:{for(;c;){if(c.nextSibling){c=c.nextSibling;break a}c=c.parentNode}c=void 0}c=Ke(c)}}function Me(a,b){return a&&b?a===b?!0:a&&3===a.nodeType?!1:b&&3===b.nodeType?Me(a,b.parentNode):\"contains\"in a?a.contains(b):a.compareDocumentPosition?!!(a.compareDocumentPosition(b)&16):!1:!1}\nfunction Ne(){for(var a=window,b=Xa();b instanceof a.HTMLIFrameElement;){try{var c=\"string\"===typeof b.contentWindow.location.href}catch(d){c=!1}if(c)a=b.contentWindow;else break;b=Xa(a.document)}return b}function Oe(a){var b=a&&a.nodeName&&a.nodeName.toLowerCase();return b&&(\"input\"===b&&(\"text\"===a.type||\"search\"===a.type||\"tel\"===a.type||\"url\"===a.type||\"password\"===a.type)||\"textarea\"===b||\"true\"===a.contentEditable)}\nvar Pe=fa&&\"documentMode\"in document&&11>=document.documentMode,Qe=null,Re=null,Se=null,Te=!1;\nfunction Ue(a,b,c){var d=c.window===c?c.document:9===c.nodeType?c:c.ownerDocument;Te||null==Qe||Qe!==Xa(d)||(d=Qe,\"selectionStart\"in d&&Oe(d)?d={start:d.selectionStart,end:d.selectionEnd}:(d=(d.ownerDocument&&d.ownerDocument.defaultView||window).getSelection(),d={anchorNode:d.anchorNode,anchorOffset:d.anchorOffset,focusNode:d.focusNode,focusOffset:d.focusOffset}),Se&&Je(Se,d)||(Se=d,d=oe(Re,\"onSelect\"),0Af||(a.current=zf[Af],zf[Af]=null,Af--)}function I(a,b){Af++;zf[Af]=a.current;a.current=b}var Cf={},M=Bf(Cf),N=Bf(!1),Df=Cf;\nfunction Ef(a,b){var c=a.type.contextTypes;if(!c)return Cf;var d=a.stateNode;if(d&&d.__reactInternalMemoizedUnmaskedChildContext===b)return d.__reactInternalMemoizedMaskedChildContext;var e={},f;for(f in c)e[f]=b[f];d&&(a=a.stateNode,a.__reactInternalMemoizedUnmaskedChildContext=b,a.__reactInternalMemoizedMaskedChildContext=e);return e}function Ff(a){a=a.childContextTypes;return null!==a&&void 0!==a}function Gf(){H(N);H(M)}function Hf(a,b,c){if(M.current!==Cf)throw Error(y(168));I(M,b);I(N,c)}\nfunction If(a,b,c){var d=a.stateNode;a=b.childContextTypes;if(\"function\"!==typeof d.getChildContext)return c;d=d.getChildContext();for(var e in d)if(!(e in a))throw Error(y(108,Ra(b)||\"Unknown\",e));return m({},c,d)}function Jf(a){a=(a=a.stateNode)&&a.__reactInternalMemoizedMergedChildContext||Cf;Df=M.current;I(M,a);I(N,N.current);return!0}function Kf(a,b,c){var d=a.stateNode;if(!d)throw Error(y(169));c?(a=If(a,b,Df),d.__reactInternalMemoizedMergedChildContext=a,H(N),H(M),I(M,a)):H(N);I(N,c)}\nvar Lf=null,Mf=null,Nf=r.unstable_runWithPriority,Of=r.unstable_scheduleCallback,Pf=r.unstable_cancelCallback,Qf=r.unstable_shouldYield,Rf=r.unstable_requestPaint,Sf=r.unstable_now,Tf=r.unstable_getCurrentPriorityLevel,Uf=r.unstable_ImmediatePriority,Vf=r.unstable_UserBlockingPriority,Wf=r.unstable_NormalPriority,Xf=r.unstable_LowPriority,Yf=r.unstable_IdlePriority,Zf={},$f=void 0!==Rf?Rf:function(){},ag=null,bg=null,cg=!1,dg=Sf(),O=1E4>dg?Sf:function(){return Sf()-dg};\nfunction eg(){switch(Tf()){case Uf:return 99;case Vf:return 98;case Wf:return 97;case Xf:return 96;case Yf:return 95;default:throw Error(y(332));}}function fg(a){switch(a){case 99:return Uf;case 98:return Vf;case 97:return Wf;case 96:return Xf;case 95:return Yf;default:throw Error(y(332));}}function gg(a,b){a=fg(a);return Nf(a,b)}function hg(a,b,c){a=fg(a);return Of(a,b,c)}function ig(){if(null!==bg){var a=bg;bg=null;Pf(a)}jg()}\nfunction jg(){if(!cg&&null!==ag){cg=!0;var a=0;try{var b=ag;gg(99,function(){for(;az?(q=u,u=null):q=u.sibling;var n=p(e,u,h[z],k);if(null===n){null===u&&(u=q);break}a&&u&&null===\nn.alternate&&b(e,u);g=f(n,g,z);null===t?l=n:t.sibling=n;t=n;u=q}if(z===h.length)return c(e,u),l;if(null===u){for(;zz?(q=u,u=null):q=u.sibling;var w=p(e,u,n.value,k);if(null===w){null===u&&(u=q);break}a&&u&&null===w.alternate&&b(e,u);g=f(w,g,z);null===t?l=w:t.sibling=w;t=w;u=q}if(n.done)return c(e,u),l;if(null===u){for(;!n.done;z++,n=h.next())n=A(e,n.value,k),null!==n&&(g=f(n,g,z),null===t?l=n:t.sibling=n,t=n);return l}for(u=d(e,u);!n.done;z++,n=h.next())n=C(u,e,z,n.value,k),null!==n&&(a&&null!==n.alternate&&\nu.delete(null===n.key?z:n.key),g=f(n,g,z),null===t?l=n:t.sibling=n,t=n);a&&u.forEach(function(a){return b(e,a)});return l}return function(a,d,f,h){var k=\"object\"===typeof f&&null!==f&&f.type===ua&&null===f.key;k&&(f=f.props.children);var l=\"object\"===typeof f&&null!==f;if(l)switch(f.$$typeof){case sa:a:{l=f.key;for(k=d;null!==k;){if(k.key===l){switch(k.tag){case 7:if(f.type===ua){c(a,k.sibling);d=e(k,f.props.children);d.return=a;a=d;break a}break;default:if(k.elementType===f.type){c(a,k.sibling);\nd=e(k,f.props);d.ref=Qg(a,k,f);d.return=a;a=d;break a}}c(a,k);break}else b(a,k);k=k.sibling}f.type===ua?(d=Xg(f.props.children,a.mode,h,f.key),d.return=a,a=d):(h=Vg(f.type,f.key,f.props,null,a.mode,h),h.ref=Qg(a,d,f),h.return=a,a=h)}return g(a);case ta:a:{for(k=f.key;null!==d;){if(d.key===k)if(4===d.tag&&d.stateNode.containerInfo===f.containerInfo&&d.stateNode.implementation===f.implementation){c(a,d.sibling);d=e(d,f.children||[]);d.return=a;a=d;break a}else{c(a,d);break}else b(a,d);d=d.sibling}d=\nWg(f,a.mode,h);d.return=a;a=d}return g(a)}if(\"string\"===typeof f||\"number\"===typeof f)return f=\"\"+f,null!==d&&6===d.tag?(c(a,d.sibling),d=e(d,f),d.return=a,a=d):(c(a,d),d=Ug(f,a.mode,h),d.return=a,a=d),g(a);if(Pg(f))return x(a,d,f,h);if(La(f))return w(a,d,f,h);l&&Rg(a,f);if(\"undefined\"===typeof f&&!k)switch(a.tag){case 1:case 22:case 0:case 11:case 15:throw Error(y(152,Ra(a.type)||\"Component\"));}return c(a,d)}}var Yg=Sg(!0),Zg=Sg(!1),$g={},ah=Bf($g),bh=Bf($g),ch=Bf($g);\nfunction dh(a){if(a===$g)throw Error(y(174));return a}function eh(a,b){I(ch,b);I(bh,a);I(ah,$g);a=b.nodeType;switch(a){case 9:case 11:b=(b=b.documentElement)?b.namespaceURI:mb(null,\"\");break;default:a=8===a?b.parentNode:b,b=a.namespaceURI||null,a=a.tagName,b=mb(b,a)}H(ah);I(ah,b)}function fh(){H(ah);H(bh);H(ch)}function gh(a){dh(ch.current);var b=dh(ah.current);var c=mb(b,a.type);b!==c&&(I(bh,a),I(ah,c))}function hh(a){bh.current===a&&(H(ah),H(bh))}var P=Bf(0);\nfunction ih(a){for(var b=a;null!==b;){if(13===b.tag){var c=b.memoizedState;if(null!==c&&(c=c.dehydrated,null===c||\"$?\"===c.data||\"$!\"===c.data))return b}else if(19===b.tag&&void 0!==b.memoizedProps.revealOrder){if(0!==(b.flags&64))return b}else if(null!==b.child){b.child.return=b;b=b.child;continue}if(b===a)break;for(;null===b.sibling;){if(null===b.return||b.return===a)return null;b=b.return}b.sibling.return=b.return;b=b.sibling}return null}var jh=null,kh=null,lh=!1;\nfunction mh(a,b){var c=nh(5,null,null,0);c.elementType=\"DELETED\";c.type=\"DELETED\";c.stateNode=b;c.return=a;c.flags=8;null!==a.lastEffect?(a.lastEffect.nextEffect=c,a.lastEffect=c):a.firstEffect=a.lastEffect=c}function oh(a,b){switch(a.tag){case 5:var c=a.type;b=1!==b.nodeType||c.toLowerCase()!==b.nodeName.toLowerCase()?null:b;return null!==b?(a.stateNode=b,!0):!1;case 6:return b=\"\"===a.pendingProps||3!==b.nodeType?null:b,null!==b?(a.stateNode=b,!0):!1;case 13:return!1;default:return!1}}\nfunction ph(a){if(lh){var b=kh;if(b){var c=b;if(!oh(a,b)){b=rf(c.nextSibling);if(!b||!oh(a,b)){a.flags=a.flags&-1025|2;lh=!1;jh=a;return}mh(jh,c)}jh=a;kh=rf(b.firstChild)}else a.flags=a.flags&-1025|2,lh=!1,jh=a}}function qh(a){for(a=a.return;null!==a&&5!==a.tag&&3!==a.tag&&13!==a.tag;)a=a.return;jh=a}\nfunction rh(a){if(a!==jh)return!1;if(!lh)return qh(a),lh=!0,!1;var b=a.type;if(5!==a.tag||\"head\"!==b&&\"body\"!==b&&!nf(b,a.memoizedProps))for(b=kh;b;)mh(a,b),b=rf(b.nextSibling);qh(a);if(13===a.tag){a=a.memoizedState;a=null!==a?a.dehydrated:null;if(!a)throw Error(y(317));a:{a=a.nextSibling;for(b=0;a;){if(8===a.nodeType){var c=a.data;if(\"/$\"===c){if(0===b){kh=rf(a.nextSibling);break a}b--}else\"$\"!==c&&\"$!\"!==c&&\"$?\"!==c||b++}a=a.nextSibling}kh=null}}else kh=jh?rf(a.stateNode.nextSibling):null;return!0}\nfunction sh(){kh=jh=null;lh=!1}var th=[];function uh(){for(var a=0;af))throw Error(y(301));f+=1;T=S=null;b.updateQueue=null;vh.current=Fh;a=c(d,e)}while(zh)}vh.current=Gh;b=null!==S&&null!==S.next;xh=0;T=S=R=null;yh=!1;if(b)throw Error(y(300));return a}function Hh(){var a={memoizedState:null,baseState:null,baseQueue:null,queue:null,next:null};null===T?R.memoizedState=T=a:T=T.next=a;return T}\nfunction Ih(){if(null===S){var a=R.alternate;a=null!==a?a.memoizedState:null}else a=S.next;var b=null===T?R.memoizedState:T.next;if(null!==b)T=b,S=a;else{if(null===a)throw Error(y(310));S=a;a={memoizedState:S.memoizedState,baseState:S.baseState,baseQueue:S.baseQueue,queue:S.queue,next:null};null===T?R.memoizedState=T=a:T=T.next=a}return T}function Jh(a,b){return\"function\"===typeof b?b(a):b}\nfunction Kh(a){var b=Ih(),c=b.queue;if(null===c)throw Error(y(311));c.lastRenderedReducer=a;var d=S,e=d.baseQueue,f=c.pending;if(null!==f){if(null!==e){var g=e.next;e.next=f.next;f.next=g}d.baseQueue=e=f;c.pending=null}if(null!==e){e=e.next;d=d.baseState;var h=g=f=null,k=e;do{var l=k.lane;if((xh&l)===l)null!==h&&(h=h.next={lane:0,action:k.action,eagerReducer:k.eagerReducer,eagerState:k.eagerState,next:null}),d=k.eagerReducer===a?k.eagerState:a(d,k.action);else{var n={lane:l,action:k.action,eagerReducer:k.eagerReducer,\neagerState:k.eagerState,next:null};null===h?(g=h=n,f=d):h=h.next=n;R.lanes|=l;Dg|=l}k=k.next}while(null!==k&&k!==e);null===h?f=d:h.next=g;He(d,b.memoizedState)||(ug=!0);b.memoizedState=d;b.baseState=f;b.baseQueue=h;c.lastRenderedState=d}return[b.memoizedState,c.dispatch]}\nfunction Lh(a){var b=Ih(),c=b.queue;if(null===c)throw Error(y(311));c.lastRenderedReducer=a;var d=c.dispatch,e=c.pending,f=b.memoizedState;if(null!==e){c.pending=null;var g=e=e.next;do f=a(f,g.action),g=g.next;while(g!==e);He(f,b.memoizedState)||(ug=!0);b.memoizedState=f;null===b.baseQueue&&(b.baseState=f);c.lastRenderedState=f}return[f,d]}\nfunction Mh(a,b,c){var d=b._getVersion;d=d(b._source);var e=b._workInProgressVersionPrimary;if(null!==e)a=e===d;else if(a=a.mutableReadLanes,a=(xh&a)===a)b._workInProgressVersionPrimary=d,th.push(b);if(a)return c(b._source);th.push(b);throw Error(y(350));}\nfunction Nh(a,b,c,d){var e=U;if(null===e)throw Error(y(349));var f=b._getVersion,g=f(b._source),h=vh.current,k=h.useState(function(){return Mh(e,b,c)}),l=k[1],n=k[0];k=T;var A=a.memoizedState,p=A.refs,C=p.getSnapshot,x=A.source;A=A.subscribe;var w=R;a.memoizedState={refs:p,source:b,subscribe:d};h.useEffect(function(){p.getSnapshot=c;p.setSnapshot=l;var a=f(b._source);if(!He(g,a)){a=c(b._source);He(n,a)||(l(a),a=Ig(w),e.mutableReadLanes|=a&e.pendingLanes);a=e.mutableReadLanes;e.entangledLanes|=a;for(var d=\ne.entanglements,h=a;0c?98:c,function(){a(!0)});gg(97\\x3c/script>\",a=a.removeChild(a.firstChild)):\"string\"===typeof d.is?a=g.createElement(c,{is:d.is}):(a=g.createElement(c),\"select\"===c&&(g=a,d.multiple?g.multiple=!0:d.size&&(g.size=d.size))):a=g.createElementNS(a,c);a[wf]=b;a[xf]=d;Bi(a,b,!1,!1);b.stateNode=a;g=wb(c,d);switch(c){case \"dialog\":G(\"cancel\",a);G(\"close\",a);\ne=d;break;case \"iframe\":case \"object\":case \"embed\":G(\"load\",a);e=d;break;case \"video\":case \"audio\":for(e=0;eJi&&(b.flags|=64,f=!0,Fi(d,!1),b.lanes=33554432)}else{if(!f)if(a=ih(g),null!==a){if(b.flags|=64,f=!0,c=a.updateQueue,null!==c&&(b.updateQueue=c,b.flags|=4),Fi(d,!0),null===d.tail&&\"hidden\"===d.tailMode&&!g.alternate&&!lh)return b=b.lastEffect=d.lastEffect,null!==b&&(b.nextEffect=null),null}else 2*O()-d.renderingStartTime>Ji&&1073741824!==c&&(b.flags|=\n64,f=!0,Fi(d,!1),b.lanes=33554432);d.isBackwards?(g.sibling=b.child,b.child=g):(c=d.last,null!==c?c.sibling=g:b.child=g,d.last=g)}return null!==d.tail?(c=d.tail,d.rendering=c,d.tail=c.sibling,d.lastEffect=b.lastEffect,d.renderingStartTime=O(),c.sibling=null,b=P.current,I(P,f?b&1|2:b&1),c):null;case 23:case 24:return Ki(),null!==a&&null!==a.memoizedState!==(null!==b.memoizedState)&&\"unstable-defer-without-hiding\"!==d.mode&&(b.flags|=4),null}throw Error(y(156,b.tag));}\nfunction Li(a){switch(a.tag){case 1:Ff(a.type)&&Gf();var b=a.flags;return b&4096?(a.flags=b&-4097|64,a):null;case 3:fh();H(N);H(M);uh();b=a.flags;if(0!==(b&64))throw Error(y(285));a.flags=b&-4097|64;return a;case 5:return hh(a),null;case 13:return H(P),b=a.flags,b&4096?(a.flags=b&-4097|64,a):null;case 19:return H(P),null;case 4:return fh(),null;case 10:return rg(a),null;case 23:case 24:return Ki(),null;default:return null}}\nfunction Mi(a,b){try{var c=\"\",d=b;do c+=Qa(d),d=d.return;while(d);var e=c}catch(f){e=\"\\nError generating stack: \"+f.message+\"\\n\"+f.stack}return{value:a,source:b,stack:e}}function Ni(a,b){try{console.error(b.value)}catch(c){setTimeout(function(){throw c;})}}var Oi=\"function\"===typeof WeakMap?WeakMap:Map;function Pi(a,b,c){c=zg(-1,c);c.tag=3;c.payload={element:null};var d=b.value;c.callback=function(){Qi||(Qi=!0,Ri=d);Ni(a,b)};return c}\nfunction Si(a,b,c){c=zg(-1,c);c.tag=3;var d=a.type.getDerivedStateFromError;if(\"function\"===typeof d){var e=b.value;c.payload=function(){Ni(a,b);return d(e)}}var f=a.stateNode;null!==f&&\"function\"===typeof f.componentDidCatch&&(c.callback=function(){\"function\"!==typeof d&&(null===Ti?Ti=new Set([this]):Ti.add(this),Ni(a,b));var c=b.stack;this.componentDidCatch(b.value,{componentStack:null!==c?c:\"\"})});return c}var Ui=\"function\"===typeof WeakSet?WeakSet:Set;\nfunction Vi(a){var b=a.ref;if(null!==b)if(\"function\"===typeof b)try{b(null)}catch(c){Wi(a,c)}else b.current=null}function Xi(a,b){switch(b.tag){case 0:case 11:case 15:case 22:return;case 1:if(b.flags&256&&null!==a){var c=a.memoizedProps,d=a.memoizedState;a=b.stateNode;b=a.getSnapshotBeforeUpdate(b.elementType===b.type?c:lg(b.type,c),d);a.__reactInternalSnapshotBeforeUpdate=b}return;case 3:b.flags&256&&qf(b.stateNode.containerInfo);return;case 5:case 6:case 4:case 17:return}throw Error(y(163));}\nfunction Yi(a,b,c){switch(c.tag){case 0:case 11:case 15:case 22:b=c.updateQueue;b=null!==b?b.lastEffect:null;if(null!==b){a=b=b.next;do{if(3===(a.tag&3)){var d=a.create;a.destroy=d()}a=a.next}while(a!==b)}b=c.updateQueue;b=null!==b?b.lastEffect:null;if(null!==b){a=b=b.next;do{var e=a;d=e.next;e=e.tag;0!==(e&4)&&0!==(e&1)&&(Zi(c,a),$i(c,a));a=d}while(a!==b)}return;case 1:a=c.stateNode;c.flags&4&&(null===b?a.componentDidMount():(d=c.elementType===c.type?b.memoizedProps:lg(c.type,b.memoizedProps),a.componentDidUpdate(d,\nb.memoizedState,a.__reactInternalSnapshotBeforeUpdate)));b=c.updateQueue;null!==b&&Eg(c,b,a);return;case 3:b=c.updateQueue;if(null!==b){a=null;if(null!==c.child)switch(c.child.tag){case 5:a=c.child.stateNode;break;case 1:a=c.child.stateNode}Eg(c,b,a)}return;case 5:a=c.stateNode;null===b&&c.flags&4&&mf(c.type,c.memoizedProps)&&a.focus();return;case 6:return;case 4:return;case 12:return;case 13:null===c.memoizedState&&(c=c.alternate,null!==c&&(c=c.memoizedState,null!==c&&(c=c.dehydrated,null!==c&&Cc(c))));\nreturn;case 19:case 17:case 20:case 21:case 23:case 24:return}throw Error(y(163));}\nfunction aj(a,b){for(var c=a;;){if(5===c.tag){var d=c.stateNode;if(b)d=d.style,\"function\"===typeof d.setProperty?d.setProperty(\"display\",\"none\",\"important\"):d.display=\"none\";else{d=c.stateNode;var e=c.memoizedProps.style;e=void 0!==e&&null!==e&&e.hasOwnProperty(\"display\")?e.display:null;d.style.display=sb(\"display\",e)}}else if(6===c.tag)c.stateNode.nodeValue=b?\"\":c.memoizedProps;else if((23!==c.tag&&24!==c.tag||null===c.memoizedState||c===a)&&null!==c.child){c.child.return=c;c=c.child;continue}if(c===\na)break;for(;null===c.sibling;){if(null===c.return||c.return===a)return;c=c.return}c.sibling.return=c.return;c=c.sibling}}\nfunction bj(a,b){if(Mf&&\"function\"===typeof Mf.onCommitFiberUnmount)try{Mf.onCommitFiberUnmount(Lf,b)}catch(f){}switch(b.tag){case 0:case 11:case 14:case 15:case 22:a=b.updateQueue;if(null!==a&&(a=a.lastEffect,null!==a)){var c=a=a.next;do{var d=c,e=d.destroy;d=d.tag;if(void 0!==e)if(0!==(d&4))Zi(b,c);else{d=b;try{e()}catch(f){Wi(d,f)}}c=c.next}while(c!==a)}break;case 1:Vi(b);a=b.stateNode;if(\"function\"===typeof a.componentWillUnmount)try{a.props=b.memoizedProps,a.state=b.memoizedState,a.componentWillUnmount()}catch(f){Wi(b,\nf)}break;case 5:Vi(b);break;case 4:cj(a,b)}}function dj(a){a.alternate=null;a.child=null;a.dependencies=null;a.firstEffect=null;a.lastEffect=null;a.memoizedProps=null;a.memoizedState=null;a.pendingProps=null;a.return=null;a.updateQueue=null}function ej(a){return 5===a.tag||3===a.tag||4===a.tag}\nfunction fj(a){a:{for(var b=a.return;null!==b;){if(ej(b))break a;b=b.return}throw Error(y(160));}var c=b;b=c.stateNode;switch(c.tag){case 5:var d=!1;break;case 3:b=b.containerInfo;d=!0;break;case 4:b=b.containerInfo;d=!0;break;default:throw Error(y(161));}c.flags&16&&(pb(b,\"\"),c.flags&=-17);a:b:for(c=a;;){for(;null===c.sibling;){if(null===c.return||ej(c.return)){c=null;break a}c=c.return}c.sibling.return=c.return;for(c=c.sibling;5!==c.tag&&6!==c.tag&&18!==c.tag;){if(c.flags&2)continue b;if(null===\nc.child||4===c.tag)continue b;else c.child.return=c,c=c.child}if(!(c.flags&2)){c=c.stateNode;break a}}d?gj(a,c,b):hj(a,c,b)}\nfunction gj(a,b,c){var d=a.tag,e=5===d||6===d;if(e)a=e?a.stateNode:a.stateNode.instance,b?8===c.nodeType?c.parentNode.insertBefore(a,b):c.insertBefore(a,b):(8===c.nodeType?(b=c.parentNode,b.insertBefore(a,c)):(b=c,b.appendChild(a)),c=c._reactRootContainer,null!==c&&void 0!==c||null!==b.onclick||(b.onclick=jf));else if(4!==d&&(a=a.child,null!==a))for(gj(a,b,c),a=a.sibling;null!==a;)gj(a,b,c),a=a.sibling}\nfunction hj(a,b,c){var d=a.tag,e=5===d||6===d;if(e)a=e?a.stateNode:a.stateNode.instance,b?c.insertBefore(a,b):c.appendChild(a);else if(4!==d&&(a=a.child,null!==a))for(hj(a,b,c),a=a.sibling;null!==a;)hj(a,b,c),a=a.sibling}\nfunction cj(a,b){for(var c=b,d=!1,e,f;;){if(!d){d=c.return;a:for(;;){if(null===d)throw Error(y(160));e=d.stateNode;switch(d.tag){case 5:f=!1;break a;case 3:e=e.containerInfo;f=!0;break a;case 4:e=e.containerInfo;f=!0;break a}d=d.return}d=!0}if(5===c.tag||6===c.tag){a:for(var g=a,h=c,k=h;;)if(bj(g,k),null!==k.child&&4!==k.tag)k.child.return=k,k=k.child;else{if(k===h)break a;for(;null===k.sibling;){if(null===k.return||k.return===h)break a;k=k.return}k.sibling.return=k.return;k=k.sibling}f?(g=e,h=c.stateNode,\n8===g.nodeType?g.parentNode.removeChild(h):g.removeChild(h)):e.removeChild(c.stateNode)}else if(4===c.tag){if(null!==c.child){e=c.stateNode.containerInfo;f=!0;c.child.return=c;c=c.child;continue}}else if(bj(a,c),null!==c.child){c.child.return=c;c=c.child;continue}if(c===b)break;for(;null===c.sibling;){if(null===c.return||c.return===b)return;c=c.return;4===c.tag&&(d=!1)}c.sibling.return=c.return;c=c.sibling}}\nfunction ij(a,b){switch(b.tag){case 0:case 11:case 14:case 15:case 22:var c=b.updateQueue;c=null!==c?c.lastEffect:null;if(null!==c){var d=c=c.next;do 3===(d.tag&3)&&(a=d.destroy,d.destroy=void 0,void 0!==a&&a()),d=d.next;while(d!==c)}return;case 1:return;case 5:c=b.stateNode;if(null!=c){d=b.memoizedProps;var e=null!==a?a.memoizedProps:d;a=b.type;var f=b.updateQueue;b.updateQueue=null;if(null!==f){c[xf]=d;\"input\"===a&&\"radio\"===d.type&&null!=d.name&&$a(c,d);wb(a,e);b=wb(a,d);for(e=0;ee&&(e=g);c&=~f}c=e;c=O()-c;c=(120>c?120:480>c?480:1080>c?1080:1920>c?1920:3E3>c?3E3:4320>\nc?4320:1960*nj(c/1960))-c;if(10 component higher in the tree to provide a loading indicator or placeholder to display.\")}5!==V&&(V=2);k=Mi(k,h);p=\ng;do{switch(p.tag){case 3:f=k;p.flags|=4096;b&=-b;p.lanes|=b;var J=Pi(p,f,b);Bg(p,J);break a;case 1:f=k;var K=p.type,Q=p.stateNode;if(0===(p.flags&64)&&(\"function\"===typeof K.getDerivedStateFromError||null!==Q&&\"function\"===typeof Q.componentDidCatch&&(null===Ti||!Ti.has(Q)))){p.flags|=4096;b&=-b;p.lanes|=b;var L=Si(p,f,b);Bg(p,L);break a}}p=p.return}while(null!==p)}Zj(c)}catch(va){b=va;Y===c&&null!==c&&(Y=c=c.return);continue}break}while(1)}\nfunction Pj(){var a=oj.current;oj.current=Gh;return null===a?Gh:a}function Tj(a,b){var c=X;X|=16;var d=Pj();U===a&&W===b||Qj(a,b);do try{ak();break}catch(e){Sj(a,e)}while(1);qg();X=c;oj.current=d;if(null!==Y)throw Error(y(261));U=null;W=0;return V}function ak(){for(;null!==Y;)bk(Y)}function Rj(){for(;null!==Y&&!Qf();)bk(Y)}function bk(a){var b=ck(a.alternate,a,qj);a.memoizedProps=a.pendingProps;null===b?Zj(a):Y=b;pj.current=null}\nfunction Zj(a){var b=a;do{var c=b.alternate;a=b.return;if(0===(b.flags&2048)){c=Gi(c,b,qj);if(null!==c){Y=c;return}c=b;if(24!==c.tag&&23!==c.tag||null===c.memoizedState||0!==(qj&1073741824)||0===(c.mode&4)){for(var d=0,e=c.child;null!==e;)d|=e.lanes|e.childLanes,e=e.sibling;c.childLanes=d}null!==a&&0===(a.flags&2048)&&(null===a.firstEffect&&(a.firstEffect=b.firstEffect),null!==b.lastEffect&&(null!==a.lastEffect&&(a.lastEffect.nextEffect=b.firstEffect),a.lastEffect=b.lastEffect),1g&&(h=g,g=J,J=h),h=Le(t,J),f=Le(t,g),h&&f&&(1!==v.rangeCount||v.anchorNode!==h.node||v.anchorOffset!==h.offset||v.focusNode!==f.node||v.focusOffset!==f.offset)&&(q=q.createRange(),q.setStart(h.node,h.offset),v.removeAllRanges(),J>g?(v.addRange(q),v.extend(f.node,f.offset)):(q.setEnd(f.node,f.offset),v.addRange(q))))));q=[];for(v=t;v=v.parentNode;)1===v.nodeType&&q.push({element:v,left:v.scrollLeft,top:v.scrollTop});\"function\"===typeof t.focus&&t.focus();for(t=\n0;tO()-jj?Qj(a,0):uj|=c);Mj(a,b)}function lj(a,b){var c=a.stateNode;null!==c&&c.delete(b);b=0;0===b&&(b=a.mode,0===(b&2)?b=1:0===(b&4)?b=99===eg()?1:2:(0===Gj&&(Gj=tj),b=Yc(62914560&~Gj),0===b&&(b=4194304)));c=Hg();a=Kj(a,b);null!==a&&($c(a,b,c),Mj(a,c))}var ck;\nck=function(a,b,c){var d=b.lanes;if(null!==a)if(a.memoizedProps!==b.pendingProps||N.current)ug=!0;else if(0!==(c&d))ug=0!==(a.flags&16384)?!0:!1;else{ug=!1;switch(b.tag){case 3:ri(b);sh();break;case 5:gh(b);break;case 1:Ff(b.type)&&Jf(b);break;case 4:eh(b,b.stateNode.containerInfo);break;case 10:d=b.memoizedProps.value;var e=b.type._context;I(mg,e._currentValue);e._currentValue=d;break;case 13:if(null!==b.memoizedState){if(0!==(c&b.child.childLanes))return ti(a,b,c);I(P,P.current&1);b=hi(a,b,c);return null!==\nb?b.sibling:null}I(P,P.current&1);break;case 19:d=0!==(c&b.childLanes);if(0!==(a.flags&64)){if(d)return Ai(a,b,c);b.flags|=64}e=b.memoizedState;null!==e&&(e.rendering=null,e.tail=null,e.lastEffect=null);I(P,P.current);if(d)break;else return null;case 23:case 24:return b.lanes=0,mi(a,b,c)}return hi(a,b,c)}else ug=!1;b.lanes=0;switch(b.tag){case 2:d=b.type;null!==a&&(a.alternate=null,b.alternate=null,b.flags|=2);a=b.pendingProps;e=Ef(b,M.current);tg(b,c);e=Ch(null,b,d,a,e,c);b.flags|=1;if(\"object\"===\ntypeof e&&null!==e&&\"function\"===typeof e.render&&void 0===e.$$typeof){b.tag=1;b.memoizedState=null;b.updateQueue=null;if(Ff(d)){var f=!0;Jf(b)}else f=!1;b.memoizedState=null!==e.state&&void 0!==e.state?e.state:null;xg(b);var g=d.getDerivedStateFromProps;\"function\"===typeof g&&Gg(b,d,g,a);e.updater=Kg;b.stateNode=e;e._reactInternals=b;Og(b,d,a,c);b=qi(null,b,d,!0,f,c)}else b.tag=0,fi(null,b,e,c),b=b.child;return b;case 16:e=b.elementType;a:{null!==a&&(a.alternate=null,b.alternate=null,b.flags|=2);\na=b.pendingProps;f=e._init;e=f(e._payload);b.type=e;f=b.tag=hk(e);a=lg(e,a);switch(f){case 0:b=li(null,b,e,a,c);break a;case 1:b=pi(null,b,e,a,c);break a;case 11:b=gi(null,b,e,a,c);break a;case 14:b=ii(null,b,e,lg(e.type,a),d,c);break a}throw Error(y(306,e,\"\"));}return b;case 0:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:lg(d,e),li(a,b,d,e,c);case 1:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:lg(d,e),pi(a,b,d,e,c);case 3:ri(b);d=b.updateQueue;if(null===a||null===d)throw Error(y(282));\nd=b.pendingProps;e=b.memoizedState;e=null!==e?e.element:null;yg(a,b);Cg(b,d,null,c);d=b.memoizedState.element;if(d===e)sh(),b=hi(a,b,c);else{e=b.stateNode;if(f=e.hydrate)kh=rf(b.stateNode.containerInfo.firstChild),jh=b,f=lh=!0;if(f){a=e.mutableSourceEagerHydrationData;if(null!=a)for(e=0;e= 0; i--) {\n var part = fromParts[i];\n\n if (part === '.') {\n spliceOne(fromParts, i);\n } else if (part === '..') {\n spliceOne(fromParts, i);\n up++;\n } else if (up) {\n spliceOne(fromParts, i);\n up--;\n }\n }\n\n if (!mustEndAbs) for (; up--; up) fromParts.unshift('..');\n\n if (\n mustEndAbs &&\n fromParts[0] !== '' &&\n (!fromParts[0] || !isAbsolute(fromParts[0]))\n )\n fromParts.unshift('');\n\n var result = fromParts.join('/');\n\n if (hasTrailingSlash && result.substr(-1) !== '/') result += '/';\n\n return result;\n}\n\nexport default resolvePathname;\n","var isProduction = process.env.NODE_ENV === 'production';\nvar prefix = 'Invariant failed';\nfunction invariant(condition, message) {\n if (condition) {\n return;\n }\n if (isProduction) {\n throw new Error(prefix);\n }\n throw new Error(prefix + \": \" + (message || ''));\n}\n\nexport default invariant;\n","import _extends from '@babel/runtime/helpers/esm/extends';\nimport resolvePathname from 'resolve-pathname';\nimport valueEqual from 'value-equal';\nimport warning from 'tiny-warning';\nimport invariant from 'tiny-invariant';\n\nfunction addLeadingSlash(path) {\n return path.charAt(0) === '/' ? path : '/' + path;\n}\nfunction stripLeadingSlash(path) {\n return path.charAt(0) === '/' ? path.substr(1) : path;\n}\nfunction hasBasename(path, prefix) {\n return path.toLowerCase().indexOf(prefix.toLowerCase()) === 0 && '/?#'.indexOf(path.charAt(prefix.length)) !== -1;\n}\nfunction stripBasename(path, prefix) {\n return hasBasename(path, prefix) ? path.substr(prefix.length) : path;\n}\nfunction stripTrailingSlash(path) {\n return path.charAt(path.length - 1) === '/' ? path.slice(0, -1) : path;\n}\nfunction parsePath(path) {\n var pathname = path || '/';\n var search = '';\n var hash = '';\n var hashIndex = pathname.indexOf('#');\n\n if (hashIndex !== -1) {\n hash = pathname.substr(hashIndex);\n pathname = pathname.substr(0, hashIndex);\n }\n\n var searchIndex = pathname.indexOf('?');\n\n if (searchIndex !== -1) {\n search = pathname.substr(searchIndex);\n pathname = pathname.substr(0, searchIndex);\n }\n\n return {\n pathname: pathname,\n search: search === '?' ? '' : search,\n hash: hash === '#' ? '' : hash\n };\n}\nfunction createPath(location) {\n var pathname = location.pathname,\n search = location.search,\n hash = location.hash;\n var path = pathname || '/';\n if (search && search !== '?') path += search.charAt(0) === '?' ? search : \"?\" + search;\n if (hash && hash !== '#') path += hash.charAt(0) === '#' ? hash : \"#\" + hash;\n return path;\n}\n\nfunction createLocation(path, state, key, currentLocation) {\n var location;\n\n if (typeof path === 'string') {\n // Two-arg form: push(path, state)\n location = parsePath(path);\n location.state = state;\n } else {\n // One-arg form: push(location)\n location = _extends({}, path);\n if (location.pathname === undefined) location.pathname = '';\n\n if (location.search) {\n if (location.search.charAt(0) !== '?') location.search = '?' + location.search;\n } else {\n location.search = '';\n }\n\n if (location.hash) {\n if (location.hash.charAt(0) !== '#') location.hash = '#' + location.hash;\n } else {\n location.hash = '';\n }\n\n if (state !== undefined && location.state === undefined) location.state = state;\n }\n\n try {\n location.pathname = decodeURI(location.pathname);\n } catch (e) {\n if (e instanceof URIError) {\n throw new URIError('Pathname \"' + location.pathname + '\" could not be decoded. ' + 'This is likely caused by an invalid percent-encoding.');\n } else {\n throw e;\n }\n }\n\n if (key) location.key = key;\n\n if (currentLocation) {\n // Resolve incomplete/relative pathname relative to current location.\n if (!location.pathname) {\n location.pathname = currentLocation.pathname;\n } else if (location.pathname.charAt(0) !== '/') {\n location.pathname = resolvePathname(location.pathname, currentLocation.pathname);\n }\n } else {\n // When there is no prior location and pathname is empty, set it to /\n if (!location.pathname) {\n location.pathname = '/';\n }\n }\n\n return location;\n}\nfunction locationsAreEqual(a, b) {\n return a.pathname === b.pathname && a.search === b.search && a.hash === b.hash && a.key === b.key && valueEqual(a.state, b.state);\n}\n\nfunction createTransitionManager() {\n var prompt = null;\n\n function setPrompt(nextPrompt) {\n process.env.NODE_ENV !== \"production\" ? warning(prompt == null, 'A history supports only one prompt at a time') : void 0;\n prompt = nextPrompt;\n return function () {\n if (prompt === nextPrompt) prompt = null;\n };\n }\n\n function confirmTransitionTo(location, action, getUserConfirmation, callback) {\n // TODO: If another transition starts while we're still confirming\n // the previous one, we may end up in a weird state. Figure out the\n // best way to handle this.\n if (prompt != null) {\n var result = typeof prompt === 'function' ? prompt(location, action) : prompt;\n\n if (typeof result === 'string') {\n if (typeof getUserConfirmation === 'function') {\n getUserConfirmation(result, callback);\n } else {\n process.env.NODE_ENV !== \"production\" ? warning(false, 'A history needs a getUserConfirmation function in order to use a prompt message') : void 0;\n callback(true);\n }\n } else {\n // Return false from a transition hook to cancel the transition.\n callback(result !== false);\n }\n } else {\n callback(true);\n }\n }\n\n var listeners = [];\n\n function appendListener(fn) {\n var isActive = true;\n\n function listener() {\n if (isActive) fn.apply(void 0, arguments);\n }\n\n listeners.push(listener);\n return function () {\n isActive = false;\n listeners = listeners.filter(function (item) {\n return item !== listener;\n });\n };\n }\n\n function notifyListeners() {\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n listeners.forEach(function (listener) {\n return listener.apply(void 0, args);\n });\n }\n\n return {\n setPrompt: setPrompt,\n confirmTransitionTo: confirmTransitionTo,\n appendListener: appendListener,\n notifyListeners: notifyListeners\n };\n}\n\nvar canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);\nfunction getConfirmation(message, callback) {\n callback(window.confirm(message)); // eslint-disable-line no-alert\n}\n/**\n * Returns true if the HTML5 history API is supported. Taken from Modernizr.\n *\n * https://github.com/Modernizr/Modernizr/blob/master/LICENSE\n * https://github.com/Modernizr/Modernizr/blob/master/feature-detects/history.js\n * changed to avoid false negatives for Windows Phones: https://github.com/reactjs/react-router/issues/586\n */\n\nfunction supportsHistory() {\n var ua = window.navigator.userAgent;\n if ((ua.indexOf('Android 2.') !== -1 || ua.indexOf('Android 4.0') !== -1) && ua.indexOf('Mobile Safari') !== -1 && ua.indexOf('Chrome') === -1 && ua.indexOf('Windows Phone') === -1) return false;\n return window.history && 'pushState' in window.history;\n}\n/**\n * Returns true if browser fires popstate on hash change.\n * IE10 and IE11 do not.\n */\n\nfunction supportsPopStateOnHashChange() {\n return window.navigator.userAgent.indexOf('Trident') === -1;\n}\n/**\n * Returns false if using go(n) with hash history causes a full page reload.\n */\n\nfunction supportsGoWithoutReloadUsingHash() {\n return window.navigator.userAgent.indexOf('Firefox') === -1;\n}\n/**\n * Returns true if a given popstate event is an extraneous WebKit event.\n * Accounts for the fact that Chrome on iOS fires real popstate events\n * containing undefined state when pressing the back button.\n */\n\nfunction isExtraneousPopstateEvent(event) {\n return event.state === undefined && navigator.userAgent.indexOf('CriOS') === -1;\n}\n\nvar PopStateEvent = 'popstate';\nvar HashChangeEvent = 'hashchange';\n\nfunction getHistoryState() {\n try {\n return window.history.state || {};\n } catch (e) {\n // IE 11 sometimes throws when accessing window.history.state\n // See https://github.com/ReactTraining/history/pull/289\n return {};\n }\n}\n/**\n * Creates a history object that uses the HTML5 history API including\n * pushState, replaceState, and the popstate event.\n */\n\n\nfunction createBrowserHistory(props) {\n if (props === void 0) {\n props = {};\n }\n\n !canUseDOM ? process.env.NODE_ENV !== \"production\" ? invariant(false, 'Browser history needs a DOM') : invariant(false) : void 0;\n var globalHistory = window.history;\n var canUseHistory = supportsHistory();\n var needsHashChangeListener = !supportsPopStateOnHashChange();\n var _props = props,\n _props$forceRefresh = _props.forceRefresh,\n forceRefresh = _props$forceRefresh === void 0 ? false : _props$forceRefresh,\n _props$getUserConfirm = _props.getUserConfirmation,\n getUserConfirmation = _props$getUserConfirm === void 0 ? getConfirmation : _props$getUserConfirm,\n _props$keyLength = _props.keyLength,\n keyLength = _props$keyLength === void 0 ? 6 : _props$keyLength;\n var basename = props.basename ? stripTrailingSlash(addLeadingSlash(props.basename)) : '';\n\n function getDOMLocation(historyState) {\n var _ref = historyState || {},\n key = _ref.key,\n state = _ref.state;\n\n var _window$location = window.location,\n pathname = _window$location.pathname,\n search = _window$location.search,\n hash = _window$location.hash;\n var path = pathname + search + hash;\n process.env.NODE_ENV !== \"production\" ? warning(!basename || hasBasename(path, basename), 'You are attempting to use a basename on a page whose URL path does not begin ' + 'with the basename. Expected path \"' + path + '\" to begin with \"' + basename + '\".') : void 0;\n if (basename) path = stripBasename(path, basename);\n return createLocation(path, state, key);\n }\n\n function createKey() {\n return Math.random().toString(36).substr(2, keyLength);\n }\n\n var transitionManager = createTransitionManager();\n\n function setState(nextState) {\n _extends(history, nextState);\n\n history.length = globalHistory.length;\n transitionManager.notifyListeners(history.location, history.action);\n }\n\n function handlePopState(event) {\n // Ignore extraneous popstate events in WebKit.\n if (isExtraneousPopstateEvent(event)) return;\n handlePop(getDOMLocation(event.state));\n }\n\n function handleHashChange() {\n handlePop(getDOMLocation(getHistoryState()));\n }\n\n var forceNextPop = false;\n\n function handlePop(location) {\n if (forceNextPop) {\n forceNextPop = false;\n setState();\n } else {\n var action = 'POP';\n transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {\n if (ok) {\n setState({\n action: action,\n location: location\n });\n } else {\n revertPop(location);\n }\n });\n }\n }\n\n function revertPop(fromLocation) {\n var toLocation = history.location; // TODO: We could probably make this more reliable by\n // keeping a list of keys we've seen in sessionStorage.\n // Instead, we just default to 0 for keys we don't know.\n\n var toIndex = allKeys.indexOf(toLocation.key);\n if (toIndex === -1) toIndex = 0;\n var fromIndex = allKeys.indexOf(fromLocation.key);\n if (fromIndex === -1) fromIndex = 0;\n var delta = toIndex - fromIndex;\n\n if (delta) {\n forceNextPop = true;\n go(delta);\n }\n }\n\n var initialLocation = getDOMLocation(getHistoryState());\n var allKeys = [initialLocation.key]; // Public interface\n\n function createHref(location) {\n return basename + createPath(location);\n }\n\n function push(path, state) {\n process.env.NODE_ENV !== \"production\" ? warning(!(typeof path === 'object' && path.state !== undefined && state !== undefined), 'You should avoid providing a 2nd state argument to push when the 1st ' + 'argument is a location-like object that already has state; it is ignored') : void 0;\n var action = 'PUSH';\n var location = createLocation(path, state, createKey(), history.location);\n transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {\n if (!ok) return;\n var href = createHref(location);\n var key = location.key,\n state = location.state;\n\n if (canUseHistory) {\n globalHistory.pushState({\n key: key,\n state: state\n }, null, href);\n\n if (forceRefresh) {\n window.location.href = href;\n } else {\n var prevIndex = allKeys.indexOf(history.location.key);\n var nextKeys = allKeys.slice(0, prevIndex + 1);\n nextKeys.push(location.key);\n allKeys = nextKeys;\n setState({\n action: action,\n location: location\n });\n }\n } else {\n process.env.NODE_ENV !== \"production\" ? warning(state === undefined, 'Browser history cannot push state in browsers that do not support HTML5 history') : void 0;\n window.location.href = href;\n }\n });\n }\n\n function replace(path, state) {\n process.env.NODE_ENV !== \"production\" ? warning(!(typeof path === 'object' && path.state !== undefined && state !== undefined), 'You should avoid providing a 2nd state argument to replace when the 1st ' + 'argument is a location-like object that already has state; it is ignored') : void 0;\n var action = 'REPLACE';\n var location = createLocation(path, state, createKey(), history.location);\n transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {\n if (!ok) return;\n var href = createHref(location);\n var key = location.key,\n state = location.state;\n\n if (canUseHistory) {\n globalHistory.replaceState({\n key: key,\n state: state\n }, null, href);\n\n if (forceRefresh) {\n window.location.replace(href);\n } else {\n var prevIndex = allKeys.indexOf(history.location.key);\n if (prevIndex !== -1) allKeys[prevIndex] = location.key;\n setState({\n action: action,\n location: location\n });\n }\n } else {\n process.env.NODE_ENV !== \"production\" ? warning(state === undefined, 'Browser history cannot replace state in browsers that do not support HTML5 history') : void 0;\n window.location.replace(href);\n }\n });\n }\n\n function go(n) {\n globalHistory.go(n);\n }\n\n function goBack() {\n go(-1);\n }\n\n function goForward() {\n go(1);\n }\n\n var listenerCount = 0;\n\n function checkDOMListeners(delta) {\n listenerCount += delta;\n\n if (listenerCount === 1 && delta === 1) {\n window.addEventListener(PopStateEvent, handlePopState);\n if (needsHashChangeListener) window.addEventListener(HashChangeEvent, handleHashChange);\n } else if (listenerCount === 0) {\n window.removeEventListener(PopStateEvent, handlePopState);\n if (needsHashChangeListener) window.removeEventListener(HashChangeEvent, handleHashChange);\n }\n }\n\n var isBlocked = false;\n\n function block(prompt) {\n if (prompt === void 0) {\n prompt = false;\n }\n\n var unblock = transitionManager.setPrompt(prompt);\n\n if (!isBlocked) {\n checkDOMListeners(1);\n isBlocked = true;\n }\n\n return function () {\n if (isBlocked) {\n isBlocked = false;\n checkDOMListeners(-1);\n }\n\n return unblock();\n };\n }\n\n function listen(listener) {\n var unlisten = transitionManager.appendListener(listener);\n checkDOMListeners(1);\n return function () {\n checkDOMListeners(-1);\n unlisten();\n };\n }\n\n var history = {\n length: globalHistory.length,\n action: 'POP',\n location: initialLocation,\n createHref: createHref,\n push: push,\n replace: replace,\n go: go,\n goBack: goBack,\n goForward: goForward,\n block: block,\n listen: listen\n };\n return history;\n}\n\nvar HashChangeEvent$1 = 'hashchange';\nvar HashPathCoders = {\n hashbang: {\n encodePath: function encodePath(path) {\n return path.charAt(0) === '!' ? path : '!/' + stripLeadingSlash(path);\n },\n decodePath: function decodePath(path) {\n return path.charAt(0) === '!' ? path.substr(1) : path;\n }\n },\n noslash: {\n encodePath: stripLeadingSlash,\n decodePath: addLeadingSlash\n },\n slash: {\n encodePath: addLeadingSlash,\n decodePath: addLeadingSlash\n }\n};\n\nfunction stripHash(url) {\n var hashIndex = url.indexOf('#');\n return hashIndex === -1 ? url : url.slice(0, hashIndex);\n}\n\nfunction getHashPath() {\n // We can't use window.location.hash here because it's not\n // consistent across browsers - Firefox will pre-decode it!\n var href = window.location.href;\n var hashIndex = href.indexOf('#');\n return hashIndex === -1 ? '' : href.substring(hashIndex + 1);\n}\n\nfunction pushHashPath(path) {\n window.location.hash = path;\n}\n\nfunction replaceHashPath(path) {\n window.location.replace(stripHash(window.location.href) + '#' + path);\n}\n\nfunction createHashHistory(props) {\n if (props === void 0) {\n props = {};\n }\n\n !canUseDOM ? process.env.NODE_ENV !== \"production\" ? invariant(false, 'Hash history needs a DOM') : invariant(false) : void 0;\n var globalHistory = window.history;\n var canGoWithoutReload = supportsGoWithoutReloadUsingHash();\n var _props = props,\n _props$getUserConfirm = _props.getUserConfirmation,\n getUserConfirmation = _props$getUserConfirm === void 0 ? getConfirmation : _props$getUserConfirm,\n _props$hashType = _props.hashType,\n hashType = _props$hashType === void 0 ? 'slash' : _props$hashType;\n var basename = props.basename ? stripTrailingSlash(addLeadingSlash(props.basename)) : '';\n var _HashPathCoders$hashT = HashPathCoders[hashType],\n encodePath = _HashPathCoders$hashT.encodePath,\n decodePath = _HashPathCoders$hashT.decodePath;\n\n function getDOMLocation() {\n var path = decodePath(getHashPath());\n process.env.NODE_ENV !== \"production\" ? warning(!basename || hasBasename(path, basename), 'You are attempting to use a basename on a page whose URL path does not begin ' + 'with the basename. Expected path \"' + path + '\" to begin with \"' + basename + '\".') : void 0;\n if (basename) path = stripBasename(path, basename);\n return createLocation(path);\n }\n\n var transitionManager = createTransitionManager();\n\n function setState(nextState) {\n _extends(history, nextState);\n\n history.length = globalHistory.length;\n transitionManager.notifyListeners(history.location, history.action);\n }\n\n var forceNextPop = false;\n var ignorePath = null;\n\n function locationsAreEqual$$1(a, b) {\n return a.pathname === b.pathname && a.search === b.search && a.hash === b.hash;\n }\n\n function handleHashChange() {\n var path = getHashPath();\n var encodedPath = encodePath(path);\n\n if (path !== encodedPath) {\n // Ensure we always have a properly-encoded hash.\n replaceHashPath(encodedPath);\n } else {\n var location = getDOMLocation();\n var prevLocation = history.location;\n if (!forceNextPop && locationsAreEqual$$1(prevLocation, location)) return; // A hashchange doesn't always == location change.\n\n if (ignorePath === createPath(location)) return; // Ignore this change; we already setState in push/replace.\n\n ignorePath = null;\n handlePop(location);\n }\n }\n\n function handlePop(location) {\n if (forceNextPop) {\n forceNextPop = false;\n setState();\n } else {\n var action = 'POP';\n transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {\n if (ok) {\n setState({\n action: action,\n location: location\n });\n } else {\n revertPop(location);\n }\n });\n }\n }\n\n function revertPop(fromLocation) {\n var toLocation = history.location; // TODO: We could probably make this more reliable by\n // keeping a list of paths we've seen in sessionStorage.\n // Instead, we just default to 0 for paths we don't know.\n\n var toIndex = allPaths.lastIndexOf(createPath(toLocation));\n if (toIndex === -1) toIndex = 0;\n var fromIndex = allPaths.lastIndexOf(createPath(fromLocation));\n if (fromIndex === -1) fromIndex = 0;\n var delta = toIndex - fromIndex;\n\n if (delta) {\n forceNextPop = true;\n go(delta);\n }\n } // Ensure the hash is encoded properly before doing anything else.\n\n\n var path = getHashPath();\n var encodedPath = encodePath(path);\n if (path !== encodedPath) replaceHashPath(encodedPath);\n var initialLocation = getDOMLocation();\n var allPaths = [createPath(initialLocation)]; // Public interface\n\n function createHref(location) {\n var baseTag = document.querySelector('base');\n var href = '';\n\n if (baseTag && baseTag.getAttribute('href')) {\n href = stripHash(window.location.href);\n }\n\n return href + '#' + encodePath(basename + createPath(location));\n }\n\n function push(path, state) {\n process.env.NODE_ENV !== \"production\" ? warning(state === undefined, 'Hash history cannot push state; it is ignored') : void 0;\n var action = 'PUSH';\n var location = createLocation(path, undefined, undefined, history.location);\n transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {\n if (!ok) return;\n var path = createPath(location);\n var encodedPath = encodePath(basename + path);\n var hashChanged = getHashPath() !== encodedPath;\n\n if (hashChanged) {\n // We cannot tell if a hashchange was caused by a PUSH, so we'd\n // rather setState here and ignore the hashchange. The caveat here\n // is that other hash histories in the page will consider it a POP.\n ignorePath = path;\n pushHashPath(encodedPath);\n var prevIndex = allPaths.lastIndexOf(createPath(history.location));\n var nextPaths = allPaths.slice(0, prevIndex + 1);\n nextPaths.push(path);\n allPaths = nextPaths;\n setState({\n action: action,\n location: location\n });\n } else {\n process.env.NODE_ENV !== \"production\" ? warning(false, 'Hash history cannot PUSH the same path; a new entry will not be added to the history stack') : void 0;\n setState();\n }\n });\n }\n\n function replace(path, state) {\n process.env.NODE_ENV !== \"production\" ? warning(state === undefined, 'Hash history cannot replace state; it is ignored') : void 0;\n var action = 'REPLACE';\n var location = createLocation(path, undefined, undefined, history.location);\n transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {\n if (!ok) return;\n var path = createPath(location);\n var encodedPath = encodePath(basename + path);\n var hashChanged = getHashPath() !== encodedPath;\n\n if (hashChanged) {\n // We cannot tell if a hashchange was caused by a REPLACE, so we'd\n // rather setState here and ignore the hashchange. The caveat here\n // is that other hash histories in the page will consider it a POP.\n ignorePath = path;\n replaceHashPath(encodedPath);\n }\n\n var prevIndex = allPaths.indexOf(createPath(history.location));\n if (prevIndex !== -1) allPaths[prevIndex] = path;\n setState({\n action: action,\n location: location\n });\n });\n }\n\n function go(n) {\n process.env.NODE_ENV !== \"production\" ? warning(canGoWithoutReload, 'Hash history go(n) causes a full page reload in this browser') : void 0;\n globalHistory.go(n);\n }\n\n function goBack() {\n go(-1);\n }\n\n function goForward() {\n go(1);\n }\n\n var listenerCount = 0;\n\n function checkDOMListeners(delta) {\n listenerCount += delta;\n\n if (listenerCount === 1 && delta === 1) {\n window.addEventListener(HashChangeEvent$1, handleHashChange);\n } else if (listenerCount === 0) {\n window.removeEventListener(HashChangeEvent$1, handleHashChange);\n }\n }\n\n var isBlocked = false;\n\n function block(prompt) {\n if (prompt === void 0) {\n prompt = false;\n }\n\n var unblock = transitionManager.setPrompt(prompt);\n\n if (!isBlocked) {\n checkDOMListeners(1);\n isBlocked = true;\n }\n\n return function () {\n if (isBlocked) {\n isBlocked = false;\n checkDOMListeners(-1);\n }\n\n return unblock();\n };\n }\n\n function listen(listener) {\n var unlisten = transitionManager.appendListener(listener);\n checkDOMListeners(1);\n return function () {\n checkDOMListeners(-1);\n unlisten();\n };\n }\n\n var history = {\n length: globalHistory.length,\n action: 'POP',\n location: initialLocation,\n createHref: createHref,\n push: push,\n replace: replace,\n go: go,\n goBack: goBack,\n goForward: goForward,\n block: block,\n listen: listen\n };\n return history;\n}\n\nfunction clamp(n, lowerBound, upperBound) {\n return Math.min(Math.max(n, lowerBound), upperBound);\n}\n/**\n * Creates a history object that stores locations in memory.\n */\n\n\nfunction createMemoryHistory(props) {\n if (props === void 0) {\n props = {};\n }\n\n var _props = props,\n getUserConfirmation = _props.getUserConfirmation,\n _props$initialEntries = _props.initialEntries,\n initialEntries = _props$initialEntries === void 0 ? ['/'] : _props$initialEntries,\n _props$initialIndex = _props.initialIndex,\n initialIndex = _props$initialIndex === void 0 ? 0 : _props$initialIndex,\n _props$keyLength = _props.keyLength,\n keyLength = _props$keyLength === void 0 ? 6 : _props$keyLength;\n var transitionManager = createTransitionManager();\n\n function setState(nextState) {\n _extends(history, nextState);\n\n history.length = history.entries.length;\n transitionManager.notifyListeners(history.location, history.action);\n }\n\n function createKey() {\n return Math.random().toString(36).substr(2, keyLength);\n }\n\n var index = clamp(initialIndex, 0, initialEntries.length - 1);\n var entries = initialEntries.map(function (entry) {\n return typeof entry === 'string' ? createLocation(entry, undefined, createKey()) : createLocation(entry, undefined, entry.key || createKey());\n }); // Public interface\n\n var createHref = createPath;\n\n function push(path, state) {\n process.env.NODE_ENV !== \"production\" ? warning(!(typeof path === 'object' && path.state !== undefined && state !== undefined), 'You should avoid providing a 2nd state argument to push when the 1st ' + 'argument is a location-like object that already has state; it is ignored') : void 0;\n var action = 'PUSH';\n var location = createLocation(path, state, createKey(), history.location);\n transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {\n if (!ok) return;\n var prevIndex = history.index;\n var nextIndex = prevIndex + 1;\n var nextEntries = history.entries.slice(0);\n\n if (nextEntries.length > nextIndex) {\n nextEntries.splice(nextIndex, nextEntries.length - nextIndex, location);\n } else {\n nextEntries.push(location);\n }\n\n setState({\n action: action,\n location: location,\n index: nextIndex,\n entries: nextEntries\n });\n });\n }\n\n function replace(path, state) {\n process.env.NODE_ENV !== \"production\" ? warning(!(typeof path === 'object' && path.state !== undefined && state !== undefined), 'You should avoid providing a 2nd state argument to replace when the 1st ' + 'argument is a location-like object that already has state; it is ignored') : void 0;\n var action = 'REPLACE';\n var location = createLocation(path, state, createKey(), history.location);\n transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {\n if (!ok) return;\n history.entries[history.index] = location;\n setState({\n action: action,\n location: location\n });\n });\n }\n\n function go(n) {\n var nextIndex = clamp(history.index + n, 0, history.entries.length - 1);\n var action = 'POP';\n var location = history.entries[nextIndex];\n transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {\n if (ok) {\n setState({\n action: action,\n location: location,\n index: nextIndex\n });\n } else {\n // Mimic the behavior of DOM histories by\n // causing a render after a cancelled POP.\n setState();\n }\n });\n }\n\n function goBack() {\n go(-1);\n }\n\n function goForward() {\n go(1);\n }\n\n function canGo(n) {\n var nextIndex = history.index + n;\n return nextIndex >= 0 && nextIndex < history.entries.length;\n }\n\n function block(prompt) {\n if (prompt === void 0) {\n prompt = false;\n }\n\n return transitionManager.setPrompt(prompt);\n }\n\n function listen(listener) {\n return transitionManager.appendListener(listener);\n }\n\n var history = {\n length: entries.length,\n action: 'POP',\n location: entries[index],\n index: index,\n entries: entries,\n createHref: createHref,\n push: push,\n replace: replace,\n go: go,\n goBack: goBack,\n goForward: goForward,\n canGo: canGo,\n block: block,\n listen: listen\n };\n return history;\n}\n\nexport { createBrowserHistory, createHashHistory, createMemoryHistory, createLocation, locationsAreEqual, parsePath, createPath };\n","import React, { Component } from 'react';\nimport _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';\nimport PropTypes from 'prop-types';\nimport warning from 'tiny-warning';\n\nvar MAX_SIGNED_31_BIT_INT = 1073741823;\nvar commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : {};\n\nfunction getUniqueId() {\n var key = '__global_unique_id__';\n return commonjsGlobal[key] = (commonjsGlobal[key] || 0) + 1;\n}\n\nfunction objectIs(x, y) {\n if (x === y) {\n return x !== 0 || 1 / x === 1 / y;\n } else {\n return x !== x && y !== y;\n }\n}\n\nfunction createEventEmitter(value) {\n var handlers = [];\n return {\n on: function on(handler) {\n handlers.push(handler);\n },\n off: function off(handler) {\n handlers = handlers.filter(function (h) {\n return h !== handler;\n });\n },\n get: function get() {\n return value;\n },\n set: function set(newValue, changedBits) {\n value = newValue;\n handlers.forEach(function (handler) {\n return handler(value, changedBits);\n });\n }\n };\n}\n\nfunction onlyChild(children) {\n return Array.isArray(children) ? children[0] : children;\n}\n\nfunction createReactContext(defaultValue, calculateChangedBits) {\n var _Provider$childContex, _Consumer$contextType;\n\n var contextProp = '__create-react-context-' + getUniqueId() + '__';\n\n var Provider = /*#__PURE__*/function (_Component) {\n _inheritsLoose(Provider, _Component);\n\n function Provider() {\n var _this;\n\n _this = _Component.apply(this, arguments) || this;\n _this.emitter = createEventEmitter(_this.props.value);\n return _this;\n }\n\n var _proto = Provider.prototype;\n\n _proto.getChildContext = function getChildContext() {\n var _ref;\n\n return _ref = {}, _ref[contextProp] = this.emitter, _ref;\n };\n\n _proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {\n if (this.props.value !== nextProps.value) {\n var oldValue = this.props.value;\n var newValue = nextProps.value;\n var changedBits;\n\n if (objectIs(oldValue, newValue)) {\n changedBits = 0;\n } else {\n changedBits = typeof calculateChangedBits === 'function' ? calculateChangedBits(oldValue, newValue) : MAX_SIGNED_31_BIT_INT;\n\n if (process.env.NODE_ENV !== 'production') {\n warning((changedBits & MAX_SIGNED_31_BIT_INT) === changedBits, 'calculateChangedBits: Expected the return value to be a ' + '31-bit integer. Instead received: ' + changedBits);\n }\n\n changedBits |= 0;\n\n if (changedBits !== 0) {\n this.emitter.set(nextProps.value, changedBits);\n }\n }\n }\n };\n\n _proto.render = function render() {\n return this.props.children;\n };\n\n return Provider;\n }(Component);\n\n Provider.childContextTypes = (_Provider$childContex = {}, _Provider$childContex[contextProp] = PropTypes.object.isRequired, _Provider$childContex);\n\n var Consumer = /*#__PURE__*/function (_Component2) {\n _inheritsLoose(Consumer, _Component2);\n\n function Consumer() {\n var _this2;\n\n _this2 = _Component2.apply(this, arguments) || this;\n _this2.state = {\n value: _this2.getValue()\n };\n\n _this2.onUpdate = function (newValue, changedBits) {\n var observedBits = _this2.observedBits | 0;\n\n if ((observedBits & changedBits) !== 0) {\n _this2.setState({\n value: _this2.getValue()\n });\n }\n };\n\n return _this2;\n }\n\n var _proto2 = Consumer.prototype;\n\n _proto2.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {\n var observedBits = nextProps.observedBits;\n this.observedBits = observedBits === undefined || observedBits === null ? MAX_SIGNED_31_BIT_INT : observedBits;\n };\n\n _proto2.componentDidMount = function componentDidMount() {\n if (this.context[contextProp]) {\n this.context[contextProp].on(this.onUpdate);\n }\n\n var observedBits = this.props.observedBits;\n this.observedBits = observedBits === undefined || observedBits === null ? MAX_SIGNED_31_BIT_INT : observedBits;\n };\n\n _proto2.componentWillUnmount = function componentWillUnmount() {\n if (this.context[contextProp]) {\n this.context[contextProp].off(this.onUpdate);\n }\n };\n\n _proto2.getValue = function getValue() {\n if (this.context[contextProp]) {\n return this.context[contextProp].get();\n } else {\n return defaultValue;\n }\n };\n\n _proto2.render = function render() {\n return onlyChild(this.props.children)(this.state.value);\n };\n\n return Consumer;\n }(Component);\n\n Consumer.contextTypes = (_Consumer$contextType = {}, _Consumer$contextType[contextProp] = PropTypes.object, _Consumer$contextType);\n return {\n Provider: Provider,\n Consumer: Consumer\n };\n}\n\nvar index = React.createContext || createReactContext;\n\nexport default index;\n","module.exports = Array.isArray || function (arr) {\n return Object.prototype.toString.call(arr) == '[object Array]';\n};\n","var isarray = require('isarray')\n\n/**\n * Expose `pathToRegexp`.\n */\nmodule.exports = pathToRegexp\nmodule.exports.parse = parse\nmodule.exports.compile = compile\nmodule.exports.tokensToFunction = tokensToFunction\nmodule.exports.tokensToRegExp = tokensToRegExp\n\n/**\n * The main path matching regexp utility.\n *\n * @type {RegExp}\n */\nvar PATH_REGEXP = new RegExp([\n // Match escaped characters that would otherwise appear in future matches.\n // This allows the user to escape special characters that won't transform.\n '(\\\\\\\\.)',\n // Match Express-style parameters and un-named parameters with a prefix\n // and optional suffixes. Matches appear as:\n //\n // \"/:test(\\\\d+)?\" => [\"/\", \"test\", \"\\d+\", undefined, \"?\", undefined]\n // \"/route(\\\\d+)\" => [undefined, undefined, undefined, \"\\d+\", undefined, undefined]\n // \"/*\" => [\"/\", undefined, undefined, undefined, undefined, \"*\"]\n '([\\\\/.])?(?:(?:\\\\:(\\\\w+)(?:\\\\(((?:\\\\\\\\.|[^\\\\\\\\()])+)\\\\))?|\\\\(((?:\\\\\\\\.|[^\\\\\\\\()])+)\\\\))([+*?])?|(\\\\*))'\n].join('|'), 'g')\n\n/**\n * Parse a string for the raw tokens.\n *\n * @param {string} str\n * @param {Object=} options\n * @return {!Array}\n */\nfunction parse (str, options) {\n var tokens = []\n var key = 0\n var index = 0\n var path = ''\n var defaultDelimiter = options && options.delimiter || '/'\n var res\n\n while ((res = PATH_REGEXP.exec(str)) != null) {\n var m = res[0]\n var escaped = res[1]\n var offset = res.index\n path += str.slice(index, offset)\n index = offset + m.length\n\n // Ignore already escaped sequences.\n if (escaped) {\n path += escaped[1]\n continue\n }\n\n var next = str[index]\n var prefix = res[2]\n var name = res[3]\n var capture = res[4]\n var group = res[5]\n var modifier = res[6]\n var asterisk = res[7]\n\n // Push the current path onto the tokens.\n if (path) {\n tokens.push(path)\n path = ''\n }\n\n var partial = prefix != null && next != null && next !== prefix\n var repeat = modifier === '+' || modifier === '*'\n var optional = modifier === '?' || modifier === '*'\n var delimiter = res[2] || defaultDelimiter\n var pattern = capture || group\n\n tokens.push({\n name: name || key++,\n prefix: prefix || '',\n delimiter: delimiter,\n optional: optional,\n repeat: repeat,\n partial: partial,\n asterisk: !!asterisk,\n pattern: pattern ? escapeGroup(pattern) : (asterisk ? '.*' : '[^' + escapeString(delimiter) + ']+?')\n })\n }\n\n // Match any characters still remaining.\n if (index < str.length) {\n path += str.substr(index)\n }\n\n // If the path exists, push it onto the end.\n if (path) {\n tokens.push(path)\n }\n\n return tokens\n}\n\n/**\n * Compile a string to a template function for the path.\n *\n * @param {string} str\n * @param {Object=} options\n * @return {!function(Object=, Object=)}\n */\nfunction compile (str, options) {\n return tokensToFunction(parse(str, options), options)\n}\n\n/**\n * Prettier encoding of URI path segments.\n *\n * @param {string}\n * @return {string}\n */\nfunction encodeURIComponentPretty (str) {\n return encodeURI(str).replace(/[\\/?#]/g, function (c) {\n return '%' + c.charCodeAt(0).toString(16).toUpperCase()\n })\n}\n\n/**\n * Encode the asterisk parameter. Similar to `pretty`, but allows slashes.\n *\n * @param {string}\n * @return {string}\n */\nfunction encodeAsterisk (str) {\n return encodeURI(str).replace(/[?#]/g, function (c) {\n return '%' + c.charCodeAt(0).toString(16).toUpperCase()\n })\n}\n\n/**\n * Expose a method for transforming tokens into the path function.\n */\nfunction tokensToFunction (tokens, options) {\n // Compile all the tokens into regexps.\n var matches = new Array(tokens.length)\n\n // Compile all the patterns before compilation.\n for (var i = 0; i < tokens.length; i++) {\n if (typeof tokens[i] === 'object') {\n matches[i] = new RegExp('^(?:' + tokens[i].pattern + ')$', flags(options))\n }\n }\n\n return function (obj, opts) {\n var path = ''\n var data = obj || {}\n var options = opts || {}\n var encode = options.pretty ? encodeURIComponentPretty : encodeURIComponent\n\n for (var i = 0; i < tokens.length; i++) {\n var token = tokens[i]\n\n if (typeof token === 'string') {\n path += token\n\n continue\n }\n\n var value = data[token.name]\n var segment\n\n if (value == null) {\n if (token.optional) {\n // Prepend partial segment prefixes.\n if (token.partial) {\n path += token.prefix\n }\n\n continue\n } else {\n throw new TypeError('Expected \"' + token.name + '\" to be defined')\n }\n }\n\n if (isarray(value)) {\n if (!token.repeat) {\n throw new TypeError('Expected \"' + token.name + '\" to not repeat, but received `' + JSON.stringify(value) + '`')\n }\n\n if (value.length === 0) {\n if (token.optional) {\n continue\n } else {\n throw new TypeError('Expected \"' + token.name + '\" to not be empty')\n }\n }\n\n for (var j = 0; j < value.length; j++) {\n segment = encode(value[j])\n\n if (!matches[i].test(segment)) {\n throw new TypeError('Expected all \"' + token.name + '\" to match \"' + token.pattern + '\", but received `' + JSON.stringify(segment) + '`')\n }\n\n path += (j === 0 ? token.prefix : token.delimiter) + segment\n }\n\n continue\n }\n\n segment = token.asterisk ? encodeAsterisk(value) : encode(value)\n\n if (!matches[i].test(segment)) {\n throw new TypeError('Expected \"' + token.name + '\" to match \"' + token.pattern + '\", but received \"' + segment + '\"')\n }\n\n path += token.prefix + segment\n }\n\n return path\n }\n}\n\n/**\n * Escape a regular expression string.\n *\n * @param {string} str\n * @return {string}\n */\nfunction escapeString (str) {\n return str.replace(/([.+*?=^!:${}()[\\]|\\/\\\\])/g, '\\\\$1')\n}\n\n/**\n * Escape the capturing group by escaping special characters and meaning.\n *\n * @param {string} group\n * @return {string}\n */\nfunction escapeGroup (group) {\n return group.replace(/([=!:$\\/()])/g, '\\\\$1')\n}\n\n/**\n * Attach the keys as a property of the regexp.\n *\n * @param {!RegExp} re\n * @param {Array} keys\n * @return {!RegExp}\n */\nfunction attachKeys (re, keys) {\n re.keys = keys\n return re\n}\n\n/**\n * Get the flags for a regexp from the options.\n *\n * @param {Object} options\n * @return {string}\n */\nfunction flags (options) {\n return options && options.sensitive ? '' : 'i'\n}\n\n/**\n * Pull out keys from a regexp.\n *\n * @param {!RegExp} path\n * @param {!Array} keys\n * @return {!RegExp}\n */\nfunction regexpToRegexp (path, keys) {\n // Use a negative lookahead to match only capturing groups.\n var groups = path.source.match(/\\((?!\\?)/g)\n\n if (groups) {\n for (var i = 0; i < groups.length; i++) {\n keys.push({\n name: i,\n prefix: null,\n delimiter: null,\n optional: false,\n repeat: false,\n partial: false,\n asterisk: false,\n pattern: null\n })\n }\n }\n\n return attachKeys(path, keys)\n}\n\n/**\n * Transform an array into a regexp.\n *\n * @param {!Array} path\n * @param {Array} keys\n * @param {!Object} options\n * @return {!RegExp}\n */\nfunction arrayToRegexp (path, keys, options) {\n var parts = []\n\n for (var i = 0; i < path.length; i++) {\n parts.push(pathToRegexp(path[i], keys, options).source)\n }\n\n var regexp = new RegExp('(?:' + parts.join('|') + ')', flags(options))\n\n return attachKeys(regexp, keys)\n}\n\n/**\n * Create a path regexp from string input.\n *\n * @param {string} path\n * @param {!Array} keys\n * @param {!Object} options\n * @return {!RegExp}\n */\nfunction stringToRegexp (path, keys, options) {\n return tokensToRegExp(parse(path, options), keys, options)\n}\n\n/**\n * Expose a function for taking tokens and returning a RegExp.\n *\n * @param {!Array} tokens\n * @param {(Array|Object)=} keys\n * @param {Object=} options\n * @return {!RegExp}\n */\nfunction tokensToRegExp (tokens, keys, options) {\n if (!isarray(keys)) {\n options = /** @type {!Object} */ (keys || options)\n keys = []\n }\n\n options = options || {}\n\n var strict = options.strict\n var end = options.end !== false\n var route = ''\n\n // Iterate over the tokens and create our regexp string.\n for (var i = 0; i < tokens.length; i++) {\n var token = tokens[i]\n\n if (typeof token === 'string') {\n route += escapeString(token)\n } else {\n var prefix = escapeString(token.prefix)\n var capture = '(?:' + token.pattern + ')'\n\n keys.push(token)\n\n if (token.repeat) {\n capture += '(?:' + prefix + capture + ')*'\n }\n\n if (token.optional) {\n if (!token.partial) {\n capture = '(?:' + prefix + '(' + capture + '))?'\n } else {\n capture = prefix + '(' + capture + ')?'\n }\n } else {\n capture = prefix + '(' + capture + ')'\n }\n\n route += capture\n }\n }\n\n var delimiter = escapeString(options.delimiter || '/')\n var endsWithDelimiter = route.slice(-delimiter.length) === delimiter\n\n // In non-strict mode we allow a slash at the end of match. If the path to\n // match already ends with a slash, we remove it for consistency. The slash\n // is valid at the end of a path match, not in the middle. This is important\n // in non-ending mode, where \"/test/\" shouldn't match \"/test//route\".\n if (!strict) {\n route = (endsWithDelimiter ? route.slice(0, -delimiter.length) : route) + '(?:' + delimiter + '(?=$))?'\n }\n\n if (end) {\n route += '$'\n } else {\n // In non-ending mode, we need the capturing groups to match as much as\n // possible by using a positive lookahead to the end or next path segment.\n route += strict && endsWithDelimiter ? '' : '(?=' + delimiter + '|$)'\n }\n\n return attachKeys(new RegExp('^' + route, flags(options)), keys)\n}\n\n/**\n * Normalize the given path string, returning a regular expression.\n *\n * An empty array can be passed in for the keys, which will hold the\n * placeholder key descriptions. For example, using `/user/:id`, `keys` will\n * contain `[{ name: 'id', delimiter: '/', optional: false, repeat: false }]`.\n *\n * @param {(string|RegExp|Array)} path\n * @param {(Array|Object)=} keys\n * @param {Object=} options\n * @return {!RegExp}\n */\nfunction pathToRegexp (path, keys, options) {\n if (!isarray(keys)) {\n options = /** @type {!Object} */ (keys || options)\n keys = []\n }\n\n options = options || {}\n\n if (path instanceof RegExp) {\n return regexpToRegexp(path, /** @type {!Array} */ (keys))\n }\n\n if (isarray(path)) {\n return arrayToRegexp(/** @type {!Array} */ (path), /** @type {!Array} */ (keys), options)\n }\n\n return stringToRegexp(/** @type {string} */ (path), /** @type {!Array} */ (keys), options)\n}\n","/** @license React v16.13.1\n * react-is.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';var b=\"function\"===typeof Symbol&&Symbol.for,c=b?Symbol.for(\"react.element\"):60103,d=b?Symbol.for(\"react.portal\"):60106,e=b?Symbol.for(\"react.fragment\"):60107,f=b?Symbol.for(\"react.strict_mode\"):60108,g=b?Symbol.for(\"react.profiler\"):60114,h=b?Symbol.for(\"react.provider\"):60109,k=b?Symbol.for(\"react.context\"):60110,l=b?Symbol.for(\"react.async_mode\"):60111,m=b?Symbol.for(\"react.concurrent_mode\"):60111,n=b?Symbol.for(\"react.forward_ref\"):60112,p=b?Symbol.for(\"react.suspense\"):60113,q=b?\nSymbol.for(\"react.suspense_list\"):60120,r=b?Symbol.for(\"react.memo\"):60115,t=b?Symbol.for(\"react.lazy\"):60116,v=b?Symbol.for(\"react.block\"):60121,w=b?Symbol.for(\"react.fundamental\"):60117,x=b?Symbol.for(\"react.responder\"):60118,y=b?Symbol.for(\"react.scope\"):60119;\nfunction z(a){if(\"object\"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}exports.AsyncMode=l;exports.ConcurrentMode=m;exports.ContextConsumer=k;exports.ContextProvider=h;exports.Element=c;exports.ForwardRef=n;exports.Fragment=e;exports.Lazy=t;exports.Memo=r;exports.Portal=d;\nexports.Profiler=g;exports.StrictMode=f;exports.Suspense=p;exports.isAsyncMode=function(a){return A(a)||z(a)===l};exports.isConcurrentMode=A;exports.isContextConsumer=function(a){return z(a)===k};exports.isContextProvider=function(a){return z(a)===h};exports.isElement=function(a){return\"object\"===typeof a&&null!==a&&a.$$typeof===c};exports.isForwardRef=function(a){return z(a)===n};exports.isFragment=function(a){return z(a)===e};exports.isLazy=function(a){return z(a)===t};\nexports.isMemo=function(a){return z(a)===r};exports.isPortal=function(a){return z(a)===d};exports.isProfiler=function(a){return z(a)===g};exports.isStrictMode=function(a){return z(a)===f};exports.isSuspense=function(a){return z(a)===p};\nexports.isValidElementType=function(a){return\"string\"===typeof a||\"function\"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||\"object\"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};exports.typeOf=z;\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/react-is.production.min.js');\n} else {\n module.exports = require('./cjs/react-is.development.js');\n}\n","export default function _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n }\n return target;\n}","'use strict';\n\nvar reactIs = require('react-is');\n\n/**\n * Copyright 2015, Yahoo! Inc.\n * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.\n */\nvar REACT_STATICS = {\n childContextTypes: true,\n contextType: true,\n contextTypes: true,\n defaultProps: true,\n displayName: true,\n getDefaultProps: true,\n getDerivedStateFromError: true,\n getDerivedStateFromProps: true,\n mixins: true,\n propTypes: true,\n type: true\n};\nvar KNOWN_STATICS = {\n name: true,\n length: true,\n prototype: true,\n caller: true,\n callee: true,\n arguments: true,\n arity: true\n};\nvar FORWARD_REF_STATICS = {\n '$$typeof': true,\n render: true,\n defaultProps: true,\n displayName: true,\n propTypes: true\n};\nvar MEMO_STATICS = {\n '$$typeof': true,\n compare: true,\n defaultProps: true,\n displayName: true,\n propTypes: true,\n type: true\n};\nvar TYPE_STATICS = {};\nTYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;\nTYPE_STATICS[reactIs.Memo] = MEMO_STATICS;\n\nfunction getStatics(component) {\n // React v16.11 and below\n if (reactIs.isMemo(component)) {\n return MEMO_STATICS;\n } // React v16.12 and above\n\n\n return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;\n}\n\nvar defineProperty = Object.defineProperty;\nvar getOwnPropertyNames = Object.getOwnPropertyNames;\nvar getOwnPropertySymbols = Object.getOwnPropertySymbols;\nvar getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;\nvar getPrototypeOf = Object.getPrototypeOf;\nvar objectPrototype = Object.prototype;\nfunction hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {\n if (typeof sourceComponent !== 'string') {\n // don't hoist over string (html) components\n if (objectPrototype) {\n var inheritedComponent = getPrototypeOf(sourceComponent);\n\n if (inheritedComponent && inheritedComponent !== objectPrototype) {\n hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);\n }\n }\n\n var keys = getOwnPropertyNames(sourceComponent);\n\n if (getOwnPropertySymbols) {\n keys = keys.concat(getOwnPropertySymbols(sourceComponent));\n }\n\n var targetStatics = getStatics(targetComponent);\n var sourceStatics = getStatics(sourceComponent);\n\n for (var i = 0; i < keys.length; ++i) {\n var key = keys[i];\n\n if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {\n var descriptor = getOwnPropertyDescriptor(sourceComponent, key);\n\n try {\n // Avoid failures from read-only properties\n defineProperty(targetComponent, key, descriptor);\n } catch (e) {}\n }\n }\n }\n\n return targetComponent;\n}\n\nmodule.exports = hoistNonReactStatics;\n","// TODO: Replace with React.createContext once we can assume React 16+\nimport createContext from \"mini-create-react-context\";\n\nconst createNamedContext = name => {\n const context = createContext();\n context.displayName = name;\n\n return context;\n};\n\nexport default createNamedContext;\n","import createNamedContext from \"./createNamedContext\";\n\nconst historyContext = /*#__PURE__*/ createNamedContext(\"Router-History\");\nexport default historyContext;\n","import createNamedContext from \"./createNamedContext\";\n\nconst context = /*#__PURE__*/ createNamedContext(\"Router\");\nexport default context;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport warning from \"tiny-warning\";\n\nimport HistoryContext from \"./HistoryContext.js\";\nimport RouterContext from \"./RouterContext.js\";\n\n/**\n * The public API for putting history on context.\n */\nclass Router extends React.Component {\n static computeRootMatch(pathname) {\n return { path: \"/\", url: \"/\", params: {}, isExact: pathname === \"/\" };\n }\n\n constructor(props) {\n super(props);\n\n this.state = {\n location: props.history.location\n };\n\n // This is a bit of a hack. We have to start listening for location\n // changes here in the constructor in case there are any s\n // on the initial render. If there are, they will replace/push when\n // they mount and since cDM fires in children before parents, we may\n // get a new location before the is mounted.\n this._isMounted = false;\n this._pendingLocation = null;\n\n if (!props.staticContext) {\n this.unlisten = props.history.listen(location => {\n this._pendingLocation = location;\n });\n }\n }\n\n componentDidMount() {\n this._isMounted = true;\n\n if (this.unlisten) {\n // Any pre-mount location changes have been captured at\n // this point, so unregister the listener.\n this.unlisten();\n }\n if (!this.props.staticContext) {\n this.unlisten = this.props.history.listen(location => {\n if (this._isMounted) {\n this.setState({ location });\n }\n });\n }\n if (this._pendingLocation) {\n this.setState({ location: this._pendingLocation });\n }\n }\n\n componentWillUnmount() {\n if (this.unlisten) {\n this.unlisten();\n this._isMounted = false;\n this._pendingLocation = null;\n }\n }\n\n render() {\n return (\n \n \n \n );\n }\n}\n\nif (__DEV__) {\n Router.propTypes = {\n children: PropTypes.node,\n history: PropTypes.object.isRequired,\n staticContext: PropTypes.object\n };\n\n Router.prototype.componentDidUpdate = function(prevProps) {\n warning(\n prevProps.history === this.props.history,\n \"You cannot change \"\n );\n };\n}\n\nexport default Router;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { createMemoryHistory as createHistory } from \"history\";\nimport warning from \"tiny-warning\";\n\nimport Router from \"./Router.js\";\n\n/**\n * The public API for a that stores location in memory.\n */\nclass MemoryRouter extends React.Component {\n history = createHistory(this.props);\n\n render() {\n return ;\n }\n}\n\nif (__DEV__) {\n MemoryRouter.propTypes = {\n initialEntries: PropTypes.array,\n initialIndex: PropTypes.number,\n getUserConfirmation: PropTypes.func,\n keyLength: PropTypes.number,\n children: PropTypes.node\n };\n\n MemoryRouter.prototype.componentDidMount = function() {\n warning(\n !this.props.history,\n \" ignores the history prop. To use a custom history, \" +\n \"use `import { Router }` instead of `import { MemoryRouter as Router }`.\"\n );\n };\n}\n\nexport default MemoryRouter;\n","import React from \"react\";\n\nclass Lifecycle extends React.Component {\n componentDidMount() {\n if (this.props.onMount) this.props.onMount.call(this, this);\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.onUpdate) this.props.onUpdate.call(this, this, prevProps);\n }\n\n componentWillUnmount() {\n if (this.props.onUnmount) this.props.onUnmount.call(this, this);\n }\n\n render() {\n return null;\n }\n}\n\nexport default Lifecycle;\n","import pathToRegexp from \"path-to-regexp\";\n\nconst cache = {};\nconst cacheLimit = 10000;\nlet cacheCount = 0;\n\nfunction compilePath(path, options) {\n const cacheKey = `${options.end}${options.strict}${options.sensitive}`;\n const pathCache = cache[cacheKey] || (cache[cacheKey] = {});\n\n if (pathCache[path]) return pathCache[path];\n\n const keys = [];\n const regexp = pathToRegexp(path, keys, options);\n const result = { regexp, keys };\n\n if (cacheCount < cacheLimit) {\n pathCache[path] = result;\n cacheCount++;\n }\n\n return result;\n}\n\n/**\n * Public API for matching a URL pathname to a path.\n */\nfunction matchPath(pathname, options = {}) {\n if (typeof options === \"string\" || Array.isArray(options)) {\n options = { path: options };\n }\n\n const { path, exact = false, strict = false, sensitive = false } = options;\n\n const paths = [].concat(path);\n\n return paths.reduce((matched, path) => {\n if (!path && path !== \"\") return null;\n if (matched) return matched;\n\n const { regexp, keys } = compilePath(path, {\n end: exact,\n strict,\n sensitive\n });\n const match = regexp.exec(pathname);\n\n if (!match) return null;\n\n const [url, ...values] = match;\n const isExact = pathname === url;\n\n if (exact && !isExact) return null;\n\n return {\n path, // the path used to match\n url: path === \"/\" && url === \"\" ? \"/\" : url, // the matched portion of the URL\n isExact, // whether or not we matched exactly\n params: keys.reduce((memo, key, index) => {\n memo[key.name] = values[index];\n return memo;\n }, {})\n };\n }, null);\n}\n\nexport default matchPath;\n","import React from \"react\";\nimport { isValidElementType } from \"react-is\";\nimport PropTypes from \"prop-types\";\nimport invariant from \"tiny-invariant\";\nimport warning from \"tiny-warning\";\n\nimport RouterContext from \"./RouterContext.js\";\nimport matchPath from \"./matchPath.js\";\n\nfunction isEmptyChildren(children) {\n return React.Children.count(children) === 0;\n}\n\nfunction evalChildrenDev(children, props, path) {\n const value = children(props);\n\n warning(\n value !== undefined,\n \"You returned `undefined` from the `children` function of \" +\n `, but you ` +\n \"should have returned a React element or `null`\"\n );\n\n return value || null;\n}\n\n/**\n * The public API for matching a single path and rendering.\n */\nclass Route extends React.Component {\n render() {\n return (\n \n {context => {\n invariant(context, \"You should not use outside a \");\n\n const location = this.props.location || context.location;\n const match = this.props.computedMatch\n ? this.props.computedMatch // already computed the match for us\n : this.props.path\n ? matchPath(location.pathname, this.props)\n : context.match;\n\n const props = { ...context, location, match };\n\n let { children, component, render } = this.props;\n\n // Preact uses an empty array as children by\n // default, so use null if that's the case.\n if (Array.isArray(children) && isEmptyChildren(children)) {\n children = null;\n }\n\n return (\n \n {props.match\n ? children\n ? typeof children === \"function\"\n ? __DEV__\n ? evalChildrenDev(children, props, this.props.path)\n : children(props)\n : children\n : component\n ? React.createElement(component, props)\n : render\n ? render(props)\n : null\n : typeof children === \"function\"\n ? __DEV__\n ? evalChildrenDev(children, props, this.props.path)\n : children(props)\n : null}\n \n );\n }}\n \n );\n }\n}\n\nif (__DEV__) {\n Route.propTypes = {\n children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),\n component: (props, propName) => {\n if (props[propName] && !isValidElementType(props[propName])) {\n return new Error(\n `Invalid prop 'component' supplied to 'Route': the prop is not a valid React component`\n );\n }\n },\n exact: PropTypes.bool,\n location: PropTypes.object,\n path: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.arrayOf(PropTypes.string)\n ]),\n render: PropTypes.func,\n sensitive: PropTypes.bool,\n strict: PropTypes.bool\n };\n\n Route.prototype.componentDidMount = function() {\n warning(\n !(\n this.props.children &&\n !isEmptyChildren(this.props.children) &&\n this.props.component\n ),\n \"You should not use and in the same route; will be ignored\"\n );\n\n warning(\n !(\n this.props.children &&\n !isEmptyChildren(this.props.children) &&\n this.props.render\n ),\n \"You should not use and in the same route; will be ignored\"\n );\n\n warning(\n !(this.props.component && this.props.render),\n \"You should not use and in the same route; will be ignored\"\n );\n };\n\n Route.prototype.componentDidUpdate = function(prevProps) {\n warning(\n !(this.props.location && !prevProps.location),\n ' elements should not change from uncontrolled to controlled (or vice versa). You initially used no \"location\" prop and then provided one on a subsequent render.'\n );\n\n warning(\n !(!this.props.location && prevProps.location),\n ' elements should not change from controlled to uncontrolled (or vice versa). You provided a \"location\" prop initially but omitted it on a subsequent render.'\n );\n };\n}\n\nexport default Route;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { createLocation, createPath } from \"history\";\nimport invariant from \"tiny-invariant\";\nimport warning from \"tiny-warning\";\n\nimport Router from \"./Router.js\";\n\nfunction addLeadingSlash(path) {\n return path.charAt(0) === \"/\" ? path : \"/\" + path;\n}\n\nfunction addBasename(basename, location) {\n if (!basename) return location;\n\n return {\n ...location,\n pathname: addLeadingSlash(basename) + location.pathname\n };\n}\n\nfunction stripBasename(basename, location) {\n if (!basename) return location;\n\n const base = addLeadingSlash(basename);\n\n if (location.pathname.indexOf(base) !== 0) return location;\n\n return {\n ...location,\n pathname: location.pathname.substr(base.length)\n };\n}\n\nfunction createURL(location) {\n return typeof location === \"string\" ? location : createPath(location);\n}\n\nfunction staticHandler(methodName) {\n return () => {\n invariant(false, \"You cannot %s with \", methodName);\n };\n}\n\nfunction noop() {}\n\n/**\n * The public top-level API for a \"static\" , so-called because it\n * can't actually change the current location. Instead, it just records\n * location changes in a context object. Useful mainly in testing and\n * server-rendering scenarios.\n */\nclass StaticRouter extends React.Component {\n navigateTo(location, action) {\n const { basename = \"\", context = {} } = this.props;\n context.action = action;\n context.location = addBasename(basename, createLocation(location));\n context.url = createURL(context.location);\n }\n\n handlePush = location => this.navigateTo(location, \"PUSH\");\n handleReplace = location => this.navigateTo(location, \"REPLACE\");\n handleListen = () => noop;\n handleBlock = () => noop;\n\n render() {\n const { basename = \"\", context = {}, location = \"/\", ...rest } = this.props;\n\n const history = {\n createHref: path => addLeadingSlash(basename + createURL(path)),\n action: \"POP\",\n location: stripBasename(basename, createLocation(location)),\n push: this.handlePush,\n replace: this.handleReplace,\n go: staticHandler(\"go\"),\n goBack: staticHandler(\"goBack\"),\n goForward: staticHandler(\"goForward\"),\n listen: this.handleListen,\n block: this.handleBlock\n };\n\n return ;\n }\n}\n\nif (__DEV__) {\n StaticRouter.propTypes = {\n basename: PropTypes.string,\n context: PropTypes.object,\n location: PropTypes.oneOfType([PropTypes.string, PropTypes.object])\n };\n\n StaticRouter.prototype.componentDidMount = function() {\n warning(\n !this.props.history,\n \" ignores the history prop. To use a custom history, \" +\n \"use `import { Router }` instead of `import { StaticRouter as Router }`.\"\n );\n };\n}\n\nexport default StaticRouter;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport invariant from \"tiny-invariant\";\nimport warning from \"tiny-warning\";\n\nimport RouterContext from \"./RouterContext.js\";\nimport matchPath from \"./matchPath.js\";\n\n/**\n * The public API for rendering the first that matches.\n */\nclass Switch extends React.Component {\n render() {\n return (\n \n {context => {\n invariant(context, \"You should not use outside a \");\n\n const location = this.props.location || context.location;\n\n let element, match;\n\n // We use React.Children.forEach instead of React.Children.toArray().find()\n // here because toArray adds keys to all child elements and we do not want\n // to trigger an unmount/remount for two s that render the same\n // component at different URLs.\n React.Children.forEach(this.props.children, child => {\n if (match == null && React.isValidElement(child)) {\n element = child;\n\n const path = child.props.path || child.props.from;\n\n match = path\n ? matchPath(location.pathname, { ...child.props, path })\n : context.match;\n }\n });\n\n return match\n ? React.cloneElement(element, { location, computedMatch: match })\n : null;\n }}\n \n );\n }\n}\n\nif (__DEV__) {\n Switch.propTypes = {\n children: PropTypes.node,\n location: PropTypes.object\n };\n\n Switch.prototype.componentDidUpdate = function(prevProps) {\n warning(\n !(this.props.location && !prevProps.location),\n ' elements should not change from uncontrolled to controlled (or vice versa). You initially used no \"location\" prop and then provided one on a subsequent render.'\n );\n\n warning(\n !(!this.props.location && prevProps.location),\n ' elements should not change from controlled to uncontrolled (or vice versa). You provided a \"location\" prop initially but omitted it on a subsequent render.'\n );\n };\n}\n\nexport default Switch;\n","import React from \"react\";\nimport invariant from \"tiny-invariant\";\n\nimport RouterContext from \"./RouterContext.js\";\nimport HistoryContext from \"./HistoryContext.js\";\nimport matchPath from \"./matchPath.js\";\n\nconst useContext = React.useContext;\n\nexport function useHistory() {\n if (__DEV__) {\n invariant(\n typeof useContext === \"function\",\n \"You must use React >= 16.8 in order to use useHistory()\"\n );\n }\n\n return useContext(HistoryContext);\n}\n\nexport function useLocation() {\n if (__DEV__) {\n invariant(\n typeof useContext === \"function\",\n \"You must use React >= 16.8 in order to use useLocation()\"\n );\n }\n\n return useContext(RouterContext).location;\n}\n\nexport function useParams() {\n if (__DEV__) {\n invariant(\n typeof useContext === \"function\",\n \"You must use React >= 16.8 in order to use useParams()\"\n );\n }\n\n const match = useContext(RouterContext).match;\n return match ? match.params : {};\n}\n\nexport function useRouteMatch(path) {\n if (__DEV__) {\n invariant(\n typeof useContext === \"function\",\n \"You must use React >= 16.8 in order to use useRouteMatch()\"\n );\n }\n\n const location = useLocation();\n const match = useContext(RouterContext).match;\n return path ? matchPath(location.pathname, path) : match;\n}\n","/**\n * Removes all key-value entries from the list cache.\n *\n * @private\n * @name clear\n * @memberOf ListCache\n */\nfunction listCacheClear() {\n this.__data__ = [];\n this.size = 0;\n}\n\nmodule.exports = listCacheClear;\n","/**\n * Performs a\n * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)\n * comparison between two values to determine if they are equivalent.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to compare.\n * @param {*} other The other value to compare.\n * @returns {boolean} Returns `true` if the values are equivalent, else `false`.\n * @example\n *\n * var object = { 'a': 1 };\n * var other = { 'a': 1 };\n *\n * _.eq(object, object);\n * // => true\n *\n * _.eq(object, other);\n * // => false\n *\n * _.eq('a', 'a');\n * // => true\n *\n * _.eq('a', Object('a'));\n * // => false\n *\n * _.eq(NaN, NaN);\n * // => true\n */\nfunction eq(value, other) {\n return value === other || (value !== value && other !== other);\n}\n\nmodule.exports = eq;\n","var eq = require('./eq');\n\n/**\n * Gets the index at which the `key` is found in `array` of key-value pairs.\n *\n * @private\n * @param {Array} array The array to inspect.\n * @param {*} key The key to search for.\n * @returns {number} Returns the index of the matched value, else `-1`.\n */\nfunction assocIndexOf(array, key) {\n var length = array.length;\n while (length--) {\n if (eq(array[length][0], key)) {\n return length;\n }\n }\n return -1;\n}\n\nmodule.exports = assocIndexOf;\n","var assocIndexOf = require('./_assocIndexOf');\n\n/** Used for built-in method references. */\nvar arrayProto = Array.prototype;\n\n/** Built-in value references. */\nvar splice = arrayProto.splice;\n\n/**\n * Removes `key` and its value from the list cache.\n *\n * @private\n * @name delete\n * @memberOf ListCache\n * @param {string} key The key of the value to remove.\n * @returns {boolean} Returns `true` if the entry was removed, else `false`.\n */\nfunction listCacheDelete(key) {\n var data = this.__data__,\n index = assocIndexOf(data, key);\n\n if (index < 0) {\n return false;\n }\n var lastIndex = data.length - 1;\n if (index == lastIndex) {\n data.pop();\n } else {\n splice.call(data, index, 1);\n }\n --this.size;\n return true;\n}\n\nmodule.exports = listCacheDelete;\n","var assocIndexOf = require('./_assocIndexOf');\n\n/**\n * Gets the list cache value for `key`.\n *\n * @private\n * @name get\n * @memberOf ListCache\n * @param {string} key The key of the value to get.\n * @returns {*} Returns the entry value.\n */\nfunction listCacheGet(key) {\n var data = this.__data__,\n index = assocIndexOf(data, key);\n\n return index < 0 ? undefined : data[index][1];\n}\n\nmodule.exports = listCacheGet;\n","var assocIndexOf = require('./_assocIndexOf');\n\n/**\n * Checks if a list cache value for `key` exists.\n *\n * @private\n * @name has\n * @memberOf ListCache\n * @param {string} key The key of the entry to check.\n * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.\n */\nfunction listCacheHas(key) {\n return assocIndexOf(this.__data__, key) > -1;\n}\n\nmodule.exports = listCacheHas;\n","var assocIndexOf = require('./_assocIndexOf');\n\n/**\n * Sets the list cache `key` to `value`.\n *\n * @private\n * @name set\n * @memberOf ListCache\n * @param {string} key The key of the value to set.\n * @param {*} value The value to set.\n * @returns {Object} Returns the list cache instance.\n */\nfunction listCacheSet(key, value) {\n var data = this.__data__,\n index = assocIndexOf(data, key);\n\n if (index < 0) {\n ++this.size;\n data.push([key, value]);\n } else {\n data[index][1] = value;\n }\n return this;\n}\n\nmodule.exports = listCacheSet;\n","var listCacheClear = require('./_listCacheClear'),\n listCacheDelete = require('./_listCacheDelete'),\n listCacheGet = require('./_listCacheGet'),\n listCacheHas = require('./_listCacheHas'),\n listCacheSet = require('./_listCacheSet');\n\n/**\n * Creates an list cache object.\n *\n * @private\n * @constructor\n * @param {Array} [entries] The key-value pairs to cache.\n */\nfunction ListCache(entries) {\n var index = -1,\n length = entries == null ? 0 : entries.length;\n\n this.clear();\n while (++index < length) {\n var entry = entries[index];\n this.set(entry[0], entry[1]);\n }\n}\n\n// Add methods to `ListCache`.\nListCache.prototype.clear = listCacheClear;\nListCache.prototype['delete'] = listCacheDelete;\nListCache.prototype.get = listCacheGet;\nListCache.prototype.has = listCacheHas;\nListCache.prototype.set = listCacheSet;\n\nmodule.exports = ListCache;\n","var ListCache = require('./_ListCache');\n\n/**\n * Removes all key-value entries from the stack.\n *\n * @private\n * @name clear\n * @memberOf Stack\n */\nfunction stackClear() {\n this.__data__ = new ListCache;\n this.size = 0;\n}\n\nmodule.exports = stackClear;\n","/**\n * Removes `key` and its value from the stack.\n *\n * @private\n * @name delete\n * @memberOf Stack\n * @param {string} key The key of the value to remove.\n * @returns {boolean} Returns `true` if the entry was removed, else `false`.\n */\nfunction stackDelete(key) {\n var data = this.__data__,\n result = data['delete'](key);\n\n this.size = data.size;\n return result;\n}\n\nmodule.exports = stackDelete;\n","/**\n * Gets the stack value for `key`.\n *\n * @private\n * @name get\n * @memberOf Stack\n * @param {string} key The key of the value to get.\n * @returns {*} Returns the entry value.\n */\nfunction stackGet(key) {\n return this.__data__.get(key);\n}\n\nmodule.exports = stackGet;\n","/**\n * Checks if a stack value for `key` exists.\n *\n * @private\n * @name has\n * @memberOf Stack\n * @param {string} key The key of the entry to check.\n * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.\n */\nfunction stackHas(key) {\n return this.__data__.has(key);\n}\n\nmodule.exports = stackHas;\n","/** Detect free variable `global` from Node.js. */\nvar freeGlobal = typeof global == 'object' && global && global.Object === Object && global;\n\nmodule.exports = freeGlobal;\n","var freeGlobal = require('./_freeGlobal');\n\n/** Detect free variable `self`. */\nvar freeSelf = typeof self == 'object' && self && self.Object === Object && self;\n\n/** Used as a reference to the global object. */\nvar root = freeGlobal || freeSelf || Function('return this')();\n\nmodule.exports = root;\n","var root = require('./_root');\n\n/** Built-in value references. */\nvar Symbol = root.Symbol;\n\nmodule.exports = Symbol;\n","var Symbol = require('./_Symbol');\n\n/** Used for built-in method references. */\nvar objectProto = Object.prototype;\n\n/** Used to check objects for own properties. */\nvar hasOwnProperty = objectProto.hasOwnProperty;\n\n/**\n * Used to resolve the\n * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)\n * of values.\n */\nvar nativeObjectToString = objectProto.toString;\n\n/** Built-in value references. */\nvar symToStringTag = Symbol ? Symbol.toStringTag : undefined;\n\n/**\n * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.\n *\n * @private\n * @param {*} value The value to query.\n * @returns {string} Returns the raw `toStringTag`.\n */\nfunction getRawTag(value) {\n var isOwn = hasOwnProperty.call(value, symToStringTag),\n tag = value[symToStringTag];\n\n try {\n value[symToStringTag] = undefined;\n var unmasked = true;\n } catch (e) {}\n\n var result = nativeObjectToString.call(value);\n if (unmasked) {\n if (isOwn) {\n value[symToStringTag] = tag;\n } else {\n delete value[symToStringTag];\n }\n }\n return result;\n}\n\nmodule.exports = getRawTag;\n","/** Used for built-in method references. */\nvar objectProto = Object.prototype;\n\n/**\n * Used to resolve the\n * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)\n * of values.\n */\nvar nativeObjectToString = objectProto.toString;\n\n/**\n * Converts `value` to a string using `Object.prototype.toString`.\n *\n * @private\n * @param {*} value The value to convert.\n * @returns {string} Returns the converted string.\n */\nfunction objectToString(value) {\n return nativeObjectToString.call(value);\n}\n\nmodule.exports = objectToString;\n","var Symbol = require('./_Symbol'),\n getRawTag = require('./_getRawTag'),\n objectToString = require('./_objectToString');\n\n/** `Object#toString` result references. */\nvar nullTag = '[object Null]',\n undefinedTag = '[object Undefined]';\n\n/** Built-in value references. */\nvar symToStringTag = Symbol ? Symbol.toStringTag : undefined;\n\n/**\n * The base implementation of `getTag` without fallbacks for buggy environments.\n *\n * @private\n * @param {*} value The value to query.\n * @returns {string} Returns the `toStringTag`.\n */\nfunction baseGetTag(value) {\n if (value == null) {\n return value === undefined ? undefinedTag : nullTag;\n }\n return (symToStringTag && symToStringTag in Object(value))\n ? getRawTag(value)\n : objectToString(value);\n}\n\nmodule.exports = baseGetTag;\n","/**\n * Checks if `value` is the\n * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)\n * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is an object, else `false`.\n * @example\n *\n * _.isObject({});\n * // => true\n *\n * _.isObject([1, 2, 3]);\n * // => true\n *\n * _.isObject(_.noop);\n * // => true\n *\n * _.isObject(null);\n * // => false\n */\nfunction isObject(value) {\n var type = typeof value;\n return value != null && (type == 'object' || type == 'function');\n}\n\nmodule.exports = isObject;\n","var baseGetTag = require('./_baseGetTag'),\n isObject = require('./isObject');\n\n/** `Object#toString` result references. */\nvar asyncTag = '[object AsyncFunction]',\n funcTag = '[object Function]',\n genTag = '[object GeneratorFunction]',\n proxyTag = '[object Proxy]';\n\n/**\n * Checks if `value` is classified as a `Function` object.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a function, else `false`.\n * @example\n *\n * _.isFunction(_);\n * // => true\n *\n * _.isFunction(/abc/);\n * // => false\n */\nfunction isFunction(value) {\n if (!isObject(value)) {\n return false;\n }\n // The use of `Object#toString` avoids issues with the `typeof` operator\n // in Safari 9 which returns 'object' for typed arrays and other constructors.\n var tag = baseGetTag(value);\n return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;\n}\n\nmodule.exports = isFunction;\n","var root = require('./_root');\n\n/** Used to detect overreaching core-js shims. */\nvar coreJsData = root['__core-js_shared__'];\n\nmodule.exports = coreJsData;\n","var coreJsData = require('./_coreJsData');\n\n/** Used to detect methods masquerading as native. */\nvar maskSrcKey = (function() {\n var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || '');\n return uid ? ('Symbol(src)_1.' + uid) : '';\n}());\n\n/**\n * Checks if `func` has its source masked.\n *\n * @private\n * @param {Function} func The function to check.\n * @returns {boolean} Returns `true` if `func` is masked, else `false`.\n */\nfunction isMasked(func) {\n return !!maskSrcKey && (maskSrcKey in func);\n}\n\nmodule.exports = isMasked;\n","/** Used for built-in method references. */\nvar funcProto = Function.prototype;\n\n/** Used to resolve the decompiled source of functions. */\nvar funcToString = funcProto.toString;\n\n/**\n * Converts `func` to its source code.\n *\n * @private\n * @param {Function} func The function to convert.\n * @returns {string} Returns the source code.\n */\nfunction toSource(func) {\n if (func != null) {\n try {\n return funcToString.call(func);\n } catch (e) {}\n try {\n return (func + '');\n } catch (e) {}\n }\n return '';\n}\n\nmodule.exports = toSource;\n","var isFunction = require('./isFunction'),\n isMasked = require('./_isMasked'),\n isObject = require('./isObject'),\n toSource = require('./_toSource');\n\n/**\n * Used to match `RegExp`\n * [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).\n */\nvar reRegExpChar = /[\\\\^$.*+?()[\\]{}|]/g;\n\n/** Used to detect host constructors (Safari). */\nvar reIsHostCtor = /^\\[object .+?Constructor\\]$/;\n\n/** Used for built-in method references. */\nvar funcProto = Function.prototype,\n objectProto = Object.prototype;\n\n/** Used to resolve the decompiled source of functions. */\nvar funcToString = funcProto.toString;\n\n/** Used to check objects for own properties. */\nvar hasOwnProperty = objectProto.hasOwnProperty;\n\n/** Used to detect if a method is native. */\nvar reIsNative = RegExp('^' +\n funcToString.call(hasOwnProperty).replace(reRegExpChar, '\\\\$&')\n .replace(/hasOwnProperty|(function).*?(?=\\\\\\()| for .+?(?=\\\\\\])/g, '$1.*?') + '$'\n);\n\n/**\n * The base implementation of `_.isNative` without bad shim checks.\n *\n * @private\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a native function,\n * else `false`.\n */\nfunction baseIsNative(value) {\n if (!isObject(value) || isMasked(value)) {\n return false;\n }\n var pattern = isFunction(value) ? reIsNative : reIsHostCtor;\n return pattern.test(toSource(value));\n}\n\nmodule.exports = baseIsNative;\n","/**\n * Gets the value at `key` of `object`.\n *\n * @private\n * @param {Object} [object] The object to query.\n * @param {string} key The key of the property to get.\n * @returns {*} Returns the property value.\n */\nfunction getValue(object, key) {\n return object == null ? undefined : object[key];\n}\n\nmodule.exports = getValue;\n","var baseIsNative = require('./_baseIsNative'),\n getValue = require('./_getValue');\n\n/**\n * Gets the native function at `key` of `object`.\n *\n * @private\n * @param {Object} object The object to query.\n * @param {string} key The key of the method to get.\n * @returns {*} Returns the function if it's native, else `undefined`.\n */\nfunction getNative(object, key) {\n var value = getValue(object, key);\n return baseIsNative(value) ? value : undefined;\n}\n\nmodule.exports = getNative;\n","var getNative = require('./_getNative'),\n root = require('./_root');\n\n/* Built-in method references that are verified to be native. */\nvar Map = getNative(root, 'Map');\n\nmodule.exports = Map;\n","var getNative = require('./_getNative');\n\n/* Built-in method references that are verified to be native. */\nvar nativeCreate = getNative(Object, 'create');\n\nmodule.exports = nativeCreate;\n","var nativeCreate = require('./_nativeCreate');\n\n/**\n * Removes all key-value entries from the hash.\n *\n * @private\n * @name clear\n * @memberOf Hash\n */\nfunction hashClear() {\n this.__data__ = nativeCreate ? nativeCreate(null) : {};\n this.size = 0;\n}\n\nmodule.exports = hashClear;\n","/**\n * Removes `key` and its value from the hash.\n *\n * @private\n * @name delete\n * @memberOf Hash\n * @param {Object} hash The hash to modify.\n * @param {string} key The key of the value to remove.\n * @returns {boolean} Returns `true` if the entry was removed, else `false`.\n */\nfunction hashDelete(key) {\n var result = this.has(key) && delete this.__data__[key];\n this.size -= result ? 1 : 0;\n return result;\n}\n\nmodule.exports = hashDelete;\n","var nativeCreate = require('./_nativeCreate');\n\n/** Used to stand-in for `undefined` hash values. */\nvar HASH_UNDEFINED = '__lodash_hash_undefined__';\n\n/** Used for built-in method references. */\nvar objectProto = Object.prototype;\n\n/** Used to check objects for own properties. */\nvar hasOwnProperty = objectProto.hasOwnProperty;\n\n/**\n * Gets the hash value for `key`.\n *\n * @private\n * @name get\n * @memberOf Hash\n * @param {string} key The key of the value to get.\n * @returns {*} Returns the entry value.\n */\nfunction hashGet(key) {\n var data = this.__data__;\n if (nativeCreate) {\n var result = data[key];\n return result === HASH_UNDEFINED ? undefined : result;\n }\n return hasOwnProperty.call(data, key) ? data[key] : undefined;\n}\n\nmodule.exports = hashGet;\n","var nativeCreate = require('./_nativeCreate');\n\n/** Used for built-in method references. */\nvar objectProto = Object.prototype;\n\n/** Used to check objects for own properties. */\nvar hasOwnProperty = objectProto.hasOwnProperty;\n\n/**\n * Checks if a hash value for `key` exists.\n *\n * @private\n * @name has\n * @memberOf Hash\n * @param {string} key The key of the entry to check.\n * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.\n */\nfunction hashHas(key) {\n var data = this.__data__;\n return nativeCreate ? (data[key] !== undefined) : hasOwnProperty.call(data, key);\n}\n\nmodule.exports = hashHas;\n","var nativeCreate = require('./_nativeCreate');\n\n/** Used to stand-in for `undefined` hash values. */\nvar HASH_UNDEFINED = '__lodash_hash_undefined__';\n\n/**\n * Sets the hash `key` to `value`.\n *\n * @private\n * @name set\n * @memberOf Hash\n * @param {string} key The key of the value to set.\n * @param {*} value The value to set.\n * @returns {Object} Returns the hash instance.\n */\nfunction hashSet(key, value) {\n var data = this.__data__;\n this.size += this.has(key) ? 0 : 1;\n data[key] = (nativeCreate && value === undefined) ? HASH_UNDEFINED : value;\n return this;\n}\n\nmodule.exports = hashSet;\n","var hashClear = require('./_hashClear'),\n hashDelete = require('./_hashDelete'),\n hashGet = require('./_hashGet'),\n hashHas = require('./_hashHas'),\n hashSet = require('./_hashSet');\n\n/**\n * Creates a hash object.\n *\n * @private\n * @constructor\n * @param {Array} [entries] The key-value pairs to cache.\n */\nfunction Hash(entries) {\n var index = -1,\n length = entries == null ? 0 : entries.length;\n\n this.clear();\n while (++index < length) {\n var entry = entries[index];\n this.set(entry[0], entry[1]);\n }\n}\n\n// Add methods to `Hash`.\nHash.prototype.clear = hashClear;\nHash.prototype['delete'] = hashDelete;\nHash.prototype.get = hashGet;\nHash.prototype.has = hashHas;\nHash.prototype.set = hashSet;\n\nmodule.exports = Hash;\n","var Hash = require('./_Hash'),\n ListCache = require('./_ListCache'),\n Map = require('./_Map');\n\n/**\n * Removes all key-value entries from the map.\n *\n * @private\n * @name clear\n * @memberOf MapCache\n */\nfunction mapCacheClear() {\n this.size = 0;\n this.__data__ = {\n 'hash': new Hash,\n 'map': new (Map || ListCache),\n 'string': new Hash\n };\n}\n\nmodule.exports = mapCacheClear;\n","/**\n * Checks if `value` is suitable for use as unique object key.\n *\n * @private\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is suitable, else `false`.\n */\nfunction isKeyable(value) {\n var type = typeof value;\n return (type == 'string' || type == 'number' || type == 'symbol' || type == 'boolean')\n ? (value !== '__proto__')\n : (value === null);\n}\n\nmodule.exports = isKeyable;\n","var isKeyable = require('./_isKeyable');\n\n/**\n * Gets the data for `map`.\n *\n * @private\n * @param {Object} map The map to query.\n * @param {string} key The reference key.\n * @returns {*} Returns the map data.\n */\nfunction getMapData(map, key) {\n var data = map.__data__;\n return isKeyable(key)\n ? data[typeof key == 'string' ? 'string' : 'hash']\n : data.map;\n}\n\nmodule.exports = getMapData;\n","var getMapData = require('./_getMapData');\n\n/**\n * Removes `key` and its value from the map.\n *\n * @private\n * @name delete\n * @memberOf MapCache\n * @param {string} key The key of the value to remove.\n * @returns {boolean} Returns `true` if the entry was removed, else `false`.\n */\nfunction mapCacheDelete(key) {\n var result = getMapData(this, key)['delete'](key);\n this.size -= result ? 1 : 0;\n return result;\n}\n\nmodule.exports = mapCacheDelete;\n","var getMapData = require('./_getMapData');\n\n/**\n * Gets the map value for `key`.\n *\n * @private\n * @name get\n * @memberOf MapCache\n * @param {string} key The key of the value to get.\n * @returns {*} Returns the entry value.\n */\nfunction mapCacheGet(key) {\n return getMapData(this, key).get(key);\n}\n\nmodule.exports = mapCacheGet;\n","var getMapData = require('./_getMapData');\n\n/**\n * Checks if a map value for `key` exists.\n *\n * @private\n * @name has\n * @memberOf MapCache\n * @param {string} key The key of the entry to check.\n * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.\n */\nfunction mapCacheHas(key) {\n return getMapData(this, key).has(key);\n}\n\nmodule.exports = mapCacheHas;\n","var getMapData = require('./_getMapData');\n\n/**\n * Sets the map `key` to `value`.\n *\n * @private\n * @name set\n * @memberOf MapCache\n * @param {string} key The key of the value to set.\n * @param {*} value The value to set.\n * @returns {Object} Returns the map cache instance.\n */\nfunction mapCacheSet(key, value) {\n var data = getMapData(this, key),\n size = data.size;\n\n data.set(key, value);\n this.size += data.size == size ? 0 : 1;\n return this;\n}\n\nmodule.exports = mapCacheSet;\n","var mapCacheClear = require('./_mapCacheClear'),\n mapCacheDelete = require('./_mapCacheDelete'),\n mapCacheGet = require('./_mapCacheGet'),\n mapCacheHas = require('./_mapCacheHas'),\n mapCacheSet = require('./_mapCacheSet');\n\n/**\n * Creates a map cache object to store key-value pairs.\n *\n * @private\n * @constructor\n * @param {Array} [entries] The key-value pairs to cache.\n */\nfunction MapCache(entries) {\n var index = -1,\n length = entries == null ? 0 : entries.length;\n\n this.clear();\n while (++index < length) {\n var entry = entries[index];\n this.set(entry[0], entry[1]);\n }\n}\n\n// Add methods to `MapCache`.\nMapCache.prototype.clear = mapCacheClear;\nMapCache.prototype['delete'] = mapCacheDelete;\nMapCache.prototype.get = mapCacheGet;\nMapCache.prototype.has = mapCacheHas;\nMapCache.prototype.set = mapCacheSet;\n\nmodule.exports = MapCache;\n","var ListCache = require('./_ListCache'),\n Map = require('./_Map'),\n MapCache = require('./_MapCache');\n\n/** Used as the size to enable large array optimizations. */\nvar LARGE_ARRAY_SIZE = 200;\n\n/**\n * Sets the stack `key` to `value`.\n *\n * @private\n * @name set\n * @memberOf Stack\n * @param {string} key The key of the value to set.\n * @param {*} value The value to set.\n * @returns {Object} Returns the stack cache instance.\n */\nfunction stackSet(key, value) {\n var data = this.__data__;\n if (data instanceof ListCache) {\n var pairs = data.__data__;\n if (!Map || (pairs.length < LARGE_ARRAY_SIZE - 1)) {\n pairs.push([key, value]);\n this.size = ++data.size;\n return this;\n }\n data = this.__data__ = new MapCache(pairs);\n }\n data.set(key, value);\n this.size = data.size;\n return this;\n}\n\nmodule.exports = stackSet;\n","var ListCache = require('./_ListCache'),\n stackClear = require('./_stackClear'),\n stackDelete = require('./_stackDelete'),\n stackGet = require('./_stackGet'),\n stackHas = require('./_stackHas'),\n stackSet = require('./_stackSet');\n\n/**\n * Creates a stack cache object to store key-value pairs.\n *\n * @private\n * @constructor\n * @param {Array} [entries] The key-value pairs to cache.\n */\nfunction Stack(entries) {\n var data = this.__data__ = new ListCache(entries);\n this.size = data.size;\n}\n\n// Add methods to `Stack`.\nStack.prototype.clear = stackClear;\nStack.prototype['delete'] = stackDelete;\nStack.prototype.get = stackGet;\nStack.prototype.has = stackHas;\nStack.prototype.set = stackSet;\n\nmodule.exports = Stack;\n","/**\n * A specialized version of `_.forEach` for arrays without support for\n * iteratee shorthands.\n *\n * @private\n * @param {Array} [array] The array to iterate over.\n * @param {Function} iteratee The function invoked per iteration.\n * @returns {Array} Returns `array`.\n */\nfunction arrayEach(array, iteratee) {\n var index = -1,\n length = array == null ? 0 : array.length;\n\n while (++index < length) {\n if (iteratee(array[index], index, array) === false) {\n break;\n }\n }\n return array;\n}\n\nmodule.exports = arrayEach;\n","var getNative = require('./_getNative');\n\nvar defineProperty = (function() {\n try {\n var func = getNative(Object, 'defineProperty');\n func({}, '', {});\n return func;\n } catch (e) {}\n}());\n\nmodule.exports = defineProperty;\n","var defineProperty = require('./_defineProperty');\n\n/**\n * The base implementation of `assignValue` and `assignMergeValue` without\n * value checks.\n *\n * @private\n * @param {Object} object The object to modify.\n * @param {string} key The key of the property to assign.\n * @param {*} value The value to assign.\n */\nfunction baseAssignValue(object, key, value) {\n if (key == '__proto__' && defineProperty) {\n defineProperty(object, key, {\n 'configurable': true,\n 'enumerable': true,\n 'value': value,\n 'writable': true\n });\n } else {\n object[key] = value;\n }\n}\n\nmodule.exports = baseAssignValue;\n","var baseAssignValue = require('./_baseAssignValue'),\n eq = require('./eq');\n\n/** Used for built-in method references. */\nvar objectProto = Object.prototype;\n\n/** Used to check objects for own properties. */\nvar hasOwnProperty = objectProto.hasOwnProperty;\n\n/**\n * Assigns `value` to `key` of `object` if the existing value is not equivalent\n * using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)\n * for equality comparisons.\n *\n * @private\n * @param {Object} object The object to modify.\n * @param {string} key The key of the property to assign.\n * @param {*} value The value to assign.\n */\nfunction assignValue(object, key, value) {\n var objValue = object[key];\n if (!(hasOwnProperty.call(object, key) && eq(objValue, value)) ||\n (value === undefined && !(key in object))) {\n baseAssignValue(object, key, value);\n }\n}\n\nmodule.exports = assignValue;\n","var assignValue = require('./_assignValue'),\n baseAssignValue = require('./_baseAssignValue');\n\n/**\n * Copies properties of `source` to `object`.\n *\n * @private\n * @param {Object} source The object to copy properties from.\n * @param {Array} props The property identifiers to copy.\n * @param {Object} [object={}] The object to copy properties to.\n * @param {Function} [customizer] The function to customize copied values.\n * @returns {Object} Returns `object`.\n */\nfunction copyObject(source, props, object, customizer) {\n var isNew = !object;\n object || (object = {});\n\n var index = -1,\n length = props.length;\n\n while (++index < length) {\n var key = props[index];\n\n var newValue = customizer\n ? customizer(object[key], source[key], key, object, source)\n : undefined;\n\n if (newValue === undefined) {\n newValue = source[key];\n }\n if (isNew) {\n baseAssignValue(object, key, newValue);\n } else {\n assignValue(object, key, newValue);\n }\n }\n return object;\n}\n\nmodule.exports = copyObject;\n","/**\n * The base implementation of `_.times` without support for iteratee shorthands\n * or max array length checks.\n *\n * @private\n * @param {number} n The number of times to invoke `iteratee`.\n * @param {Function} iteratee The function invoked per iteration.\n * @returns {Array} Returns the array of results.\n */\nfunction baseTimes(n, iteratee) {\n var index = -1,\n result = Array(n);\n\n while (++index < n) {\n result[index] = iteratee(index);\n }\n return result;\n}\n\nmodule.exports = baseTimes;\n","/**\n * Checks if `value` is object-like. A value is object-like if it's not `null`\n * and has a `typeof` result of \"object\".\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is object-like, else `false`.\n * @example\n *\n * _.isObjectLike({});\n * // => true\n *\n * _.isObjectLike([1, 2, 3]);\n * // => true\n *\n * _.isObjectLike(_.noop);\n * // => false\n *\n * _.isObjectLike(null);\n * // => false\n */\nfunction isObjectLike(value) {\n return value != null && typeof value == 'object';\n}\n\nmodule.exports = isObjectLike;\n","var baseGetTag = require('./_baseGetTag'),\n isObjectLike = require('./isObjectLike');\n\n/** `Object#toString` result references. */\nvar argsTag = '[object Arguments]';\n\n/**\n * The base implementation of `_.isArguments`.\n *\n * @private\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is an `arguments` object,\n */\nfunction baseIsArguments(value) {\n return isObjectLike(value) && baseGetTag(value) == argsTag;\n}\n\nmodule.exports = baseIsArguments;\n","var baseIsArguments = require('./_baseIsArguments'),\n isObjectLike = require('./isObjectLike');\n\n/** Used for built-in method references. */\nvar objectProto = Object.prototype;\n\n/** Used to check objects for own properties. */\nvar hasOwnProperty = objectProto.hasOwnProperty;\n\n/** Built-in value references. */\nvar propertyIsEnumerable = objectProto.propertyIsEnumerable;\n\n/**\n * Checks if `value` is likely an `arguments` object.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is an `arguments` object,\n * else `false`.\n * @example\n *\n * _.isArguments(function() { return arguments; }());\n * // => true\n *\n * _.isArguments([1, 2, 3]);\n * // => false\n */\nvar isArguments = baseIsArguments(function() { return arguments; }()) ? baseIsArguments : function(value) {\n return isObjectLike(value) && hasOwnProperty.call(value, 'callee') &&\n !propertyIsEnumerable.call(value, 'callee');\n};\n\nmodule.exports = isArguments;\n","/**\n * Checks if `value` is classified as an `Array` object.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is an array, else `false`.\n * @example\n *\n * _.isArray([1, 2, 3]);\n * // => true\n *\n * _.isArray(document.body.children);\n * // => false\n *\n * _.isArray('abc');\n * // => false\n *\n * _.isArray(_.noop);\n * // => false\n */\nvar isArray = Array.isArray;\n\nmodule.exports = isArray;\n","/**\n * This method returns `false`.\n *\n * @static\n * @memberOf _\n * @since 4.13.0\n * @category Util\n * @returns {boolean} Returns `false`.\n * @example\n *\n * _.times(2, _.stubFalse);\n * // => [false, false]\n */\nfunction stubFalse() {\n return false;\n}\n\nmodule.exports = stubFalse;\n","var root = require('./_root'),\n stubFalse = require('./stubFalse');\n\n/** Detect free variable `exports`. */\nvar freeExports = typeof exports == 'object' && exports && !exports.nodeType && exports;\n\n/** Detect free variable `module`. */\nvar freeModule = freeExports && typeof module == 'object' && module && !module.nodeType && module;\n\n/** Detect the popular CommonJS extension `module.exports`. */\nvar moduleExports = freeModule && freeModule.exports === freeExports;\n\n/** Built-in value references. */\nvar Buffer = moduleExports ? root.Buffer : undefined;\n\n/* Built-in method references for those with the same name as other `lodash` methods. */\nvar nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined;\n\n/**\n * Checks if `value` is a buffer.\n *\n * @static\n * @memberOf _\n * @since 4.3.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a buffer, else `false`.\n * @example\n *\n * _.isBuffer(new Buffer(2));\n * // => true\n *\n * _.isBuffer(new Uint8Array(2));\n * // => false\n */\nvar isBuffer = nativeIsBuffer || stubFalse;\n\nmodule.exports = isBuffer;\n","/** Used as references for various `Number` constants. */\nvar MAX_SAFE_INTEGER = 9007199254740991;\n\n/** Used to detect unsigned integer values. */\nvar reIsUint = /^(?:0|[1-9]\\d*)$/;\n\n/**\n * Checks if `value` is a valid array-like index.\n *\n * @private\n * @param {*} value The value to check.\n * @param {number} [length=MAX_SAFE_INTEGER] The upper bounds of a valid index.\n * @returns {boolean} Returns `true` if `value` is a valid index, else `false`.\n */\nfunction isIndex(value, length) {\n var type = typeof value;\n length = length == null ? MAX_SAFE_INTEGER : length;\n\n return !!length &&\n (type == 'number' ||\n (type != 'symbol' && reIsUint.test(value))) &&\n (value > -1 && value % 1 == 0 && value < length);\n}\n\nmodule.exports = isIndex;\n","/** Used as references for various `Number` constants. */\nvar MAX_SAFE_INTEGER = 9007199254740991;\n\n/**\n * Checks if `value` is a valid array-like length.\n *\n * **Note:** This method is loosely based on\n * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a valid length, else `false`.\n * @example\n *\n * _.isLength(3);\n * // => true\n *\n * _.isLength(Number.MIN_VALUE);\n * // => false\n *\n * _.isLength(Infinity);\n * // => false\n *\n * _.isLength('3');\n * // => false\n */\nfunction isLength(value) {\n return typeof value == 'number' &&\n value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;\n}\n\nmodule.exports = isLength;\n","var baseGetTag = require('./_baseGetTag'),\n isLength = require('./isLength'),\n isObjectLike = require('./isObjectLike');\n\n/** `Object#toString` result references. */\nvar argsTag = '[object Arguments]',\n arrayTag = '[object Array]',\n boolTag = '[object Boolean]',\n dateTag = '[object Date]',\n errorTag = '[object Error]',\n funcTag = '[object Function]',\n mapTag = '[object Map]',\n numberTag = '[object Number]',\n objectTag = '[object Object]',\n regexpTag = '[object RegExp]',\n setTag = '[object Set]',\n stringTag = '[object String]',\n weakMapTag = '[object WeakMap]';\n\nvar arrayBufferTag = '[object ArrayBuffer]',\n dataViewTag = '[object DataView]',\n float32Tag = '[object Float32Array]',\n float64Tag = '[object Float64Array]',\n int8Tag = '[object Int8Array]',\n int16Tag = '[object Int16Array]',\n int32Tag = '[object Int32Array]',\n uint8Tag = '[object Uint8Array]',\n uint8ClampedTag = '[object Uint8ClampedArray]',\n uint16Tag = '[object Uint16Array]',\n uint32Tag = '[object Uint32Array]';\n\n/** Used to identify `toStringTag` values of typed arrays. */\nvar typedArrayTags = {};\ntypedArrayTags[float32Tag] = typedArrayTags[float64Tag] =\ntypedArrayTags[int8Tag] = typedArrayTags[int16Tag] =\ntypedArrayTags[int32Tag] = typedArrayTags[uint8Tag] =\ntypedArrayTags[uint8ClampedTag] = typedArrayTags[uint16Tag] =\ntypedArrayTags[uint32Tag] = true;\ntypedArrayTags[argsTag] = typedArrayTags[arrayTag] =\ntypedArrayTags[arrayBufferTag] = typedArrayTags[boolTag] =\ntypedArrayTags[dataViewTag] = typedArrayTags[dateTag] =\ntypedArrayTags[errorTag] = typedArrayTags[funcTag] =\ntypedArrayTags[mapTag] = typedArrayTags[numberTag] =\ntypedArrayTags[objectTag] = typedArrayTags[regexpTag] =\ntypedArrayTags[setTag] = typedArrayTags[stringTag] =\ntypedArrayTags[weakMapTag] = false;\n\n/**\n * The base implementation of `_.isTypedArray` without Node.js optimizations.\n *\n * @private\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a typed array, else `false`.\n */\nfunction baseIsTypedArray(value) {\n return isObjectLike(value) &&\n isLength(value.length) && !!typedArrayTags[baseGetTag(value)];\n}\n\nmodule.exports = baseIsTypedArray;\n","/**\n * The base implementation of `_.unary` without support for storing metadata.\n *\n * @private\n * @param {Function} func The function to cap arguments for.\n * @returns {Function} Returns the new capped function.\n */\nfunction baseUnary(func) {\n return function(value) {\n return func(value);\n };\n}\n\nmodule.exports = baseUnary;\n","var freeGlobal = require('./_freeGlobal');\n\n/** Detect free variable `exports`. */\nvar freeExports = typeof exports == 'object' && exports && !exports.nodeType && exports;\n\n/** Detect free variable `module`. */\nvar freeModule = freeExports && typeof module == 'object' && module && !module.nodeType && module;\n\n/** Detect the popular CommonJS extension `module.exports`. */\nvar moduleExports = freeModule && freeModule.exports === freeExports;\n\n/** Detect free variable `process` from Node.js. */\nvar freeProcess = moduleExports && freeGlobal.process;\n\n/** Used to access faster Node.js helpers. */\nvar nodeUtil = (function() {\n try {\n // Use `util.types` for Node.js 10+.\n var types = freeModule && freeModule.require && freeModule.require('util').types;\n\n if (types) {\n return types;\n }\n\n // Legacy `process.binding('util')` for Node.js < 10.\n return freeProcess && freeProcess.binding && freeProcess.binding('util');\n } catch (e) {}\n}());\n\nmodule.exports = nodeUtil;\n","var baseIsTypedArray = require('./_baseIsTypedArray'),\n baseUnary = require('./_baseUnary'),\n nodeUtil = require('./_nodeUtil');\n\n/* Node.js helper references. */\nvar nodeIsTypedArray = nodeUtil && nodeUtil.isTypedArray;\n\n/**\n * Checks if `value` is classified as a typed array.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a typed array, else `false`.\n * @example\n *\n * _.isTypedArray(new Uint8Array);\n * // => true\n *\n * _.isTypedArray([]);\n * // => false\n */\nvar isTypedArray = nodeIsTypedArray ? baseUnary(nodeIsTypedArray) : baseIsTypedArray;\n\nmodule.exports = isTypedArray;\n","var baseTimes = require('./_baseTimes'),\n isArguments = require('./isArguments'),\n isArray = require('./isArray'),\n isBuffer = require('./isBuffer'),\n isIndex = require('./_isIndex'),\n isTypedArray = require('./isTypedArray');\n\n/** Used for built-in method references. */\nvar objectProto = Object.prototype;\n\n/** Used to check objects for own properties. */\nvar hasOwnProperty = objectProto.hasOwnProperty;\n\n/**\n * Creates an array of the enumerable property names of the array-like `value`.\n *\n * @private\n * @param {*} value The value to query.\n * @param {boolean} inherited Specify returning inherited property names.\n * @returns {Array} Returns the array of property names.\n */\nfunction arrayLikeKeys(value, inherited) {\n var isArr = isArray(value),\n isArg = !isArr && isArguments(value),\n isBuff = !isArr && !isArg && isBuffer(value),\n isType = !isArr && !isArg && !isBuff && isTypedArray(value),\n skipIndexes = isArr || isArg || isBuff || isType,\n result = skipIndexes ? baseTimes(value.length, String) : [],\n length = result.length;\n\n for (var key in value) {\n if ((inherited || hasOwnProperty.call(value, key)) &&\n !(skipIndexes && (\n // Safari 9 has enumerable `arguments.length` in strict mode.\n key == 'length' ||\n // Node.js 0.10 has enumerable non-index properties on buffers.\n (isBuff && (key == 'offset' || key == 'parent')) ||\n // PhantomJS 2 has enumerable non-index properties on typed arrays.\n (isType && (key == 'buffer' || key == 'byteLength' || key == 'byteOffset')) ||\n // Skip index properties.\n isIndex(key, length)\n ))) {\n result.push(key);\n }\n }\n return result;\n}\n\nmodule.exports = arrayLikeKeys;\n","/** Used for built-in method references. */\nvar objectProto = Object.prototype;\n\n/**\n * Checks if `value` is likely a prototype object.\n *\n * @private\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a prototype, else `false`.\n */\nfunction isPrototype(value) {\n var Ctor = value && value.constructor,\n proto = (typeof Ctor == 'function' && Ctor.prototype) || objectProto;\n\n return value === proto;\n}\n\nmodule.exports = isPrototype;\n","/**\n * Creates a unary function that invokes `func` with its argument transformed.\n *\n * @private\n * @param {Function} func The function to wrap.\n * @param {Function} transform The argument transform.\n * @returns {Function} Returns the new function.\n */\nfunction overArg(func, transform) {\n return function(arg) {\n return func(transform(arg));\n };\n}\n\nmodule.exports = overArg;\n","var overArg = require('./_overArg');\n\n/* Built-in method references for those with the same name as other `lodash` methods. */\nvar nativeKeys = overArg(Object.keys, Object);\n\nmodule.exports = nativeKeys;\n","var isPrototype = require('./_isPrototype'),\n nativeKeys = require('./_nativeKeys');\n\n/** Used for built-in method references. */\nvar objectProto = Object.prototype;\n\n/** Used to check objects for own properties. */\nvar hasOwnProperty = objectProto.hasOwnProperty;\n\n/**\n * The base implementation of `_.keys` which doesn't treat sparse arrays as dense.\n *\n * @private\n * @param {Object} object The object to query.\n * @returns {Array} Returns the array of property names.\n */\nfunction baseKeys(object) {\n if (!isPrototype(object)) {\n return nativeKeys(object);\n }\n var result = [];\n for (var key in Object(object)) {\n if (hasOwnProperty.call(object, key) && key != 'constructor') {\n result.push(key);\n }\n }\n return result;\n}\n\nmodule.exports = baseKeys;\n","var isFunction = require('./isFunction'),\n isLength = require('./isLength');\n\n/**\n * Checks if `value` is array-like. A value is considered array-like if it's\n * not a function and has a `value.length` that's an integer greater than or\n * equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is array-like, else `false`.\n * @example\n *\n * _.isArrayLike([1, 2, 3]);\n * // => true\n *\n * _.isArrayLike(document.body.children);\n * // => true\n *\n * _.isArrayLike('abc');\n * // => true\n *\n * _.isArrayLike(_.noop);\n * // => false\n */\nfunction isArrayLike(value) {\n return value != null && isLength(value.length) && !isFunction(value);\n}\n\nmodule.exports = isArrayLike;\n","var arrayLikeKeys = require('./_arrayLikeKeys'),\n baseKeys = require('./_baseKeys'),\n isArrayLike = require('./isArrayLike');\n\n/**\n * Creates an array of the own enumerable property names of `object`.\n *\n * **Note:** Non-object values are coerced to objects. See the\n * [ES spec](http://ecma-international.org/ecma-262/7.0/#sec-object.keys)\n * for more details.\n *\n * @static\n * @since 0.1.0\n * @memberOf _\n * @category Object\n * @param {Object} object The object to query.\n * @returns {Array} Returns the array of property names.\n * @example\n *\n * function Foo() {\n * this.a = 1;\n * this.b = 2;\n * }\n *\n * Foo.prototype.c = 3;\n *\n * _.keys(new Foo);\n * // => ['a', 'b'] (iteration order is not guaranteed)\n *\n * _.keys('hi');\n * // => ['0', '1']\n */\nfunction keys(object) {\n return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object);\n}\n\nmodule.exports = keys;\n","var copyObject = require('./_copyObject'),\n keys = require('./keys');\n\n/**\n * The base implementation of `_.assign` without support for multiple sources\n * or `customizer` functions.\n *\n * @private\n * @param {Object} object The destination object.\n * @param {Object} source The source object.\n * @returns {Object} Returns `object`.\n */\nfunction baseAssign(object, source) {\n return object && copyObject(source, keys(source), object);\n}\n\nmodule.exports = baseAssign;\n","/**\n * This function is like\n * [`Object.keys`](http://ecma-international.org/ecma-262/7.0/#sec-object.keys)\n * except that it includes inherited enumerable properties.\n *\n * @private\n * @param {Object} object The object to query.\n * @returns {Array} Returns the array of property names.\n */\nfunction nativeKeysIn(object) {\n var result = [];\n if (object != null) {\n for (var key in Object(object)) {\n result.push(key);\n }\n }\n return result;\n}\n\nmodule.exports = nativeKeysIn;\n","var isObject = require('./isObject'),\n isPrototype = require('./_isPrototype'),\n nativeKeysIn = require('./_nativeKeysIn');\n\n/** Used for built-in method references. */\nvar objectProto = Object.prototype;\n\n/** Used to check objects for own properties. */\nvar hasOwnProperty = objectProto.hasOwnProperty;\n\n/**\n * The base implementation of `_.keysIn` which doesn't treat sparse arrays as dense.\n *\n * @private\n * @param {Object} object The object to query.\n * @returns {Array} Returns the array of property names.\n */\nfunction baseKeysIn(object) {\n if (!isObject(object)) {\n return nativeKeysIn(object);\n }\n var isProto = isPrototype(object),\n result = [];\n\n for (var key in object) {\n if (!(key == 'constructor' && (isProto || !hasOwnProperty.call(object, key)))) {\n result.push(key);\n }\n }\n return result;\n}\n\nmodule.exports = baseKeysIn;\n","var arrayLikeKeys = require('./_arrayLikeKeys'),\n baseKeysIn = require('./_baseKeysIn'),\n isArrayLike = require('./isArrayLike');\n\n/**\n * Creates an array of the own and inherited enumerable property names of `object`.\n *\n * **Note:** Non-object values are coerced to objects.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Object\n * @param {Object} object The object to query.\n * @returns {Array} Returns the array of property names.\n * @example\n *\n * function Foo() {\n * this.a = 1;\n * this.b = 2;\n * }\n *\n * Foo.prototype.c = 3;\n *\n * _.keysIn(new Foo);\n * // => ['a', 'b', 'c'] (iteration order is not guaranteed)\n */\nfunction keysIn(object) {\n return isArrayLike(object) ? arrayLikeKeys(object, true) : baseKeysIn(object);\n}\n\nmodule.exports = keysIn;\n","var copyObject = require('./_copyObject'),\n keysIn = require('./keysIn');\n\n/**\n * The base implementation of `_.assignIn` without support for multiple sources\n * or `customizer` functions.\n *\n * @private\n * @param {Object} object The destination object.\n * @param {Object} source The source object.\n * @returns {Object} Returns `object`.\n */\nfunction baseAssignIn(object, source) {\n return object && copyObject(source, keysIn(source), object);\n}\n\nmodule.exports = baseAssignIn;\n","var root = require('./_root');\n\n/** Detect free variable `exports`. */\nvar freeExports = typeof exports == 'object' && exports && !exports.nodeType && exports;\n\n/** Detect free variable `module`. */\nvar freeModule = freeExports && typeof module == 'object' && module && !module.nodeType && module;\n\n/** Detect the popular CommonJS extension `module.exports`. */\nvar moduleExports = freeModule && freeModule.exports === freeExports;\n\n/** Built-in value references. */\nvar Buffer = moduleExports ? root.Buffer : undefined,\n allocUnsafe = Buffer ? Buffer.allocUnsafe : undefined;\n\n/**\n * Creates a clone of `buffer`.\n *\n * @private\n * @param {Buffer} buffer The buffer to clone.\n * @param {boolean} [isDeep] Specify a deep clone.\n * @returns {Buffer} Returns the cloned buffer.\n */\nfunction cloneBuffer(buffer, isDeep) {\n if (isDeep) {\n return buffer.slice();\n }\n var length = buffer.length,\n result = allocUnsafe ? allocUnsafe(length) : new buffer.constructor(length);\n\n buffer.copy(result);\n return result;\n}\n\nmodule.exports = cloneBuffer;\n","/**\n * Copies the values of `source` to `array`.\n *\n * @private\n * @param {Array} source The array to copy values from.\n * @param {Array} [array=[]] The array to copy values to.\n * @returns {Array} Returns `array`.\n */\nfunction copyArray(source, array) {\n var index = -1,\n length = source.length;\n\n array || (array = Array(length));\n while (++index < length) {\n array[index] = source[index];\n }\n return array;\n}\n\nmodule.exports = copyArray;\n","/**\n * A specialized version of `_.filter` for arrays without support for\n * iteratee shorthands.\n *\n * @private\n * @param {Array} [array] The array to iterate over.\n * @param {Function} predicate The function invoked per iteration.\n * @returns {Array} Returns the new filtered array.\n */\nfunction arrayFilter(array, predicate) {\n var index = -1,\n length = array == null ? 0 : array.length,\n resIndex = 0,\n result = [];\n\n while (++index < length) {\n var value = array[index];\n if (predicate(value, index, array)) {\n result[resIndex++] = value;\n }\n }\n return result;\n}\n\nmodule.exports = arrayFilter;\n","/**\n * This method returns a new empty array.\n *\n * @static\n * @memberOf _\n * @since 4.13.0\n * @category Util\n * @returns {Array} Returns the new empty array.\n * @example\n *\n * var arrays = _.times(2, _.stubArray);\n *\n * console.log(arrays);\n * // => [[], []]\n *\n * console.log(arrays[0] === arrays[1]);\n * // => false\n */\nfunction stubArray() {\n return [];\n}\n\nmodule.exports = stubArray;\n","var arrayFilter = require('./_arrayFilter'),\n stubArray = require('./stubArray');\n\n/** Used for built-in method references. */\nvar objectProto = Object.prototype;\n\n/** Built-in value references. */\nvar propertyIsEnumerable = objectProto.propertyIsEnumerable;\n\n/* Built-in method references for those with the same name as other `lodash` methods. */\nvar nativeGetSymbols = Object.getOwnPropertySymbols;\n\n/**\n * Creates an array of the own enumerable symbols of `object`.\n *\n * @private\n * @param {Object} object The object to query.\n * @returns {Array} Returns the array of symbols.\n */\nvar getSymbols = !nativeGetSymbols ? stubArray : function(object) {\n if (object == null) {\n return [];\n }\n object = Object(object);\n return arrayFilter(nativeGetSymbols(object), function(symbol) {\n return propertyIsEnumerable.call(object, symbol);\n });\n};\n\nmodule.exports = getSymbols;\n","var copyObject = require('./_copyObject'),\n getSymbols = require('./_getSymbols');\n\n/**\n * Copies own symbols of `source` to `object`.\n *\n * @private\n * @param {Object} source The object to copy symbols from.\n * @param {Object} [object={}] The object to copy symbols to.\n * @returns {Object} Returns `object`.\n */\nfunction copySymbols(source, object) {\n return copyObject(source, getSymbols(source), object);\n}\n\nmodule.exports = copySymbols;\n","/**\n * Appends the elements of `values` to `array`.\n *\n * @private\n * @param {Array} array The array to modify.\n * @param {Array} values The values to append.\n * @returns {Array} Returns `array`.\n */\nfunction arrayPush(array, values) {\n var index = -1,\n length = values.length,\n offset = array.length;\n\n while (++index < length) {\n array[offset + index] = values[index];\n }\n return array;\n}\n\nmodule.exports = arrayPush;\n","var overArg = require('./_overArg');\n\n/** Built-in value references. */\nvar getPrototype = overArg(Object.getPrototypeOf, Object);\n\nmodule.exports = getPrototype;\n","var arrayPush = require('./_arrayPush'),\n getPrototype = require('./_getPrototype'),\n getSymbols = require('./_getSymbols'),\n stubArray = require('./stubArray');\n\n/* Built-in method references for those with the same name as other `lodash` methods. */\nvar nativeGetSymbols = Object.getOwnPropertySymbols;\n\n/**\n * Creates an array of the own and inherited enumerable symbols of `object`.\n *\n * @private\n * @param {Object} object The object to query.\n * @returns {Array} Returns the array of symbols.\n */\nvar getSymbolsIn = !nativeGetSymbols ? stubArray : function(object) {\n var result = [];\n while (object) {\n arrayPush(result, getSymbols(object));\n object = getPrototype(object);\n }\n return result;\n};\n\nmodule.exports = getSymbolsIn;\n","var copyObject = require('./_copyObject'),\n getSymbolsIn = require('./_getSymbolsIn');\n\n/**\n * Copies own and inherited symbols of `source` to `object`.\n *\n * @private\n * @param {Object} source The object to copy symbols from.\n * @param {Object} [object={}] The object to copy symbols to.\n * @returns {Object} Returns `object`.\n */\nfunction copySymbolsIn(source, object) {\n return copyObject(source, getSymbolsIn(source), object);\n}\n\nmodule.exports = copySymbolsIn;\n","var arrayPush = require('./_arrayPush'),\n isArray = require('./isArray');\n\n/**\n * The base implementation of `getAllKeys` and `getAllKeysIn` which uses\n * `keysFunc` and `symbolsFunc` to get the enumerable property names and\n * symbols of `object`.\n *\n * @private\n * @param {Object} object The object to query.\n * @param {Function} keysFunc The function to get the keys of `object`.\n * @param {Function} symbolsFunc The function to get the symbols of `object`.\n * @returns {Array} Returns the array of property names and symbols.\n */\nfunction baseGetAllKeys(object, keysFunc, symbolsFunc) {\n var result = keysFunc(object);\n return isArray(object) ? result : arrayPush(result, symbolsFunc(object));\n}\n\nmodule.exports = baseGetAllKeys;\n","var baseGetAllKeys = require('./_baseGetAllKeys'),\n getSymbols = require('./_getSymbols'),\n keys = require('./keys');\n\n/**\n * Creates an array of own enumerable property names and symbols of `object`.\n *\n * @private\n * @param {Object} object The object to query.\n * @returns {Array} Returns the array of property names and symbols.\n */\nfunction getAllKeys(object) {\n return baseGetAllKeys(object, keys, getSymbols);\n}\n\nmodule.exports = getAllKeys;\n","var baseGetAllKeys = require('./_baseGetAllKeys'),\n getSymbolsIn = require('./_getSymbolsIn'),\n keysIn = require('./keysIn');\n\n/**\n * Creates an array of own and inherited enumerable property names and\n * symbols of `object`.\n *\n * @private\n * @param {Object} object The object to query.\n * @returns {Array} Returns the array of property names and symbols.\n */\nfunction getAllKeysIn(object) {\n return baseGetAllKeys(object, keysIn, getSymbolsIn);\n}\n\nmodule.exports = getAllKeysIn;\n","var getNative = require('./_getNative'),\n root = require('./_root');\n\n/* Built-in method references that are verified to be native. */\nvar DataView = getNative(root, 'DataView');\n\nmodule.exports = DataView;\n","var getNative = require('./_getNative'),\n root = require('./_root');\n\n/* Built-in method references that are verified to be native. */\nvar Promise = getNative(root, 'Promise');\n\nmodule.exports = Promise;\n","var getNative = require('./_getNative'),\n root = require('./_root');\n\n/* Built-in method references that are verified to be native. */\nvar Set = getNative(root, 'Set');\n\nmodule.exports = Set;\n","var getNative = require('./_getNative'),\n root = require('./_root');\n\n/* Built-in method references that are verified to be native. */\nvar WeakMap = getNative(root, 'WeakMap');\n\nmodule.exports = WeakMap;\n","var DataView = require('./_DataView'),\n Map = require('./_Map'),\n Promise = require('./_Promise'),\n Set = require('./_Set'),\n WeakMap = require('./_WeakMap'),\n baseGetTag = require('./_baseGetTag'),\n toSource = require('./_toSource');\n\n/** `Object#toString` result references. */\nvar mapTag = '[object Map]',\n objectTag = '[object Object]',\n promiseTag = '[object Promise]',\n setTag = '[object Set]',\n weakMapTag = '[object WeakMap]';\n\nvar dataViewTag = '[object DataView]';\n\n/** Used to detect maps, sets, and weakmaps. */\nvar dataViewCtorString = toSource(DataView),\n mapCtorString = toSource(Map),\n promiseCtorString = toSource(Promise),\n setCtorString = toSource(Set),\n weakMapCtorString = toSource(WeakMap);\n\n/**\n * Gets the `toStringTag` of `value`.\n *\n * @private\n * @param {*} value The value to query.\n * @returns {string} Returns the `toStringTag`.\n */\nvar getTag = baseGetTag;\n\n// Fallback for data views, maps, sets, and weak maps in IE 11 and promises in Node.js < 6.\nif ((DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag) ||\n (Map && getTag(new Map) != mapTag) ||\n (Promise && getTag(Promise.resolve()) != promiseTag) ||\n (Set && getTag(new Set) != setTag) ||\n (WeakMap && getTag(new WeakMap) != weakMapTag)) {\n getTag = function(value) {\n var result = baseGetTag(value),\n Ctor = result == objectTag ? value.constructor : undefined,\n ctorString = Ctor ? toSource(Ctor) : '';\n\n if (ctorString) {\n switch (ctorString) {\n case dataViewCtorString: return dataViewTag;\n case mapCtorString: return mapTag;\n case promiseCtorString: return promiseTag;\n case setCtorString: return setTag;\n case weakMapCtorString: return weakMapTag;\n }\n }\n return result;\n };\n}\n\nmodule.exports = getTag;\n","/** Used for built-in method references. */\nvar objectProto = Object.prototype;\n\n/** Used to check objects for own properties. */\nvar hasOwnProperty = objectProto.hasOwnProperty;\n\n/**\n * Initializes an array clone.\n *\n * @private\n * @param {Array} array The array to clone.\n * @returns {Array} Returns the initialized clone.\n */\nfunction initCloneArray(array) {\n var length = array.length,\n result = new array.constructor(length);\n\n // Add properties assigned by `RegExp#exec`.\n if (length && typeof array[0] == 'string' && hasOwnProperty.call(array, 'index')) {\n result.index = array.index;\n result.input = array.input;\n }\n return result;\n}\n\nmodule.exports = initCloneArray;\n","var root = require('./_root');\n\n/** Built-in value references. */\nvar Uint8Array = root.Uint8Array;\n\nmodule.exports = Uint8Array;\n","var Uint8Array = require('./_Uint8Array');\n\n/**\n * Creates a clone of `arrayBuffer`.\n *\n * @private\n * @param {ArrayBuffer} arrayBuffer The array buffer to clone.\n * @returns {ArrayBuffer} Returns the cloned array buffer.\n */\nfunction cloneArrayBuffer(arrayBuffer) {\n var result = new arrayBuffer.constructor(arrayBuffer.byteLength);\n new Uint8Array(result).set(new Uint8Array(arrayBuffer));\n return result;\n}\n\nmodule.exports = cloneArrayBuffer;\n","var cloneArrayBuffer = require('./_cloneArrayBuffer');\n\n/**\n * Creates a clone of `dataView`.\n *\n * @private\n * @param {Object} dataView The data view to clone.\n * @param {boolean} [isDeep] Specify a deep clone.\n * @returns {Object} Returns the cloned data view.\n */\nfunction cloneDataView(dataView, isDeep) {\n var buffer = isDeep ? cloneArrayBuffer(dataView.buffer) : dataView.buffer;\n return new dataView.constructor(buffer, dataView.byteOffset, dataView.byteLength);\n}\n\nmodule.exports = cloneDataView;\n","/** Used to match `RegExp` flags from their coerced string values. */\nvar reFlags = /\\w*$/;\n\n/**\n * Creates a clone of `regexp`.\n *\n * @private\n * @param {Object} regexp The regexp to clone.\n * @returns {Object} Returns the cloned regexp.\n */\nfunction cloneRegExp(regexp) {\n var result = new regexp.constructor(regexp.source, reFlags.exec(regexp));\n result.lastIndex = regexp.lastIndex;\n return result;\n}\n\nmodule.exports = cloneRegExp;\n","var Symbol = require('./_Symbol');\n\n/** Used to convert symbols to primitives and strings. */\nvar symbolProto = Symbol ? Symbol.prototype : undefined,\n symbolValueOf = symbolProto ? symbolProto.valueOf : undefined;\n\n/**\n * Creates a clone of the `symbol` object.\n *\n * @private\n * @param {Object} symbol The symbol object to clone.\n * @returns {Object} Returns the cloned symbol object.\n */\nfunction cloneSymbol(symbol) {\n return symbolValueOf ? Object(symbolValueOf.call(symbol)) : {};\n}\n\nmodule.exports = cloneSymbol;\n","var cloneArrayBuffer = require('./_cloneArrayBuffer');\n\n/**\n * Creates a clone of `typedArray`.\n *\n * @private\n * @param {Object} typedArray The typed array to clone.\n * @param {boolean} [isDeep] Specify a deep clone.\n * @returns {Object} Returns the cloned typed array.\n */\nfunction cloneTypedArray(typedArray, isDeep) {\n var buffer = isDeep ? cloneArrayBuffer(typedArray.buffer) : typedArray.buffer;\n return new typedArray.constructor(buffer, typedArray.byteOffset, typedArray.length);\n}\n\nmodule.exports = cloneTypedArray;\n","var cloneArrayBuffer = require('./_cloneArrayBuffer'),\n cloneDataView = require('./_cloneDataView'),\n cloneRegExp = require('./_cloneRegExp'),\n cloneSymbol = require('./_cloneSymbol'),\n cloneTypedArray = require('./_cloneTypedArray');\n\n/** `Object#toString` result references. */\nvar boolTag = '[object Boolean]',\n dateTag = '[object Date]',\n mapTag = '[object Map]',\n numberTag = '[object Number]',\n regexpTag = '[object RegExp]',\n setTag = '[object Set]',\n stringTag = '[object String]',\n symbolTag = '[object Symbol]';\n\nvar arrayBufferTag = '[object ArrayBuffer]',\n dataViewTag = '[object DataView]',\n float32Tag = '[object Float32Array]',\n float64Tag = '[object Float64Array]',\n int8Tag = '[object Int8Array]',\n int16Tag = '[object Int16Array]',\n int32Tag = '[object Int32Array]',\n uint8Tag = '[object Uint8Array]',\n uint8ClampedTag = '[object Uint8ClampedArray]',\n uint16Tag = '[object Uint16Array]',\n uint32Tag = '[object Uint32Array]';\n\n/**\n * Initializes an object clone based on its `toStringTag`.\n *\n * **Note:** This function only supports cloning values with tags of\n * `Boolean`, `Date`, `Error`, `Map`, `Number`, `RegExp`, `Set`, or `String`.\n *\n * @private\n * @param {Object} object The object to clone.\n * @param {string} tag The `toStringTag` of the object to clone.\n * @param {boolean} [isDeep] Specify a deep clone.\n * @returns {Object} Returns the initialized clone.\n */\nfunction initCloneByTag(object, tag, isDeep) {\n var Ctor = object.constructor;\n switch (tag) {\n case arrayBufferTag:\n return cloneArrayBuffer(object);\n\n case boolTag:\n case dateTag:\n return new Ctor(+object);\n\n case dataViewTag:\n return cloneDataView(object, isDeep);\n\n case float32Tag: case float64Tag:\n case int8Tag: case int16Tag: case int32Tag:\n case uint8Tag: case uint8ClampedTag: case uint16Tag: case uint32Tag:\n return cloneTypedArray(object, isDeep);\n\n case mapTag:\n return new Ctor;\n\n case numberTag:\n case stringTag:\n return new Ctor(object);\n\n case regexpTag:\n return cloneRegExp(object);\n\n case setTag:\n return new Ctor;\n\n case symbolTag:\n return cloneSymbol(object);\n }\n}\n\nmodule.exports = initCloneByTag;\n","var isObject = require('./isObject');\n\n/** Built-in value references. */\nvar objectCreate = Object.create;\n\n/**\n * The base implementation of `_.create` without support for assigning\n * properties to the created object.\n *\n * @private\n * @param {Object} proto The object to inherit from.\n * @returns {Object} Returns the new object.\n */\nvar baseCreate = (function() {\n function object() {}\n return function(proto) {\n if (!isObject(proto)) {\n return {};\n }\n if (objectCreate) {\n return objectCreate(proto);\n }\n object.prototype = proto;\n var result = new object;\n object.prototype = undefined;\n return result;\n };\n}());\n\nmodule.exports = baseCreate;\n","var baseCreate = require('./_baseCreate'),\n getPrototype = require('./_getPrototype'),\n isPrototype = require('./_isPrototype');\n\n/**\n * Initializes an object clone.\n *\n * @private\n * @param {Object} object The object to clone.\n * @returns {Object} Returns the initialized clone.\n */\nfunction initCloneObject(object) {\n return (typeof object.constructor == 'function' && !isPrototype(object))\n ? baseCreate(getPrototype(object))\n : {};\n}\n\nmodule.exports = initCloneObject;\n","var getTag = require('./_getTag'),\n isObjectLike = require('./isObjectLike');\n\n/** `Object#toString` result references. */\nvar mapTag = '[object Map]';\n\n/**\n * The base implementation of `_.isMap` without Node.js optimizations.\n *\n * @private\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a map, else `false`.\n */\nfunction baseIsMap(value) {\n return isObjectLike(value) && getTag(value) == mapTag;\n}\n\nmodule.exports = baseIsMap;\n","var baseIsMap = require('./_baseIsMap'),\n baseUnary = require('./_baseUnary'),\n nodeUtil = require('./_nodeUtil');\n\n/* Node.js helper references. */\nvar nodeIsMap = nodeUtil && nodeUtil.isMap;\n\n/**\n * Checks if `value` is classified as a `Map` object.\n *\n * @static\n * @memberOf _\n * @since 4.3.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a map, else `false`.\n * @example\n *\n * _.isMap(new Map);\n * // => true\n *\n * _.isMap(new WeakMap);\n * // => false\n */\nvar isMap = nodeIsMap ? baseUnary(nodeIsMap) : baseIsMap;\n\nmodule.exports = isMap;\n","var getTag = require('./_getTag'),\n isObjectLike = require('./isObjectLike');\n\n/** `Object#toString` result references. */\nvar setTag = '[object Set]';\n\n/**\n * The base implementation of `_.isSet` without Node.js optimizations.\n *\n * @private\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a set, else `false`.\n */\nfunction baseIsSet(value) {\n return isObjectLike(value) && getTag(value) == setTag;\n}\n\nmodule.exports = baseIsSet;\n","var baseIsSet = require('./_baseIsSet'),\n baseUnary = require('./_baseUnary'),\n nodeUtil = require('./_nodeUtil');\n\n/* Node.js helper references. */\nvar nodeIsSet = nodeUtil && nodeUtil.isSet;\n\n/**\n * Checks if `value` is classified as a `Set` object.\n *\n * @static\n * @memberOf _\n * @since 4.3.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a set, else `false`.\n * @example\n *\n * _.isSet(new Set);\n * // => true\n *\n * _.isSet(new WeakSet);\n * // => false\n */\nvar isSet = nodeIsSet ? baseUnary(nodeIsSet) : baseIsSet;\n\nmodule.exports = isSet;\n","var Stack = require('./_Stack'),\n arrayEach = require('./_arrayEach'),\n assignValue = require('./_assignValue'),\n baseAssign = require('./_baseAssign'),\n baseAssignIn = require('./_baseAssignIn'),\n cloneBuffer = require('./_cloneBuffer'),\n copyArray = require('./_copyArray'),\n copySymbols = require('./_copySymbols'),\n copySymbolsIn = require('./_copySymbolsIn'),\n getAllKeys = require('./_getAllKeys'),\n getAllKeysIn = require('./_getAllKeysIn'),\n getTag = require('./_getTag'),\n initCloneArray = require('./_initCloneArray'),\n initCloneByTag = require('./_initCloneByTag'),\n initCloneObject = require('./_initCloneObject'),\n isArray = require('./isArray'),\n isBuffer = require('./isBuffer'),\n isMap = require('./isMap'),\n isObject = require('./isObject'),\n isSet = require('./isSet'),\n keys = require('./keys'),\n keysIn = require('./keysIn');\n\n/** Used to compose bitmasks for cloning. */\nvar CLONE_DEEP_FLAG = 1,\n CLONE_FLAT_FLAG = 2,\n CLONE_SYMBOLS_FLAG = 4;\n\n/** `Object#toString` result references. */\nvar argsTag = '[object Arguments]',\n arrayTag = '[object Array]',\n boolTag = '[object Boolean]',\n dateTag = '[object Date]',\n errorTag = '[object Error]',\n funcTag = '[object Function]',\n genTag = '[object GeneratorFunction]',\n mapTag = '[object Map]',\n numberTag = '[object Number]',\n objectTag = '[object Object]',\n regexpTag = '[object RegExp]',\n setTag = '[object Set]',\n stringTag = '[object String]',\n symbolTag = '[object Symbol]',\n weakMapTag = '[object WeakMap]';\n\nvar arrayBufferTag = '[object ArrayBuffer]',\n dataViewTag = '[object DataView]',\n float32Tag = '[object Float32Array]',\n float64Tag = '[object Float64Array]',\n int8Tag = '[object Int8Array]',\n int16Tag = '[object Int16Array]',\n int32Tag = '[object Int32Array]',\n uint8Tag = '[object Uint8Array]',\n uint8ClampedTag = '[object Uint8ClampedArray]',\n uint16Tag = '[object Uint16Array]',\n uint32Tag = '[object Uint32Array]';\n\n/** Used to identify `toStringTag` values supported by `_.clone`. */\nvar cloneableTags = {};\ncloneableTags[argsTag] = cloneableTags[arrayTag] =\ncloneableTags[arrayBufferTag] = cloneableTags[dataViewTag] =\ncloneableTags[boolTag] = cloneableTags[dateTag] =\ncloneableTags[float32Tag] = cloneableTags[float64Tag] =\ncloneableTags[int8Tag] = cloneableTags[int16Tag] =\ncloneableTags[int32Tag] = cloneableTags[mapTag] =\ncloneableTags[numberTag] = cloneableTags[objectTag] =\ncloneableTags[regexpTag] = cloneableTags[setTag] =\ncloneableTags[stringTag] = cloneableTags[symbolTag] =\ncloneableTags[uint8Tag] = cloneableTags[uint8ClampedTag] =\ncloneableTags[uint16Tag] = cloneableTags[uint32Tag] = true;\ncloneableTags[errorTag] = cloneableTags[funcTag] =\ncloneableTags[weakMapTag] = false;\n\n/**\n * The base implementation of `_.clone` and `_.cloneDeep` which tracks\n * traversed objects.\n *\n * @private\n * @param {*} value The value to clone.\n * @param {boolean} bitmask The bitmask flags.\n * 1 - Deep clone\n * 2 - Flatten inherited properties\n * 4 - Clone symbols\n * @param {Function} [customizer] The function to customize cloning.\n * @param {string} [key] The key of `value`.\n * @param {Object} [object] The parent object of `value`.\n * @param {Object} [stack] Tracks traversed objects and their clone counterparts.\n * @returns {*} Returns the cloned value.\n */\nfunction baseClone(value, bitmask, customizer, key, object, stack) {\n var result,\n isDeep = bitmask & CLONE_DEEP_FLAG,\n isFlat = bitmask & CLONE_FLAT_FLAG,\n isFull = bitmask & CLONE_SYMBOLS_FLAG;\n\n if (customizer) {\n result = object ? customizer(value, key, object, stack) : customizer(value);\n }\n if (result !== undefined) {\n return result;\n }\n if (!isObject(value)) {\n return value;\n }\n var isArr = isArray(value);\n if (isArr) {\n result = initCloneArray(value);\n if (!isDeep) {\n return copyArray(value, result);\n }\n } else {\n var tag = getTag(value),\n isFunc = tag == funcTag || tag == genTag;\n\n if (isBuffer(value)) {\n return cloneBuffer(value, isDeep);\n }\n if (tag == objectTag || tag == argsTag || (isFunc && !object)) {\n result = (isFlat || isFunc) ? {} : initCloneObject(value);\n if (!isDeep) {\n return isFlat\n ? copySymbolsIn(value, baseAssignIn(result, value))\n : copySymbols(value, baseAssign(result, value));\n }\n } else {\n if (!cloneableTags[tag]) {\n return object ? value : {};\n }\n result = initCloneByTag(value, tag, isDeep);\n }\n }\n // Check for circular references and return its corresponding clone.\n stack || (stack = new Stack);\n var stacked = stack.get(value);\n if (stacked) {\n return stacked;\n }\n stack.set(value, result);\n\n if (isSet(value)) {\n value.forEach(function(subValue) {\n result.add(baseClone(subValue, bitmask, customizer, subValue, value, stack));\n });\n } else if (isMap(value)) {\n value.forEach(function(subValue, key) {\n result.set(key, baseClone(subValue, bitmask, customizer, key, value, stack));\n });\n }\n\n var keysFunc = isFull\n ? (isFlat ? getAllKeysIn : getAllKeys)\n : (isFlat ? keysIn : keys);\n\n var props = isArr ? undefined : keysFunc(value);\n arrayEach(props || value, function(subValue, key) {\n if (props) {\n key = subValue;\n subValue = value[key];\n }\n // Recursively populate clone (susceptible to call stack limits).\n assignValue(result, key, baseClone(subValue, bitmask, customizer, key, value, stack));\n });\n return result;\n}\n\nmodule.exports = baseClone;\n","var baseClone = require('./_baseClone');\n\n/** Used to compose bitmasks for cloning. */\nvar CLONE_DEEP_FLAG = 1,\n CLONE_SYMBOLS_FLAG = 4;\n\n/**\n * This method is like `_.clone` except that it recursively clones `value`.\n *\n * @static\n * @memberOf _\n * @since 1.0.0\n * @category Lang\n * @param {*} value The value to recursively clone.\n * @returns {*} Returns the deep cloned value.\n * @see _.clone\n * @example\n *\n * var objects = [{ 'a': 1 }, { 'b': 2 }];\n *\n * var deep = _.cloneDeep(objects);\n * console.log(deep[0] === objects[0]);\n * // => false\n */\nfunction cloneDeep(value) {\n return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG);\n}\n\nmodule.exports = cloneDeep;\n","function getType(payload) {\n return Object.prototype.toString.call(payload).slice(8, -1);\n}\n\nfunction isAnyObject(payload) {\n return getType(payload) === \"Object\";\n}\n\nfunction isArray(payload) {\n return getType(payload) === \"Array\";\n}\n\nfunction isBlob(payload) {\n return getType(payload) === \"Blob\";\n}\n\nfunction isBoolean(payload) {\n return getType(payload) === \"Boolean\";\n}\n\nfunction isDate(payload) {\n return getType(payload) === \"Date\" && !isNaN(payload);\n}\n\nfunction isEmptyArray(payload) {\n return isArray(payload) && payload.length === 0;\n}\n\nfunction isPlainObject(payload) {\n if (getType(payload) !== \"Object\")\n return false;\n const prototype = Object.getPrototypeOf(payload);\n return !!prototype && prototype.constructor === Object && prototype === Object.prototype;\n}\n\nfunction isEmptyObject(payload) {\n return isPlainObject(payload) && Object.keys(payload).length === 0;\n}\n\nfunction isEmptyString(payload) {\n return payload === \"\";\n}\n\nfunction isError(payload) {\n return getType(payload) === \"Error\" || payload instanceof Error;\n}\n\nfunction isFile(payload) {\n return getType(payload) === \"File\";\n}\n\nfunction isFullArray(payload) {\n return isArray(payload) && payload.length > 0;\n}\n\nfunction isFullObject(payload) {\n return isPlainObject(payload) && Object.keys(payload).length > 0;\n}\n\nfunction isString(payload) {\n return getType(payload) === \"String\";\n}\n\nfunction isFullString(payload) {\n return isString(payload) && payload !== \"\";\n}\n\nfunction isFunction(payload) {\n return typeof payload === \"function\";\n}\n\nfunction isType(payload, type) {\n if (!(type instanceof Function)) {\n throw new TypeError(\"Type must be a function\");\n }\n if (!Object.prototype.hasOwnProperty.call(type, \"prototype\")) {\n throw new TypeError(\"Type is not a class\");\n }\n const name = type.name;\n return getType(payload) === name || Boolean(payload && payload.constructor === type);\n}\n\nfunction isInstanceOf(value, classOrClassName) {\n if (typeof classOrClassName === \"function\") {\n for (let p = value; p; p = Object.getPrototypeOf(p)) {\n if (isType(p, classOrClassName)) {\n return true;\n }\n }\n return false;\n } else {\n for (let p = value; p; p = Object.getPrototypeOf(p)) {\n if (getType(p) === classOrClassName) {\n return true;\n }\n }\n return false;\n }\n}\n\nfunction isMap(payload) {\n return getType(payload) === \"Map\";\n}\n\nfunction isNaNValue(payload) {\n return getType(payload) === \"Number\" && isNaN(payload);\n}\n\nfunction isNumber(payload) {\n return getType(payload) === \"Number\" && !isNaN(payload);\n}\n\nfunction isNegativeNumber(payload) {\n return isNumber(payload) && payload < 0;\n}\n\nfunction isNull(payload) {\n return getType(payload) === \"Null\";\n}\n\nfunction isOneOf(a, b, c, d, e) {\n return (value) => a(value) || b(value) || !!c && c(value) || !!d && d(value) || !!e && e(value);\n}\n\nfunction isUndefined(payload) {\n return getType(payload) === \"Undefined\";\n}\n\nconst isNullOrUndefined = isOneOf(isNull, isUndefined);\n\nfunction isObject(payload) {\n return isPlainObject(payload);\n}\n\nfunction isObjectLike(payload) {\n return isAnyObject(payload);\n}\n\nfunction isPositiveNumber(payload) {\n return isNumber(payload) && payload > 0;\n}\n\nfunction isSymbol(payload) {\n return getType(payload) === \"Symbol\";\n}\n\nfunction isPrimitive(payload) {\n return isBoolean(payload) || isNull(payload) || isUndefined(payload) || isNumber(payload) || isString(payload) || isSymbol(payload);\n}\n\nfunction isPromise(payload) {\n return getType(payload) === \"Promise\";\n}\n\nfunction isRegExp(payload) {\n return getType(payload) === \"RegExp\";\n}\n\nfunction isSet(payload) {\n return getType(payload) === \"Set\";\n}\n\nfunction isWeakMap(payload) {\n return getType(payload) === \"WeakMap\";\n}\n\nfunction isWeakSet(payload) {\n return getType(payload) === \"WeakSet\";\n}\n\nexport { getType, isAnyObject, isArray, isBlob, isBoolean, isDate, isEmptyArray, isEmptyObject, isEmptyString, isError, isFile, isFullArray, isFullObject, isFullString, isFunction, isInstanceOf, isMap, isNaNValue, isNegativeNumber, isNull, isNullOrUndefined, isNumber, isObject, isObjectLike, isOneOf, isPlainObject, isPositiveNumber, isPrimitive, isPromise, isRegExp, isSet, isString, isSymbol, isType, isUndefined, isWeakMap, isWeakSet };\n","import { isArray, isPlainObject, isSymbol } from 'is-what';\n\nfunction concatArrays(originVal, newVal) {\n if (isArray(originVal) && isArray(newVal)) {\n return originVal.concat(newVal);\n }\n return newVal;\n}\n\nfunction assignProp(carry, key, newVal, originalObject) {\n const propType = {}.propertyIsEnumerable.call(originalObject, key) ? \"enumerable\" : \"nonenumerable\";\n if (propType === \"enumerable\")\n carry[key] = newVal;\n if (propType === \"nonenumerable\") {\n Object.defineProperty(carry, key, {\n value: newVal,\n enumerable: false,\n writable: true,\n configurable: true\n });\n }\n}\nfunction mergeRecursively(origin, newComer, compareFn) {\n if (!isPlainObject(newComer))\n return newComer;\n let newObject = {};\n if (isPlainObject(origin)) {\n const props2 = Object.getOwnPropertyNames(origin);\n const symbols2 = Object.getOwnPropertySymbols(origin);\n newObject = [...props2, ...symbols2].reduce((carry, key) => {\n const targetVal = origin[key];\n if (!isSymbol(key) && !Object.getOwnPropertyNames(newComer).includes(key) || isSymbol(key) && !Object.getOwnPropertySymbols(newComer).includes(key)) {\n assignProp(\n carry,\n key,\n targetVal,\n origin\n );\n }\n return carry;\n }, {});\n }\n const props = Object.getOwnPropertyNames(newComer);\n const symbols = Object.getOwnPropertySymbols(newComer);\n const result = [...props, ...symbols].reduce((carry, key) => {\n let newVal = newComer[key];\n const targetVal = isPlainObject(origin) ? origin[key] : void 0;\n if (targetVal !== void 0 && isPlainObject(newVal)) {\n newVal = mergeRecursively(targetVal, newVal, compareFn);\n }\n const propToAssign = compareFn ? compareFn(targetVal, newVal, key) : newVal;\n assignProp(\n carry,\n key,\n propToAssign,\n newComer\n );\n return carry;\n }, newObject);\n return result;\n}\nfunction merge(object, ...otherObjects) {\n return otherObjects.reduce((result, newComer) => {\n return mergeRecursively(result, newComer);\n }, object);\n}\nfunction mergeAndCompare(compareFn, object, ...otherObjects) {\n return otherObjects.reduce((result, newComer) => {\n return mergeRecursively(result, newComer, compareFn);\n }, object);\n}\nfunction mergeAndConcat(object, ...otherObjects) {\n return otherObjects.reduce((result, newComer) => {\n return mergeRecursively(result, newComer, concatArrays);\n }, object);\n}\n\nexport { concatArrays, merge, mergeAndCompare, mergeAndConcat };\n","/*\n * liquidjs@9.43.0, https://github.com/harttle/liquidjs\n * (c) 2016-2022 harttle\n * Released under the MIT License.\n */\n/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n\r\nvar __assign = function() {\r\n __assign = Object.assign || function __assign(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n }\r\n return t;\r\n };\r\n return __assign.apply(this, arguments);\r\n};\r\n\r\nfunction __awaiter(thisArg, _arguments, P, generator) {\r\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n return new (P || (P = Promise))(function (resolve, reject) {\r\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n });\r\n}\n\nclass Drop {\r\n liquidMethodMissing(key) {\r\n return undefined;\r\n }\r\n}\n\nconst toString$1 = Object.prototype.toString;\r\nconst toLowerCase = String.prototype.toLowerCase;\r\nconst hasOwnProperty = Object.hasOwnProperty;\r\nfunction isString(value) {\r\n return typeof value === 'string';\r\n}\r\n// eslint-disable-next-line @typescript-eslint/ban-types\r\nfunction isFunction(value) {\r\n return typeof value === 'function';\r\n}\r\nfunction isPromise(val) {\r\n return val && isFunction(val.then);\r\n}\r\nfunction isIterator(val) {\r\n return val && isFunction(val.next) && isFunction(val.throw) && isFunction(val.return);\r\n}\r\nfunction escapeRegex(str) {\r\n return str.replace(/[-/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&');\r\n}\r\nfunction stringify(value) {\r\n value = toValue(value);\r\n if (isString(value))\r\n return value;\r\n if (isNil(value))\r\n return '';\r\n if (isArray(value))\r\n return value.map(x => stringify(x)).join('');\r\n return String(value);\r\n}\r\nfunction toValue(value) {\r\n return (value instanceof Drop && isFunction(value.valueOf)) ? value.valueOf() : value;\r\n}\r\nfunction isNumber(value) {\r\n return typeof value === 'number';\r\n}\r\nfunction toLiquid(value) {\r\n if (value && isFunction(value.toLiquid))\r\n return toLiquid(value.toLiquid());\r\n return value;\r\n}\r\nfunction isNil(value) {\r\n return value == null;\r\n}\r\nfunction isArray(value) {\r\n // be compatible with IE 8\r\n return toString$1.call(value) === '[object Array]';\r\n}\r\nfunction isIterable(value) {\r\n return isObject(value) && Symbol.iterator in value;\r\n}\r\n/*\r\n * Iterates over own enumerable string keyed properties of an object and invokes iteratee for each property.\r\n * The iteratee is invoked with three arguments: (value, key, object).\r\n * Iteratee functions may exit iteration early by explicitly returning false.\r\n * @param {Object} object The object to iterate over.\r\n * @param {Function} iteratee The function invoked per iteration.\r\n * @return {Object} Returns object.\r\n */\r\nfunction forOwn(obj, iteratee) {\r\n obj = obj || {};\r\n for (const k in obj) {\r\n if (hasOwnProperty.call(obj, k)) {\r\n if (iteratee(obj[k], k, obj) === false)\r\n break;\r\n }\r\n }\r\n return obj;\r\n}\r\nfunction last$1(arr) {\r\n return arr[arr.length - 1];\r\n}\r\n/*\r\n * Checks if value is the language type of Object.\r\n * (e.g. arrays, functions, objects, regexes, new Number(0), and new String(''))\r\n * @param {any} value The value to check.\r\n * @return {Boolean} Returns true if value is an object, else false.\r\n */\r\nfunction isObject(value) {\r\n const type = typeof value;\r\n return value !== null && (type === 'object' || type === 'function');\r\n}\r\nfunction range(start, stop, step = 1) {\r\n const arr = [];\r\n for (let i = start; i < stop; i += step) {\r\n arr.push(i);\r\n }\r\n return arr;\r\n}\r\nfunction padStart(str, length, ch = ' ') {\r\n return pad(str, length, ch, (str, ch) => ch + str);\r\n}\r\nfunction padEnd(str, length, ch = ' ') {\r\n return pad(str, length, ch, (str, ch) => str + ch);\r\n}\r\nfunction pad(str, length, ch, add) {\r\n str = String(str);\r\n let n = length - str.length;\r\n while (n-- > 0)\r\n str = add(str, ch);\r\n return str;\r\n}\r\nfunction identify(val) {\r\n return val;\r\n}\r\nfunction snakeCase(str) {\r\n return str.replace(/(\\w?)([A-Z])/g, (_, a, b) => (a ? a + '_' : '') + b.toLowerCase());\r\n}\r\nfunction changeCase(str) {\r\n const hasLowerCase = [...str].some(ch => ch >= 'a' && ch <= 'z');\r\n return hasLowerCase ? str.toUpperCase() : str.toLowerCase();\r\n}\r\nfunction ellipsis(str, N) {\r\n return str.length > N ? str.slice(0, N - 3) + '...' : str;\r\n}\r\n// compare string in case-insensitive way, undefined values to the tail\r\nfunction caseInsensitiveCompare(a, b) {\r\n if (a == null && b == null)\r\n return 0;\r\n if (a == null)\r\n return 1;\r\n if (b == null)\r\n return -1;\r\n a = toLowerCase.call(a);\r\n b = toLowerCase.call(b);\r\n if (a < b)\r\n return -1;\r\n if (a > b)\r\n return 1;\r\n return 0;\r\n}\r\nfunction argumentsToValue(fn) {\r\n return (...args) => fn(...args.map(toValue));\r\n}\r\nfunction escapeRegExp(text) {\r\n return text.replace(/[-[\\]{}()*+?.,\\\\^$|#\\s]/g, '\\\\$&');\r\n}\n\nclass Node {\r\n constructor(key, value, next, prev) {\r\n this.key = key;\r\n this.value = value;\r\n this.next = next;\r\n this.prev = prev;\r\n }\r\n}\r\nclass LRU {\r\n constructor(limit, size = 0) {\r\n this.limit = limit;\r\n this.size = size;\r\n this.cache = {};\r\n this.head = new Node('HEAD', null, null, null);\r\n this.tail = new Node('TAIL', null, null, null);\r\n this.head.next = this.tail;\r\n this.tail.prev = this.head;\r\n }\r\n write(key, value) {\r\n if (this.cache[key]) {\r\n this.cache[key].value = value;\r\n }\r\n else {\r\n const node = new Node(key, value, this.head.next, this.head);\r\n this.head.next.prev = node;\r\n this.head.next = node;\r\n this.cache[key] = node;\r\n this.size++;\r\n this.ensureLimit();\r\n }\r\n }\r\n read(key) {\r\n if (!this.cache[key])\r\n return;\r\n const { value } = this.cache[key];\r\n this.remove(key);\r\n this.write(key, value);\r\n return value;\r\n }\r\n remove(key) {\r\n const node = this.cache[key];\r\n node.prev.next = node.next;\r\n node.next.prev = node.prev;\r\n delete this.cache[key];\r\n this.size--;\r\n }\r\n clear() {\r\n this.head.next = this.tail;\r\n this.tail.prev = this.head;\r\n this.size = 0;\r\n this.cache = {};\r\n }\r\n ensureLimit() {\r\n if (this.size > this.limit)\r\n this.remove(this.tail.prev.key);\r\n }\r\n}\n\nfunction domResolve(root, path) {\r\n const base = document.createElement('base');\r\n base.href = root;\r\n const head = document.getElementsByTagName('head')[0];\r\n head.insertBefore(base, head.firstChild);\r\n const a = document.createElement('a');\r\n a.href = path;\r\n const resolved = a.href;\r\n head.removeChild(base);\r\n return resolved;\r\n}\r\nfunction resolve(root, filepath, ext) {\r\n if (root.length && last$1(root) !== '/')\r\n root += '/';\r\n const url = domResolve(root, filepath);\r\n return url.replace(/^(\\w+:\\/\\/[^/]+)(\\/[^?]+)/, (str, origin, path) => {\r\n const last = path.split('/').pop();\r\n if (/\\.\\w+$/.test(last))\r\n return str;\r\n return origin + path + ext;\r\n });\r\n}\r\nfunction readFile(url) {\r\n return __awaiter(this, void 0, void 0, function* () {\r\n return new Promise((resolve, reject) => {\r\n const xhr = new XMLHttpRequest();\r\n xhr.onload = () => {\r\n if (xhr.status >= 200 && xhr.status < 300) {\r\n resolve(xhr.responseText);\r\n }\r\n else {\r\n reject(new Error(xhr.statusText));\r\n }\r\n };\r\n xhr.onerror = () => {\r\n reject(new Error('An error occurred whilst receiving the response.'));\r\n };\r\n xhr.open('GET', url);\r\n xhr.send();\r\n });\r\n });\r\n}\r\nfunction readFileSync(url) {\r\n const xhr = new XMLHttpRequest();\r\n xhr.open('GET', url, false);\r\n xhr.send();\r\n if (xhr.status < 200 || xhr.status >= 300) {\r\n throw new Error(xhr.statusText);\r\n }\r\n return xhr.responseText;\r\n}\r\nfunction exists(filepath) {\r\n return __awaiter(this, void 0, void 0, function* () {\r\n return true;\r\n });\r\n}\r\nfunction existsSync(filepath) {\r\n return true;\r\n}\r\nfunction dirname(filepath) {\r\n return domResolve(filepath, '.');\r\n}\r\nconst sep = '/';\n\nvar fs = /*#__PURE__*/Object.freeze({\n __proto__: null,\n resolve: resolve,\n readFile: readFile,\n readFileSync: readFileSync,\n exists: exists,\n existsSync: existsSync,\n dirname: dirname,\n sep: sep\n});\n\nfunction isComparable(arg) {\r\n return arg && isFunction(arg.equals);\r\n}\n\nfunction isTruthy(val, ctx) {\r\n return !isFalsy(val, ctx);\r\n}\r\nfunction isFalsy(val, ctx) {\r\n if (ctx.opts.jsTruthy) {\r\n return !val;\r\n }\r\n else {\r\n return val === false || undefined === val || val === null;\r\n }\r\n}\n\nconst defaultOperators = {\r\n '==': (l, r) => {\r\n if (isComparable(l))\r\n return l.equals(r);\r\n if (isComparable(r))\r\n return r.equals(l);\r\n return toValue(l) === toValue(r);\r\n },\r\n '!=': (l, r) => {\r\n if (isComparable(l))\r\n return !l.equals(r);\r\n if (isComparable(r))\r\n return !r.equals(l);\r\n return toValue(l) !== toValue(r);\r\n },\r\n '>': (l, r) => {\r\n if (isComparable(l))\r\n return l.gt(r);\r\n if (isComparable(r))\r\n return r.lt(l);\r\n return toValue(l) > toValue(r);\r\n },\r\n '<': (l, r) => {\r\n if (isComparable(l))\r\n return l.lt(r);\r\n if (isComparable(r))\r\n return r.gt(l);\r\n return toValue(l) < toValue(r);\r\n },\r\n '>=': (l, r) => {\r\n if (isComparable(l))\r\n return l.geq(r);\r\n if (isComparable(r))\r\n return r.leq(l);\r\n return toValue(l) >= toValue(r);\r\n },\r\n '<=': (l, r) => {\r\n if (isComparable(l))\r\n return l.leq(r);\r\n if (isComparable(r))\r\n return r.geq(l);\r\n return toValue(l) <= toValue(r);\r\n },\r\n 'contains': (l, r) => {\r\n l = toValue(l);\r\n r = toValue(r);\r\n return l && isFunction(l.indexOf) ? l.indexOf(r) > -1 : false;\r\n },\r\n 'and': (l, r, ctx) => isTruthy(toValue(l), ctx) && isTruthy(toValue(r), ctx),\r\n 'or': (l, r, ctx) => isTruthy(toValue(l), ctx) || isTruthy(toValue(r), ctx)\r\n};\n\n// **DO NOT CHANGE THIS FILE**\r\n//\r\n// This file is generated by bin/character-gen.js\r\n// bitmask character types to boost performance\r\nconst TYPES = [0, 0, 0, 0, 0, 0, 0, 0, 0, 20, 4, 4, 4, 20, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 20, 2, 8, 0, 0, 0, 0, 8, 0, 0, 0, 64, 0, 65, 0, 0, 33, 33, 33, 33, 33, 33, 33, 33, 33, 33, 0, 0, 2, 2, 2, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0];\r\nconst IDENTIFIER = 1;\r\nconst BLANK = 4;\r\nconst QUOTE = 8;\r\nconst INLINE_BLANK = 16;\r\nconst NUMBER = 32;\r\nconst SIGN = 64;\r\nTYPES[160] = TYPES[5760] = TYPES[6158] = TYPES[8192] = TYPES[8193] = TYPES[8194] = TYPES[8195] = TYPES[8196] = TYPES[8197] = TYPES[8198] = TYPES[8199] = TYPES[8200] = TYPES[8201] = TYPES[8202] = TYPES[8232] = TYPES[8233] = TYPES[8239] = TYPES[8287] = TYPES[12288] = BLANK;\n\nfunction createTrie(operators) {\r\n const trie = {};\r\n for (const [name, handler] of Object.entries(operators)) {\r\n let node = trie;\r\n for (let i = 0; i < name.length; i++) {\r\n const c = name[i];\r\n node[c] = node[c] || {};\r\n if (i === name.length - 1 && (TYPES[name.charCodeAt(i)] & IDENTIFIER)) {\r\n node[c].needBoundary = true;\r\n }\r\n node = node[c];\r\n }\r\n node.handler = handler;\r\n node.end = true;\r\n }\r\n return trie;\r\n}\n\nconst escapeMap = {\r\n '&': '&',\r\n '<': '<',\r\n '>': '>',\r\n '\"': '"',\r\n \"'\": '''\r\n};\r\nconst unescapeMap = {\r\n '&': '&',\r\n '<': '<',\r\n '>': '>',\r\n '"': '\"',\r\n ''': \"'\"\r\n};\r\nfunction escape(str) {\r\n return stringify(str).replace(/&|<|>|\"|'/g, m => escapeMap[m]);\r\n}\r\nfunction unescape(str) {\r\n return stringify(str).replace(/&(amp|lt|gt|#34|#39);/g, m => unescapeMap[m]);\r\n}\r\nfunction escapeOnce(str) {\r\n return escape(unescape(stringify(str)));\r\n}\r\nfunction newlineToBr(v) {\r\n return stringify(v).replace(/\\n/g, '
\\n');\r\n}\r\nfunction stripHtml(v) {\r\n return stringify(v).replace(/|||<.*?>/g, '');\r\n}\n\nconst abs = argumentsToValue(Math.abs);\r\nconst atLeast = argumentsToValue(Math.max);\r\nconst atMost = argumentsToValue(Math.min);\r\nconst ceil = argumentsToValue(Math.ceil);\r\nconst dividedBy = argumentsToValue((dividend, divisor, integerArithmetic = false) => integerArithmetic ? Math.floor(dividend / divisor) : dividend / divisor);\r\nconst floor = argumentsToValue(Math.floor);\r\nconst minus = argumentsToValue((v, arg) => v - arg);\r\nconst modulo = argumentsToValue((v, arg) => v % arg);\r\nconst times = argumentsToValue((v, arg) => v * arg);\r\nfunction round(v, arg = 0) {\r\n v = toValue(v);\r\n arg = toValue(arg);\r\n const amp = Math.pow(10, arg);\r\n return Math.round(v * amp) / amp;\r\n}\r\nfunction plus(v, arg) {\r\n v = toValue(v);\r\n arg = toValue(arg);\r\n return Number(v) + Number(arg);\r\n}\n\nconst urlDecode = (x) => stringify(x).split('+').map(decodeURIComponent).join(' ');\r\nconst urlEncode = (x) => stringify(x).split(' ').map(encodeURIComponent).join('+');\n\nfunction toEnumerable(val) {\r\n val = toValue(val);\r\n if (isArray(val))\r\n return val;\r\n if (isString(val) && val.length > 0)\r\n return [val];\r\n if (isIterable(val))\r\n return Array.from(val);\r\n if (isObject(val))\r\n return Object.keys(val).map((key) => [key, val[key]]);\r\n return [];\r\n}\r\nfunction toArray(val) {\r\n if (isNil(val))\r\n return [];\r\n if (isArray(val))\r\n return val;\r\n return [val];\r\n}\n\nconst join = argumentsToValue((v, arg) => toArray(v).join(arg === undefined ? ' ' : arg));\r\nconst last = argumentsToValue((v) => isArray(v) ? last$1(v) : '');\r\nconst first = argumentsToValue((v) => isArray(v) ? v[0] : '');\r\nconst reverse = argumentsToValue((v) => [...toArray(v)].reverse());\r\nfunction* sort(arr, property) {\r\n const values = [];\r\n for (const item of toArray(toValue(arr))) {\r\n values.push([\r\n item,\r\n property ? yield this.context._getFromScope(item, stringify(property).split('.')) : item\r\n ]);\r\n }\r\n return values.sort((lhs, rhs) => {\r\n const lvalue = lhs[1];\r\n const rvalue = rhs[1];\r\n return lvalue < rvalue ? -1 : (lvalue > rvalue ? 1 : 0);\r\n }).map(tuple => tuple[0]);\r\n}\r\nfunction sortNatural(input, property) {\r\n input = toValue(input);\r\n const propertyString = stringify(property);\r\n const compare = property === undefined\r\n ? caseInsensitiveCompare\r\n : (lhs, rhs) => caseInsensitiveCompare(lhs[propertyString], rhs[propertyString]);\r\n return [...toArray(input)].sort(compare);\r\n}\r\nconst size = (v) => (v && v.length) || 0;\r\nfunction* map(arr, property) {\r\n const results = [];\r\n for (const item of toArray(toValue(arr))) {\r\n results.push(yield this.context._getFromScope(item, stringify(property).split('.')));\r\n }\r\n return results;\r\n}\r\nfunction compact(arr) {\r\n arr = toValue(arr);\r\n return toArray(arr).filter(x => !isNil(toValue(x)));\r\n}\r\nfunction concat(v, arg = []) {\r\n v = toValue(v);\r\n arg = toArray(arg).map(v => toValue(v));\r\n return toArray(v).concat(arg);\r\n}\r\nfunction slice(v, begin, length = 1) {\r\n v = toValue(v);\r\n if (isNil(v))\r\n return [];\r\n if (!isArray(v))\r\n v = stringify(v);\r\n begin = begin < 0 ? v.length + begin : begin;\r\n return v.slice(begin, begin + length);\r\n}\r\nfunction* where(arr, property, expected) {\r\n const values = [];\r\n arr = toArray(toValue(arr));\r\n for (const item of arr) {\r\n values.push(yield this.context._getFromScope(item, stringify(property).split('.')));\r\n }\r\n return arr.filter((_, i) => {\r\n if (expected === undefined)\r\n return isTruthy(values[i], this.context);\r\n if (isComparable(expected))\r\n return expected.equals(values[i]);\r\n return values[i] === expected;\r\n });\r\n}\r\nfunction uniq(arr) {\r\n arr = toValue(arr);\r\n const u = {};\r\n return (arr || []).filter(val => {\r\n if (hasOwnProperty.call(u, String(val)))\r\n return false;\r\n u[String(val)] = true;\r\n return true;\r\n });\r\n}\n\nconst rFormat = /%([-_0^#:]+)?(\\d+)?([EO])?(.)/;\r\nconst monthNames = [\r\n 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',\r\n 'September', 'October', 'November', 'December'\r\n];\r\nconst dayNames = [\r\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'\r\n];\r\nconst monthNamesShort = monthNames.map(abbr);\r\nconst dayNamesShort = dayNames.map(abbr);\r\nconst suffixes = {\r\n 1: 'st',\r\n 2: 'nd',\r\n 3: 'rd',\r\n 'default': 'th'\r\n};\r\nfunction abbr(str) {\r\n return str.slice(0, 3);\r\n}\r\n// prototype extensions\r\nfunction daysInMonth(d) {\r\n const feb = isLeapYear(d) ? 29 : 28;\r\n return [31, feb, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\r\n}\r\nfunction getDayOfYear(d) {\r\n let num = 0;\r\n for (let i = 0; i < d.getMonth(); ++i) {\r\n num += daysInMonth(d)[i];\r\n }\r\n return num + d.getDate();\r\n}\r\nfunction getWeekOfYear(d, startDay) {\r\n // Skip to startDay of this week\r\n const now = getDayOfYear(d) + (startDay - d.getDay());\r\n // Find the first startDay of the year\r\n const jan1 = new Date(d.getFullYear(), 0, 1);\r\n const then = (7 - jan1.getDay() + startDay);\r\n return String(Math.floor((now - then) / 7) + 1);\r\n}\r\nfunction isLeapYear(d) {\r\n const year = d.getFullYear();\r\n return !!((year & 3) === 0 && (year % 100 || (year % 400 === 0 && year)));\r\n}\r\nfunction getSuffix(d) {\r\n const str = d.getDate().toString();\r\n const index = parseInt(str.slice(-1));\r\n return suffixes[index] || suffixes['default'];\r\n}\r\nfunction century(d) {\r\n return parseInt(d.getFullYear().toString().substring(0, 2), 10);\r\n}\r\n// default to 0\r\nconst padWidths = {\r\n d: 2,\r\n e: 2,\r\n H: 2,\r\n I: 2,\r\n j: 3,\r\n k: 2,\r\n l: 2,\r\n L: 3,\r\n m: 2,\r\n M: 2,\r\n S: 2,\r\n U: 2,\r\n W: 2\r\n};\r\n// default to '0'\r\nconst padChars = {\r\n a: ' ',\r\n A: ' ',\r\n b: ' ',\r\n B: ' ',\r\n c: ' ',\r\n e: ' ',\r\n k: ' ',\r\n l: ' ',\r\n p: ' ',\r\n P: ' '\r\n};\r\nconst formatCodes = {\r\n a: (d) => dayNamesShort[d.getDay()],\r\n A: (d) => dayNames[d.getDay()],\r\n b: (d) => monthNamesShort[d.getMonth()],\r\n B: (d) => monthNames[d.getMonth()],\r\n c: (d) => d.toLocaleString(),\r\n C: (d) => century(d),\r\n d: (d) => d.getDate(),\r\n e: (d) => d.getDate(),\r\n H: (d) => d.getHours(),\r\n I: (d) => String(d.getHours() % 12 || 12),\r\n j: (d) => getDayOfYear(d),\r\n k: (d) => d.getHours(),\r\n l: (d) => String(d.getHours() % 12 || 12),\r\n L: (d) => d.getMilliseconds(),\r\n m: (d) => d.getMonth() + 1,\r\n M: (d) => d.getMinutes(),\r\n N: (d, opts) => {\r\n const width = Number(opts.width) || 9;\r\n const str = String(d.getMilliseconds()).slice(0, width);\r\n return padEnd(str, width, '0');\r\n },\r\n p: (d) => (d.getHours() < 12 ? 'AM' : 'PM'),\r\n P: (d) => (d.getHours() < 12 ? 'am' : 'pm'),\r\n q: (d) => getSuffix(d),\r\n s: (d) => Math.round(d.getTime() / 1000),\r\n S: (d) => d.getSeconds(),\r\n u: (d) => d.getDay() || 7,\r\n U: (d) => getWeekOfYear(d, 0),\r\n w: (d) => d.getDay(),\r\n W: (d) => getWeekOfYear(d, 1),\r\n x: (d) => d.toLocaleDateString(),\r\n X: (d) => d.toLocaleTimeString(),\r\n y: (d) => d.getFullYear().toString().slice(2, 4),\r\n Y: (d) => d.getFullYear(),\r\n z: (d, opts) => {\r\n const nOffset = Math.abs(d.getTimezoneOffset());\r\n const h = Math.floor(nOffset / 60);\r\n const m = nOffset % 60;\r\n return (d.getTimezoneOffset() > 0 ? '-' : '+') +\r\n padStart(h, 2, '0') +\r\n (opts.flags[':'] ? ':' : '') +\r\n padStart(m, 2, '0');\r\n },\r\n 't': () => '\\t',\r\n 'n': () => '\\n',\r\n '%': () => '%'\r\n};\r\nformatCodes.h = formatCodes.b;\r\nfunction strftime (d, formatStr) {\r\n let output = '';\r\n let remaining = formatStr;\r\n let match;\r\n while ((match = rFormat.exec(remaining))) {\r\n output += remaining.slice(0, match.index);\r\n remaining = remaining.slice(match.index + match[0].length);\r\n output += format(d, match);\r\n }\r\n return output + remaining;\r\n}\r\nfunction format(d, match) {\r\n const [input, flagStr = '', width, modifier, conversion] = match;\r\n const convert = formatCodes[conversion];\r\n if (!convert)\r\n return input;\r\n const flags = {};\r\n for (const flag of flagStr)\r\n flags[flag] = true;\r\n let ret = String(convert(d, { flags, width, modifier }));\r\n let padChar = padChars[conversion] || '0';\r\n let padWidth = width || padWidths[conversion] || 0;\r\n if (flags['^'])\r\n ret = ret.toUpperCase();\r\n else if (flags['#'])\r\n ret = changeCase(ret);\r\n if (flags['_'])\r\n padChar = ' ';\r\n else if (flags['0'])\r\n padChar = '0';\r\n if (flags['-'])\r\n padWidth = 0;\r\n return padStart(ret, padWidth, padChar);\r\n}\n\n// one minute in milliseconds\r\nconst OneMinute = 60000;\r\nconst hostTimezoneOffset = new Date().getTimezoneOffset();\r\nconst ISO8601_TIMEZONE_PATTERN = /([zZ]|([+-])(\\d{2}):(\\d{2}))$/;\r\n/**\r\n * A date implementation with timezone info, just like Ruby date\r\n *\r\n * Implementation:\r\n * - create a Date offset by it's timezone difference, avoiding overriding a bunch of methods\r\n * - rewrite getTimezoneOffset() to trick strftime\r\n */\r\nclass TimezoneDate {\r\n constructor(init, timezoneOffset) {\r\n if (init instanceof TimezoneDate) {\r\n this.date = init.date;\r\n timezoneOffset = init.timezoneOffset;\r\n }\r\n else {\r\n const diff = (hostTimezoneOffset - timezoneOffset) * OneMinute;\r\n const time = new Date(init).getTime() + diff;\r\n this.date = new Date(time);\r\n }\r\n this.timezoneOffset = timezoneOffset;\r\n }\r\n getTime() {\r\n return this.date.getTime();\r\n }\r\n getMilliseconds() {\r\n return this.date.getMilliseconds();\r\n }\r\n getSeconds() {\r\n return this.date.getSeconds();\r\n }\r\n getMinutes() {\r\n return this.date.getMinutes();\r\n }\r\n getHours() {\r\n return this.date.getHours();\r\n }\r\n getDay() {\r\n return this.date.getDay();\r\n }\r\n getDate() {\r\n return this.date.getDate();\r\n }\r\n getMonth() {\r\n return this.date.getMonth();\r\n }\r\n getFullYear() {\r\n return this.date.getFullYear();\r\n }\r\n toLocaleTimeString(locale) {\r\n return this.date.toLocaleTimeString(locale);\r\n }\r\n toLocaleDateString(locale) {\r\n return this.date.toLocaleDateString(locale);\r\n }\r\n getTimezoneOffset() {\r\n return this.timezoneOffset;\r\n }\r\n /**\r\n * Create a Date object fixed to it's declared Timezone. Both\r\n * - 2021-08-06T02:29:00.000Z and\r\n * - 2021-08-06T02:29:00.000+08:00\r\n * will always be displayed as\r\n * - 2021-08-06 02:29:00\r\n * regardless timezoneOffset in JavaScript realm\r\n *\r\n * The implementation hack:\r\n * Instead of calling `.getMonth()`/`.getUTCMonth()` respect to `preserveTimezones`,\r\n * we create a different Date to trick strftime, it's both simpler and more performant.\r\n * Given that a template is expected to be parsed fewer times than rendered.\r\n */\r\n static createDateFixedToTimezone(dateString) {\r\n const m = dateString.match(ISO8601_TIMEZONE_PATTERN);\r\n // representing a UTC timestamp\r\n if (m && m[1] === 'Z') {\r\n return new TimezoneDate(+new Date(dateString), 0);\r\n }\r\n // has a timezone specified\r\n if (m && m[2] && m[3] && m[4]) {\r\n const [, , sign, hours, minutes] = m;\r\n const delta = (sign === '+' ? -1 : 1) * (parseInt(hours, 10) * 60 + parseInt(minutes, 10));\r\n return new TimezoneDate(+new Date(dateString), delta);\r\n }\r\n return new Date(dateString);\r\n }\r\n}\n\nfunction date(v, format, timeZoneOffset) {\r\n const opts = this.context.opts;\r\n let date;\r\n v = toValue(v);\r\n format = stringify(format);\r\n if (v === 'now' || v === 'today') {\r\n date = new Date();\r\n }\r\n else if (isNumber(v)) {\r\n date = new Date(v * 1000);\r\n }\r\n else if (isString(v)) {\r\n if (/^\\d+$/.test(v)) {\r\n date = new Date(+v * 1000);\r\n }\r\n else if (opts.preserveTimezones) {\r\n date = TimezoneDate.createDateFixedToTimezone(v);\r\n }\r\n else {\r\n date = new Date(v);\r\n }\r\n }\r\n else {\r\n date = v;\r\n }\r\n if (!isValidDate(date))\r\n return v;\r\n if (timeZoneOffset !== undefined) {\r\n date = new TimezoneDate(date, timeZoneOffset);\r\n }\r\n else if (opts.timezoneOffset !== undefined) {\r\n date = new TimezoneDate(date, opts.timezoneOffset);\r\n }\r\n return strftime(date, format);\r\n}\r\nfunction isValidDate(date) {\r\n return (date instanceof Date || date instanceof TimezoneDate) && !isNaN(date.getTime());\r\n}\n\nfunction Default(value, defaultValue, ...args) {\r\n value = toValue(value);\r\n if (isArray(value) || isString(value))\r\n return value.length ? value : defaultValue;\r\n if (value === false && (new Map(args)).get('allow_false'))\r\n return false;\r\n return isFalsy(value, this.context) ? defaultValue : value;\r\n}\r\nfunction json(value) {\r\n return JSON.stringify(value);\r\n}\r\nconst raw$1 = identify;\n\nclass LiquidError extends Error {\r\n constructor(err, token) {\r\n super(err.message);\r\n this.originalError = err;\r\n this.token = token;\r\n this.context = '';\r\n }\r\n update() {\r\n const err = this.originalError;\r\n this.context = mkContext(this.token);\r\n this.message = mkMessage(err.message, this.token);\r\n this.stack = this.message + '\\n' + this.context +\r\n '\\n' + this.stack + '\\nFrom ' + err.stack;\r\n }\r\n}\r\nclass TokenizationError extends LiquidError {\r\n constructor(message, token) {\r\n super(new Error(message), token);\r\n this.name = 'TokenizationError';\r\n super.update();\r\n }\r\n}\r\nclass ParseError extends LiquidError {\r\n constructor(err, token) {\r\n super(err, token);\r\n this.name = 'ParseError';\r\n this.message = err.message;\r\n super.update();\r\n }\r\n}\r\nclass RenderError extends LiquidError {\r\n constructor(err, tpl) {\r\n super(err, tpl.token);\r\n this.name = 'RenderError';\r\n this.message = err.message;\r\n super.update();\r\n }\r\n static is(obj) {\r\n return obj.name === 'RenderError';\r\n }\r\n}\r\nclass UndefinedVariableError extends LiquidError {\r\n constructor(err, token) {\r\n super(err, token);\r\n this.name = 'UndefinedVariableError';\r\n this.message = err.message;\r\n super.update();\r\n }\r\n}\r\n// only used internally; raised where we don't have token information,\r\n// so it can't be an UndefinedVariableError.\r\nclass InternalUndefinedVariableError extends Error {\r\n constructor(variableName) {\r\n super(`undefined variable: ${variableName}`);\r\n this.name = 'InternalUndefinedVariableError';\r\n this.variableName = variableName;\r\n }\r\n}\r\nclass AssertionError extends Error {\r\n constructor(message) {\r\n super(message);\r\n this.name = 'AssertionError';\r\n this.message = message + '';\r\n }\r\n}\r\nfunction mkContext(token) {\r\n const [line] = token.getPosition();\r\n const lines = token.input.split('\\n');\r\n const begin = Math.max(line - 2, 1);\r\n const end = Math.min(line + 3, lines.length);\r\n const context = range(begin, end + 1)\r\n .map(lineNumber => {\r\n const indicator = (lineNumber === line) ? '>> ' : ' ';\r\n const num = padStart(String(lineNumber), String(end).length);\r\n const text = lines[lineNumber - 1];\r\n return `${indicator}${num}| ${text}`;\r\n })\r\n .join('\\n');\r\n return context;\r\n}\r\nfunction mkMessage(msg, token) {\r\n if (token.file)\r\n msg += `, file:${token.file}`;\r\n const [line, col] = token.getPosition();\r\n msg += `, line:${line}, col:${col}`;\r\n return msg;\r\n}\n\nfunction assert(predicate, message) {\r\n if (!predicate) {\r\n const msg = typeof message === 'function'\r\n ? message()\r\n : (message || `expect ${predicate} to be true`);\r\n throw new AssertionError(msg);\r\n }\r\n}\n\n/**\r\n * String related filters\r\n *\r\n * * prefer stringify() to String() since `undefined`, `null` should eval ''\r\n */\r\nfunction append(v, arg) {\r\n assert(arguments.length === 2, 'append expect 2 arguments');\r\n return stringify(v) + stringify(arg);\r\n}\r\nfunction prepend(v, arg) {\r\n assert(arguments.length === 2, 'prepend expect 2 arguments');\r\n return stringify(arg) + stringify(v);\r\n}\r\nfunction lstrip(v, chars) {\r\n if (chars) {\r\n chars = escapeRegExp(stringify(chars));\r\n return stringify(v).replace(new RegExp(`^[${chars}]+`, 'g'), '');\r\n }\r\n return stringify(v).replace(/^\\s+/, '');\r\n}\r\nfunction downcase(v) {\r\n return stringify(v).toLowerCase();\r\n}\r\nfunction upcase(str) {\r\n return stringify(str).toUpperCase();\r\n}\r\nfunction remove(v, arg) {\r\n return stringify(v).split(String(arg)).join('');\r\n}\r\nfunction removeFirst(v, l) {\r\n return stringify(v).replace(String(l), '');\r\n}\r\nfunction rstrip(str, chars) {\r\n if (chars) {\r\n chars = escapeRegExp(stringify(chars));\r\n return stringify(str).replace(new RegExp(`[${chars}]+$`, 'g'), '');\r\n }\r\n return stringify(str).replace(/\\s+$/, '');\r\n}\r\nfunction split(v, arg) {\r\n const arr = stringify(v).split(String(arg));\r\n // align to ruby split, which is the behavior of shopify/liquid\r\n // see: https://ruby-doc.org/core-2.4.0/String.html#method-i-split\r\n while (arr.length && arr[arr.length - 1] === '')\r\n arr.pop();\r\n return arr;\r\n}\r\nfunction strip(v, chars) {\r\n if (chars) {\r\n chars = escapeRegExp(stringify(chars));\r\n return stringify(v)\r\n .replace(new RegExp(`^[${chars}]+`, 'g'), '')\r\n .replace(new RegExp(`[${chars}]+$`, 'g'), '');\r\n }\r\n return stringify(v).trim();\r\n}\r\nfunction stripNewlines(v) {\r\n return stringify(v).replace(/\\n/g, '');\r\n}\r\nfunction capitalize(str) {\r\n str = stringify(str);\r\n return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();\r\n}\r\nfunction replace(v, pattern, replacement) {\r\n return stringify(v).split(String(pattern)).join(replacement);\r\n}\r\nfunction replaceFirst(v, arg1, arg2) {\r\n return stringify(v).replace(String(arg1), arg2);\r\n}\r\nfunction truncate(v, l = 50, o = '...') {\r\n v = stringify(v);\r\n if (v.length <= l)\r\n return v;\r\n return v.substring(0, l - o.length) + o;\r\n}\r\nfunction truncatewords(v, words = 15, o = '...') {\r\n const arr = stringify(v).split(/\\s+/);\r\n if (words <= 0)\r\n words = 1;\r\n let ret = arr.slice(0, words).join(' ');\r\n if (arr.length >= words)\r\n ret += o;\r\n return ret;\r\n}\n\nvar builtinFilters = /*#__PURE__*/Object.freeze({\n __proto__: null,\n escape: escape,\n escapeOnce: escapeOnce,\n newlineToBr: newlineToBr,\n stripHtml: stripHtml,\n abs: abs,\n atLeast: atLeast,\n atMost: atMost,\n ceil: ceil,\n dividedBy: dividedBy,\n floor: floor,\n minus: minus,\n modulo: modulo,\n times: times,\n round: round,\n plus: plus,\n urlDecode: urlDecode,\n urlEncode: urlEncode,\n join: join,\n last: last,\n first: first,\n reverse: reverse,\n sort: sort,\n sortNatural: sortNatural,\n size: size,\n map: map,\n compact: compact,\n concat: concat,\n slice: slice,\n where: where,\n uniq: uniq,\n date: date,\n Default: Default,\n json: json,\n raw: raw$1,\n append: append,\n prepend: prepend,\n lstrip: lstrip,\n downcase: downcase,\n upcase: upcase,\n remove: remove,\n removeFirst: removeFirst,\n rstrip: rstrip,\n split: split,\n strip: strip,\n stripNewlines: stripNewlines,\n capitalize: capitalize,\n replace: replace,\n replaceFirst: replaceFirst,\n truncate: truncate,\n truncatewords: truncatewords\n});\n\nvar TokenKind;\r\n(function (TokenKind) {\r\n TokenKind[TokenKind[\"Number\"] = 1] = \"Number\";\r\n TokenKind[TokenKind[\"Literal\"] = 2] = \"Literal\";\r\n TokenKind[TokenKind[\"Tag\"] = 4] = \"Tag\";\r\n TokenKind[TokenKind[\"Output\"] = 8] = \"Output\";\r\n TokenKind[TokenKind[\"HTML\"] = 16] = \"HTML\";\r\n TokenKind[TokenKind[\"Filter\"] = 32] = \"Filter\";\r\n TokenKind[TokenKind[\"Hash\"] = 64] = \"Hash\";\r\n TokenKind[TokenKind[\"PropertyAccess\"] = 128] = \"PropertyAccess\";\r\n TokenKind[TokenKind[\"Word\"] = 256] = \"Word\";\r\n TokenKind[TokenKind[\"Range\"] = 512] = \"Range\";\r\n TokenKind[TokenKind[\"Quoted\"] = 1024] = \"Quoted\";\r\n TokenKind[TokenKind[\"Operator\"] = 2048] = \"Operator\";\r\n TokenKind[TokenKind[\"Delimited\"] = 12] = \"Delimited\";\r\n})(TokenKind || (TokenKind = {}));\n\nfunction isDelimitedToken(val) {\r\n return !!(getKind(val) & TokenKind.Delimited);\r\n}\r\nfunction isOperatorToken(val) {\r\n return getKind(val) === TokenKind.Operator;\r\n}\r\nfunction isHTMLToken(val) {\r\n return getKind(val) === TokenKind.HTML;\r\n}\r\nfunction isOutputToken(val) {\r\n return getKind(val) === TokenKind.Output;\r\n}\r\nfunction isTagToken(val) {\r\n return getKind(val) === TokenKind.Tag;\r\n}\r\nfunction isQuotedToken(val) {\r\n return getKind(val) === TokenKind.Quoted;\r\n}\r\nfunction isLiteralToken(val) {\r\n return getKind(val) === TokenKind.Literal;\r\n}\r\nfunction isNumberToken(val) {\r\n return getKind(val) === TokenKind.Number;\r\n}\r\nfunction isPropertyAccessToken(val) {\r\n return getKind(val) === TokenKind.PropertyAccess;\r\n}\r\nfunction isWordToken(val) {\r\n return getKind(val) === TokenKind.Word;\r\n}\r\nfunction isRangeToken(val) {\r\n return getKind(val) === TokenKind.Range;\r\n}\r\nfunction getKind(val) {\r\n return val ? val.kind : -1;\r\n}\n\nvar typeGuards = /*#__PURE__*/Object.freeze({\n __proto__: null,\n isDelimitedToken: isDelimitedToken,\n isOperatorToken: isOperatorToken,\n isHTMLToken: isHTMLToken,\n isOutputToken: isOutputToken,\n isTagToken: isTagToken,\n isQuotedToken: isQuotedToken,\n isLiteralToken: isLiteralToken,\n isNumberToken: isNumberToken,\n isPropertyAccessToken: isPropertyAccessToken,\n isWordToken: isWordToken,\n isRangeToken: isRangeToken\n});\n\nclass NullDrop extends Drop {\r\n equals(value) {\r\n return isNil(toValue(value));\r\n }\r\n gt() {\r\n return false;\r\n }\r\n geq() {\r\n return false;\r\n }\r\n lt() {\r\n return false;\r\n }\r\n leq() {\r\n return false;\r\n }\r\n valueOf() {\r\n return null;\r\n }\r\n}\n\nclass EmptyDrop extends Drop {\r\n equals(value) {\r\n if (value instanceof EmptyDrop)\r\n return false;\r\n value = toValue(value);\r\n if (isString(value) || isArray(value))\r\n return value.length === 0;\r\n if (isObject(value))\r\n return Object.keys(value).length === 0;\r\n return false;\r\n }\r\n gt() {\r\n return false;\r\n }\r\n geq() {\r\n return false;\r\n }\r\n lt() {\r\n return false;\r\n }\r\n leq() {\r\n return false;\r\n }\r\n valueOf() {\r\n return '';\r\n }\r\n}\n\nclass BlankDrop extends EmptyDrop {\r\n equals(value) {\r\n if (value === false)\r\n return true;\r\n if (isNil(toValue(value)))\r\n return true;\r\n if (isString(value))\r\n return /^\\s*$/.test(value);\r\n return super.equals(value);\r\n }\r\n}\n\nconst nil = new NullDrop();\r\nconst literalValues = {\r\n 'true': true,\r\n 'false': false,\r\n 'nil': nil,\r\n 'null': nil,\r\n 'empty': new EmptyDrop(),\r\n 'blank': new BlankDrop()\r\n};\n\nconst rHex = /[\\da-fA-F]/;\r\nconst rOct = /[0-7]/;\r\nconst escapeChar = {\r\n b: '\\b',\r\n f: '\\f',\r\n n: '\\n',\r\n r: '\\r',\r\n t: '\\t',\r\n v: '\\x0B'\r\n};\r\nfunction hexVal(c) {\r\n const code = c.charCodeAt(0);\r\n if (code >= 97)\r\n return code - 87;\r\n if (code >= 65)\r\n return code - 55;\r\n return code - 48;\r\n}\r\nfunction parseStringLiteral(str) {\r\n let ret = '';\r\n for (let i = 1; i < str.length - 1; i++) {\r\n if (str[i] !== '\\\\') {\r\n ret += str[i];\r\n continue;\r\n }\r\n if (escapeChar[str[i + 1]] !== undefined) {\r\n ret += escapeChar[str[++i]];\r\n }\r\n else if (str[i + 1] === 'u') {\r\n let val = 0;\r\n let j = i + 2;\r\n while (j <= i + 5 && rHex.test(str[j])) {\r\n val = val * 16 + hexVal(str[j++]);\r\n }\r\n i = j - 1;\r\n ret += String.fromCharCode(val);\r\n }\r\n else if (!rOct.test(str[i + 1])) {\r\n ret += str[++i];\r\n }\r\n else {\r\n let j = i + 1;\r\n let val = 0;\r\n while (j <= i + 3 && rOct.test(str[j])) {\r\n val = val * 8 + hexVal(str[j++]);\r\n }\r\n i = j - 1;\r\n ret += String.fromCharCode(val);\r\n }\r\n }\r\n return ret;\r\n}\n\n// convert an async iterator to a Promise\r\nfunction toPromise(val) {\r\n return __awaiter(this, void 0, void 0, function* () {\r\n if (!isIterator(val))\r\n return val;\r\n let value;\r\n let done = false;\r\n let next = 'next';\r\n do {\r\n const state = val[next](value);\r\n done = state.done;\r\n value = state.value;\r\n next = 'next';\r\n try {\r\n if (isIterator(value))\r\n value = toPromise(value);\r\n if (isPromise(value))\r\n value = yield value;\r\n }\r\n catch (err) {\r\n next = 'throw';\r\n value = err;\r\n }\r\n } while (!done);\r\n return value;\r\n });\r\n}\r\n// convert an async iterator to a value in a synchronous manner\r\nfunction toValueSync(val) {\r\n if (!isIterator(val))\r\n return val;\r\n let value;\r\n let done = false;\r\n let next = 'next';\r\n do {\r\n const state = val[next](value);\r\n done = state.done;\r\n value = state.value;\r\n next = 'next';\r\n if (isIterator(value)) {\r\n try {\r\n value = toValueSync(value);\r\n }\r\n catch (err) {\r\n next = 'throw';\r\n value = err;\r\n }\r\n }\r\n } while (!done);\r\n return value;\r\n}\r\nconst toThenable = toPromise;\n\nclass Expression {\r\n constructor(tokens) {\r\n this.postfix = [...toPostfix(tokens)];\r\n }\r\n *evaluate(ctx, lenient) {\r\n assert(ctx, 'unable to evaluate: context not defined');\r\n const operands = [];\r\n for (const token of this.postfix) {\r\n if (isOperatorToken(token)) {\r\n const r = operands.pop();\r\n const l = operands.pop();\r\n const result = yield evalOperatorToken(ctx.opts.operators, token, l, r, ctx);\r\n operands.push(result);\r\n }\r\n else {\r\n operands.push(yield _evalToken(token, ctx, lenient && this.postfix.length === 1));\r\n }\r\n }\r\n return operands[0];\r\n }\r\n}\r\n/**\r\n * @deprecated use `_evalToken` instead\r\n */\r\nfunction* evalToken(token, ctx, lenient = false) {\r\n return toValueSync(_evalToken(token, ctx, lenient));\r\n}\r\nfunction* _evalToken(token, ctx, lenient = false) {\r\n if (isPropertyAccessToken(token))\r\n return yield evalPropertyAccessToken(token, ctx, lenient);\r\n if (isRangeToken(token))\r\n return yield evalRangeToken(token, ctx);\r\n if (isLiteralToken(token))\r\n return evalLiteralToken(token);\r\n if (isNumberToken(token))\r\n return evalNumberToken(token);\r\n if (isWordToken(token))\r\n return token.getText();\r\n if (isQuotedToken(token))\r\n return evalQuotedToken(token);\r\n}\r\nfunction* evalPropertyAccessToken(token, ctx, lenient) {\r\n const props = [];\r\n for (const prop of token.props) {\r\n props.push((yield _evalToken(prop, ctx, false)));\r\n }\r\n try {\r\n return yield ctx._get([token.propertyName, ...props]);\r\n }\r\n catch (e) {\r\n if (lenient && e.name === 'InternalUndefinedVariableError')\r\n return null;\r\n throw (new UndefinedVariableError(e, token));\r\n }\r\n}\r\nfunction evalNumberToken(token) {\r\n const str = token.whole.content + '.' + (token.decimal ? token.decimal.content : '');\r\n return Number(str);\r\n}\r\nfunction evalQuotedToken(token) {\r\n return parseStringLiteral(token.getText());\r\n}\r\nfunction evalOperatorToken(operators, token, lhs, rhs, ctx) {\r\n const impl = operators[token.operator];\r\n return impl(lhs, rhs, ctx);\r\n}\r\nfunction evalLiteralToken(token) {\r\n return literalValues[token.literal];\r\n}\r\nfunction* evalRangeToken(token, ctx) {\r\n const low = yield _evalToken(token.lhs, ctx);\r\n const high = yield _evalToken(token.rhs, ctx);\r\n return range(+low, +high + 1);\r\n}\r\nfunction* toPostfix(tokens) {\r\n const ops = [];\r\n for (const token of tokens) {\r\n if (isOperatorToken(token)) {\r\n while (ops.length && ops[ops.length - 1].getPrecedence() > token.getPrecedence()) {\r\n yield ops.pop();\r\n }\r\n ops.push(token);\r\n }\r\n else\r\n yield token;\r\n }\r\n while (ops.length) {\r\n yield ops.pop();\r\n }\r\n}\n\nclass Token {\r\n constructor(kind, input, begin, end, file) {\r\n this.kind = kind;\r\n this.input = input;\r\n this.begin = begin;\r\n this.end = end;\r\n this.file = file;\r\n }\r\n getText() {\r\n return this.input.slice(this.begin, this.end);\r\n }\r\n getPosition() {\r\n let [row, col] = [1, 1];\r\n for (let i = 0; i < this.begin; i++) {\r\n if (this.input[i] === '\\n') {\r\n row++;\r\n col = 1;\r\n }\r\n else\r\n col++;\r\n }\r\n return [row, col];\r\n }\r\n size() {\r\n return this.end - this.begin;\r\n }\r\n}\n\nclass DelimitedToken extends Token {\r\n constructor(kind, content, input, begin, end, trimLeft, trimRight, file) {\r\n super(kind, input, begin, end, file);\r\n this.trimLeft = false;\r\n this.trimRight = false;\r\n this.content = this.getText();\r\n const tl = content[0] === '-';\r\n const tr = last$1(content) === '-';\r\n this.content = content\r\n .slice(tl ? 1 : 0, tr ? -1 : content.length)\r\n .trim();\r\n this.trimLeft = tl || trimLeft;\r\n this.trimRight = tr || trimRight;\r\n }\r\n}\n\nfunction whiteSpaceCtrl(tokens, options) {\r\n let inRaw = false;\r\n for (let i = 0; i < tokens.length; i++) {\r\n const token = tokens[i];\r\n if (!isDelimitedToken(token))\r\n continue;\r\n if (!inRaw && token.trimLeft) {\r\n trimLeft(tokens[i - 1], options.greedy);\r\n }\r\n if (isTagToken(token)) {\r\n if (token.name === 'raw')\r\n inRaw = true;\r\n else if (token.name === 'endraw')\r\n inRaw = false;\r\n }\r\n if (!inRaw && token.trimRight) {\r\n trimRight(tokens[i + 1], options.greedy);\r\n }\r\n }\r\n}\r\nfunction trimLeft(token, greedy) {\r\n if (!token || !isHTMLToken(token))\r\n return;\r\n const mask = greedy ? BLANK : INLINE_BLANK;\r\n while (TYPES[token.input.charCodeAt(token.end - 1 - token.trimRight)] & mask)\r\n token.trimRight++;\r\n}\r\nfunction trimRight(token, greedy) {\r\n if (!token || !isHTMLToken(token))\r\n return;\r\n const mask = greedy ? BLANK : INLINE_BLANK;\r\n while (TYPES[token.input.charCodeAt(token.begin + token.trimLeft)] & mask)\r\n token.trimLeft++;\r\n if (token.input.charAt(token.begin + token.trimLeft) === '\\n')\r\n token.trimLeft++;\r\n}\n\nclass NumberToken extends Token {\r\n constructor(whole, decimal) {\r\n super(TokenKind.Number, whole.input, whole.begin, decimal ? decimal.end : whole.end, whole.file);\r\n this.whole = whole;\r\n this.decimal = decimal;\r\n }\r\n}\n\nclass IdentifierToken extends Token {\r\n constructor(input, begin, end, file) {\r\n super(TokenKind.Word, input, begin, end, file);\r\n this.input = input;\r\n this.begin = begin;\r\n this.end = end;\r\n this.file = file;\r\n this.content = this.getText();\r\n }\r\n isNumber(allowSign = false) {\r\n const begin = allowSign && TYPES[this.input.charCodeAt(this.begin)] & SIGN\r\n ? this.begin + 1\r\n : this.begin;\r\n for (let i = begin; i < this.end; i++) {\r\n if (!(TYPES[this.input.charCodeAt(i)] & NUMBER))\r\n return false;\r\n }\r\n return true;\r\n }\r\n}\n\nclass LiteralToken extends Token {\r\n constructor(input, begin, end, file) {\r\n super(TokenKind.Literal, input, begin, end, file);\r\n this.input = input;\r\n this.begin = begin;\r\n this.end = end;\r\n this.file = file;\r\n this.literal = this.getText();\r\n }\r\n}\n\nconst precedence = {\r\n '==': 1,\r\n '!=': 1,\r\n '>': 1,\r\n '<': 1,\r\n '>=': 1,\r\n '<=': 1,\r\n 'contains': 1,\r\n 'and': 0,\r\n 'or': 0\r\n};\r\nclass OperatorToken extends Token {\r\n constructor(input, begin, end, file) {\r\n super(TokenKind.Operator, input, begin, end, file);\r\n this.input = input;\r\n this.begin = begin;\r\n this.end = end;\r\n this.file = file;\r\n this.operator = this.getText();\r\n }\r\n getPrecedence() {\r\n const key = this.getText();\r\n return key in precedence ? precedence[key] : 1;\r\n }\r\n}\n\nclass PropertyAccessToken extends Token {\r\n constructor(variable, props, end) {\r\n super(TokenKind.PropertyAccess, variable.input, variable.begin, end, variable.file);\r\n this.variable = variable;\r\n this.props = props;\r\n this.propertyName = this.variable instanceof IdentifierToken\r\n ? this.variable.getText()\r\n : parseStringLiteral(this.variable.getText());\r\n }\r\n}\n\nclass FilterToken extends Token {\r\n constructor(name, args, input, begin, end, file) {\r\n super(TokenKind.Filter, input, begin, end, file);\r\n this.name = name;\r\n this.args = args;\r\n }\r\n}\n\nclass HashToken extends Token {\r\n constructor(input, begin, end, name, value, file) {\r\n super(TokenKind.Hash, input, begin, end, file);\r\n this.input = input;\r\n this.begin = begin;\r\n this.end = end;\r\n this.name = name;\r\n this.value = value;\r\n this.file = file;\r\n }\r\n}\n\nclass QuotedToken extends Token {\r\n constructor(input, begin, end, file) {\r\n super(TokenKind.Quoted, input, begin, end, file);\r\n this.input = input;\r\n this.begin = begin;\r\n this.end = end;\r\n this.file = file;\r\n }\r\n}\n\nclass HTMLToken extends Token {\r\n constructor(input, begin, end, file) {\r\n super(TokenKind.HTML, input, begin, end, file);\r\n this.input = input;\r\n this.begin = begin;\r\n this.end = end;\r\n this.file = file;\r\n this.trimLeft = 0;\r\n this.trimRight = 0;\r\n }\r\n getContent() {\r\n return this.input.slice(this.begin + this.trimLeft, this.end - this.trimRight);\r\n }\r\n}\n\nclass RangeToken extends Token {\r\n constructor(input, begin, end, lhs, rhs, file) {\r\n super(TokenKind.Range, input, begin, end, file);\r\n this.input = input;\r\n this.begin = begin;\r\n this.end = end;\r\n this.lhs = lhs;\r\n this.rhs = rhs;\r\n this.file = file;\r\n }\r\n}\n\nclass OutputToken extends DelimitedToken {\r\n constructor(input, begin, end, options, file) {\r\n const { trimOutputLeft, trimOutputRight, outputDelimiterLeft, outputDelimiterRight } = options;\r\n const value = input.slice(begin + outputDelimiterLeft.length, end - outputDelimiterRight.length);\r\n super(TokenKind.Output, value, input, begin, end, trimOutputLeft, trimOutputRight, file);\r\n }\r\n}\n\nfunction matchOperator(str, begin, trie, end = str.length) {\r\n let node = trie;\r\n let i = begin;\r\n let info;\r\n while (node[str[i]] && i < end) {\r\n node = node[str[i++]];\r\n if (node['end'])\r\n info = node;\r\n }\r\n if (!info)\r\n return -1;\r\n if (info['needBoundary'] && (TYPES[str.charCodeAt(i)] & IDENTIFIER))\r\n return -1;\r\n return i;\r\n}\n\nclass LiquidTagToken extends DelimitedToken {\r\n constructor(input, begin, end, options, file) {\r\n const value = input.slice(begin, end);\r\n super(TokenKind.Tag, value, input, begin, end, false, false, file);\r\n if (!/\\S/.test(value)) {\r\n // A line that contains only whitespace.\r\n this.name = '';\r\n this.args = '';\r\n }\r\n else {\r\n const tokenizer = new Tokenizer(this.content, options.operatorsTrie);\r\n this.name = tokenizer.readTagName();\r\n if (!this.name)\r\n throw new TokenizationError(`illegal liquid tag syntax`, this);\r\n tokenizer.skipBlank();\r\n this.args = tokenizer.remaining();\r\n }\r\n }\r\n}\n\nclass Tokenizer {\r\n constructor(input, trie = defaultOptions.operatorsTrie, file = '') {\r\n this.input = input;\r\n this.trie = trie;\r\n this.file = file;\r\n this.p = 0;\r\n this.rawBeginAt = -1;\r\n this.N = input.length;\r\n }\r\n readExpression() {\r\n return new Expression(this.readExpressionTokens());\r\n }\r\n *readExpressionTokens() {\r\n const operand = this.readValue();\r\n if (!operand)\r\n return;\r\n yield operand;\r\n while (this.p < this.N) {\r\n const operator = this.readOperator();\r\n if (!operator)\r\n return;\r\n const operand = this.readValue();\r\n if (!operand)\r\n return;\r\n yield operator;\r\n yield operand;\r\n }\r\n }\r\n readOperator() {\r\n this.skipBlank();\r\n const end = matchOperator(this.input, this.p, this.trie);\r\n if (end === -1)\r\n return;\r\n return new OperatorToken(this.input, this.p, (this.p = end), this.file);\r\n }\r\n readFilters() {\r\n const filters = [];\r\n while (true) {\r\n const filter = this.readFilter();\r\n if (!filter)\r\n return filters;\r\n filters.push(filter);\r\n }\r\n }\r\n readFilter() {\r\n this.skipBlank();\r\n if (this.end())\r\n return null;\r\n assert(this.peek() === '|', () => `unexpected token at ${this.snapshot()}`);\r\n this.p++;\r\n const begin = this.p;\r\n const name = this.readIdentifier();\r\n if (!name.size())\r\n return null;\r\n const args = [];\r\n this.skipBlank();\r\n if (this.peek() === ':') {\r\n do {\r\n ++this.p;\r\n const arg = this.readFilterArg();\r\n arg && args.push(arg);\r\n this.skipBlank();\r\n assert(this.end() || this.peek() === ',' || this.peek() === '|', () => `unexpected character ${this.snapshot()}`);\r\n } while (this.peek() === ',');\r\n }\r\n return new FilterToken(name.getText(), args, this.input, begin, this.p, this.file);\r\n }\r\n readFilterArg() {\r\n const key = this.readValue();\r\n if (!key)\r\n return;\r\n this.skipBlank();\r\n if (this.peek() !== ':')\r\n return key;\r\n ++this.p;\r\n const value = this.readValue();\r\n return [key.getText(), value];\r\n }\r\n readTopLevelTokens(options = defaultOptions) {\r\n const tokens = [];\r\n while (this.p < this.N) {\r\n const token = this.readTopLevelToken(options);\r\n tokens.push(token);\r\n }\r\n whiteSpaceCtrl(tokens, options);\r\n return tokens;\r\n }\r\n readTopLevelToken(options) {\r\n const { tagDelimiterLeft, outputDelimiterLeft } = options;\r\n if (this.rawBeginAt > -1)\r\n return this.readEndrawOrRawContent(options);\r\n if (this.match(tagDelimiterLeft))\r\n return this.readTagToken(options);\r\n if (this.match(outputDelimiterLeft))\r\n return this.readOutputToken(options);\r\n return this.readHTMLToken([tagDelimiterLeft, outputDelimiterLeft]);\r\n }\r\n readHTMLToken(stopStrings) {\r\n const begin = this.p;\r\n while (this.p < this.N) {\r\n if (stopStrings.some(str => this.match(str)))\r\n break;\r\n ++this.p;\r\n }\r\n return new HTMLToken(this.input, begin, this.p, this.file);\r\n }\r\n readTagToken(options = defaultOptions) {\r\n const { file, input } = this;\r\n const begin = this.p;\r\n if (this.readToDelimiter(options.tagDelimiterRight) === -1) {\r\n throw this.mkError(`tag ${this.snapshot(begin)} not closed`, begin);\r\n }\r\n const token = new TagToken(input, begin, this.p, options, file);\r\n if (token.name === 'raw')\r\n this.rawBeginAt = begin;\r\n return token;\r\n }\r\n readToDelimiter(delimiter) {\r\n while (this.p < this.N) {\r\n if ((this.peekType() & QUOTE)) {\r\n this.readQuoted();\r\n continue;\r\n }\r\n ++this.p;\r\n if (this.rmatch(delimiter))\r\n return this.p;\r\n }\r\n return -1;\r\n }\r\n readOutputToken(options = defaultOptions) {\r\n const { file, input } = this;\r\n const { outputDelimiterRight } = options;\r\n const begin = this.p;\r\n if (this.readToDelimiter(outputDelimiterRight) === -1) {\r\n throw this.mkError(`output ${this.snapshot(begin)} not closed`, begin);\r\n }\r\n return new OutputToken(input, begin, this.p, options, file);\r\n }\r\n readEndrawOrRawContent(options) {\r\n const { tagDelimiterLeft, tagDelimiterRight } = options;\r\n const begin = this.p;\r\n let leftPos = this.readTo(tagDelimiterLeft) - tagDelimiterLeft.length;\r\n while (this.p < this.N) {\r\n if (this.readIdentifier().getText() !== 'endraw') {\r\n leftPos = this.readTo(tagDelimiterLeft) - tagDelimiterLeft.length;\r\n continue;\r\n }\r\n while (this.p <= this.N) {\r\n if (this.rmatch(tagDelimiterRight)) {\r\n const end = this.p;\r\n if (begin === leftPos) {\r\n this.rawBeginAt = -1;\r\n return new TagToken(this.input, begin, end, options, this.file);\r\n }\r\n else {\r\n this.p = leftPos;\r\n return new HTMLToken(this.input, begin, leftPos, this.file);\r\n }\r\n }\r\n if (this.rmatch(tagDelimiterLeft))\r\n break;\r\n this.p++;\r\n }\r\n }\r\n throw this.mkError(`raw ${this.snapshot(this.rawBeginAt)} not closed`, begin);\r\n }\r\n readLiquidTagTokens(options = defaultOptions) {\r\n const tokens = [];\r\n while (this.p < this.N) {\r\n const token = this.readLiquidTagToken(options);\r\n if (token.name)\r\n tokens.push(token);\r\n }\r\n return tokens;\r\n }\r\n readLiquidTagToken(options) {\r\n const { file, input } = this;\r\n const begin = this.p;\r\n let end = this.N;\r\n if (this.readToDelimiter('\\n') !== -1)\r\n end = this.p;\r\n return new LiquidTagToken(input, begin, end, options, file);\r\n }\r\n mkError(msg, begin) {\r\n return new TokenizationError(msg, new IdentifierToken(this.input, begin, this.N, this.file));\r\n }\r\n snapshot(begin = this.p) {\r\n return JSON.stringify(ellipsis(this.input.slice(begin), 16));\r\n }\r\n /**\r\n * @deprecated\r\n */\r\n readWord() {\r\n console.warn('Tokenizer#readWord() will be removed, use #readIdentifier instead');\r\n return this.readIdentifier();\r\n }\r\n readIdentifier() {\r\n this.skipBlank();\r\n const begin = this.p;\r\n while (this.peekType() & IDENTIFIER)\r\n ++this.p;\r\n return new IdentifierToken(this.input, begin, this.p, this.file);\r\n }\r\n readTagName() {\r\n this.skipBlank();\r\n // Handle inline comment tags\r\n if (this.input[this.p] === '#')\r\n return this.input.slice(this.p, ++this.p);\r\n return this.readIdentifier().getText();\r\n }\r\n readHashes(jekyllStyle) {\r\n const hashes = [];\r\n while (true) {\r\n const hash = this.readHash(jekyllStyle);\r\n if (!hash)\r\n return hashes;\r\n hashes.push(hash);\r\n }\r\n }\r\n readHash(jekyllStyle) {\r\n this.skipBlank();\r\n if (this.peek() === ',')\r\n ++this.p;\r\n const begin = this.p;\r\n const name = this.readIdentifier();\r\n if (!name.size())\r\n return;\r\n let value;\r\n this.skipBlank();\r\n const sep = jekyllStyle ? '=' : ':';\r\n if (this.peek() === sep) {\r\n ++this.p;\r\n value = this.readValue();\r\n }\r\n return new HashToken(this.input, begin, this.p, name, value, this.file);\r\n }\r\n remaining() {\r\n return this.input.slice(this.p);\r\n }\r\n advance(i = 1) {\r\n this.p += i;\r\n }\r\n end() {\r\n return this.p >= this.N;\r\n }\r\n readTo(end) {\r\n while (this.p < this.N) {\r\n ++this.p;\r\n if (this.rmatch(end))\r\n return this.p;\r\n }\r\n return -1;\r\n }\r\n readValue() {\r\n const value = this.readQuoted() || this.readRange();\r\n if (value)\r\n return value;\r\n if (this.peek() === '[') {\r\n this.p++;\r\n const prop = this.readQuoted();\r\n if (!prop)\r\n return;\r\n if (this.peek() !== ']')\r\n return;\r\n this.p++;\r\n return new PropertyAccessToken(prop, [], this.p);\r\n }\r\n const variable = this.readIdentifier();\r\n if (!variable.size())\r\n return;\r\n let isNumber = variable.isNumber(true);\r\n const props = [];\r\n while (true) {\r\n if (this.peek() === '[') {\r\n isNumber = false;\r\n this.p++;\r\n const prop = this.readValue() || new IdentifierToken(this.input, this.p, this.p, this.file);\r\n this.readTo(']');\r\n props.push(prop);\r\n }\r\n else if (this.peek() === '.' && this.peek(1) !== '.') { // skip range syntax\r\n this.p++;\r\n const prop = this.readIdentifier();\r\n if (!prop.size())\r\n break;\r\n if (!prop.isNumber())\r\n isNumber = false;\r\n props.push(prop);\r\n }\r\n else\r\n break;\r\n }\r\n if (!props.length && literalValues.hasOwnProperty(variable.content)) {\r\n return new LiteralToken(this.input, variable.begin, variable.end, this.file);\r\n }\r\n if (isNumber)\r\n return new NumberToken(variable, props[0]);\r\n return new PropertyAccessToken(variable, props, this.p);\r\n }\r\n readRange() {\r\n this.skipBlank();\r\n const begin = this.p;\r\n if (this.peek() !== '(')\r\n return;\r\n ++this.p;\r\n const lhs = this.readValueOrThrow();\r\n this.p += 2;\r\n const rhs = this.readValueOrThrow();\r\n ++this.p;\r\n return new RangeToken(this.input, begin, this.p, lhs, rhs, this.file);\r\n }\r\n readValueOrThrow() {\r\n const value = this.readValue();\r\n assert(value, () => `unexpected token ${this.snapshot()}, value expected`);\r\n return value;\r\n }\r\n readQuoted() {\r\n this.skipBlank();\r\n const begin = this.p;\r\n if (!(this.peekType() & QUOTE))\r\n return;\r\n ++this.p;\r\n let escaped = false;\r\n while (this.p < this.N) {\r\n ++this.p;\r\n if (this.input[this.p - 1] === this.input[begin] && !escaped)\r\n break;\r\n if (escaped)\r\n escaped = false;\r\n else if (this.input[this.p - 1] === '\\\\')\r\n escaped = true;\r\n }\r\n return new QuotedToken(this.input, begin, this.p, this.file);\r\n }\r\n *readFileNameTemplate(options) {\r\n const { outputDelimiterLeft } = options;\r\n const htmlStopStrings = [',', ' ', outputDelimiterLeft];\r\n const htmlStopStringSet = new Set(htmlStopStrings);\r\n // break on ',' and ' ', outputDelimiterLeft only stops HTML token\r\n while (this.p < this.N && !htmlStopStringSet.has(this.peek())) {\r\n yield this.match(outputDelimiterLeft)\r\n ? this.readOutputToken(options)\r\n : this.readHTMLToken(htmlStopStrings);\r\n }\r\n }\r\n match(word) {\r\n for (let i = 0; i < word.length; i++) {\r\n if (word[i] !== this.input[this.p + i])\r\n return false;\r\n }\r\n return true;\r\n }\r\n rmatch(pattern) {\r\n for (let i = 0; i < pattern.length; i++) {\r\n if (pattern[pattern.length - 1 - i] !== this.input[this.p - 1 - i])\r\n return false;\r\n }\r\n return true;\r\n }\r\n peekType(n = 0) {\r\n return TYPES[this.input.charCodeAt(this.p + n)];\r\n }\r\n peek(n = 0) {\r\n return this.input[this.p + n];\r\n }\r\n skipBlank() {\r\n while (this.peekType() & BLANK)\r\n ++this.p;\r\n }\r\n}\n\nclass TagToken extends DelimitedToken {\r\n constructor(input, begin, end, options, file) {\r\n const { trimTagLeft, trimTagRight, tagDelimiterLeft, tagDelimiterRight } = options;\r\n const value = input.slice(begin + tagDelimiterLeft.length, end - tagDelimiterRight.length);\r\n super(TokenKind.Tag, value, input, begin, end, trimTagLeft, trimTagRight, file);\r\n const tokenizer = new Tokenizer(this.content, options.operatorsTrie);\r\n this.name = tokenizer.readTagName();\r\n if (!this.name)\r\n throw new TokenizationError(`illegal tag syntax`, this);\r\n tokenizer.skipBlank();\r\n this.args = tokenizer.remaining();\r\n }\r\n}\n\nclass ParseStream {\r\n constructor(tokens, parseToken) {\r\n this.handlers = {};\r\n this.stopRequested = false;\r\n this.tokens = tokens;\r\n this.parseToken = parseToken;\r\n }\r\n on(name, cb) {\r\n this.handlers[name] = cb;\r\n return this;\r\n }\r\n trigger(event, arg) {\r\n const h = this.handlers[event];\r\n return h ? (h.call(this, arg), true) : false;\r\n }\r\n start() {\r\n this.trigger('start');\r\n let token;\r\n while (!this.stopRequested && (token = this.tokens.shift())) {\r\n if (this.trigger('token', token))\r\n continue;\r\n if (isTagToken(token) && this.trigger(`tag:${token.name}`, token)) {\r\n continue;\r\n }\r\n const template = this.parseToken(token, this.tokens);\r\n this.trigger('template', template);\r\n }\r\n if (!this.stopRequested)\r\n this.trigger('end');\r\n return this;\r\n }\r\n stop() {\r\n this.stopRequested = true;\r\n return this;\r\n }\r\n}\n\n/**\r\n * Key-Value Pairs Representing Tag Arguments\r\n * Example:\r\n * For the markup `, foo:'bar', coo:2 reversed %}`,\r\n * hash['foo'] === 'bar'\r\n * hash['coo'] === 2\r\n * hash['reversed'] === undefined\r\n */\r\nclass Hash {\r\n constructor(markup, jekyllStyle) {\r\n this.hash = {};\r\n const tokenizer = new Tokenizer(markup, {});\r\n for (const hash of tokenizer.readHashes(jekyllStyle)) {\r\n this.hash[hash.name.content] = hash.value;\r\n }\r\n }\r\n *render(ctx) {\r\n const hash = {};\r\n for (const key of Object.keys(this.hash)) {\r\n hash[key] = this.hash[key] === undefined ? true : yield _evalToken(this.hash[key], ctx);\r\n }\r\n return hash;\r\n }\r\n}\n\nfunction isKeyValuePair(arr) {\r\n return isArray(arr);\r\n}\n\nclass Filter {\r\n constructor(name, impl, args, liquid) {\r\n this.name = name;\r\n this.impl = impl || identify;\r\n this.args = args;\r\n this.liquid = liquid;\r\n }\r\n *render(value, context) {\r\n const argv = [];\r\n for (const arg of this.args) {\r\n if (isKeyValuePair(arg))\r\n argv.push([arg[0], yield _evalToken(arg[1], context)]);\r\n else\r\n argv.push(yield _evalToken(arg, context));\r\n }\r\n return this.impl.apply({ context, liquid: this.liquid }, [value, ...argv]);\r\n }\r\n}\n\nclass Value {\r\n /**\r\n * @param str the value to be valuated, eg.: \"foobar\" | truncate: 3\r\n */\r\n constructor(str, liquid) {\r\n this.filters = [];\r\n const tokenizer = new Tokenizer(str, liquid.options.operatorsTrie);\r\n this.initial = tokenizer.readExpression();\r\n this.filters = tokenizer.readFilters().map(({ name, args }) => new Filter(name, liquid.filters.get(name), args, liquid));\r\n }\r\n *value(ctx, lenient) {\r\n lenient = lenient || (ctx.opts.lenientIf && this.filters.length > 0 && this.filters[0].name === 'default');\r\n let val = yield this.initial.evaluate(ctx, lenient);\r\n for (const filter of this.filters) {\r\n val = yield filter.render(val, ctx);\r\n }\r\n return val;\r\n }\r\n}\n\nvar assign = {\r\n parse: function (token) {\r\n const tokenizer = new Tokenizer(token.args, this.liquid.options.operatorsTrie);\r\n this.key = tokenizer.readIdentifier().content;\r\n tokenizer.skipBlank();\r\n assert(tokenizer.peek() === '=', () => `illegal token ${token.getText()}`);\r\n tokenizer.advance();\r\n this.value = new Value(tokenizer.remaining(), this.liquid);\r\n },\r\n render: function* (ctx) {\r\n ctx.bottom()[this.key] = yield this.value.value(ctx, this.liquid.options.lenientIf);\r\n }\r\n};\n\nclass ForloopDrop extends Drop {\r\n constructor(length, collection, variable) {\r\n super();\r\n this.i = 0;\r\n this.length = length;\r\n this.name = `${variable}-${collection}`;\r\n }\r\n next() {\r\n this.i++;\r\n }\r\n index0() {\r\n return this.i;\r\n }\r\n index() {\r\n return this.i + 1;\r\n }\r\n first() {\r\n return this.i === 0;\r\n }\r\n last() {\r\n return this.i === this.length - 1;\r\n }\r\n rindex() {\r\n return this.length - this.i;\r\n }\r\n rindex0() {\r\n return this.length - this.i - 1;\r\n }\r\n valueOf() {\r\n return JSON.stringify(this);\r\n }\r\n}\n\nconst MODIFIERS = ['offset', 'limit', 'reversed'];\r\nvar For = {\r\n type: 'block',\r\n parse: function (token, remainTokens) {\r\n const tokenizer = new Tokenizer(token.args, this.liquid.options.operatorsTrie);\r\n const variable = tokenizer.readIdentifier();\r\n const inStr = tokenizer.readIdentifier();\r\n const collection = tokenizer.readValue();\r\n assert(variable.size() && inStr.content === 'in' && collection, () => `illegal tag: ${token.getText()}`);\r\n this.variable = variable.content;\r\n this.collection = collection;\r\n this.hash = new Hash(tokenizer.remaining());\r\n this.templates = [];\r\n this.elseTemplates = [];\r\n let p;\r\n const stream = this.liquid.parser.parseStream(remainTokens)\r\n .on('start', () => (p = this.templates))\r\n .on('tag:else', () => (p = this.elseTemplates))\r\n .on('tag:endfor', () => stream.stop())\r\n .on('template', (tpl) => p.push(tpl))\r\n .on('end', () => {\r\n throw new Error(`tag ${token.getText()} not closed`);\r\n });\r\n stream.start();\r\n },\r\n render: function* (ctx, emitter) {\r\n const r = this.liquid.renderer;\r\n let collection = toEnumerable(yield _evalToken(this.collection, ctx));\r\n if (!collection.length) {\r\n yield r.renderTemplates(this.elseTemplates, ctx, emitter);\r\n return;\r\n }\r\n const continueKey = 'continue-' + this.variable + '-' + this.collection.getText();\r\n ctx.push({ continue: ctx.getRegister(continueKey) });\r\n const hash = yield this.hash.render(ctx);\r\n ctx.pop();\r\n const modifiers = this.liquid.options.orderedFilterParameters\r\n ? Object.keys(hash).filter(x => MODIFIERS.includes(x))\r\n : MODIFIERS.filter(x => hash[x] !== undefined);\r\n collection = modifiers.reduce((collection, modifier) => {\r\n if (modifier === 'offset')\r\n return offset(collection, hash['offset']);\r\n if (modifier === 'limit')\r\n return limit(collection, hash['limit']);\r\n return reversed(collection);\r\n }, collection);\r\n ctx.setRegister(continueKey, (hash['offset'] || 0) + collection.length);\r\n const scope = { forloop: new ForloopDrop(collection.length, this.collection.getText(), this.variable) };\r\n ctx.push(scope);\r\n for (const item of collection) {\r\n scope[this.variable] = item;\r\n yield r.renderTemplates(this.templates, ctx, emitter);\r\n if (emitter['break']) {\r\n emitter['break'] = false;\r\n break;\r\n }\r\n emitter['continue'] = false;\r\n scope.forloop.next();\r\n }\r\n ctx.pop();\r\n }\r\n};\r\nfunction reversed(arr) {\r\n return [...arr].reverse();\r\n}\r\nfunction offset(arr, count) {\r\n return arr.slice(count);\r\n}\r\nfunction limit(arr, count) {\r\n return arr.slice(0, count);\r\n}\n\nvar capture = {\r\n parse: function (tagToken, remainTokens) {\r\n const tokenizer = new Tokenizer(tagToken.args, this.liquid.options.operatorsTrie);\r\n this.variable = readVariableName(tokenizer);\r\n assert(this.variable, () => `${tagToken.args} not valid identifier`);\r\n this.templates = [];\r\n const stream = this.liquid.parser.parseStream(remainTokens);\r\n stream.on('tag:endcapture', () => stream.stop())\r\n .on('template', (tpl) => this.templates.push(tpl))\r\n .on('end', () => {\r\n throw new Error(`tag ${tagToken.getText()} not closed`);\r\n });\r\n stream.start();\r\n },\r\n render: function* (ctx) {\r\n const r = this.liquid.renderer;\r\n const html = yield r.renderTemplates(this.templates, ctx);\r\n ctx.bottom()[this.variable] = html;\r\n }\r\n};\r\nfunction readVariableName(tokenizer) {\r\n const word = tokenizer.readIdentifier().content;\r\n if (word)\r\n return word;\r\n const quoted = tokenizer.readQuoted();\r\n if (quoted)\r\n return evalQuotedToken(quoted);\r\n}\n\nvar Case = {\r\n parse: function (tagToken, remainTokens) {\r\n this.cond = new Value(tagToken.args, this.liquid);\r\n this.cases = [];\r\n this.elseTemplates = [];\r\n let p = [];\r\n const stream = this.liquid.parser.parseStream(remainTokens)\r\n .on('tag:when', (token) => {\r\n p = [];\r\n const tokenizer = new Tokenizer(token.args, this.liquid.options.operatorsTrie);\r\n while (!tokenizer.end()) {\r\n const value = tokenizer.readValue();\r\n this.cases.push({\r\n val: value,\r\n templates: p\r\n });\r\n tokenizer.readTo(',');\r\n }\r\n })\r\n .on('tag:else', () => (p = this.elseTemplates))\r\n .on('tag:endcase', () => stream.stop())\r\n .on('template', (tpl) => p.push(tpl))\r\n .on('end', () => {\r\n throw new Error(`tag ${tagToken.getText()} not closed`);\r\n });\r\n stream.start();\r\n },\r\n render: function* (ctx, emitter) {\r\n const r = this.liquid.renderer;\r\n const cond = toValue(yield this.cond.value(ctx, ctx.opts.lenientIf));\r\n for (const branch of this.cases) {\r\n const val = yield _evalToken(branch.val, ctx, ctx.opts.lenientIf);\r\n if (val === cond) {\r\n yield r.renderTemplates(branch.templates, ctx, emitter);\r\n return;\r\n }\r\n }\r\n yield r.renderTemplates(this.elseTemplates, ctx, emitter);\r\n }\r\n};\n\nvar comment = {\r\n parse: function (tagToken, remainTokens) {\r\n const stream = this.liquid.parser.parseStream(remainTokens);\r\n stream\r\n .on('token', (token) => {\r\n if (token.name === 'endcomment')\r\n stream.stop();\r\n })\r\n .on('end', () => {\r\n throw new Error(`tag ${tagToken.getText()} not closed`);\r\n });\r\n stream.start();\r\n }\r\n};\n\nvar BlockMode;\r\n(function (BlockMode) {\r\n /* store rendered html into blocks */\r\n BlockMode[BlockMode[\"OUTPUT\"] = 0] = \"OUTPUT\";\r\n /* output rendered html directly */\r\n BlockMode[BlockMode[\"STORE\"] = 1] = \"STORE\";\r\n})(BlockMode || (BlockMode = {}));\r\nvar BlockMode$1 = BlockMode;\n\nvar render = {\r\n parseFilePath,\r\n renderFilePath,\r\n parse: function (token) {\r\n const args = token.args;\r\n const tokenizer = new Tokenizer(args, this.liquid.options.operatorsTrie);\r\n this['file'] = this.parseFilePath(tokenizer, this.liquid);\r\n this['currentFile'] = token.file;\r\n while (!tokenizer.end()) {\r\n tokenizer.skipBlank();\r\n const begin = tokenizer.p;\r\n const keyword = tokenizer.readIdentifier();\r\n if (keyword.content === 'with' || keyword.content === 'for') {\r\n tokenizer.skipBlank();\r\n // can be normal key/value pair, like \"with: true\"\r\n if (tokenizer.peek() !== ':') {\r\n const value = tokenizer.readValue();\r\n // can be normal key, like \"with,\"\r\n if (value) {\r\n const beforeAs = tokenizer.p;\r\n const asStr = tokenizer.readIdentifier();\r\n let alias;\r\n if (asStr.content === 'as')\r\n alias = tokenizer.readIdentifier();\r\n else\r\n tokenizer.p = beforeAs;\r\n this[keyword.content] = { value, alias: alias && alias.content };\r\n tokenizer.skipBlank();\r\n if (tokenizer.peek() === ',')\r\n tokenizer.advance();\r\n // matched!\r\n continue;\r\n }\r\n }\r\n }\r\n /**\r\n * restore cursor if with/for not matched\r\n */\r\n tokenizer.p = begin;\r\n break;\r\n }\r\n this.hash = new Hash(tokenizer.remaining());\r\n },\r\n render: function* (ctx, emitter) {\r\n const { liquid, hash } = this;\r\n const filepath = yield this.renderFilePath(this['file'], ctx, liquid);\r\n assert(filepath, () => `illegal filename \"${filepath}\"`);\r\n const childCtx = new Context({}, ctx.opts, { sync: ctx.sync, globals: ctx.globals, strictVariables: ctx.strictVariables });\r\n const scope = childCtx.bottom();\r\n __assign(scope, yield hash.render(ctx));\r\n if (this['with']) {\r\n const { value, alias } = this['with'];\r\n scope[alias || filepath] = yield _evalToken(value, ctx);\r\n }\r\n if (this['for']) {\r\n const { value, alias } = this['for'];\r\n let collection = yield _evalToken(value, ctx);\r\n collection = toEnumerable(collection);\r\n scope['forloop'] = new ForloopDrop(collection.length, value.getText(), alias);\r\n for (const item of collection) {\r\n scope[alias] = item;\r\n const templates = yield liquid._parsePartialFile(filepath, childCtx.sync, this['currentFile']);\r\n yield liquid.renderer.renderTemplates(templates, childCtx, emitter);\r\n scope['forloop'].next();\r\n }\r\n }\r\n else {\r\n const templates = yield liquid._parsePartialFile(filepath, childCtx.sync, this['currentFile']);\r\n yield liquid.renderer.renderTemplates(templates, childCtx, emitter);\r\n }\r\n }\r\n};\r\n/**\r\n * @return null for \"none\",\r\n * @return Template[] for quoted with tags and/or filters\r\n * @return Token for expression (not quoted)\r\n * @throws TypeError if cannot read next token\r\n */\r\nfunction parseFilePath(tokenizer, liquid) {\r\n if (liquid.options.dynamicPartials) {\r\n const file = tokenizer.readValue();\r\n if (file === undefined)\r\n throw new TypeError(`illegal argument \"${tokenizer.input}\"`);\r\n if (file.getText() === 'none')\r\n return null;\r\n if (isQuotedToken(file)) {\r\n // for filenames like \"files/{{file}}\", eval as liquid template\r\n const templates = liquid.parse(evalQuotedToken(file));\r\n return optimize(templates);\r\n }\r\n return file;\r\n }\r\n const tokens = [...tokenizer.readFileNameTemplate(liquid.options)];\r\n const templates = optimize(liquid.parser.parseTokens(tokens));\r\n return templates === 'none' ? null : templates;\r\n}\r\nfunction optimize(templates) {\r\n // for filenames like \"files/file.liquid\", extract the string directly\r\n if (templates.length === 1 && isHTMLToken(templates[0].token))\r\n return templates[0].token.getContent();\r\n return templates;\r\n}\r\nfunction* renderFilePath(file, ctx, liquid) {\r\n if (typeof file === 'string')\r\n return file;\r\n if (Array.isArray(file))\r\n return liquid.renderer.renderTemplates(file, ctx);\r\n return yield _evalToken(file, ctx);\r\n}\n\nvar include = {\r\n parseFilePath,\r\n renderFilePath,\r\n parse: function (token) {\r\n const args = token.args;\r\n const tokenizer = new Tokenizer(args, this.liquid.options.operatorsTrie);\r\n this['file'] = this.parseFilePath(tokenizer, this.liquid);\r\n this['currentFile'] = token.file;\r\n const begin = tokenizer.p;\r\n const withStr = tokenizer.readIdentifier();\r\n if (withStr.content === 'with') {\r\n tokenizer.skipBlank();\r\n if (tokenizer.peek() !== ':') {\r\n this.withVar = tokenizer.readValue();\r\n }\r\n else\r\n tokenizer.p = begin;\r\n }\r\n else\r\n tokenizer.p = begin;\r\n this.hash = new Hash(tokenizer.remaining(), this.liquid.options.jekyllInclude);\r\n },\r\n render: function* (ctx, emitter) {\r\n const { liquid, hash, withVar } = this;\r\n const { renderer } = liquid;\r\n const filepath = yield this.renderFilePath(this['file'], ctx, liquid);\r\n assert(filepath, () => `illegal filename \"${filepath}\"`);\r\n const saved = ctx.saveRegister('blocks', 'blockMode');\r\n ctx.setRegister('blocks', {});\r\n ctx.setRegister('blockMode', BlockMode$1.OUTPUT);\r\n const scope = yield hash.render(ctx);\r\n if (withVar)\r\n scope[filepath] = yield _evalToken(withVar, ctx);\r\n const templates = yield liquid._parsePartialFile(filepath, ctx.sync, this['currentFile']);\r\n ctx.push(ctx.opts.jekyllInclude ? { include: scope } : scope);\r\n yield renderer.renderTemplates(templates, ctx, emitter);\r\n ctx.pop();\r\n ctx.restoreRegister(saved);\r\n }\r\n};\n\nvar decrement = {\r\n parse: function (token) {\r\n const tokenizer = new Tokenizer(token.args, this.liquid.options.operatorsTrie);\r\n this.variable = tokenizer.readIdentifier().content;\r\n },\r\n render: function (context, emitter) {\r\n const scope = context.environments;\r\n if (!isNumber(scope[this.variable])) {\r\n scope[this.variable] = 0;\r\n }\r\n emitter.write(stringify(--scope[this.variable]));\r\n }\r\n};\n\nvar cycle = {\r\n parse: function (tagToken) {\r\n const tokenizer = new Tokenizer(tagToken.args, this.liquid.options.operatorsTrie);\r\n const group = tokenizer.readValue();\r\n tokenizer.skipBlank();\r\n this.candidates = [];\r\n if (group) {\r\n if (tokenizer.peek() === ':') {\r\n this.group = group;\r\n tokenizer.advance();\r\n }\r\n else\r\n this.candidates.push(group);\r\n }\r\n while (!tokenizer.end()) {\r\n const value = tokenizer.readValue();\r\n if (value)\r\n this.candidates.push(value);\r\n tokenizer.readTo(',');\r\n }\r\n assert(this.candidates.length, () => `empty candidates: ${tagToken.getText()}`);\r\n },\r\n render: function* (ctx, emitter) {\r\n const group = yield _evalToken(this.group, ctx);\r\n const fingerprint = `cycle:${group}:` + this.candidates.join(',');\r\n const groups = ctx.getRegister('cycle');\r\n let idx = groups[fingerprint];\r\n if (idx === undefined) {\r\n idx = groups[fingerprint] = 0;\r\n }\r\n const candidate = this.candidates[idx];\r\n idx = (idx + 1) % this.candidates.length;\r\n groups[fingerprint] = idx;\r\n const html = yield _evalToken(candidate, ctx);\r\n emitter.write(html);\r\n }\r\n};\n\nvar If = {\r\n parse: function (tagToken, remainTokens) {\r\n this.branches = [];\r\n this.elseTemplates = [];\r\n let p;\r\n this.liquid.parser.parseStream(remainTokens)\r\n .on('start', () => this.branches.push({\r\n predicate: new Value(tagToken.args, this.liquid),\r\n templates: (p = [])\r\n }))\r\n .on('tag:elsif', (token) => this.branches.push({\r\n predicate: new Value(token.args, this.liquid),\r\n templates: (p = [])\r\n }))\r\n .on('tag:else', () => (p = this.elseTemplates))\r\n .on('tag:endif', function () { this.stop(); })\r\n .on('template', (tpl) => p.push(tpl))\r\n .on('end', () => { throw new Error(`tag ${tagToken.getText()} not closed`); })\r\n .start();\r\n },\r\n render: function* (ctx, emitter) {\r\n const r = this.liquid.renderer;\r\n for (const { predicate, templates } of this.branches) {\r\n const value = yield predicate.value(ctx, ctx.opts.lenientIf);\r\n if (isTruthy(value, ctx)) {\r\n yield r.renderTemplates(templates, ctx, emitter);\r\n return;\r\n }\r\n }\r\n yield r.renderTemplates(this.elseTemplates, ctx, emitter);\r\n }\r\n};\n\nvar increment = {\r\n parse: function (token) {\r\n const tokenizer = new Tokenizer(token.args, this.liquid.options.operatorsTrie);\r\n this.variable = tokenizer.readIdentifier().content;\r\n },\r\n render: function (context, emitter) {\r\n const scope = context.environments;\r\n if (!isNumber(scope[this.variable])) {\r\n scope[this.variable] = 0;\r\n }\r\n const val = scope[this.variable];\r\n scope[this.variable]++;\r\n emitter.write(stringify(val));\r\n }\r\n};\n\nvar layout = {\r\n parseFilePath,\r\n renderFilePath,\r\n parse: function (token, remainTokens) {\r\n const tokenizer = new Tokenizer(token.args, this.liquid.options.operatorsTrie);\r\n this['file'] = this.parseFilePath(tokenizer, this.liquid);\r\n this['currentFile'] = token.file;\r\n this.hash = new Hash(tokenizer.remaining());\r\n this.tpls = this.liquid.parser.parseTokens(remainTokens);\r\n },\r\n render: function* (ctx, emitter) {\r\n const { liquid, hash, file } = this;\r\n const { renderer } = liquid;\r\n if (file === null) {\r\n ctx.setRegister('blockMode', BlockMode$1.OUTPUT);\r\n yield renderer.renderTemplates(this.tpls, ctx, emitter);\r\n return;\r\n }\r\n const filepath = yield this.renderFilePath(this['file'], ctx, liquid);\r\n assert(filepath, () => `illegal filename \"${filepath}\"`);\r\n const templates = yield liquid._parseLayoutFile(filepath, ctx.sync, this['currentFile']);\r\n // render remaining contents and store rendered results\r\n ctx.setRegister('blockMode', BlockMode$1.STORE);\r\n const html = yield renderer.renderTemplates(this.tpls, ctx);\r\n const blocks = ctx.getRegister('blocks');\r\n // set whole content to anonymous block if anonymous doesn't specified\r\n if (blocks[''] === undefined)\r\n blocks[''] = (parent, emitter) => emitter.write(html);\r\n ctx.setRegister('blockMode', BlockMode$1.OUTPUT);\r\n // render the layout file use stored blocks\r\n ctx.push(yield hash.render(ctx));\r\n yield renderer.renderTemplates(templates, ctx, emitter);\r\n ctx.pop();\r\n }\r\n};\n\nclass BlockDrop extends Drop {\r\n constructor(\r\n // the block render from layout template\r\n superBlockRender = () => '') {\r\n super();\r\n this.superBlockRender = superBlockRender;\r\n }\r\n /**\r\n * Provide parent access in child block by\r\n * {{ block.super }}\r\n */\r\n super() {\r\n return this.superBlockRender();\r\n }\r\n}\n\nvar block = {\r\n parse(token, remainTokens) {\r\n const match = /\\w+/.exec(token.args);\r\n this.block = match ? match[0] : '';\r\n this.tpls = [];\r\n this.liquid.parser.parseStream(remainTokens)\r\n .on('tag:endblock', function () { this.stop(); })\r\n .on('template', (tpl) => this.tpls.push(tpl))\r\n .on('end', () => { throw new Error(`tag ${token.getText()} not closed`); })\r\n .start();\r\n },\r\n *render(ctx, emitter) {\r\n const blockRender = this.getBlockRender(ctx);\r\n if (ctx.getRegister('blockMode') === BlockMode$1.STORE) {\r\n ctx.getRegister('blocks')[this.block] = blockRender;\r\n }\r\n else {\r\n yield blockRender(new BlockDrop(), emitter);\r\n }\r\n },\r\n getBlockRender(ctx) {\r\n const { liquid, tpls } = this;\r\n const renderChild = ctx.getRegister('blocks')[this.block];\r\n const renderCurrent = function* (superBlock, emitter) {\r\n // add {{ block.super }} support when rendering\r\n ctx.push({ block: superBlock });\r\n yield liquid.renderer.renderTemplates(tpls, ctx, emitter);\r\n ctx.pop();\r\n };\r\n return renderChild\r\n ? (superBlock, emitter) => renderChild(new BlockDrop(() => renderCurrent(superBlock, emitter)), emitter)\r\n : renderCurrent;\r\n }\r\n};\n\nvar raw = {\r\n parse: function (tagToken, remainTokens) {\r\n this.tokens = [];\r\n const stream = this.liquid.parser.parseStream(remainTokens);\r\n stream\r\n .on('token', (token) => {\r\n if (token.name === 'endraw')\r\n stream.stop();\r\n else\r\n this.tokens.push(token);\r\n })\r\n .on('end', () => {\r\n throw new Error(`tag ${tagToken.getText()} not closed`);\r\n });\r\n stream.start();\r\n },\r\n render: function () {\r\n return this.tokens.map((token) => token.getText()).join('');\r\n }\r\n};\n\nclass TablerowloopDrop extends ForloopDrop {\r\n constructor(length, cols, collection, variable) {\r\n super(length, collection, variable);\r\n this.length = length;\r\n this.cols = cols;\r\n }\r\n row() {\r\n return Math.floor(this.i / this.cols) + 1;\r\n }\r\n col0() {\r\n return (this.i % this.cols);\r\n }\r\n col() {\r\n return this.col0() + 1;\r\n }\r\n col_first() {\r\n return this.col0() === 0;\r\n }\r\n col_last() {\r\n return this.col() === this.cols;\r\n }\r\n}\n\nvar tablerow = {\r\n parse: function (tagToken, remainTokens) {\r\n const tokenizer = new Tokenizer(tagToken.args, this.liquid.options.operatorsTrie);\r\n const variable = tokenizer.readIdentifier();\r\n tokenizer.skipBlank();\r\n const tmp = tokenizer.readIdentifier();\r\n assert(tmp && tmp.content === 'in', () => `illegal tag: ${tagToken.getText()}`);\r\n this.variable = variable.content;\r\n this.collection = tokenizer.readValue();\r\n this.hash = new Hash(tokenizer.remaining());\r\n this.templates = [];\r\n let p;\r\n const stream = this.liquid.parser.parseStream(remainTokens)\r\n .on('start', () => (p = this.templates))\r\n .on('tag:endtablerow', () => stream.stop())\r\n .on('template', (tpl) => p.push(tpl))\r\n .on('end', () => {\r\n throw new Error(`tag ${tagToken.getText()} not closed`);\r\n });\r\n stream.start();\r\n },\r\n render: function* (ctx, emitter) {\r\n let collection = toEnumerable(yield _evalToken(this.collection, ctx));\r\n const hash = yield this.hash.render(ctx);\r\n const offset = hash.offset || 0;\r\n const limit = (hash.limit === undefined) ? collection.length : hash.limit;\r\n collection = collection.slice(offset, offset + limit);\r\n const cols = hash.cols || collection.length;\r\n const r = this.liquid.renderer;\r\n const tablerowloop = new TablerowloopDrop(collection.length, cols, this.collection.getText(), this.variable);\r\n const scope = { tablerowloop };\r\n ctx.push(scope);\r\n for (let idx = 0; idx < collection.length; idx++, tablerowloop.next()) {\r\n scope[this.variable] = collection[idx];\r\n if (tablerowloop.col0() === 0) {\r\n if (tablerowloop.row() !== 1)\r\n emitter.write('');\r\n emitter.write(``);\r\n }\r\n emitter.write(``);\r\n yield r.renderTemplates(this.templates, ctx, emitter);\r\n emitter.write('');\r\n }\r\n if (collection.length)\r\n emitter.write('');\r\n ctx.pop();\r\n }\r\n};\n\nvar unless = {\r\n parse: function (tagToken, remainTokens) {\r\n this.branches = [];\r\n this.elseTemplates = [];\r\n let p;\r\n this.liquid.parser.parseStream(remainTokens)\r\n .on('start', () => this.branches.push({\r\n predicate: new Value(tagToken.args, this.liquid),\r\n test: isFalsy,\r\n templates: (p = [])\r\n }))\r\n .on('tag:elsif', (token) => this.branches.push({\r\n predicate: new Value(token.args, this.liquid),\r\n test: isTruthy,\r\n templates: (p = [])\r\n }))\r\n .on('tag:else', () => (p = this.elseTemplates))\r\n .on('tag:endunless', function () { this.stop(); })\r\n .on('template', (tpl) => p.push(tpl))\r\n .on('end', () => { throw new Error(`tag ${tagToken.getText()} not closed`); })\r\n .start();\r\n },\r\n render: function* (ctx, emitter) {\r\n const r = this.liquid.renderer;\r\n for (const { predicate, test, templates } of this.branches) {\r\n const value = yield predicate.value(ctx, ctx.opts.lenientIf);\r\n if (test(value, ctx)) {\r\n yield r.renderTemplates(templates, ctx, emitter);\r\n return;\r\n }\r\n }\r\n yield r.renderTemplates(this.elseTemplates, ctx, emitter);\r\n }\r\n};\n\nvar Break = {\r\n render: function (ctx, emitter) {\r\n emitter['break'] = true;\r\n }\r\n};\n\nvar Continue = {\r\n render: function (ctx, emitter) {\r\n emitter['continue'] = true;\r\n }\r\n};\n\nvar echo = {\r\n parse: function (token) {\r\n this.value = new Value(token.args, this.liquid);\r\n },\r\n render: function* (ctx, emitter) {\r\n const val = yield this.value.value(ctx, false);\r\n emitter.write(val);\r\n }\r\n};\n\nvar liquid = {\r\n parse: function (token) {\r\n const tokenizer = new Tokenizer(token.args, this.liquid.options.operatorsTrie);\r\n const tokens = tokenizer.readLiquidTagTokens(this.liquid.options);\r\n this.tpls = this.liquid.parser.parseTokens(tokens);\r\n },\r\n render: function* (ctx, emitter) {\r\n yield this.liquid.renderer.renderTemplates(this.tpls, ctx, emitter);\r\n }\r\n};\n\nvar inlineComment = {\r\n parse: function (tagToken, remainTokens) {\r\n if (tagToken.args.search(/\\n\\s*[^#\\s]/g) !== -1) {\r\n throw new Error('every line of an inline comment must start with a \\'#\\' character');\r\n }\r\n }\r\n};\n\nconst tags = {\r\n assign, 'for': For, capture, 'case': Case, comment, include, render, decrement, increment, cycle, 'if': If, layout, block, raw, tablerow, unless, 'break': Break, 'continue': Continue, echo, liquid, '#': inlineComment\r\n};\n\nvar index = /*#__PURE__*/Object.freeze({\n __proto__: null,\n 'default': tags\n});\n\nconst filters = new Map();\r\nforOwn(builtinFilters, (conf, name) => {\r\n filters.set(snakeCase(name), conf);\r\n});\r\nconst defaultOptions = {\r\n root: ['.'],\r\n layouts: ['.'],\r\n partials: ['.'],\r\n relativeReference: true,\r\n jekyllInclude: false,\r\n cache: undefined,\r\n extname: '',\r\n fs: fs,\r\n dynamicPartials: true,\r\n jsTruthy: false,\r\n trimTagRight: false,\r\n trimTagLeft: false,\r\n trimOutputRight: false,\r\n trimOutputLeft: false,\r\n greedy: true,\r\n tagDelimiterLeft: '{%',\r\n tagDelimiterRight: '%}',\r\n outputDelimiterLeft: '{{',\r\n outputDelimiterRight: '}}',\r\n preserveTimezones: false,\r\n strictFilters: false,\r\n strictVariables: false,\r\n ownPropertyOnly: false,\r\n lenientIf: false,\r\n globals: {},\r\n keepOutputType: false,\r\n operators: defaultOperators,\r\n operatorsTrie: createTrie(defaultOperators)\r\n};\r\nfunction normalize(options) {\r\n if (options.hasOwnProperty('operators')) {\r\n options.operatorsTrie = createTrie(options.operators);\r\n }\r\n if (options.hasOwnProperty('root')) {\r\n if (!options.hasOwnProperty('partials'))\r\n options.partials = options.root;\r\n if (!options.hasOwnProperty('layouts'))\r\n options.layouts = options.root;\r\n }\r\n if (options.hasOwnProperty('cache')) {\r\n let cache;\r\n if (typeof options.cache === 'number')\r\n cache = options.cache > 0 ? new LRU(options.cache) : undefined;\r\n else if (typeof options.cache === 'object')\r\n cache = options.cache;\r\n else\r\n cache = options.cache ? new LRU(1024) : undefined;\r\n options.cache = cache;\r\n }\r\n options = Object.assign(Object.assign(Object.assign({}, defaultOptions), (options.jekyllInclude ? { dynamicPartials: false } : {})), options);\r\n if (!options.fs.dirname && options.relativeReference) {\r\n console.warn('[LiquidJS] `fs.dirname` is required for relativeReference, set relativeReference to `false` to suppress this warning, or provide implementation for `fs.dirname`');\r\n options.relativeReference = false;\r\n }\r\n options.root = normalizeDirectoryList(options.root);\r\n options.partials = normalizeDirectoryList(options.partials);\r\n options.layouts = normalizeDirectoryList(options.layouts);\r\n options.outputEscape = options.outputEscape && getOutputEscapeFunction(options.outputEscape);\r\n return options;\r\n}\r\nfunction getOutputEscapeFunction(nameOrFunction) {\r\n if (isString(nameOrFunction)) {\r\n const filterImpl = filters.get(nameOrFunction);\r\n assert(isFunction(filterImpl), `filter \"${nameOrFunction}\" not found`);\r\n return filterImpl;\r\n }\r\n else {\r\n assert(isFunction(nameOrFunction), '`outputEscape` need to be of type string or function');\r\n return nameOrFunction;\r\n }\r\n}\r\nfunction normalizeDirectoryList(value) {\r\n let list = [];\r\n if (isArray(value))\r\n list = value;\r\n if (isString(value))\r\n list = [value];\r\n return list;\r\n}\n\nclass Context {\r\n constructor(env = {}, opts = defaultOptions, renderOptions = {}) {\r\n var _a, _b;\r\n /**\r\n * insert a Context-level empty scope,\r\n * for tags like `{% capture %}` `{% assign %}` to operate\r\n */\r\n this.scopes = [{}];\r\n this.registers = {};\r\n this.sync = !!renderOptions.sync;\r\n this.opts = opts;\r\n this.globals = (_a = renderOptions.globals) !== null && _a !== void 0 ? _a : opts.globals;\r\n this.environments = env;\r\n this.strictVariables = (_b = renderOptions.strictVariables) !== null && _b !== void 0 ? _b : this.opts.strictVariables;\r\n }\r\n getRegister(key) {\r\n return (this.registers[key] = this.registers[key] || {});\r\n }\r\n setRegister(key, value) {\r\n return (this.registers[key] = value);\r\n }\r\n saveRegister(...keys) {\r\n return keys.map(key => [key, this.getRegister(key)]);\r\n }\r\n restoreRegister(keyValues) {\r\n return keyValues.forEach(([key, value]) => this.setRegister(key, value));\r\n }\r\n getAll() {\r\n return [this.globals, this.environments, ...this.scopes]\r\n .reduce((ctx, val) => __assign(ctx, val), {});\r\n }\r\n /**\r\n * @deprecated use `_get()` instead\r\n */\r\n get(paths) {\r\n return toValueSync(this._get(paths));\r\n }\r\n *_get(paths) {\r\n const scope = this.findScope(paths[0]);\r\n return yield this._getFromScope(scope, paths);\r\n }\r\n /**\r\n * @deprecated use `_get()` instead\r\n */\r\n getFromScope(scope, paths) {\r\n return toValueSync(this._getFromScope(scope, paths));\r\n }\r\n *_getFromScope(scope, paths) {\r\n if (isString(paths))\r\n paths = paths.split('.');\r\n for (let i = 0; i < paths.length; i++) {\r\n scope = yield readProperty(scope, paths[i], this.opts.ownPropertyOnly);\r\n if (isNil(scope) && this.strictVariables) {\r\n throw new InternalUndefinedVariableError(paths.slice(0, i + 1).join('.'));\r\n }\r\n }\r\n return scope;\r\n }\r\n push(ctx) {\r\n return this.scopes.push(ctx);\r\n }\r\n pop() {\r\n return this.scopes.pop();\r\n }\r\n bottom() {\r\n return this.scopes[0];\r\n }\r\n findScope(key) {\r\n for (let i = this.scopes.length - 1; i >= 0; i--) {\r\n const candidate = this.scopes[i];\r\n if (key in candidate)\r\n return candidate;\r\n }\r\n if (key in this.environments)\r\n return this.environments;\r\n return this.globals;\r\n }\r\n}\r\nfunction readProperty(obj, key, ownPropertyOnly) {\r\n if (isNil(obj))\r\n return obj;\r\n obj = toLiquid(obj);\r\n if (isArray(obj) && key < 0)\r\n return obj[obj.length + +key];\r\n const jsProperty = readJSProperty(obj, key, ownPropertyOnly);\r\n if (jsProperty === undefined && obj instanceof Drop)\r\n return obj.liquidMethodMissing(key);\r\n if (isFunction(jsProperty))\r\n return jsProperty.call(obj);\r\n if (key === 'size')\r\n return readSize(obj);\r\n else if (key === 'first')\r\n return readFirst(obj);\r\n else if (key === 'last')\r\n return readLast(obj);\r\n return jsProperty;\r\n}\r\nfunction readJSProperty(obj, key, ownPropertyOnly) {\r\n if (ownPropertyOnly && !Object.hasOwnProperty.call(obj, key))\r\n return undefined;\r\n return obj[key];\r\n}\r\nfunction readFirst(obj) {\r\n if (isArray(obj))\r\n return obj[0];\r\n return obj['first'];\r\n}\r\nfunction readLast(obj) {\r\n if (isArray(obj))\r\n return obj[obj.length - 1];\r\n return obj['last'];\r\n}\r\nfunction readSize(obj) {\r\n if (obj.hasOwnProperty('size') || obj['size'] !== undefined)\r\n return obj['size'];\r\n if (isArray(obj) || isString(obj))\r\n return obj.length;\r\n if (typeof obj === 'object')\r\n return Object.keys(obj).length;\r\n}\n\nvar LookupType;\r\n(function (LookupType) {\r\n LookupType[\"Partials\"] = \"partials\";\r\n LookupType[\"Layouts\"] = \"layouts\";\r\n LookupType[\"Root\"] = \"root\";\r\n})(LookupType || (LookupType = {}));\r\nclass Loader {\r\n constructor(options) {\r\n this.options = options;\r\n if (options.relativeReference) {\r\n const sep = options.fs.sep;\r\n assert(sep, '`fs.sep` is required for relative reference');\r\n const rRelativePath = new RegExp(['.' + sep, '..' + sep, './', '../'].map(prefix => escapeRegex(prefix)).join('|'));\r\n this.shouldLoadRelative = (referencedFile) => rRelativePath.test(referencedFile);\r\n }\r\n else {\r\n this.shouldLoadRelative = (referencedFile) => false;\r\n }\r\n this.contains = this.options.fs.contains || (() => true);\r\n }\r\n *lookup(file, type, sync, currentFile) {\r\n const { fs } = this.options;\r\n const dirs = this.options[type];\r\n for (const filepath of this.candidates(file, dirs, currentFile, type !== LookupType.Root)) {\r\n if (sync ? fs.existsSync(filepath) : yield fs.exists(filepath))\r\n return filepath;\r\n }\r\n throw this.lookupError(file, dirs);\r\n }\r\n *candidates(file, dirs, currentFile, enforceRoot) {\r\n const { fs, extname } = this.options;\r\n if (this.shouldLoadRelative(file) && currentFile) {\r\n const referenced = fs.resolve(this.dirname(currentFile), file, extname);\r\n for (const dir of dirs) {\r\n if (!enforceRoot || this.contains(dir, referenced)) {\r\n // the relatively referenced file is within one of root dirs\r\n yield referenced;\r\n break;\r\n }\r\n }\r\n }\r\n for (const dir of dirs) {\r\n const referenced = fs.resolve(dir, file, extname);\r\n if (!enforceRoot || this.contains(dir, referenced)) {\r\n yield referenced;\r\n }\r\n }\r\n if (fs.fallback !== undefined) {\r\n const filepath = fs.fallback(file);\r\n if (filepath !== undefined)\r\n yield filepath;\r\n }\r\n }\r\n dirname(path) {\r\n const fs = this.options.fs;\r\n assert(fs.dirname, '`fs.dirname` is required for relative reference');\r\n return fs.dirname(path);\r\n }\r\n lookupError(file, roots) {\r\n const err = new Error('ENOENT');\r\n err.message = `ENOENT: Failed to lookup \"${file}\" in \"${roots}\"`;\r\n err.code = 'ENOENT';\r\n return err;\r\n }\r\n}\n\nclass SimpleEmitter {\r\n constructor() {\r\n this.buffer = '';\r\n }\r\n write(html) {\r\n this.buffer += stringify(html);\r\n }\r\n}\n\nclass StreamedEmitter {\r\n constructor() {\r\n this.buffer = '';\r\n this.stream = null;\r\n throw new Error('streaming not supported in browser');\r\n }\r\n}\n\nclass KeepingTypeEmitter {\r\n constructor() {\r\n this.buffer = '';\r\n }\r\n write(html) {\r\n html = toValue(html);\r\n // This will only preserve the type if the value is isolated.\r\n // I.E:\r\n // {{ my-port }} -> 42\r\n // {{ my-host }}:{{ my-port }} -> 'host:42'\r\n if (typeof html !== 'string' && this.buffer === '') {\r\n this.buffer = html;\r\n }\r\n else {\r\n this.buffer = stringify(this.buffer) + stringify(html);\r\n }\r\n }\r\n}\n\nclass Render {\r\n renderTemplatesToNodeStream(templates, ctx) {\r\n const emitter = new StreamedEmitter();\r\n Promise.resolve().then(() => toPromise(this.renderTemplates(templates, ctx, emitter)))\r\n .then(() => emitter.end(), err => emitter.error(err));\r\n return emitter.stream;\r\n }\r\n *renderTemplates(templates, ctx, emitter) {\r\n if (!emitter) {\r\n emitter = ctx.opts.keepOutputType ? new KeepingTypeEmitter() : new SimpleEmitter();\r\n }\r\n for (const tpl of templates) {\r\n try {\r\n // if tpl.render supports emitter, it'll return empty `html`\r\n const html = yield tpl.render(ctx, emitter);\r\n // if not, it'll return an `html`, write to the emitter for it\r\n html && emitter.write(html);\r\n if (emitter['break'] || emitter['continue'])\r\n break;\r\n }\r\n catch (e) {\r\n const err = RenderError.is(e) ? e : new RenderError(e, tpl);\r\n throw err;\r\n }\r\n }\r\n return emitter.buffer;\r\n }\r\n}\n\nclass TemplateImpl {\r\n constructor(token) {\r\n this.token = token;\r\n }\r\n}\n\nclass Tag extends TemplateImpl {\r\n constructor(token, tokens, liquid) {\r\n super(token);\r\n this.name = token.name;\r\n const impl = liquid.tags.get(token.name);\r\n this.impl = Object.create(impl);\r\n this.impl.liquid = liquid;\r\n if (this.impl.parse) {\r\n this.impl.parse(token, tokens);\r\n }\r\n }\r\n *render(ctx, emitter) {\r\n const hash = (yield new Hash(this.token.args).render(ctx));\r\n const impl = this.impl;\r\n if (isFunction(impl.render))\r\n return yield impl.render(ctx, emitter, hash);\r\n }\r\n}\n\nclass Output extends TemplateImpl {\r\n constructor(token, liquid) {\r\n super(token);\r\n this.value = new Value(token.content, liquid);\r\n const filters = this.value.filters;\r\n const outputEscape = liquid.options.outputEscape;\r\n if (filters.length && filters[filters.length - 1].name === 'raw') {\r\n filters.pop();\r\n }\r\n else if (outputEscape) {\r\n filters.push(new Filter(toString.call(outputEscape), outputEscape, [], liquid));\r\n }\r\n }\r\n *render(ctx, emitter) {\r\n const val = yield this.value.value(ctx, false);\r\n emitter.write(val);\r\n }\r\n}\n\nclass HTML extends TemplateImpl {\r\n constructor(token) {\r\n super(token);\r\n this.str = token.getContent();\r\n }\r\n *render(ctx, emitter) {\r\n emitter.write(this.str);\r\n }\r\n}\n\nclass Parser {\r\n constructor(liquid) {\r\n this.liquid = liquid;\r\n this.cache = this.liquid.options.cache;\r\n this.fs = this.liquid.options.fs;\r\n this.parseFile = this.cache ? this._parseFileCached : this._parseFile;\r\n this.loader = new Loader(this.liquid.options);\r\n }\r\n parse(html, filepath) {\r\n const tokenizer = new Tokenizer(html, this.liquid.options.operatorsTrie, filepath);\r\n const tokens = tokenizer.readTopLevelTokens(this.liquid.options);\r\n return this.parseTokens(tokens);\r\n }\r\n parseTokens(tokens) {\r\n let token;\r\n const templates = [];\r\n while ((token = tokens.shift())) {\r\n templates.push(this.parseToken(token, tokens));\r\n }\r\n return templates;\r\n }\r\n parseToken(token, remainTokens) {\r\n try {\r\n if (isTagToken(token)) {\r\n return new Tag(token, remainTokens, this.liquid);\r\n }\r\n if (isOutputToken(token)) {\r\n return new Output(token, this.liquid);\r\n }\r\n return new HTML(token);\r\n }\r\n catch (e) {\r\n throw new ParseError(e, token);\r\n }\r\n }\r\n parseStream(tokens) {\r\n return new ParseStream(tokens, (token, tokens) => this.parseToken(token, tokens));\r\n }\r\n *_parseFileCached(file, sync, type = LookupType.Root, currentFile) {\r\n const cache = this.cache;\r\n const key = this.loader.shouldLoadRelative(file) ? currentFile + ',' + file : type + ':' + file;\r\n const tpls = yield cache.read(key);\r\n if (tpls)\r\n return tpls;\r\n const task = this._parseFile(file, sync, type, currentFile);\r\n // sync mode: exec the task and cache the result\r\n // async mode: cache the task before exec\r\n const taskOrTpl = sync ? yield task : toPromise(task);\r\n cache.write(key, taskOrTpl);\r\n // note: concurrent tasks will be reused, cache for failed task is removed until its end\r\n try {\r\n return yield taskOrTpl;\r\n }\r\n catch (err) {\r\n cache.remove(key);\r\n throw err;\r\n }\r\n }\r\n *_parseFile(file, sync, type = LookupType.Root, currentFile) {\r\n const filepath = yield this.loader.lookup(file, type, sync, currentFile);\r\n return this.liquid.parse(sync ? this.fs.readFileSync(filepath) : yield this.fs.readFile(filepath), filepath);\r\n }\r\n}\n\nclass TagMap {\r\n constructor() {\r\n this.impls = {};\r\n }\r\n get(name) {\r\n const impl = this.impls[name];\r\n assert(impl, () => `tag \"${name}\" not found`);\r\n return impl;\r\n }\r\n set(name, impl) {\r\n this.impls[name] = impl;\r\n }\r\n}\n\nclass FilterMap {\r\n constructor(strictFilters, liquid) {\r\n this.strictFilters = strictFilters;\r\n this.liquid = liquid;\r\n this.impls = {};\r\n }\r\n get(name) {\r\n const impl = this.impls[name];\r\n assert(impl || !this.strictFilters, () => `undefined filter: ${name}`);\r\n return impl;\r\n }\r\n set(name, impl) {\r\n this.impls[name] = impl;\r\n }\r\n create(name, args) {\r\n return new Filter(name, this.get(name), args, this.liquid);\r\n }\r\n}\n\nconst version = '9.43.0';\r\nclass Liquid {\r\n constructor(opts = {}) {\r\n this.options = normalize(opts);\r\n this.parser = new Parser(this);\r\n this.renderer = new Render();\r\n this.filters = new FilterMap(this.options.strictFilters, this);\r\n this.tags = new TagMap();\r\n forOwn(tags, (conf, name) => this.registerTag(snakeCase(name), conf));\r\n forOwn(builtinFilters, (handler, name) => this.registerFilter(snakeCase(name), handler));\r\n }\r\n parse(html, filepath) {\r\n return this.parser.parse(html, filepath);\r\n }\r\n _render(tpl, scope, renderOptions) {\r\n const ctx = new Context(scope, this.options, renderOptions);\r\n return this.renderer.renderTemplates(tpl, ctx);\r\n }\r\n render(tpl, scope, renderOptions) {\r\n return __awaiter(this, void 0, void 0, function* () {\r\n return toPromise(this._render(tpl, scope, Object.assign(Object.assign({}, renderOptions), { sync: false })));\r\n });\r\n }\r\n renderSync(tpl, scope, renderOptions) {\r\n return toValueSync(this._render(tpl, scope, Object.assign(Object.assign({}, renderOptions), { sync: true })));\r\n }\r\n renderToNodeStream(tpl, scope, renderOptions = {}) {\r\n const ctx = new Context(scope, this.options, renderOptions);\r\n return this.renderer.renderTemplatesToNodeStream(tpl, ctx);\r\n }\r\n _parseAndRender(html, scope, renderOptions) {\r\n const tpl = this.parse(html);\r\n return this._render(tpl, scope, renderOptions);\r\n }\r\n parseAndRender(html, scope, renderOptions) {\r\n return __awaiter(this, void 0, void 0, function* () {\r\n return toPromise(this._parseAndRender(html, scope, Object.assign(Object.assign({}, renderOptions), { sync: false })));\r\n });\r\n }\r\n parseAndRenderSync(html, scope, renderOptions) {\r\n return toValueSync(this._parseAndRender(html, scope, Object.assign(Object.assign({}, renderOptions), { sync: true })));\r\n }\r\n _parsePartialFile(file, sync, currentFile) {\r\n return this.parser.parseFile(file, sync, LookupType.Partials, currentFile);\r\n }\r\n _parseLayoutFile(file, sync, currentFile) {\r\n return this.parser.parseFile(file, sync, LookupType.Layouts, currentFile);\r\n }\r\n parseFile(file) {\r\n return __awaiter(this, void 0, void 0, function* () {\r\n return toPromise(this.parser.parseFile(file, false));\r\n });\r\n }\r\n parseFileSync(file) {\r\n return toValueSync(this.parser.parseFile(file, true));\r\n }\r\n renderFile(file, ctx, renderOptions) {\r\n return __awaiter(this, void 0, void 0, function* () {\r\n const templates = yield this.parseFile(file);\r\n return this.render(templates, ctx, renderOptions);\r\n });\r\n }\r\n renderFileSync(file, ctx, renderOptions) {\r\n const templates = this.parseFileSync(file);\r\n return this.renderSync(templates, ctx, renderOptions);\r\n }\r\n renderFileToNodeStream(file, scope, renderOptions) {\r\n return __awaiter(this, void 0, void 0, function* () {\r\n const templates = yield this.parseFile(file);\r\n return this.renderToNodeStream(templates, scope, renderOptions);\r\n });\r\n }\r\n _evalValue(str, scopeOrContext) {\r\n const value = new Value(str, this);\r\n const ctx = scopeOrContext instanceof Context ? scopeOrContext : new Context(scopeOrContext, this.options);\r\n return value.value(ctx, false);\r\n }\r\n evalValue(str, scopeOrContext) {\r\n return __awaiter(this, void 0, void 0, function* () {\r\n return toPromise(this._evalValue(str, scopeOrContext));\r\n });\r\n }\r\n evalValueSync(str, scopeOrContext) {\r\n return toValueSync(this._evalValue(str, scopeOrContext));\r\n }\r\n registerFilter(name, filter) {\r\n this.filters.set(name, filter);\r\n }\r\n registerTag(name, tag) {\r\n this.tags.set(name, tag);\r\n }\r\n plugin(plugin) {\r\n return plugin.call(this, Liquid);\r\n }\r\n express() {\r\n const self = this; // eslint-disable-line\r\n let firstCall = true;\r\n return function (filePath, ctx, callback) {\r\n if (firstCall) {\r\n firstCall = false;\r\n const dirs = normalizeDirectoryList(this.root);\r\n self.options.root.unshift(...dirs);\r\n self.options.layouts.unshift(...dirs);\r\n self.options.partials.unshift(...dirs);\r\n }\r\n self.renderFile(filePath, ctx).then(html => callback(null, html), callback);\r\n };\r\n }\r\n}\n\nexport { AssertionError, Context, Drop, Expression, Hash, InternalUndefinedVariableError, Liquid, LiquidError, ParseError, ParseStream, RenderError, TagToken, TimezoneDate, Token, TokenKind, TokenizationError, Tokenizer, typeGuards as TypeGuards, UndefinedVariableError, Value, _evalToken, assert, createTrie, defaultOperators, defaultOptions, evalQuotedToken, evalToken, builtinFilters as filters, isFalsy, isTruthy, index as tags, toPromise, toThenable, toValue, toValueSync, version };\n","/******************************************************************************\nCopyright (c) Microsoft Corporation.\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\nPERFORMANCE OF THIS SOFTWARE.\n***************************************************************************** */\n/* global Reflect, Promise, SuppressedError, Symbol */\n\nvar extendStatics = function(d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n};\n\nexport function __extends(d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n}\n\nexport var __assign = function() {\n __assign = Object.assign || function __assign(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n return t;\n }\n return __assign.apply(this, arguments);\n}\n\nexport function __rest(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}\n\nexport function __decorate(decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n}\n\nexport function __param(paramIndex, decorator) {\n return function (target, key) { decorator(target, key, paramIndex); }\n}\n\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\n function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\n var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\n var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\n var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\n var _, done = false;\n for (var i = decorators.length - 1; i >= 0; i--) {\n var context = {};\n for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\n for (var p in contextIn.access) context.access[p] = contextIn.access[p];\n context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\n var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\n if (kind === \"accessor\") {\n if (result === void 0) continue;\n if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\n if (_ = accept(result.get)) descriptor.get = _;\n if (_ = accept(result.set)) descriptor.set = _;\n if (_ = accept(result.init)) initializers.unshift(_);\n }\n else if (_ = accept(result)) {\n if (kind === \"field\") initializers.unshift(_);\n else descriptor[key] = _;\n }\n }\n if (target) Object.defineProperty(target, contextIn.name, descriptor);\n done = true;\n};\n\nexport function __runInitializers(thisArg, initializers, value) {\n var useValue = arguments.length > 2;\n for (var i = 0; i < initializers.length; i++) {\n value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\n }\n return useValue ? value : void 0;\n};\n\nexport function __propKey(x) {\n return typeof x === \"symbol\" ? x : \"\".concat(x);\n};\n\nexport function __setFunctionName(f, name, prefix) {\n if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\n return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\n};\n\nexport function __metadata(metadataKey, metadataValue) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\n}\n\nexport function __awaiter(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}\n\nexport function __generator(thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (g && (g = 0, op[0] && (_ = 0)), _) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n}\n\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n});\n\nexport function __exportStar(m, o) {\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\n}\n\nexport function __values(o) {\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\n if (m) return m.call(o);\n if (o && typeof o.length === \"number\") return {\n next: function () {\n if (o && i >= o.length) o = void 0;\n return { value: o && o[i++], done: !o };\n }\n };\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\n}\n\nexport function __read(o, n) {\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\n if (!m) return o;\n var i = m.call(o), r, ar = [], e;\n try {\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\n }\n catch (error) { e = { error: error }; }\n finally {\n try {\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\n }\n finally { if (e) throw e.error; }\n }\n return ar;\n}\n\n/** @deprecated */\nexport function __spread() {\n for (var ar = [], i = 0; i < arguments.length; i++)\n ar = ar.concat(__read(arguments[i]));\n return ar;\n}\n\n/** @deprecated */\nexport function __spreadArrays() {\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\n r[k] = a[j];\n return r;\n}\n\nexport function __spreadArray(to, from, pack) {\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n if (ar || !(i in from)) {\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n ar[i] = from[i];\n }\n }\n return to.concat(ar || Array.prototype.slice.call(from));\n}\n\nexport function __await(v) {\n return this instanceof __await ? (this.v = v, this) : new __await(v);\n}\n\nexport function __asyncGenerator(thisArg, _arguments, generator) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;\n function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }\n function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\n function fulfill(value) { resume(\"next\", value); }\n function reject(value) { resume(\"throw\", value); }\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\n}\n\nexport function __asyncDelegator(o) {\n var i, p;\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\n}\n\nexport function __asyncValues(o) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var m = o[Symbol.asyncIterator], i;\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\n}\n\nexport function __makeTemplateObject(cooked, raw) {\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\n return cooked;\n};\n\nvar __setModuleDefault = Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n};\n\nexport function __importStar(mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n}\n\nexport function __importDefault(mod) {\n return (mod && mod.__esModule) ? mod : { default: mod };\n}\n\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n}\n\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\n}\n\nexport function __classPrivateFieldIn(state, receiver) {\n if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\n return typeof state === \"function\" ? receiver === state : state.has(receiver);\n}\n\nexport function __addDisposableResource(env, value, async) {\n if (value !== null && value !== void 0) {\n if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\n var dispose, inner;\n if (async) {\n if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\n dispose = value[Symbol.asyncDispose];\n }\n if (dispose === void 0) {\n if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\n dispose = value[Symbol.dispose];\n if (async) inner = dispose;\n }\n if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\n if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };\n env.stack.push({ value: value, dispose: dispose, async: async });\n }\n else if (async) {\n env.stack.push({ async: true });\n }\n return value;\n}\n\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\n var e = new Error(message);\n return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\n};\n\nexport function __disposeResources(env) {\n function fail(e) {\n env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\n env.hasError = true;\n }\n function next() {\n while (env.stack.length) {\n var rec = env.stack.pop();\n try {\n var result = rec.dispose && rec.dispose.call(rec.value);\n if (rec.async) return Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\n }\n catch (e) {\n fail(e);\n }\n }\n if (env.hasError) throw env.error;\n }\n return next();\n}\n\nexport default {\n __extends,\n __assign,\n __rest,\n __decorate,\n __param,\n __metadata,\n __awaiter,\n __generator,\n __createBinding,\n __exportStar,\n __values,\n __read,\n __spread,\n __spreadArrays,\n __spreadArray,\n __await,\n __asyncGenerator,\n __asyncDelegator,\n __asyncValues,\n __makeTemplateObject,\n __importStar,\n __importDefault,\n __classPrivateFieldGet,\n __classPrivateFieldSet,\n __classPrivateFieldIn,\n __addDisposableResource,\n __disposeResources,\n};\n","// A packages cache that makes sure that we don't inject the same packageName twice in the same bundle -\n// this cache is local to the module closure inside this bundle\nconst packagesCache: { [name: string]: string } = {};\n\n// Cache access to window to avoid IE11 memory leak.\nlet _win: Window | undefined = undefined;\n\ntry {\n _win = window;\n} catch (e) {\n /* no-op */\n}\n\nexport function setVersion(packageName: string, packageVersion: string): void {\n if (typeof _win !== 'undefined') {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const packages = ((_win as any).__packages__ = (_win as any).__packages__ || {});\n\n // We allow either the global packages or local packages caches to invalidate so testing can\n // just clear the global to set this state\n if (!packages[packageName] || !packagesCache[packageName]) {\n packagesCache[packageName] = packageVersion;\n const versions = (packages[packageName] = packages[packageName] || []);\n versions.push(packageVersion);\n }\n }\n}\n","import { setVersion } from './setVersion';\nexport { setVersion };\n\nsetVersion('@fluentui/set-version', '6.0.0');\n","// eslint-disable-next-line @typescript-eslint/naming-convention\nexport interface ShadowConfig {\n stylesheetKey: string;\n inShadow: boolean;\n window?: Window;\n __isShadowConfig__: true;\n}\n\nexport const GLOBAL_STYLESHEET_KEY = '__global__';\nexport const SHADOW_DOM_STYLESHEET_SETTING = '__shadow_dom_stylesheet__';\n\nexport const DEFAULT_SHADOW_CONFIG: ShadowConfig = {\n stylesheetKey: GLOBAL_STYLESHEET_KEY,\n inShadow: false,\n window: undefined,\n __isShadowConfig__: true,\n};\n\nexport const makeShadowConfig = (stylesheetKey: string, inShadow: boolean, window?: Window): ShadowConfig => {\n return {\n stylesheetKey,\n inShadow,\n window,\n __isShadowConfig__: true,\n };\n};\n\nexport const isShadowConfig = (value: unknown): value is ShadowConfig => {\n if (!(value && isRecord(value))) {\n return false;\n }\n\n return value.__isShadowConfig__ === true;\n};\n\nfunction isRecord(value: unknown): value is Record {\n return value !== null && typeof value === 'object' && !Array.isArray(value);\n}\n","import { IStyle, IStyleBaseArray } from './IStyle';\nimport { Stylesheet } from './Stylesheet';\nimport { isShadowConfig } from './shadowConfig';\n\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 sheet: Stylesheet,\n ...args: (IStyle | IStyle[] | false | null | undefined)[]\n): {\n classes: string[];\n objects: IStyleBaseArray;\n} {\n const classes: string[] = [];\n const objects: {}[] = [];\n const stylesheet = sheet;\n\n function _processArgs(argsList: (IStyle | IStyle[])[]): void {\n for (const arg of argsList) {\n if (arg && !isShadowConfig(arg)) {\n if (typeof arg === 'string') {\n if (arg.indexOf(' ') >= 0) {\n _processArgs(arg.split(' '));\n } else {\n const translatedArgs = stylesheet.argsFromClassName(arg);\n\n if (translatedArgs) {\n _processArgs(translatedArgs);\n } else {\n // Avoid adding the same class twice.\n if (classes.indexOf(arg) === -1) {\n classes.push(arg);\n }\n }\n }\n } else if (Array.isArray(arg)) {\n _processArgs(arg);\n } else if (typeof arg === 'object') {\n objects.push(arg);\n }\n }\n }\n }\n\n _processArgs(args);\n\n return {\n classes,\n objects,\n };\n}\n","import { IStyleOptions } from './IStyleOptions';\nimport { DEFAULT_SHADOW_CONFIG } from './shadowConfig';\n\n/**\n * Sets the current RTL value.\n */\nexport function setRTL(isRTL: boolean): void {\n if (_rtl !== isRTL) {\n _rtl = isRTL;\n }\n}\n\n/**\n * Gets the current RTL value.\n */\nexport function getRTL(): boolean {\n if (_rtl === undefined) {\n _rtl =\n // eslint-disable-next-line no-restricted-globals\n typeof document !== 'undefined' &&\n // eslint-disable-next-line no-restricted-globals\n !!document.documentElement &&\n // eslint-disable-next-line no-restricted-globals\n document.documentElement.getAttribute('dir') === 'rtl';\n }\n return _rtl;\n}\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.\nlet _rtl: boolean;\n_rtl = getRTL();\n\nexport function getStyleOptions(): IStyleOptions {\n return {\n rtl: getRTL(),\n shadowConfig: DEFAULT_SHADOW_CONFIG,\n };\n}\n","/******************************************************************************\nCopyright (c) Microsoft Corporation.\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\nPERFORMANCE OF THIS SOFTWARE.\n***************************************************************************** */\n/* global Reflect, Promise, SuppressedError, Symbol */\n\nvar extendStatics = function(d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n};\n\nexport function __extends(d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n}\n\nexport var __assign = function() {\n __assign = Object.assign || function __assign(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n return t;\n }\n return __assign.apply(this, arguments);\n}\n\nexport function __rest(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}\n\nexport function __decorate(decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n}\n\nexport function __param(paramIndex, decorator) {\n return function (target, key) { decorator(target, key, paramIndex); }\n}\n\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\n function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\n var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\n var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\n var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\n var _, done = false;\n for (var i = decorators.length - 1; i >= 0; i--) {\n var context = {};\n for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\n for (var p in contextIn.access) context.access[p] = contextIn.access[p];\n context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\n var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\n if (kind === \"accessor\") {\n if (result === void 0) continue;\n if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\n if (_ = accept(result.get)) descriptor.get = _;\n if (_ = accept(result.set)) descriptor.set = _;\n if (_ = accept(result.init)) initializers.unshift(_);\n }\n else if (_ = accept(result)) {\n if (kind === \"field\") initializers.unshift(_);\n else descriptor[key] = _;\n }\n }\n if (target) Object.defineProperty(target, contextIn.name, descriptor);\n done = true;\n};\n\nexport function __runInitializers(thisArg, initializers, value) {\n var useValue = arguments.length > 2;\n for (var i = 0; i < initializers.length; i++) {\n value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\n }\n return useValue ? value : void 0;\n};\n\nexport function __propKey(x) {\n return typeof x === \"symbol\" ? x : \"\".concat(x);\n};\n\nexport function __setFunctionName(f, name, prefix) {\n if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\n return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\n};\n\nexport function __metadata(metadataKey, metadataValue) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\n}\n\nexport function __awaiter(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}\n\nexport function __generator(thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (g && (g = 0, op[0] && (_ = 0)), _) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n}\n\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n});\n\nexport function __exportStar(m, o) {\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\n}\n\nexport function __values(o) {\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\n if (m) return m.call(o);\n if (o && typeof o.length === \"number\") return {\n next: function () {\n if (o && i >= o.length) o = void 0;\n return { value: o && o[i++], done: !o };\n }\n };\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\n}\n\nexport function __read(o, n) {\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\n if (!m) return o;\n var i = m.call(o), r, ar = [], e;\n try {\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\n }\n catch (error) { e = { error: error }; }\n finally {\n try {\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\n }\n finally { if (e) throw e.error; }\n }\n return ar;\n}\n\n/** @deprecated */\nexport function __spread() {\n for (var ar = [], i = 0; i < arguments.length; i++)\n ar = ar.concat(__read(arguments[i]));\n return ar;\n}\n\n/** @deprecated */\nexport function __spreadArrays() {\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\n r[k] = a[j];\n return r;\n}\n\nexport function __spreadArray(to, from, pack) {\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n if (ar || !(i in from)) {\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n ar[i] = from[i];\n }\n }\n return to.concat(ar || Array.prototype.slice.call(from));\n}\n\nexport function __await(v) {\n return this instanceof __await ? (this.v = v, this) : new __await(v);\n}\n\nexport function __asyncGenerator(thisArg, _arguments, generator) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;\n function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }\n function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\n function fulfill(value) { resume(\"next\", value); }\n function reject(value) { resume(\"throw\", value); }\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\n}\n\nexport function __asyncDelegator(o) {\n var i, p;\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\n}\n\nexport function __asyncValues(o) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var m = o[Symbol.asyncIterator], i;\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\n}\n\nexport function __makeTemplateObject(cooked, raw) {\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\n return cooked;\n};\n\nvar __setModuleDefault = Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n};\n\nexport function __importStar(mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n}\n\nexport function __importDefault(mod) {\n return (mod && mod.__esModule) ? mod : { default: mod };\n}\n\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n}\n\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\n}\n\nexport function __classPrivateFieldIn(state, receiver) {\n if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\n return typeof state === \"function\" ? receiver === state : state.has(receiver);\n}\n\nexport function __addDisposableResource(env, value, async) {\n if (value !== null && value !== void 0) {\n if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\n var dispose, inner;\n if (async) {\n if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\n dispose = value[Symbol.asyncDispose];\n }\n if (dispose === void 0) {\n if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\n dispose = value[Symbol.dispose];\n if (async) inner = dispose;\n }\n if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\n if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };\n env.stack.push({ value: value, dispose: dispose, async: async });\n }\n else if (async) {\n env.stack.push({ async: true });\n }\n return value;\n}\n\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\n var e = new Error(message);\n return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\n};\n\nexport function __disposeResources(env) {\n function fail(e) {\n env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\n env.hasError = true;\n }\n function next() {\n while (env.stack.length) {\n var rec = env.stack.pop();\n try {\n var result = rec.dispose && rec.dispose.call(rec.value);\n if (rec.async) return Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\n }\n catch (e) {\n fail(e);\n }\n }\n if (env.hasError) throw env.error;\n }\n return next();\n}\n\nexport default {\n __extends,\n __assign,\n __rest,\n __decorate,\n __param,\n __metadata,\n __awaiter,\n __generator,\n __createBinding,\n __exportStar,\n __values,\n __read,\n __spread,\n __spreadArrays,\n __spreadArray,\n __await,\n __asyncGenerator,\n __asyncDelegator,\n __asyncValues,\n __makeTemplateObject,\n __importStar,\n __importDefault,\n __classPrivateFieldGet,\n __classPrivateFieldSet,\n __classPrivateFieldIn,\n __addDisposableResource,\n __disposeResources,\n};\n","/* eslint no-restricted-globals: 0 */\n// globals in stylesheets will be addressed as part of shadow DOM work.\n// See: https://github.com/microsoft/fluentui/issues/28058\nimport { IStyle } from './IStyle';\nimport { GLOBAL_STYLESHEET_KEY, SHADOW_DOM_STYLESHEET_SETTING } from './shadowConfig';\nimport type { ShadowConfig } from './shadowConfig';\n\nexport const InjectionMode = {\n /**\n * Avoids style injection, use getRules() to read the styles.\n */\n none: 0 as 0,\n\n /**\n * Inserts rules using the insertRule api.\n */\n insertNode: 1 as 1,\n\n /**\n * Appends rules using appendChild.\n */\n appendChild: 2 as 2,\n};\n\nexport type InjectionMode = (typeof InjectionMode)[keyof typeof InjectionMode];\n\n/**\n * CSP settings for the stylesheet\n */\nexport interface ICSPSettings {\n /**\n * Nonce to inject into script tag\n */\n nonce?: string;\n}\n\n/**\n * Stylesheet config.\n *\n * @public\n */\nexport interface IStyleSheetConfig {\n /**\n * Injection mode for how rules are inserted.\n */\n injectionMode?: InjectionMode;\n\n /**\n * Default 'displayName' to use for a className.\n * @defaultvalue 'css'\n */\n defaultPrefix?: string;\n\n /**\n * Defines the default direction of rules for auto-rtlifying things.\n * While typically this is represented as a DIR attribute in the markup,\n * the DIR is not enough to control whether padding goes on the left or\n * right. Use this to set the default direction when rules are registered.\n */\n rtl?: boolean;\n\n /**\n * Default 'namespace' to attach before the className.\n */\n namespace?: string;\n\n /**\n * CSP settings\n */\n cspSettings?: ICSPSettings;\n\n /**\n * Callback executed when a rule is inserted.\n * @deprecated Use `Stylesheet.onInsertRule` instead.\n */\n onInsertRule?: (rule: string) => void;\n\n /**\n * Initial value for classnames cache. Key is serialized css rules associated with a classname.\n */\n classNameCache?: { [key: string]: string };\n\n window?: Window;\n\n inShadow?: boolean;\n\n stylesheetKey?: string;\n}\n\n/**\n * Representation of Stylesheet used for rehydration.\n */\nexport interface ISerializedStylesheet {\n classNameToArgs: Stylesheet['_classNameToArgs'];\n counter: Stylesheet['_counter'];\n keyToClassName: Stylesheet['_keyToClassName'];\n preservedRules: Stylesheet['_preservedRules'];\n rules: Stylesheet['_rules'];\n}\n\nexport const STYLESHEET_SETTING = '__stylesheet__';\n\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 */\nconst REUSE_STYLE_NODE = typeof navigator !== 'undefined' && /rv:11.0/.test(navigator.userAgent);\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/naming-convention\n interface Document {\n adoptedStyleSheets: CSSStyleSheet[];\n }\n}\n\nexport type WindowWithMergeStyles = (Window | {}) & {\n [STYLESHEET_SETTING]?: Stylesheet;\n [SHADOW_DOM_STYLESHEET_SETTING]?: typeof Stylesheet;\n FabricConfig?: {\n mergeStyles?: IStyleSheetConfig;\n serializedStylesheet?: ISerializedStylesheet;\n };\n};\n\nlet _global: WindowWithMergeStyles = {};\n\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 || {}) as WindowWithMergeStyles;\n} catch {\n /* leave as blank object */\n}\n\nlet _stylesheet: Stylesheet | undefined;\n\nexport type ExtendedCSSStyleSheet = CSSStyleSheet & {\n bucketName: string;\n metadata: Record;\n};\n\ntype InsertRuleArgs = {\n key?: string;\n sheet?: ExtendedCSSStyleSheet | null;\n rule?: string;\n};\n\nexport type InsertRuleCallback = ({ key, sheet, rule }: InsertRuleArgs) => void;\n\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 */\nexport class Stylesheet {\n protected _lastStyleElement?: HTMLStyleElement;\n protected _config: IStyleSheetConfig;\n\n private _styleElement?: HTMLStyleElement;\n\n private _rules: string[] = [];\n private _preservedRules: string[] = [];\n private _counter = 0;\n private _keyToClassName: { [key: string]: string } = {};\n private _onInsertRuleCallbacks: (Function | InsertRuleCallback)[] = [];\n private _onResetCallbacks: Function[] = [];\n private _classNameToArgs: { [key: string]: { args: any; rules: string[] } } = {};\n\n /**\n * Gets the singleton instance.\n */\n public static getInstance(shadowConfig?: ShadowConfig): Stylesheet {\n _stylesheet = _global[STYLESHEET_SETTING] as Stylesheet;\n\n if (_global[SHADOW_DOM_STYLESHEET_SETTING]) {\n return _global[SHADOW_DOM_STYLESHEET_SETTING].getInstance(shadowConfig);\n }\n\n if (!_stylesheet || (_stylesheet._lastStyleElement && _stylesheet._lastStyleElement.ownerDocument !== document)) {\n const fabricConfig = _global?.FabricConfig || {};\n\n const stylesheet = new Stylesheet(fabricConfig.mergeStyles, fabricConfig.serializedStylesheet);\n _stylesheet = stylesheet;\n _global[STYLESHEET_SETTING] = stylesheet;\n }\n\n return _stylesheet;\n }\n\n constructor(config?: IStyleSheetConfig, serializedStylesheet?: ISerializedStylesheet) {\n // If there is no document we won't have an element to inject into.\n this._config = {\n injectionMode: typeof document === 'undefined' ? InjectionMode.none : InjectionMode.insertNode,\n defaultPrefix: 'css',\n namespace: undefined,\n cspSettings: undefined,\n ...config,\n };\n\n this._classNameToArgs = serializedStylesheet?.classNameToArgs ?? this._classNameToArgs;\n this._counter = serializedStylesheet?.counter ?? this._counter;\n this._keyToClassName = this._config.classNameCache ?? serializedStylesheet?.keyToClassName ?? this._keyToClassName;\n this._preservedRules = serializedStylesheet?.preservedRules ?? this._preservedRules;\n this._rules = serializedStylesheet?.rules ?? this._rules;\n }\n\n /**\n * Serializes the Stylesheet instance into a format which allows rehydration on creation.\n * @returns string representation of `ISerializedStylesheet` interface.\n */\n public serialize(): string {\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 /**\n * Configures the stylesheet.\n */\n public setConfig(config?: IStyleSheetConfig): void {\n this._config = {\n ...this._config,\n ...config,\n };\n }\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 public onReset(callback: Function): Function {\n this._onResetCallbacks.push(callback);\n\n return () => {\n this._onResetCallbacks = this._onResetCallbacks.filter(cb => cb !== callback);\n };\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 public onInsertRule(callback: Function | InsertRuleCallback): Function {\n this._onInsertRuleCallbacks.push(callback);\n\n return () => {\n this._onInsertRuleCallbacks = this._onInsertRuleCallbacks.filter(cb => cb !== callback);\n };\n }\n\n /**\n * Generates a unique classname.\n *\n * @param displayName - Optional value to use as a prefix.\n */\n public getClassName(displayName?: string): string {\n const { namespace } = this._config;\n const prefix = displayName || this._config.defaultPrefix;\n\n return `${namespace ? namespace + '-' : ''}${prefix}-${this._counter++}`;\n }\n\n /**\n * Used internally to cache information about a class which was\n * registered with the stylesheet.\n */\n public cacheClassName(className: string, key: string, args: IStyle[], rules: string[]): void {\n this._keyToClassName[this._getCacheKey(key)] = className;\n this._classNameToArgs[className] = {\n args,\n rules,\n };\n }\n\n /**\n * Gets the appropriate classname given a key which was previously\n * registered using cacheClassName.\n */\n public classNameFromKey(key: string): string | undefined {\n return this._keyToClassName[this._getCacheKey(key)];\n }\n\n /**\n * Gets all classnames cache with the stylesheet.\n */\n public getClassNameCache(): { [key: string]: string } {\n return this._keyToClassName;\n }\n\n /**\n * Gets the arguments associated with a given classname which was\n * previously registered using cacheClassName.\n */\n public argsFromClassName(className: string): IStyle[] | undefined {\n const entry = this._classNameToArgs[className];\n\n return entry && entry.args;\n }\n\n /**\n * Gets the rules associated with a given classname which was\n * previously registered using cacheClassName.\n */\n public insertedRulesFromClassName(className: string): string[] | undefined {\n const entry = this._classNameToArgs[className];\n\n return entry && entry.rules;\n }\n\n /**\n * Inserts a css rule into the stylesheet.\n * @param preserve - Preserves the rule beyond a reset boundary.\n */\n public insertRule(rule: string, preserve?: boolean, stylesheetKey: string = GLOBAL_STYLESHEET_KEY): void {\n const { injectionMode } = this._config;\n\n const element: HTMLStyleElement | undefined =\n injectionMode !== InjectionMode.none ? this._getStyleElement() : undefined;\n\n if (preserve) {\n this._preservedRules.push(rule);\n }\n\n if (element) {\n switch (injectionMode) {\n case InjectionMode.insertNode:\n this._insertRuleIntoSheet(element.sheet, rule);\n break;\n\n case InjectionMode.appendChild:\n (element as HTMLStyleElement).appendChild(document.createTextNode(rule));\n break;\n }\n } else {\n this._rules.push(rule);\n }\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\n this._onInsertRuleCallbacks.forEach(callback =>\n callback({ key: stylesheetKey, sheet: (element ? element.sheet : undefined) as ExtendedCSSStyleSheet, rule }),\n );\n }\n\n /**\n * Gets all rules registered with the stylesheet; only valid when\n * using InsertionMode.none.\n */\n public getRules(includePreservedRules?: boolean): string {\n return (includePreservedRules ? this._preservedRules.join('') : '') + this._rules.join('');\n }\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 public reset(): void {\n this._rules = [];\n this._counter = 0;\n this._classNameToArgs = {};\n this._keyToClassName = {};\n\n this._onResetCallbacks.forEach(callback => callback());\n }\n\n // Forces the regeneration of incoming styles without totally resetting the stylesheet.\n public resetKeys(): void {\n this._keyToClassName = {};\n }\n\n protected _createStyleElement(): HTMLStyleElement {\n const doc = this._config.window?.document || document;\n const head: HTMLHeadElement = doc.head;\n const styleElement = doc.createElement('style');\n let nodeToInsertBefore: Node | null = null;\n\n styleElement.setAttribute('data-merge-styles', 'true');\n\n const { cspSettings } = this._config;\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 } else {\n const placeholderStyleTag: Element | null = this._findPlaceholderStyleTag();\n\n if (placeholderStyleTag) {\n nodeToInsertBefore = placeholderStyleTag.nextElementSibling;\n } else {\n nodeToInsertBefore = head.childNodes[0];\n }\n }\n\n head!.insertBefore(styleElement, head!.contains(nodeToInsertBefore) ? nodeToInsertBefore : null);\n this._lastStyleElement = styleElement;\n\n return styleElement;\n }\n\n protected _insertRuleIntoSheet(sheet: CSSStyleSheet | undefined | null, rule: string): boolean {\n if (!sheet) {\n return false;\n }\n\n try {\n sheet!.insertRule(rule, sheet!.cssRules.length);\n return true;\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\n return false;\n }\n\n protected _getCacheKey(key: string): string {\n return key;\n }\n\n private _getStyleElement(): HTMLStyleElement | undefined {\n if (!this._styleElement) {\n this._styleElement = this._createStyleElement();\n\n if (!REUSE_STYLE_NODE) {\n // Reset the style element on the next frame.\n const win = this._config.window || window;\n win.requestAnimationFrame(() => {\n this._styleElement = undefined;\n });\n }\n }\n return this._styleElement;\n }\n\n private _findPlaceholderStyleTag(): Element | null {\n const head: HTMLHeadElement = document.head;\n if (head) {\n return head.querySelector('style[data-merge-styles]');\n }\n return null;\n }\n}\n","const rules: { [key: string]: string } = {};\n\nexport function kebabRules(rulePairs: (string | number)[], index: number): void {\n const rule: string = rulePairs[index] as string;\n\n if (rule.charAt(0) !== '-') {\n rulePairs[index] = rules[rule] = rules[rule] || rule.replace(/([A-Z])/g, '-$1').toLowerCase();\n }\n}\n","export interface IVendorSettings {\n isWebkit?: boolean;\n isMoz?: boolean;\n isMs?: boolean;\n isOpera?: boolean;\n}\n\nlet _vendorSettings: IVendorSettings | undefined;\n\nexport function getVendorSettings(): IVendorSettings {\n if (!_vendorSettings) {\n // eslint-disable-next-line no-restricted-globals\n const doc = typeof document !== 'undefined' ? document : undefined;\n const nav = typeof navigator !== 'undefined' ? navigator : undefined;\n const userAgent = nav?.userAgent?.toLowerCase();\n\n if (!doc) {\n _vendorSettings = {\n isWebkit: true,\n isMoz: true,\n isOpera: true,\n isMs: true,\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\n return _vendorSettings;\n}\n\n/**\n * Sets the vendor settings for prefixing and vendor specific operations.\n */\nexport function setVendorSettings(vendorSettings?: IVendorSettings): void {\n _vendorSettings = vendorSettings;\n}\n","import { getVendorSettings } from '../getVendorSettings';\n\nconst autoPrefixNames: { [key: string]: number } = {\n 'user-select': 1,\n};\n\nexport function prefixRules(rulePairs: (string | number)[], index: number): void {\n const vendorSettings = getVendorSettings();\n\n const name = rulePairs[index];\n\n if (autoPrefixNames[name]) {\n const value = rulePairs[index + 1];\n\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","const 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];\n\nexport function provideUnits(rulePairs: (string | number)[], index: number): void {\n const name = rulePairs[index] as string;\n const value = rulePairs[index + 1];\n\n if (typeof value === 'number') {\n const isNonPixelProp = NON_PIXEL_NUMBER_PROPS.indexOf(name as string) > -1;\n const isVariableOrPrefixed = name.indexOf('--') > -1;\n const unit = isNonPixelProp || isVariableOrPrefixed ? '' : 'px';\n\n rulePairs[index + 1] = `${value}${unit}`;\n }\n}\n","import { IStyleOptions } from '../IStyleOptions';\n\nconst LEFT = 'left';\nconst RIGHT = 'right';\nconst NO_FLIP = '@noflip';\nconst NAME_REPLACEMENTS: { [key: string]: string } = {\n [LEFT]: RIGHT,\n [RIGHT]: LEFT,\n};\nconst VALUE_REPLACEMENTS: { [key: string]: string } = {\n 'w-resize': 'e-resize',\n 'sw-resize': 'se-resize',\n 'nw-resize': 'ne-resize',\n};\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: IStyleOptions, rulePairs: (string | number)[], index: number): void {\n if (options.rtl) {\n const name = rulePairs[index] as string;\n\n if (!name) {\n return;\n }\n\n const value = rulePairs[index + 1] as string;\n\n if (typeof value === 'string' && value.indexOf(NO_FLIP) >= 0) {\n rulePairs[index + 1] = value.replace(/\\s*(?:\\/\\*\\s*)?\\@noflip\\b(?:\\s*\\*\\/)?\\s*?/g, '');\n } else if (name.indexOf(LEFT) >= 0) {\n rulePairs[index] = name.replace(LEFT, RIGHT);\n } else if (name.indexOf(RIGHT) >= 0) {\n rulePairs[index] = name.replace(RIGHT, LEFT);\n } else if (String(value).indexOf(LEFT) >= 0) {\n rulePairs[index + 1] = value.replace(LEFT, RIGHT);\n } else if (String(value).indexOf(RIGHT) >= 0) {\n rulePairs[index + 1] = value.replace(RIGHT, LEFT);\n } else if (NAME_REPLACEMENTS[name]) {\n rulePairs[index] = NAME_REPLACEMENTS[name];\n } else if (VALUE_REPLACEMENTS[value]) {\n rulePairs[index + 1] = VALUE_REPLACEMENTS[value];\n } else {\n switch (name) {\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/**\n * Given a string value in a space delimited format (e.g. \"1 2 3 4\"), negates a particular value.\n */\nfunction negateNum(value: string, partIndex: number): string {\n const parts = value.split(' ');\n const numberVal = parseInt(parts[partIndex], 10);\n\n parts[0] = parts[0].replace(String(numberVal), String(numberVal * -1));\n\n return parts.join(' ');\n}\n\n/**\n * Given a string quad, flips the left and right values.\n */\nfunction flipQuad(value: string): string {\n if (typeof value === 'string') {\n const parts = value.split(' ');\n\n if (parts.length === 4) {\n return `${parts[0]} ${parts[3]} ${parts[2]} ${parts[1]}`;\n }\n }\n\n return value;\n}\n","/**\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: string): string[] {\n const parts = [];\n let partStart = 0;\n let parens = 0;\n\n for (let 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\n // Add the last part\n if (partStart < value.length) {\n parts.push(value.substring(partStart));\n }\n\n return parts;\n}\n","import { IStyle } from './IStyle';\nimport { IRawStyle } from './IRawStyle';\n\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 { IStyleOptions } from './IStyleOptions';\nimport { tokenizeWithParentheses } from './tokenizeWithParentheses';\nimport { ShadowConfig } from './shadowConfig';\n\nconst DISPLAY_NAME = 'displayName';\n\ntype IDictionary = { [key: string]: any };\n\ninterface IRuleSet {\n __order: string[];\n [key: string]: IDictionary;\n}\n\nfunction getDisplayName(rules?: { [key: string]: IRawStyle }): string | undefined {\n const rootStyle: IStyle = rules && rules['&'];\n\n return rootStyle ? (rootStyle as IRawStyle).displayName : undefined;\n}\n\nconst globalSelectorRegExp = /\\:global\\((.+?)\\)/g;\n\ntype ReplacementInfo = [number, number, string];\n\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: string): string {\n // We the selector does not have a :global() we can shortcut\n if (!globalSelectorRegExp.test(selectorWithGlobals)) {\n return selectorWithGlobals;\n }\n\n const replacementInfo: ReplacementInfo[] = [];\n\n const findGlobal = /\\:global\\((.+?)\\)/g;\n let 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((v: string) => `:global(${v.trim()})`)\n .join(', '),\n ]);\n }\n }\n\n // Replace the found selectors with their wrapped variants in reverse order\n return replacementInfo\n .reverse()\n .reduce((selector: string, [matchIndex, matchEndIndex, replacement]: ReplacementInfo) => {\n const prefix = selector.slice(0, matchIndex);\n const suffix = selector.slice(matchEndIndex);\n\n return prefix + replacement + suffix;\n }, selectorWithGlobals);\n}\n\nfunction isSelector(potentialSelector: string): boolean {\n return potentialSelector.indexOf(':global(') >= 0 || potentialSelector.indexOf(':') === 0;\n}\n\nfunction expandSelector(newSelector: string, currentSelector: string): string {\n if (newSelector.indexOf(':global(') >= 0) {\n return newSelector.replace(globalSelectorRegExp, '$1');\n } else if (newSelector.indexOf(':host(') === 0) {\n return newSelector;\n } else if (newSelector.indexOf(':') === 0) {\n return currentSelector + newSelector;\n } else if (newSelector.indexOf('&') < 0) {\n return currentSelector + ' ' + newSelector;\n }\n\n return newSelector;\n}\n\nfunction extractSelector(\n currentSelector: string,\n rules: IRuleSet = { __order: [] },\n selector: string,\n value: IStyle,\n stylesheet: Stylesheet,\n) {\n if (selector.indexOf('@') === 0) {\n selector = selector + '{' + currentSelector;\n extractRules([value], rules, selector, stylesheet);\n } else if (selector.indexOf(',') > -1) {\n expandCommaSeparatedGlobals(selector)\n .split(',')\n .map((s: string) => s.trim())\n .forEach((separatedSelector: string) =>\n extractRules([value], rules, expandSelector(separatedSelector, currentSelector), stylesheet),\n );\n } else {\n extractRules([value], rules, expandSelector(selector, currentSelector), stylesheet);\n }\n}\n\nfunction extractRules(\n args: IStyle[],\n rules: IRuleSet = { __order: [] },\n currentSelector: string = '&',\n stylesheet: Stylesheet,\n): IRuleSet {\n let currentRules: IDictionary | undefined = rules[currentSelector] as IDictionary;\n\n if (!currentRules) {\n currentRules = {};\n rules[currentSelector] = currentRules;\n rules.__order.push(currentSelector);\n }\n\n for (const arg of args) {\n // If the arg is a string, we need to look up the class map and merge.\n if (typeof arg === 'string') {\n const expandedRules = stylesheet.argsFromClassName(arg);\n\n if (expandedRules) {\n extractRules(expandedRules, rules, currentSelector, stylesheet);\n }\n // Else if the arg is an array, we need to recurse in.\n } else if (Array.isArray(arg)) {\n extractRules(arg, rules, currentSelector, stylesheet);\n } else {\n for (const prop in arg as any) {\n if ((arg as any).hasOwnProperty(prop)) {\n const propValue = (arg as any)[prop];\n if (prop === 'selectors') {\n // every child is a selector.\n const selectors: { [key: string]: IStyle } = (arg as any).selectors;\n\n for (const newSelector in selectors) {\n if (selectors.hasOwnProperty(newSelector)) {\n extractSelector(currentSelector, rules, newSelector, selectors[newSelector], stylesheet);\n }\n }\n } else if (typeof propValue === 'object' || isSelector(prop)) {\n // prop is a selector.\n if (propValue !== null && propValue !== undefined) {\n extractSelector(currentSelector, rules, prop, propValue, stylesheet);\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 } else {\n (currentRules as any)[prop] = propValue;\n }\n }\n }\n }\n }\n }\n }\n\n return rules;\n}\n\nfunction expandQuads(currentRules: IDictionary, name: string, value: string): void {\n let parts = typeof value === 'string' ? tokenizeWithParentheses(value) : [value];\n\n if (parts.length === 0) {\n parts.push(value);\n }\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(p => p + ' !important');\n }\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}\n\nfunction getKeyForRules(options: IStyleOptions, rules: IRuleSet): string | undefined {\n const serialized: string[] = [options.rtl ? 'rtl' : 'ltr'];\n let hasProps = false;\n\n for (const selector of rules.__order) {\n serialized.push(selector);\n const rulesForSelector = rules[selector];\n\n for (const propName in rulesForSelector) {\n if (rulesForSelector.hasOwnProperty(propName) && rulesForSelector[propName] !== undefined) {\n hasProps = true;\n serialized.push(propName, rulesForSelector[propName]);\n }\n }\n }\n\n return hasProps ? serialized.join('') : undefined;\n}\n\nfunction repeatString(target: string, count: number): string {\n if (count <= 0) {\n return '';\n }\n\n if (count === 1) {\n return target;\n }\n\n return target + repeatString(target, count - 1);\n}\n\nexport function serializeRuleEntries(options: IStyleOptions, ruleEntries: { [key: string]: string | number }): string {\n if (!ruleEntries) {\n return '';\n }\n\n const allEntries: (string | number)[] = [];\n\n for (const entry in ruleEntries) {\n if (ruleEntries.hasOwnProperty(entry) && entry !== DISPLAY_NAME && ruleEntries[entry] !== undefined) {\n allEntries.push(entry, ruleEntries[entry]);\n }\n }\n\n // Apply transforms.\n for (let 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\n // Apply punctuation.\n for (let i = 1; i < allEntries.length; i += 4) {\n allEntries.splice(i, 1, ':', allEntries[i], ';');\n }\n\n return allEntries.join('');\n}\n\nexport interface IRegistration {\n className: string;\n key: string;\n args: IStyle[];\n rulesToInsert: string[];\n}\n\nexport function styleToRegistration(options: IStyleOptions, ...args: IStyle[]): IRegistration | undefined {\n const stylesheet = options.stylesheet ?? Stylesheet.getInstance(options.shadowConfig);\n const rules: IRuleSet = extractRules(args, undefined, undefined, stylesheet);\n const key = getKeyForRules(options, rules);\n\n if (key) {\n const registration: Partial = {\n className: stylesheet.classNameFromKey(key),\n key,\n args,\n };\n\n if (!registration.className) {\n registration.className = stylesheet.getClassName(getDisplayName(rules));\n const rulesToInsert: string[] = [];\n\n for (const selector of rules.__order) {\n rulesToInsert.push(selector, serializeRuleEntries(options, rules[selector]));\n }\n registration.rulesToInsert = rulesToInsert;\n }\n\n return registration as IRegistration;\n }\n\n return undefined;\n}\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(\n registration: IRegistration,\n specificityMultiplier: number = 1,\n shadowConfig?: ShadowConfig,\n sheet?: Stylesheet,\n): void {\n const stylesheet = sheet ?? Stylesheet.getInstance(shadowConfig);\n const { className, key, args, rulesToInsert } = registration;\n\n if (rulesToInsert) {\n // rulesToInsert is an ordered array of selector/rule pairs.\n for (let i = 0; i < rulesToInsert.length; i += 2) {\n const rules = rulesToInsert[i + 1];\n if (rules) {\n let selector = rulesToInsert[i];\n selector = selector.replace(/&/g, repeatString(`.${registration.className}`, specificityMultiplier));\n\n // Insert. Note if a media query, we must close the query with a final bracket.\n const processedRule = `${selector}{${rules}}${selector.indexOf('@') === 0 ? '}' : ''}`;\n stylesheet.insertRule(processedRule);\n }\n }\n stylesheet.cacheClassName(className!, key!, args!, rulesToInsert);\n }\n}\n\nexport function styleToClassName(options: IStyleOptions, ...args: IStyle[]): string {\n const registration = styleToRegistration(options, ...args);\n if (registration) {\n applyRegistration(registration, options.specificityMultiplier, options.shadowConfig, options.stylesheet);\n\n return registration.className;\n }\n\n return '';\n}\n","import { extractStyleParts } from './extractStyleParts';\nimport { IStyle, IStyleBaseArray } from './IStyle';\nimport { IStyleOptions } from './IStyleOptions';\nimport { isShadowConfig, ShadowConfig } from './shadowConfig';\nimport { getStyleOptions } from './StyleOptionsState';\nimport { Stylesheet } from './Stylesheet';\nimport { styleToClassName } from './styleToClassName';\n\ntype Missing = false | null | undefined;\ntype StyleArg = IStyle | IStyleBaseArray | Missing;\ntype StyleArgWithShadow = StyleArg | ShadowConfig;\n\nexport function mergeStyles(...args: StyleArg[]): string;\nexport function mergeStyles(shadowConfig: ShadowConfig, ...args: StyleArg[]): string;\n/**\n * Concatenation helper, which can merge class names together. Skips over falsey values.\n *\n * @public\n */\nexport function mergeStyles(...args: any[]): string {\n return mergeCss(args, getStyleOptions());\n}\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: StyleArgWithShadow | StyleArgWithShadow[], options?: IStyleOptions): string {\n const styleArgs = args instanceof Array ? args : [args];\n const opts = options || {};\n const hasShadowConfig = isShadowConfig(styleArgs[0]);\n if (hasShadowConfig) {\n opts.shadowConfig = styleArgs[0] as ShadowConfig;\n }\n opts.stylesheet = Stylesheet.getInstance(opts.shadowConfig);\n const { classes, objects } = extractStyleParts(opts.stylesheet, styleArgs);\n\n if (objects.length) {\n classes.push(styleToClassName(opts, objects));\n }\n\n return classes.join(' ');\n}\n","import { IStyleSet, IConcatenatedStyleSet } from './IStyleSet';\nimport { IStyleBase, IStyle } from './IStyle';\nimport { IStyleFunctionOrObject } from './IStyleFunction';\nimport { ObjectOnly } from './ObjectOnly';\nimport { ShadowConfig, isShadowConfig } from './shadowConfig';\n\ntype Missing = false | null | undefined;\ntype MissingOrShadowConfig = Missing | ShadowConfig;\n\n/**\n * Combine a set of styles together (but does not register css classes).\n * @param styleSet - The first style set to be concatenated.\n */\nexport function concatStyleSets(styleSet: TStyleSet | Missing): IConcatenatedStyleSet>;\n\n/**\n * Combine a set of styles together (but does not register css classes).\n * @param styleSet1 - The first style set to be concatenated.\n * @param styleSet2 - The second style set to be concatenated.\n */\nexport function concatStyleSets(\n styleSet1: TStyleSet1 | MissingOrShadowConfig,\n styleSet2: TStyleSet2 | Missing,\n): IConcatenatedStyleSet & ObjectOnly>;\n\n/**\n * Combine a set of styles together (but does not register css classes).\n * @param styleSet1 - The first style set to be concatenated.\n * @param styleSet2 - The second style set to be concatenated.\n * @param styleSet3 - The third style set to be concatenated.\n */\nexport function concatStyleSets(\n styleSet1: TStyleSet1 | MissingOrShadowConfig,\n styleSet2: TStyleSet2 | Missing,\n styleSet3: TStyleSet3 | Missing,\n): IConcatenatedStyleSet & ObjectOnly & ObjectOnly>;\n\n/**\n * Combine a set of styles together (but does not register css classes).\n * @param styleSet1 - The first style set to be concatenated.\n * @param styleSet2 - The second style set to be concatenated.\n * @param styleSet3 - The third style set to be concatenated.\n * @param styleSet4 - The fourth style set to be concatenated.\n */\nexport function concatStyleSets(\n styleSet1: TStyleSet1 | MissingOrShadowConfig,\n styleSet2: TStyleSet2 | Missing,\n styleSet3: TStyleSet3 | Missing,\n styleSet4: TStyleSet4 | Missing,\n): IConcatenatedStyleSet<\n ObjectOnly & ObjectOnly & ObjectOnly & ObjectOnly\n>;\n\n/**\n * Combine a set of styles together (but does not register css classes).\n * @param styleSet1 - The first style set to be concatenated.\n * @param styleSet2 - The second style set to be concatenated.\n * @param styleSet3 - The third style set to be concatenated.\n * @param styleSet4 - The fourth style set to be concatenated.\n * @param styleSet5 - The fifth set to be concatenated.\n */\nexport function concatStyleSets(\n styleSet1: TStyleSet1 | MissingOrShadowConfig,\n styleSet2: TStyleSet2 | Missing,\n styleSet3: TStyleSet3 | Missing,\n styleSet4: TStyleSet4 | Missing,\n styleSet5: TStyleSet5 | Missing,\n): IConcatenatedStyleSet<\n ObjectOnly &\n ObjectOnly &\n ObjectOnly &\n ObjectOnly &\n ObjectOnly\n>;\n\n/**\n * Combine a set of styles together (but does not register css classes).\n * @param styleSet1 - The first style set to be concatenated.\n * @param styleSet2 - The second style set to be concatenated.\n * @param styleSet3 - The third style set to be concatenated.\n * @param styleSet4 - The fourth style set to be concatenated.\n * @param styleSet5 - The fifth set to be concatenated.\n * @param styleSet6 - The sixth set to be concatenated.\n */\nexport function concatStyleSets(\n styleSet1: TStyleSet1 | MissingOrShadowConfig,\n styleSet2: TStyleSet2 | Missing,\n styleSet3: TStyleSet3 | Missing,\n styleSet4: TStyleSet4 | Missing,\n styleSet5: TStyleSet5 | Missing,\n styleSet6: TStyleSet6 | Missing,\n): IConcatenatedStyleSet<\n ObjectOnly &\n ObjectOnly &\n ObjectOnly &\n ObjectOnly &\n ObjectOnly &\n ObjectOnly\n>;\n\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(...styleSets: (IStyleSet | MissingOrShadowConfig)[]): IConcatenatedStyleSet;\n\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(...styleSets: any[]): IConcatenatedStyleSet {\n if (\n styleSets &&\n styleSets.length === 1 &&\n styleSets[0] &&\n !(styleSets[0] as IStyleSet).subComponentStyles &&\n !isShadowConfig(styleSets[0])\n ) {\n return styleSets[0] as IConcatenatedStyleSet;\n }\n\n const mergedSet: IConcatenatedStyleSet = {};\n\n // We process sub component styles in two phases. First we collect them, then we combine them into 1 style function.\n const workingSubcomponentStyles: { [key: string]: Array> } = {};\n\n for (const currentSet of styleSets) {\n if (currentSet && !isShadowConfig(currentSet)) {\n for (const prop in currentSet) {\n if (currentSet.hasOwnProperty(prop)) {\n if (prop === 'subComponentStyles' && currentSet.subComponentStyles !== undefined) {\n // subcomponent styles - style functions or objects\n\n const currentComponentStyles = currentSet.subComponentStyles;\n for (const subCompProp in currentComponentStyles) {\n if (currentComponentStyles.hasOwnProperty(subCompProp)) {\n if (workingSubcomponentStyles.hasOwnProperty(subCompProp)) {\n workingSubcomponentStyles[subCompProp].push(currentComponentStyles[subCompProp]);\n } else {\n workingSubcomponentStyles[subCompProp] = [currentComponentStyles[subCompProp]];\n }\n }\n }\n\n continue;\n }\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 const mergedValue: IStyle = (mergedSet as any)[prop];\n const currentValue = (currentSet as any)[prop];\n\n if (mergedValue === undefined) {\n (mergedSet as any)[prop] = currentValue;\n } else {\n (mergedSet as any)[prop] = [\n // https://github.com/Microsoft/TypeScript/issues/25474\n ...(Array.isArray(mergedValue) ? mergedValue : [mergedValue as IStyleBase]),\n ...(Array.isArray(currentValue) ? currentValue : [currentValue as IStyleBase]),\n ];\n }\n }\n }\n }\n }\n\n if (Object.keys(workingSubcomponentStyles).length > 0) {\n mergedSet.subComponentStyles = {};\n const mergedSubStyles = mergedSet.subComponentStyles;\n\n // now we process the subcomponent styles if there are any\n for (const subCompProp in workingSubcomponentStyles) {\n if (workingSubcomponentStyles.hasOwnProperty(subCompProp)) {\n const workingSet = workingSubcomponentStyles[subCompProp];\n mergedSubStyles[subCompProp] = (styleProps: any) => {\n return concatStyleSets(\n ...workingSet.map((styleFunctionOrObject: IStyleFunctionOrObject) =>\n typeof styleFunctionOrObject === 'function' ? styleFunctionOrObject(styleProps) : styleFunctionOrObject,\n ),\n );\n };\n }\n }\n }\n\n return mergedSet;\n}\n","import { concatStyleSets } from './concatStyleSets';\nimport { extractStyleParts } from './extractStyleParts';\nimport { IStyle } from './IStyle';\nimport { IStyleOptions } from './IStyleOptions';\nimport { IConcatenatedStyleSet, IProcessedStyleSet, IStyleSet } from './IStyleSet';\nimport { getStyleOptions } from './StyleOptionsState';\nimport { applyRegistration, styleToRegistration } from './styleToClassName';\nimport { ObjectOnly } from './ObjectOnly';\nimport { isShadowConfig, ShadowConfig } from './shadowConfig';\nimport { Stylesheet } from './Stylesheet';\n\ntype Missing = false | null | undefined;\ntype MissingOrShadowConfig = Missing | ShadowConfig;\n\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 styleSet - The first style set to be merged and reigstered.\n */\nexport function mergeStyleSets(styleSet: TStyleSet | Missing): IProcessedStyleSet>;\n\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 styleSet1 - The first style set to be merged.\n * @param styleSet2 - The second style set to be merged.\n */\nexport function mergeStyleSets(\n styleSet1: TStyleSet1 | Missing,\n styleSet2: TStyleSet2 | Missing,\n): IProcessedStyleSet & ObjectOnly>;\n\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 styleSet1 - The first style set to be merged.\n * @param styleSet2 - The second style set to be merged.\n * @param styleSet3 - The third style set to be merged.\n */\nexport function mergeStyleSets(\n styleSet1: TStyleSet1 | Missing,\n styleSet2: TStyleSet2 | Missing,\n styleSet3: TStyleSet3 | Missing,\n): IProcessedStyleSet & ObjectOnly & ObjectOnly>;\n\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 styleSet1 - The first style set to be merged.\n * @param styleSet2 - The second style set to be merged.\n * @param styleSet3 - The third style set to be merged.\n * @param styleSet4 - The fourth style set to be merged.\n */\nexport function mergeStyleSets(\n styleSet1: TStyleSet1 | Missing,\n styleSet2: TStyleSet2 | Missing,\n styleSet3: TStyleSet3 | Missing,\n styleSet4: TStyleSet4 | Missing,\n): IProcessedStyleSet<\n ObjectOnly & ObjectOnly & ObjectOnly & ObjectOnly\n>;\n\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(...styleSets: Array): IProcessedStyleSet;\n\nexport function mergeStyleSets(\n shadowConfig: ShadowConfig,\n ...styleSets: Array\n): IProcessedStyleSet;\n\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(...styleSets: any[]): IProcessedStyleSet {\n return mergeCssSets(styleSets as any, getStyleOptions());\n}\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 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 * @param options - (optional) Options to use when creating rules.\n */\nexport function mergeCssSets(\n styleSets: [TStyleSet | Missing],\n options?: IStyleOptions,\n): IProcessedStyleSet>;\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 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 * @param options - (optional) Options to use when creating rules.\n */\nexport function mergeCssSets(\n styleSets: [TStyleSet1 | MissingOrShadowConfig, TStyleSet2 | Missing],\n options?: IStyleOptions,\n): IProcessedStyleSet & ObjectOnly>;\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 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 * @param options - (optional) Options to use when creating rules.\n */\nexport function mergeCssSets(\n styleSets: [TStyleSet1 | MissingOrShadowConfig, TStyleSet2 | Missing, TStyleSet3 | Missing],\n options?: IStyleOptions,\n): IProcessedStyleSet & ObjectOnly & ObjectOnly>;\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 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 * @param options - (optional) Options to use when creating rules.\n */\nexport function mergeCssSets(\n styleSets: [TStyleSet1 | MissingOrShadowConfig, TStyleSet2 | Missing, TStyleSet3 | Missing, TStyleSet4 | Missing],\n options?: IStyleOptions,\n): IProcessedStyleSet<\n ObjectOnly & ObjectOnly & ObjectOnly & ObjectOnly\n>;\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 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 * @param options - (optional) Options to use when creating rules.\n */\nexport function mergeCssSets(\n styleSet: [TStyleSet | Missing],\n options?: IStyleOptions,\n): IProcessedStyleSet>;\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: any[], options?: IStyleOptions): IProcessedStyleSet {\n const classNameSet: IProcessedStyleSet & Record = { subComponentStyles: {} };\n\n let shadowConfig: ShadowConfig | undefined = undefined;\n let styleSet;\n if (isShadowConfig(styleSets[0])) {\n shadowConfig = styleSets[0];\n styleSet = styleSets[1];\n } else {\n styleSet = styleSets[0];\n }\n\n shadowConfig ??= options?.shadowConfig;\n\n const opts = { ...options, shadowConfig };\n\n if (!styleSet && styleSets.length <= 1) {\n return { subComponentStyles: {} } as any;\n }\n\n const sheet = Stylesheet.getInstance(shadowConfig);\n opts.stylesheet = sheet;\n const concatenatedStyleSet = concatStyleSets(...styleSets);\n\n const registrations = [];\n\n for (const styleSetArea in concatenatedStyleSet) {\n if (concatenatedStyleSet.hasOwnProperty(styleSetArea)) {\n if (styleSetArea === 'subComponentStyles') {\n classNameSet.subComponentStyles = concatenatedStyleSet.subComponentStyles || {};\n continue;\n } else if (styleSetArea === '__shadowConfig__') {\n continue;\n }\n\n const styles: IStyle = (concatenatedStyleSet as any)[styleSetArea];\n\n const { classes, objects } = extractStyleParts(sheet, styles);\n\n if (objects?.length) {\n const registration = styleToRegistration(opts || {}, { displayName: styleSetArea }, objects);\n\n if (registration) {\n registrations.push(registration);\n classNameSet[styleSetArea] = classes.concat([registration.className]).join(' ');\n }\n } else {\n classNameSet[styleSetArea] = classes.join(' ');\n }\n }\n }\n\n for (const registration of registrations) {\n if (registration) {\n applyRegistration(registration, options?.specificityMultiplier, shadowConfig);\n }\n }\n\n return classNameSet;\n}\n","import { concatStyleSets } from './concatStyleSets';\nimport { IStyleSetBase } from './IStyleSet';\nimport { IStyleFunctionOrObject } from './IStyleFunction';\nimport { DeepPartialV2 as DeepPartial } from './DeepPartial';\n\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(\n styleProps: TStyleProps,\n ...allStyles: (IStyleFunctionOrObject | undefined)[]\n): DeepPartial {\n const result: Array> = [];\n for (const styles of allStyles) {\n if (styles) {\n result.push(typeof styles === 'function' ? styles(styleProps) : styles);\n }\n }\n if (result.length === 1) {\n return result[0];\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(...result) as DeepPartial;\n }\n\n return {} as DeepPartial;\n}\n","import { IFontFace } from './IRawStyleBase';\nimport { getStyleOptions } from './StyleOptionsState';\nimport { Stylesheet } from './Stylesheet';\nimport { serializeRuleEntries } from './styleToClassName';\n\n/**\n * Registers a font face.\n * @public\n */\nexport function fontFace(font: IFontFace): void {\n const stylesheet = Stylesheet.getInstance();\n\n const rule = serializeRuleEntries(getStyleOptions(), font as {});\n\n const className = stylesheet.classNameFromKey(rule);\n\n if (className) {\n return;\n }\n\n const name = stylesheet.getClassName();\n stylesheet.insertRule(`@font-face{${rule}}`, true);\n stylesheet.cacheClassName(name, rule, [], ['font-face', rule]);\n}\n","import { IKeyframes } from './IKeyframes';\nimport { getStyleOptions } from './StyleOptionsState';\nimport { Stylesheet } from './Stylesheet';\nimport { serializeRuleEntries } from './styleToClassName';\n\n/**\n * Registers keyframe definitions.\n *\n * @public\n */\nexport function keyframes(timeline: IKeyframes): string {\n const stylesheet = Stylesheet.getInstance();\n const rulesArray: string[] = [];\n\n for (const prop in timeline) {\n if (timeline.hasOwnProperty(prop)) {\n rulesArray.push(prop, '{', serializeRuleEntries(getStyleOptions(), timeline[prop]), '}');\n }\n }\n const rules = rulesArray.join('');\n\n const className = stylesheet.classNameFromKey(rules);\n\n if (className) {\n return className;\n }\n\n const name = stylesheet.getClassName();\n stylesheet.insertRule(`@keyframes ${name}{${rules}}`, true);\n stylesheet.cacheClassName(name, rules, [], ['keyframes', rules]);\n\n return name;\n}\n","import { mergeStyles } from '../MergeStyles';\n\n/**\n * Builds a class names object from a given map.\n *\n * @param styles - Map of unprocessed styles.\n * @returns Map of property name to class name.\n */\nexport function buildClassMap(styles: T): { [key in keyof T]?: string } {\n let classes: { [key in keyof T]?: string } = {};\n\n for (let styleName in styles) {\n if (styles.hasOwnProperty(styleName)) {\n let className: string;\n\n Object.defineProperty(classes, styleName, {\n get: (): string => {\n if (className === undefined) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n className = mergeStyles(styles[styleName] as any).toString();\n }\n return className;\n },\n enumerable: true,\n configurable: true,\n });\n }\n }\n\n return classes;\n}\n","/******************************************************************************\nCopyright (c) Microsoft Corporation.\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\nPERFORMANCE OF THIS SOFTWARE.\n***************************************************************************** */\n/* global Reflect, Promise, SuppressedError, Symbol, Iterator */\n\nvar extendStatics = function(d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n};\n\nexport function __extends(d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n}\n\nexport var __assign = function() {\n __assign = Object.assign || function __assign(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n return t;\n }\n return __assign.apply(this, arguments);\n}\n\nexport function __rest(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}\n\nexport function __decorate(decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n}\n\nexport function __param(paramIndex, decorator) {\n return function (target, key) { decorator(target, key, paramIndex); }\n}\n\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\n function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\n var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\n var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\n var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\n var _, done = false;\n for (var i = decorators.length - 1; i >= 0; i--) {\n var context = {};\n for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\n for (var p in contextIn.access) context.access[p] = contextIn.access[p];\n context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\n var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\n if (kind === \"accessor\") {\n if (result === void 0) continue;\n if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\n if (_ = accept(result.get)) descriptor.get = _;\n if (_ = accept(result.set)) descriptor.set = _;\n if (_ = accept(result.init)) initializers.unshift(_);\n }\n else if (_ = accept(result)) {\n if (kind === \"field\") initializers.unshift(_);\n else descriptor[key] = _;\n }\n }\n if (target) Object.defineProperty(target, contextIn.name, descriptor);\n done = true;\n};\n\nexport function __runInitializers(thisArg, initializers, value) {\n var useValue = arguments.length > 2;\n for (var i = 0; i < initializers.length; i++) {\n value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\n }\n return useValue ? value : void 0;\n};\n\nexport function __propKey(x) {\n return typeof x === \"symbol\" ? x : \"\".concat(x);\n};\n\nexport function __setFunctionName(f, name, prefix) {\n if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\n return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\n};\n\nexport function __metadata(metadataKey, metadataValue) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\n}\n\nexport function __awaiter(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}\n\nexport function __generator(thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === \"function\" ? Iterator : Object).prototype);\n return g.next = verb(0), g[\"throw\"] = verb(1), g[\"return\"] = verb(2), typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (g && (g = 0, op[0] && (_ = 0)), _) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n}\n\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n});\n\nexport function __exportStar(m, o) {\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\n}\n\nexport function __values(o) {\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\n if (m) return m.call(o);\n if (o && typeof o.length === \"number\") return {\n next: function () {\n if (o && i >= o.length) o = void 0;\n return { value: o && o[i++], done: !o };\n }\n };\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\n}\n\nexport function __read(o, n) {\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\n if (!m) return o;\n var i = m.call(o), r, ar = [], e;\n try {\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\n }\n catch (error) { e = { error: error }; }\n finally {\n try {\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\n }\n finally { if (e) throw e.error; }\n }\n return ar;\n}\n\n/** @deprecated */\nexport function __spread() {\n for (var ar = [], i = 0; i < arguments.length; i++)\n ar = ar.concat(__read(arguments[i]));\n return ar;\n}\n\n/** @deprecated */\nexport function __spreadArrays() {\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\n r[k] = a[j];\n return r;\n}\n\nexport function __spreadArray(to, from, pack) {\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n if (ar || !(i in from)) {\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n ar[i] = from[i];\n }\n }\n return to.concat(ar || Array.prototype.slice.call(from));\n}\n\nexport function __await(v) {\n return this instanceof __await ? (this.v = v, this) : new __await(v);\n}\n\nexport function __asyncGenerator(thisArg, _arguments, generator) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\n return i = Object.create((typeof AsyncIterator === \"function\" ? AsyncIterator : Object).prototype), verb(\"next\"), verb(\"throw\"), verb(\"return\", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;\n function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }\n function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\n function fulfill(value) { resume(\"next\", value); }\n function reject(value) { resume(\"throw\", value); }\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\n}\n\nexport function __asyncDelegator(o) {\n var i, p;\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\n}\n\nexport function __asyncValues(o) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var m = o[Symbol.asyncIterator], i;\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\n}\n\nexport function __makeTemplateObject(cooked, raw) {\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\n return cooked;\n};\n\nvar __setModuleDefault = Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n};\n\nvar ownKeys = function(o) {\n ownKeys = Object.getOwnPropertyNames || function (o) {\n var ar = [];\n for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;\n return ar;\n };\n return ownKeys(o);\n};\n\nexport function __importStar(mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== \"default\") __createBinding(result, mod, k[i]);\n __setModuleDefault(result, mod);\n return result;\n}\n\nexport function __importDefault(mod) {\n return (mod && mod.__esModule) ? mod : { default: mod };\n}\n\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n}\n\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\n}\n\nexport function __classPrivateFieldIn(state, receiver) {\n if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\n return typeof state === \"function\" ? receiver === state : state.has(receiver);\n}\n\nexport function __addDisposableResource(env, value, async) {\n if (value !== null && value !== void 0) {\n if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\n var dispose, inner;\n if (async) {\n if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\n dispose = value[Symbol.asyncDispose];\n }\n if (dispose === void 0) {\n if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\n dispose = value[Symbol.dispose];\n if (async) inner = dispose;\n }\n if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\n if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };\n env.stack.push({ value: value, dispose: dispose, async: async });\n }\n else if (async) {\n env.stack.push({ async: true });\n }\n return value;\n}\n\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\n var e = new Error(message);\n return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\n};\n\nexport function __disposeResources(env) {\n function fail(e) {\n env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\n env.hasError = true;\n }\n var r, s = 0;\n function next() {\n while (r = env.stack.pop()) {\n try {\n if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);\n if (r.dispose) {\n var result = r.dispose.call(r.value);\n if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\n }\n else s |= 1;\n }\n catch (e) {\n fail(e);\n }\n }\n if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();\n if (env.hasError) throw env.error;\n }\n return next();\n}\n\nexport function __rewriteRelativeImportExtension(path, preserveJsx) {\n if (typeof path === \"string\" && /^\\.\\.?\\//.test(path)) {\n return path.replace(/\\.(tsx)$|((?:\\.d)?)((?:\\.[^./]+?)?)\\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {\n return tsx ? preserveJsx ? \".jsx\" : \".js\" : d && (!ext || !cm) ? m : (d + ext + \".\" + cm.toLowerCase() + \"js\");\n });\n }\n return path;\n}\n\nexport default {\n __extends,\n __assign,\n __rest,\n __decorate,\n __param,\n __esDecorate,\n __runInitializers,\n __propKey,\n __setFunctionName,\n __metadata,\n __awaiter,\n __generator,\n __createBinding,\n __exportStar,\n __values,\n __read,\n __spread,\n __spreadArrays,\n __spreadArray,\n __await,\n __asyncGenerator,\n __asyncDelegator,\n __asyncValues,\n __makeTemplateObject,\n __importStar,\n __importDefault,\n __classPrivateFieldGet,\n __classPrivateFieldSet,\n __classPrivateFieldIn,\n __addDisposableResource,\n __disposeResources,\n __rewriteRelativeImportExtension,\n};\n","/**\n * Verifies if an application can use DOM.\n */\nexport function canUseDOM(): boolean {\n return (\n // eslint-disable-next-line no-restricted-globals\n typeof window !== 'undefined' &&\n !!(\n // eslint-disable-next-line no-restricted-globals, deprecation/deprecation\n (window.document && window.document.createElement)\n )\n );\n}\n","import { canUseDOM } from './canUseDOM';\n\nlet _window: Window | undefined = undefined;\n\n// Note: Accessing \"window\" in IE11 is somewhat expensive, and calling \"typeof window\"\n// hits a memory leak, whereas aliasing it and calling \"typeof _window\" does not.\n// Caching the window value at the file scope lets us minimize the impact.\ntry {\n // eslint-disable-next-line no-restricted-globals\n _window = window;\n} catch (e) {\n /* no-op */\n}\n\n/**\n * Helper to get the window object. The helper will make sure to use a cached variable\n * of \"window\", to avoid overhead and memory leaks in IE11. Note that in popup scenarios the\n * window object won't match the \"global\" window object, and for these scenarios, you should\n * pass in an element hosted within the popup.\n *\n * @public\n */\nexport function getWindow(rootElement?: Element | null): Window | undefined {\n if (!canUseDOM() || typeof _window === 'undefined') {\n return undefined;\n } else {\n const el = rootElement as Element;\n\n return el && el.ownerDocument && el.ownerDocument.defaultView ? el.ownerDocument.defaultView : _window;\n }\n}\n","import { getWindow } from './dom/getWindow';\n\ndeclare function setTimeout(cb: Function, delay: number): number;\ndeclare function setInterval(cb: Function, delay: number): number;\n\n/**\n * Bugs often appear in async code when stuff gets disposed, but async operations don't get canceled.\n * This Async helper class solves these issues by tying async code to the lifetime of a disposable object.\n *\n * Usage: Anything class extending from BaseModel can access this helper via this.async. Otherwise create a\n * new instance of the class and remember to call dispose() during your code's dispose handler.\n *\n * @public\n */\nexport class Async {\n private _timeoutIds: { [id: number]: boolean } | null = null;\n private _immediateIds: { [id: number]: boolean } | null = null;\n private _intervalIds: { [id: number]: boolean } | null = null;\n private _animationFrameIds: { [id: number]: boolean } | null = null;\n private _isDisposed: boolean;\n private _parent: object | null;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _onErrorHandler: ((e: any) => void) | undefined;\n private _noop: () => void;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n constructor(parent?: object, onError?: (e: any) => void) {\n this._isDisposed = false;\n this._parent = parent || null;\n this._onErrorHandler = onError;\n this._noop = () => {\n /* do nothing */\n };\n }\n\n /**\n * Dispose function, clears all async operations.\n */\n public dispose(): void {\n let id;\n\n this._isDisposed = true;\n this._parent = null;\n\n // Clear timeouts.\n if (this._timeoutIds) {\n for (id in this._timeoutIds) {\n if (this._timeoutIds.hasOwnProperty(id)) {\n this.clearTimeout(parseInt(id, 10));\n }\n }\n\n this._timeoutIds = null;\n }\n\n // Clear immediates.\n if (this._immediateIds) {\n for (id in this._immediateIds) {\n if (this._immediateIds.hasOwnProperty(id)) {\n this.clearImmediate(parseInt(id, 10));\n }\n }\n\n this._immediateIds = null;\n }\n\n // Clear intervals.\n if (this._intervalIds) {\n for (id in this._intervalIds) {\n if (this._intervalIds.hasOwnProperty(id)) {\n this.clearInterval(parseInt(id, 10));\n }\n }\n this._intervalIds = null;\n }\n\n // Clear animation frames.\n if (this._animationFrameIds) {\n for (id in this._animationFrameIds) {\n if (this._animationFrameIds.hasOwnProperty(id)) {\n this.cancelAnimationFrame(parseInt(id, 10));\n }\n }\n\n this._animationFrameIds = null;\n }\n }\n\n /**\n * SetTimeout override, which will auto cancel the timeout during dispose.\n * @param callback - Callback to execute.\n * @param duration - Duration in milliseconds.\n * @returns The setTimeout id.\n */\n public setTimeout(callback: () => void, duration: number): number {\n let timeoutId = 0;\n\n if (!this._isDisposed) {\n if (!this._timeoutIds) {\n this._timeoutIds = {};\n }\n\n timeoutId = setTimeout(() => {\n // Time to execute the timeout, enqueue it as a foreground task to be executed.\n\n try {\n // Now delete the record and call the callback.\n if (this._timeoutIds) {\n delete this._timeoutIds[timeoutId];\n }\n callback.apply(this._parent);\n } catch (e) {\n this._logError(e);\n }\n }, duration);\n\n this._timeoutIds[timeoutId] = true;\n }\n\n return timeoutId;\n }\n\n /**\n * Clears the timeout.\n * @param id - Id to cancel.\n */\n public clearTimeout(id: number): void {\n if (this._timeoutIds && this._timeoutIds[id]) {\n clearTimeout(id);\n delete this._timeoutIds[id];\n }\n }\n\n /**\n * SetImmediate override, which will auto cancel the immediate during dispose.\n * @param callback - Callback to execute.\n * @param targetElement - Optional target element to use for identifying the correct window.\n * @returns The setTimeout id.\n */\n public setImmediate(callback: () => void, targetElement?: Element | null): number {\n let immediateId = 0;\n const win = getWindow(targetElement)!;\n\n if (!this._isDisposed) {\n if (!this._immediateIds) {\n this._immediateIds = {};\n }\n\n let setImmediateCallback = () => {\n // Time to execute the timeout, enqueue it as a foreground task to be executed.\n\n try {\n // Now delete the record and call the callback.\n if (this._immediateIds) {\n delete this._immediateIds[immediateId];\n }\n callback.apply(this._parent);\n } catch (e) {\n this._logError(e);\n }\n };\n\n immediateId = win.setTimeout(setImmediateCallback, 0);\n\n this._immediateIds[immediateId] = true;\n }\n\n return immediateId;\n }\n\n /**\n * Clears the immediate.\n * @param id - Id to cancel.\n * @param targetElement - Optional target element to use for identifying the correct window.\n */\n public clearImmediate(id: number, targetElement?: Element | null): void {\n const win = getWindow(targetElement)!;\n\n if (this._immediateIds && this._immediateIds[id]) {\n win.clearTimeout(id);\n delete this._immediateIds[id];\n }\n }\n\n /**\n * SetInterval override, which will auto cancel the timeout during dispose.\n * @param callback - Callback to execute.\n * @param duration - Duration in milliseconds.\n * @returns The setTimeout id.\n */\n public setInterval(callback: () => void, duration: number): number {\n let intervalId = 0;\n\n if (!this._isDisposed) {\n if (!this._intervalIds) {\n this._intervalIds = {};\n }\n\n intervalId = setInterval(() => {\n // Time to execute the interval callback, enqueue it as a foreground task to be executed.\n try {\n callback.apply(this._parent);\n } catch (e) {\n this._logError(e);\n }\n }, duration);\n\n this._intervalIds[intervalId] = true;\n }\n\n return intervalId;\n }\n\n /**\n * Clears the interval.\n * @param id - Id to cancel.\n */\n public clearInterval(id: number): void {\n if (this._intervalIds && this._intervalIds[id]) {\n clearInterval(id);\n delete this._intervalIds[id];\n }\n }\n\n /**\n * Creates a function that, when executed, will only call the func function at most once per\n * every wait milliseconds. Provide an options object to indicate that func should be invoked\n * on the leading and/or trailing edge of the wait timeout. Subsequent calls to the throttled\n * function will return the result of the last func call.\n *\n * Note: If leading and trailing options are true func will be called on the trailing edge of\n * the timeout only if the throttled function is invoked more than once during the wait timeout.\n *\n * @param func - The function to throttle.\n * @param wait - The number of milliseconds to throttle executions to. Defaults to 0.\n * @param options - The options object.\n * @returns The new throttled function.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n public throttle any>(\n func: T,\n wait?: number,\n options?: {\n leading?: boolean;\n trailing?: boolean;\n },\n ): T {\n if (this._isDisposed) {\n return this._noop as T;\n }\n\n let waitMS = wait || 0;\n let leading = true;\n let trailing = true;\n let lastExecuteTime = 0;\n let lastResult: T;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let lastArgs: any[];\n let timeoutId: number | null = null;\n\n if (options && typeof options.leading === 'boolean') {\n leading = options.leading;\n }\n\n if (options && typeof options.trailing === 'boolean') {\n trailing = options.trailing;\n }\n\n let callback = (userCall?: boolean) => {\n let now = Date.now();\n let delta = now - lastExecuteTime;\n let waitLength = leading ? waitMS - delta : waitMS;\n if (delta >= waitMS && (!userCall || leading)) {\n lastExecuteTime = now;\n if (timeoutId) {\n this.clearTimeout(timeoutId);\n timeoutId = null;\n }\n lastResult = func.apply(this._parent, lastArgs);\n } else if (timeoutId === null && trailing) {\n timeoutId = this.setTimeout(callback, waitLength);\n }\n\n return lastResult;\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let resultFunction = ((...args: any[]): any => {\n lastArgs = args;\n return callback(true);\n }) as T;\n\n return resultFunction;\n }\n\n /**\n * Creates a function that will delay the execution of func until after wait milliseconds have\n * elapsed since the last time it was invoked. Provide an options object to indicate that func\n * should be invoked on the leading and/or trailing edge of the wait timeout. Subsequent calls\n * to the debounced function will return the result of the last func call.\n *\n * Note: If leading and trailing options are true func will be called on the trailing edge of\n * the timeout only if the debounced function is invoked more than once during the wait\n * timeout.\n *\n * @param func - The function to debounce.\n * @param wait - The number of milliseconds to delay.\n * @param options - The options object.\n * @returns The new debounced function.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n public debounce any>(\n func: T,\n wait?: number,\n options?: {\n leading?: boolean;\n maxWait?: number;\n trailing?: boolean;\n },\n ): ICancelable & T {\n if (this._isDisposed) {\n let noOpFunction = (() => {\n /** Do nothing */\n }) as ICancelable & T;\n\n noOpFunction.cancel = () => {\n return;\n };\n noOpFunction.flush = (() => null) as unknown as () => ReturnType;\n noOpFunction.pending = () => false;\n\n return noOpFunction;\n }\n\n let waitMS = wait || 0;\n let leading = false;\n let trailing = true;\n let maxWait: number | null = null;\n let lastCallTime = 0;\n let lastExecuteTime = Date.now();\n let lastResult: ReturnType;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let lastArgs: any[];\n let timeoutId: number | null = null;\n\n if (options && typeof options.leading === 'boolean') {\n leading = options.leading;\n }\n\n if (options && typeof options.trailing === 'boolean') {\n trailing = options.trailing;\n }\n\n if (options && typeof options.maxWait === 'number' && !isNaN(options.maxWait)) {\n maxWait = options.maxWait;\n }\n\n let markExecuted = (time: number) => {\n if (timeoutId) {\n this.clearTimeout(timeoutId);\n timeoutId = null;\n }\n lastExecuteTime = time;\n };\n\n let invokeFunction = (time: number) => {\n markExecuted(time);\n lastResult = func.apply(this._parent, lastArgs);\n };\n\n let callback = (userCall?: boolean) => {\n let now = Date.now();\n let executeImmediately = false;\n if (userCall) {\n if (leading && now - lastCallTime >= waitMS) {\n executeImmediately = true;\n }\n lastCallTime = now;\n }\n let delta = now - lastCallTime;\n let waitLength = waitMS - delta;\n let maxWaitDelta = now - lastExecuteTime;\n let maxWaitExpired = false;\n\n if (maxWait !== null) {\n // maxWait only matters when there is a pending callback\n if (maxWaitDelta >= maxWait && timeoutId) {\n maxWaitExpired = true;\n } else {\n waitLength = Math.min(waitLength, maxWait - maxWaitDelta);\n }\n }\n\n if (delta >= waitMS || maxWaitExpired || executeImmediately) {\n invokeFunction(now);\n } else if ((timeoutId === null || !userCall) && trailing) {\n timeoutId = this.setTimeout(callback, waitLength);\n }\n\n return lastResult;\n };\n\n let pending = (): boolean => {\n return !!timeoutId;\n };\n\n let cancel = (): void => {\n if (pending()) {\n // Mark the debounced function as having executed\n markExecuted(Date.now());\n }\n };\n\n let flush = () => {\n if (pending()) {\n invokeFunction(Date.now());\n }\n\n return lastResult;\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let resultFunction = ((...args: any[]) => {\n lastArgs = args;\n return callback(true);\n }) as ICancelable & T;\n\n resultFunction.cancel = cancel;\n resultFunction.flush = flush;\n resultFunction.pending = pending;\n\n return resultFunction;\n }\n\n public requestAnimationFrame(callback: () => void, targetElement?: Element | null): number {\n let animationFrameId = 0;\n const win = getWindow(targetElement)!;\n\n if (!this._isDisposed) {\n if (!this._animationFrameIds) {\n this._animationFrameIds = {};\n }\n\n let animationFrameCallback = () => {\n try {\n // Now delete the record and call the callback.\n if (this._animationFrameIds) {\n delete this._animationFrameIds[animationFrameId];\n }\n\n callback.apply(this._parent);\n } catch (e) {\n this._logError(e);\n }\n };\n\n animationFrameId = win.requestAnimationFrame\n ? win.requestAnimationFrame(animationFrameCallback)\n : win.setTimeout(animationFrameCallback, 0);\n\n this._animationFrameIds[animationFrameId] = true;\n }\n\n return animationFrameId;\n }\n\n public cancelAnimationFrame(id: number, targetElement?: Element | null): void {\n const win = getWindow(targetElement)!;\n\n if (this._animationFrameIds && this._animationFrameIds[id]) {\n win.cancelAnimationFrame ? win.cancelAnimationFrame(id) : win.clearTimeout(id);\n delete this._animationFrameIds[id];\n }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n protected _logError(e: any): void {\n if (this._onErrorHandler) {\n this._onErrorHandler(e);\n }\n }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type ICancelable any> = {\n flush: () => ReturnType;\n cancel: () => void;\n pending: () => boolean;\n};\n","import { IVirtualElement } from './IVirtualElement';\n/**\n * Determines whether or not an element has the virtual hierarchy extension.\n *\n * @public\n */\nexport function isVirtualElement(element: HTMLElement | IVirtualElement): element is IVirtualElement {\n return element && !!(element)._virtual;\n}\n","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: HTMLElement): HTMLElement | undefined {\n let parent: HTMLElement | undefined;\n if (child && isVirtualElement(child)) {\n parent = child._virtual.parent;\n }\n return parent;\n}\n","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: HTMLElement, allowVirtualParents: boolean = true): HTMLElement | null {\n if (!child) {\n return null;\n }\n\n const parent = allowVirtualParents && getVirtualParent(child);\n\n if (parent) {\n return parent;\n }\n\n // Support looking for parents in shadow DOM\n if (typeof (child as HTMLSlotElement).assignedElements !== 'function' && child.assignedSlot?.parentNode) {\n // Element is slotted\n return child.assignedSlot as HTMLElement;\n } else if (child.parentNode?.nodeType === 11) {\n // nodeType 11 is DOCUMENT_FRAGMENT\n // Element is in shadow root\n return (child.parentNode as ShadowRoot).host as HTMLElement;\n } else {\n return child.parentNode as HTMLElement;\n }\n}\n","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(\n parent: HTMLElement | null,\n child: HTMLElement | null,\n allowVirtualParents: boolean = true,\n): boolean {\n let isContained = false;\n\n if (parent && child) {\n if (allowVirtualParents) {\n if (parent === child) {\n isContained = true;\n } else {\n isContained = false;\n\n while (child) {\n const nextParent: HTMLElement | null = getParent(child);\n\n if (nextParent === parent) {\n isContained = true;\n break;\n }\n\n child = nextParent;\n }\n }\n } else if (parent.contains) {\n isContained = parent.contains(child);\n }\n }\n\n return isContained;\n}\n","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(\n element: HTMLElement | null,\n matchFunction: (element: HTMLElement) => boolean,\n doc?: Document,\n): HTMLElement | null {\n // eslint-disable-next-line no-restricted-globals\n doc ??= document;\n if (!element || element === doc.body || element instanceof Document) {\n return null;\n }\n return matchFunction(element) ? element : findElementRecursive(getParent(element), matchFunction);\n}\n","import { findElementRecursive } from './findElementRecursive';\n\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: HTMLElement, attribute: string, doc?: Document): string | null {\n const elementMatch = findElementRecursive(\n element,\n (testElement: HTMLElement) => testElement.hasAttribute(attribute),\n doc,\n );\n\n return elementMatch && elementMatch.getAttribute(attribute);\n}\n","export const getActiveElement = (doc: Document): Element | null => {\n let ae = doc.activeElement;\n\n while (ae?.shadowRoot) {\n ae = ae.shadowRoot.activeElement;\n }\n\n return ae;\n};\n","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: HTMLElement, allowVirtualChildren: boolean = true): HTMLElement[] {\n const children: HTMLElement[] = [];\n if (parent) {\n for (let i = 0; i < parent.children.length; i++) {\n children.push(parent.children.item(i) as HTMLElement);\n }\n if (allowVirtualChildren && isVirtualElement(parent)) {\n children.push(...parent._virtual.children);\n }\n }\n return children;\n}\n","export const getEventTarget = (event: Event): HTMLElement | null => {\n let target = event.target as HTMLElement;\n if (target && target.shadowRoot) {\n target = event.composedPath()[0] as HTMLElement;\n }\n\n return target;\n};\n","export const DATA_PORTAL_ATTRIBUTE = 'data-portal-element';\n\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: HTMLElement): void {\n element.setAttribute(DATA_PORTAL_ATTRIBUTE, 'true');\n}\n","import { findElementRecursive } from './findElementRecursive';\nimport { DATA_PORTAL_ATTRIBUTE } from './setPortalAttribute';\n\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: HTMLElement, parent?: HTMLElement, doc?: Document): boolean {\n const elementMatch = findElementRecursive(\n target,\n (testElement: HTMLElement) => parent === testElement || !!testElement.hasAttribute?.(DATA_PORTAL_ATTRIBUTE),\n doc,\n );\n return elementMatch !== null && !!elementMatch.hasAttribute?.(DATA_PORTAL_ATTRIBUTE);\n}\n","import { IVirtualElement } from './IVirtualElement';\n/**\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: HTMLElement, parent: HTMLElement | null): void {\n const virtualChild = child;\n const virtualParent = parent;\n\n if (!virtualChild._virtual) {\n virtualChild._virtual = {\n children: [],\n };\n }\n\n const oldParent = virtualChild._virtual.parent;\n\n if (oldParent && oldParent !== parent) {\n // Remove the child from its old parent.\n const index = oldParent._virtual.children.indexOf(virtualChild);\n\n if (index > -1) {\n oldParent._virtual.children.splice(index, 1);\n }\n }\n\n virtualChild._virtual.parent = virtualParent || undefined;\n\n if (virtualParent) {\n if (!virtualParent._virtual) {\n virtualParent._virtual = {\n children: [],\n };\n }\n\n virtualParent._virtual.children.push(virtualChild);\n }\n}\n","import { canUseDOM } from './canUseDOM';\n\n/**\n * Helper to get the document object. Note that in popup window cases, document\n * might be the wrong document, which is why we look at ownerDocument for the\n * truth.\n *\n * @public\n */\nexport function getDocument(rootElement?: HTMLElement | null): Document | undefined {\n // eslint-disable-next-line no-restricted-globals\n if (!canUseDOM() || typeof document === 'undefined') {\n return undefined;\n } else {\n const el = rootElement as Element;\n\n // eslint-disable-next-line no-restricted-globals\n return el && el.ownerDocument ? el.ownerDocument : document;\n }\n}\n","import { elementContainsAttribute } from './dom/elementContainsAttribute';\nimport { elementContains } from './dom/elementContains';\nimport { getParent } from './dom/getParent';\nimport { getWindow } from './dom/getWindow';\nimport { getDocument } from './dom/getDocument';\n\nconst IS_FOCUSABLE_ATTRIBUTE = 'data-is-focusable';\nconst IS_VISIBLE_ATTRIBUTE = 'data-is-visible';\nconst FOCUSZONE_ID_ATTRIBUTE = 'data-focuszone-id';\nconst FOCUSZONE_SUB_ATTRIBUTE = 'data-is-sub-focuszone';\n\n/**\n * Gets the first focusable element.\n *\n * @public\n */\nexport function getFirstFocusable(\n rootElement: HTMLElement,\n currentElement: HTMLElement,\n includeElementsInFocusZones?: boolean,\n includeShadowRoots?: boolean,\n): HTMLElement | null {\n return getNextElement(\n rootElement,\n currentElement,\n true /*checkNode*/,\n false /*suppressParentTraversal*/,\n false /*suppressChildTraversal*/,\n includeElementsInFocusZones,\n undefined,\n undefined,\n undefined,\n includeShadowRoots,\n );\n}\n\n/**\n * Gets the last focusable element.\n *\n * @public\n */\nexport function getLastFocusable(\n rootElement: HTMLElement,\n currentElement: HTMLElement,\n includeElementsInFocusZones?: boolean,\n includeShadowRoots?: boolean,\n): HTMLElement | null {\n return getPreviousElement(\n rootElement,\n currentElement,\n true /*checkNode*/,\n false /*suppressParentTraversal*/,\n true /*traverseChildren*/,\n includeElementsInFocusZones,\n undefined,\n undefined,\n includeShadowRoots,\n );\n}\n\n/**\n * Gets the first tabbable element. (The difference between focusable and tabbable is that tabbable elements are\n * focusable elements that also have tabIndex != -1.)\n * @param rootElement - The parent element to search beneath.\n * @param currentElement - The descendant of rootElement to start the search at. This element is the first one checked,\n * and iteration continues forward. Typical use passes rootElement.firstChild.\n * @param includeElementsInFocusZones - true if traversal should go into FocusZone descendants.\n * @param checkNode - Include currentElement in search when true. Defaults to true.\n * @public\n */\nexport function getFirstTabbable(\n rootElement: HTMLElement,\n currentElement: HTMLElement,\n includeElementsInFocusZones?: boolean,\n checkNode: boolean = true,\n includeShadowRoots?: boolean,\n): HTMLElement | null {\n return getNextElement(\n rootElement,\n currentElement,\n checkNode,\n false /*suppressParentTraversal*/,\n false /*suppressChildTraversal*/,\n includeElementsInFocusZones,\n false /*allowFocusRoot*/,\n true /*tabbable*/,\n undefined,\n includeShadowRoots,\n );\n}\n\n/**\n * Gets the last tabbable element. (The difference between focusable and tabbable is that tabbable elements are\n * focusable elements that also have tabIndex != -1.)\n * @param rootElement - The parent element to search beneath.\n * @param currentElement - The descendant of rootElement to start the search at. This element is the first one checked,\n * and iteration continues in reverse. Typical use passes rootElement.lastChild.\n * @param includeElementsInFocusZones - true if traversal should go into FocusZone descendants.\n * @param checkNode - Include currentElement in search when true. Defaults to true.\n * @public\n */\nexport function getLastTabbable(\n rootElement: HTMLElement,\n currentElement: HTMLElement,\n includeElementsInFocusZones?: boolean,\n checkNode: boolean = true,\n includeShadowRoots?: boolean,\n): HTMLElement | null {\n return getPreviousElement(\n rootElement,\n currentElement,\n checkNode,\n false /*suppressParentTraversal*/,\n true /*traverseChildren*/,\n includeElementsInFocusZones,\n false /*allowFocusRoot*/,\n true /*tabbable*/,\n includeShadowRoots,\n );\n}\n\n/**\n * Attempts to focus the first focusable element that is a child or child's child of the rootElement.\n *\n * @public\n * @param rootElement - Element to start the search for a focusable child.\n * @param bypassHiddenElements - If true, focus will be not be set on hidden elements.\n * @returns True if focus was set, false if it was not.\n */\nexport function focusFirstChild(\n rootElement: HTMLElement,\n bypassHiddenElements?: boolean,\n includeShadowRoots?: boolean,\n): boolean {\n let element: HTMLElement | null = getNextElement(\n rootElement,\n rootElement,\n true,\n false,\n false,\n true,\n undefined,\n undefined,\n bypassHiddenElements,\n includeShadowRoots,\n );\n\n if (element) {\n focusAsync(element);\n return true;\n }\n return false;\n}\n\n/**\n * Traverse to find the previous element.\n * If tabbable is true, the element must have tabIndex != -1.\n *\n * @public\n */\nexport function getPreviousElement(\n rootElement: HTMLElement,\n currentElement: HTMLElement | null,\n checkNode?: boolean,\n suppressParentTraversal?: boolean,\n traverseChildren?: boolean,\n includeElementsInFocusZones?: boolean,\n allowFocusRoot?: boolean,\n tabbable?: boolean,\n includeShadowRoots?: boolean,\n): HTMLElement | null {\n if (!currentElement || (!allowFocusRoot && currentElement === rootElement)) {\n return null;\n }\n\n let isCurrentElementVisible = isElementVisible(currentElement);\n\n // Check its children.\n if (\n traverseChildren &&\n isCurrentElementVisible &&\n (includeElementsInFocusZones || !(isElementFocusZone(currentElement) || isElementFocusSubZone(currentElement)))\n ) {\n const lastElementChild = (currentElement.lastElementChild ||\n (includeShadowRoots && currentElement.shadowRoot?.lastElementChild)) as HTMLElement;\n\n const childMatch = getPreviousElement(\n rootElement,\n lastElementChild,\n true,\n true,\n true,\n includeElementsInFocusZones,\n allowFocusRoot,\n tabbable,\n includeShadowRoots,\n );\n\n if (childMatch) {\n if ((tabbable && isElementTabbable(childMatch, true, includeShadowRoots)) || !tabbable) {\n return childMatch;\n }\n\n const childMatchSiblingMatch = getPreviousElement(\n rootElement,\n childMatch.previousElementSibling as HTMLElement,\n true,\n true,\n true,\n includeElementsInFocusZones,\n allowFocusRoot,\n tabbable,\n includeShadowRoots,\n );\n if (childMatchSiblingMatch) {\n return childMatchSiblingMatch;\n }\n\n let childMatchParent = childMatch.parentElement;\n\n // At this point if we have not found any potential matches\n // start looking at the rest of the subtree under the currentParent.\n // NOTE: We do not want to recurse here because doing so could\n // cause elements to get skipped.\n while (childMatchParent && childMatchParent !== currentElement) {\n const childMatchParentMatch = getPreviousElement(\n rootElement,\n childMatchParent.previousElementSibling as HTMLElement,\n true,\n true,\n true,\n includeElementsInFocusZones,\n allowFocusRoot,\n tabbable,\n includeShadowRoots,\n );\n\n if (childMatchParentMatch) {\n return childMatchParentMatch;\n }\n\n childMatchParent = childMatchParent.parentElement;\n }\n }\n }\n\n // Check the current node, if it's not the first traversal.\n if (checkNode && isCurrentElementVisible && isElementTabbable(currentElement, tabbable, includeShadowRoots)) {\n return currentElement;\n }\n\n // Check its previous sibling.\n const siblingMatch = getPreviousElement(\n rootElement,\n currentElement.previousElementSibling as HTMLElement,\n true,\n true,\n true,\n includeElementsInFocusZones,\n allowFocusRoot,\n tabbable,\n includeShadowRoots,\n );\n\n if (siblingMatch) {\n return siblingMatch;\n }\n\n // Check its parent.\n if (!suppressParentTraversal) {\n return getPreviousElement(\n rootElement,\n currentElement.parentElement,\n true,\n false,\n false,\n includeElementsInFocusZones,\n allowFocusRoot,\n tabbable,\n includeShadowRoots,\n );\n }\n\n return null;\n}\n\n/**\n * Traverse to find the next focusable element.\n * If tabbable is true, the element must have tabIndex != -1.\n *\n * @public\n * @param checkNode - Include currentElement in search when true.\n */\nexport function getNextElement(\n rootElement: HTMLElement,\n currentElement: HTMLElement | null,\n checkNode?: boolean,\n suppressParentTraversal?: boolean,\n suppressChildTraversal?: boolean,\n includeElementsInFocusZones?: boolean,\n allowFocusRoot?: boolean,\n tabbable?: boolean,\n bypassHiddenElements?: boolean,\n includeShadowRoots?: boolean,\n): HTMLElement | null {\n if (!currentElement || (currentElement === rootElement && suppressChildTraversal && !allowFocusRoot)) {\n return null;\n }\n\n const checkElementVisibility = bypassHiddenElements ? isElementVisibleAndNotHidden : isElementVisible;\n\n let isCurrentElementVisible = checkElementVisibility(currentElement);\n\n // Check the current node, if it's not the first traversal.\n if (checkNode && isCurrentElementVisible && isElementTabbable(currentElement, tabbable, includeShadowRoots)) {\n return currentElement;\n }\n\n // Check its children.\n if (\n !suppressChildTraversal &&\n isCurrentElementVisible &&\n (includeElementsInFocusZones || !(isElementFocusZone(currentElement) || isElementFocusSubZone(currentElement)))\n ) {\n const firstElementchild = (currentElement.firstElementChild ||\n (includeShadowRoots && currentElement.shadowRoot?.firstElementChild)) as HTMLElement;\n\n const childMatch = getNextElement(\n rootElement,\n firstElementchild,\n true,\n true,\n false,\n includeElementsInFocusZones,\n allowFocusRoot,\n tabbable,\n bypassHiddenElements,\n includeShadowRoots,\n );\n\n if (childMatch) {\n return childMatch;\n }\n }\n\n if (currentElement === rootElement) {\n return null;\n }\n\n // Check its sibling.\n const siblingMatch = getNextElement(\n rootElement,\n currentElement.nextElementSibling as HTMLElement,\n true,\n true,\n false,\n includeElementsInFocusZones,\n allowFocusRoot,\n tabbable,\n bypassHiddenElements,\n includeShadowRoots,\n );\n\n if (siblingMatch) {\n return siblingMatch;\n }\n\n if (!suppressParentTraversal) {\n return getNextElement(\n rootElement,\n currentElement.parentElement,\n false,\n false,\n true,\n includeElementsInFocusZones,\n allowFocusRoot,\n tabbable,\n bypassHiddenElements,\n includeShadowRoots,\n );\n }\n\n return null;\n}\n\n/**\n * Determines if an element is visible.\n *\n * @public\n */\nexport function isElementVisible(element: HTMLElement | undefined | null): boolean {\n // If the element is not valid, return false.\n if (!element || !element.getAttribute) {\n return false;\n }\n\n const visibilityAttribute = element.getAttribute(IS_VISIBLE_ATTRIBUTE);\n\n // If the element is explicitly marked with the visibility attribute, return that value as boolean.\n if (visibilityAttribute !== null && visibilityAttribute !== undefined) {\n return visibilityAttribute === 'true';\n }\n\n // Fallback to other methods of determining actual visibility.\n return (\n element.offsetHeight !== 0 ||\n element.offsetParent !== null ||\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (element as any).isVisible === true\n ); // used as a workaround for testing.\n}\n\n/**\n * Determines if an element is visible and not hidden\n * @param element - Element to check\n * @returns Returns true if the given element is visible and not hidden\n *\n * @public\n */\nexport function isElementVisibleAndNotHidden(element: HTMLElement | undefined | null, win?: Window): boolean {\n const theWin = win ?? getWindow()!;\n return (\n !!element &&\n isElementVisible(element) &&\n !element.hidden &&\n theWin.getComputedStyle(element).visibility !== 'hidden'\n );\n}\n\n/**\n * Determines if an element can receive focus programmatically or via a mouse click.\n * If checkTabIndex is true, additionally checks to ensure the element can be focused with the tab key,\n * meaning tabIndex != -1.\n *\n * @public\n */\nexport function isElementTabbable(\n element: HTMLElement,\n checkTabIndex?: boolean,\n checkShadowRoot: boolean = true,\n): boolean {\n // If this element is null or is disabled, it is not considered tabbable.\n if (!element || (element as HTMLButtonElement).disabled) {\n return false;\n }\n\n let tabIndex = 0;\n let tabIndexAttributeValue = null;\n\n if (element && element.getAttribute) {\n tabIndexAttributeValue = element.getAttribute('tabIndex');\n\n if (tabIndexAttributeValue) {\n tabIndex = parseInt(tabIndexAttributeValue, 10);\n }\n }\n\n let isFocusableAttribute = element.getAttribute ? element.getAttribute(IS_FOCUSABLE_ATTRIBUTE) : null;\n let isTabIndexSet = tabIndexAttributeValue !== null && tabIndex >= 0;\n let delegatesFocus = checkShadowRoot && element.shadowRoot ? !!element.shadowRoot.delegatesFocus : false;\n\n const result =\n !!element &&\n isFocusableAttribute !== 'false' &&\n (element.tagName === 'A' ||\n element.tagName === 'BUTTON' ||\n element.tagName === 'INPUT' ||\n element.tagName === 'TEXTAREA' ||\n element.tagName === 'SELECT' ||\n isFocusableAttribute === 'true' ||\n isTabIndexSet ||\n delegatesFocus);\n\n return checkTabIndex ? tabIndex !== -1 && result : result;\n}\n\n/**\n * Determines if a given element is a focus zone.\n *\n * @public\n */\nexport function isElementFocusZone(element?: HTMLElement): boolean {\n return !!(element && element.getAttribute && !!element.getAttribute(FOCUSZONE_ID_ATTRIBUTE));\n}\n\n/**\n * Determines if a given element is a focus sub zone.\n *\n * @public\n */\nexport function isElementFocusSubZone(element?: HTMLElement): boolean {\n return !!(element && element.getAttribute && element.getAttribute(FOCUSZONE_SUB_ATTRIBUTE) === 'true');\n}\n\n/**\n * Determines if an element, or any of its children, contain focus.\n *\n * @public\n */\nexport function doesElementContainFocus(element: HTMLElement): boolean {\n let doc = getDocument(element);\n let currentActiveElement: HTMLElement | undefined = doc && (doc.activeElement as HTMLElement);\n if (currentActiveElement && elementContains(element, currentActiveElement)) {\n return true;\n }\n return false;\n}\n\n/**\n * Determines if an, or any of its ancestors, sepcificies that it doesn't want focus to wrap\n * @param element - element to start searching from\n * @param noWrapDataAttribute - the no wrap data attribute to match (either)\n * @returns true if focus should wrap, false otherwise\n */\nexport function shouldWrapFocus(\n element: HTMLElement,\n noWrapDataAttribute: 'data-no-vertical-wrap' | 'data-no-horizontal-wrap',\n doc?: Document,\n): boolean {\n const theDoc = doc ?? getDocument()!;\n return elementContainsAttribute(element, noWrapDataAttribute, theDoc) === 'true' ? false : true;\n}\n\nlet animationId: number | undefined = undefined;\n\n/**\n * Sets focus to an element asynchronously. The focus will be set at the next browser repaint,\n * meaning it won't cause any extra recalculations. If more than one focusAsync is called during one frame,\n * only the latest called focusAsync element will actually be focused\n * @param element - The element to focus\n */\nexport function focusAsync(element: HTMLElement | { focus: () => void } | undefined | null): void {\n if (element) {\n const win = getWindow(element as Element);\n\n if (win) {\n // cancel any previous focus queues\n if (animationId !== undefined) {\n win.cancelAnimationFrame(animationId);\n }\n\n // element.focus() is a no-op if the element is no longer in the DOM, meaning this is always safe\n animationId = win.requestAnimationFrame(() => {\n element && element.focus();\n\n // We are done focusing for this frame, so reset the queued focus element\n animationId = undefined;\n });\n }\n }\n}\n\n/**\n * Finds the closest focusable element via an index path from a parent. See\n * `getElementIndexPath` for getting an index path from an element to a child.\n */\nexport function getFocusableByIndexPath(parent: HTMLElement, path: number[]): HTMLElement | undefined {\n let element = parent;\n\n for (const index of path) {\n const nextChild = element.children[Math.min(index, element.children.length - 1)] as HTMLElement;\n\n if (!nextChild) {\n break;\n }\n element = nextChild;\n }\n\n element =\n isElementTabbable(element) && isElementVisible(element)\n ? element\n : getNextElement(parent, element, true) || getPreviousElement(parent, element)!;\n\n return element as HTMLElement;\n}\n\n/**\n * Finds the element index path from a parent element to a child element.\n *\n * If you had this node structure: \"A has children [B, C] and C has child D\",\n * the index path from A to D would be [1, 0], or `parent.chidren[1].children[0]`.\n */\nexport function getElementIndexPath(fromElement: HTMLElement, toElement: HTMLElement): number[] {\n const path: number[] = [];\n\n while (toElement && fromElement && toElement !== fromElement) {\n const parent = getParent(toElement, true);\n\n if (parent === null) {\n return [];\n }\n\n path.unshift(Array.prototype.indexOf.call(parent.children, toElement));\n toElement = parent;\n }\n\n return path;\n}\n","import type { IRectangle } from '../IRectangle';\nimport { getWindow } from './getWindow';\n\n/**\n * Helper to get bounding client rect. Passing in window will get the window size.\n *\n * @public\n */\nexport function getRect(element: HTMLElement | Window | null, win?: Window): IRectangle | undefined {\n const theWin =\n win ?? (!element || (element && element.hasOwnProperty('devicePixelRatio')))\n ? getWindow()\n : getWindow(element as HTMLElement)!;\n let rect: IRectangle | undefined;\n if (element) {\n if (element === theWin) {\n rect = {\n left: 0,\n top: 0,\n width: theWin.innerWidth,\n height: theWin.innerHeight,\n right: theWin.innerWidth,\n bottom: theWin.innerHeight,\n };\n } else if ((element as { getBoundingClientRect?: unknown }).getBoundingClientRect) {\n rect = (element as HTMLElement).getBoundingClientRect();\n }\n }\n return rect;\n}\n","export function on(\n element: Element | Window | Document,\n eventName: string,\n callback: (ev: Event) => void,\n options?: boolean,\n): () => void {\n element.addEventListener(eventName, callback, options);\n\n return () => element.removeEventListener(eventName, callback, options);\n}\n","/**\n * Compares a to b and b to a.\n *\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function shallowCompare(a: TA, b: TB): boolean {\n if (!a || !b) {\n // only return true if both a and b are falsy\n return !a && !b;\n }\n\n for (let propName in a) {\n if ((a as Object).hasOwnProperty(propName)) {\n if (!(b as Object).hasOwnProperty(propName) || (b as { [key: string]: unknown })[propName] !== a[propName]) {\n return false;\n }\n }\n }\n for (let propName in b) {\n if ((b as Object).hasOwnProperty(propName)) {\n if (!(a as Object).hasOwnProperty(propName)) {\n return false;\n }\n }\n }\n return true;\n}\n\n/**\n * Makes a resulting merge of a bunch of objects. Pass in the target object followed by 1 or more\n * objects as arguments and they will be merged sequentially into the target. Note that this will\n * shallow merge; it will not create new cloned values for target members.\n *\n * @public\n * @param target - Target object to merge following object arguments into.\n * @param args - One or more objects that will be mixed into the target in the order they are provided.\n * @returns Resulting merged target.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function assign(this: any, target: any, ...args: any[]): any {\n return filteredAssign.apply(this, [null, target].concat(args));\n}\n\n/**\n * Makes a resulting merge of a bunch of objects, but allows a filter function to be passed in to filter\n * the resulting merges. This allows for scenarios where you want to merge \"everything except that one thing\"\n * or \"properties that start with data-\". Note that this will shallow merge; it will not create new cloned\n * values for target members.\n *\n * @public\n * @param isAllowed - Callback to determine if the given propName is allowed in the result.\n * @param target - Target object to merge following object arguments into.\n * @param args - One or more objects that will be mixed into the target in the order they are provided.\n * @returns Resulting merged target.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function filteredAssign(isAllowed: (propName: string) => boolean, target: any, ...args: any[]): any {\n target = target || {};\n\n for (let sourceObject of args) {\n if (sourceObject) {\n for (let propName in sourceObject) {\n if (sourceObject.hasOwnProperty(propName) && (!isAllowed || isAllowed(propName))) {\n target[propName] = sourceObject[propName];\n }\n }\n }\n }\n\n return target;\n}\n\n/**\n * Takes an enum and iterates over each value of the enum (as a string), running the callback on each,\n * returning a mapped array.\n * @param theEnum - Enum to iterate over\n * @param callback - The first parameter the name of the entry, and the second parameter is the value\n * of that entry, which is the value you'd normally use when using the enum (usually a number).\n */\nexport function mapEnumByName(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n theEnum: any,\n callback: (name?: string, value?: string | number) => T | undefined,\n): (T | undefined)[] | undefined {\n // map to satisfy compiler since it doesn't realize we strip out undefineds in the .filter() call\n return Object.keys(theEnum)\n .map((p: string | number) => {\n // map on each property name as a string\n if (String(Number(p)) !== p) {\n // if the property is not just a number (because enums in TypeScript will map both ways)\n return callback(p as string, theEnum[p]);\n }\n return undefined;\n })\n .filter((v: T | undefined) => !!v); // only return elements with values\n}\n\n/**\n * Get all values in an object dictionary\n *\n * @param obj - The dictionary to get values for\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function values(obj: any): T[] {\n return Object.keys(obj).reduce((arr: T[], key: string): T[] => {\n arr.push(obj[key]);\n return arr;\n }, []);\n}\n\n/**\n * Tiny helper to do the minimal amount of work in duplicating an object but omitting some\n * props. This ends up faster than using object ...rest or reduce to filter.\n *\n * This behaves very much like filteredAssign, but does not merge many objects together,\n * uses an exclusion object map, and avoids spreads all for optimal performance.\n *\n * See perf test for background:\n * https://jsperf.com/omit-vs-rest-vs-reduce/1\n *\n * @param obj - The object to clone\n * @param exclusions - The array of keys to exclude\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function omit>(obj: TObj, exclusions: (keyof TObj)[]): TObj {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const result: Record = {};\n\n for (const key in obj) {\n if (exclusions.indexOf(key) === -1 && obj.hasOwnProperty(key)) {\n result[key] = obj[key];\n }\n }\n\n return result as TObj;\n}\n","import { getDocument } from './dom';\nimport { assign } from './object';\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\n/**\n * @internal\n */\nexport interface IEventRecord {\n target: any;\n eventName: string;\n parent: any;\n callback: (args?: any) => void;\n elementCallback?: (...args: any[]) => void;\n objectCallback?: (args?: any) => void;\n options?: boolean | AddEventListenerOptions;\n}\n\n/**\n * @internal\n */\nexport interface IEventRecordsByName {\n [eventName: string]: IEventRecordList;\n}\n\n/**\n * @internal\n */\nexport interface IEventRecordList {\n [id: string]: IEventRecord[] | number;\n count: number;\n}\n\n/**\n * @internal\n */\nexport interface IDeclaredEventsByName {\n [eventName: string]: boolean;\n}\n\n/** An instance of EventGroup allows anything with a handle to it to trigger events on it.\n * If the target is an HTMLElement, the event will be attached to the element and can be\n * triggered as usual (like clicking for onClick).\n * The event can be triggered by calling EventGroup.raise() here. If the target is an\n * HTMLElement, the event gets raised and is handled by the browser. Otherwise, it gets\n * handled here in EventGroup, and the handler is called in the context of the parent\n * (which is passed in in the constructor).\n *\n * @public\n * {@docCategory EventGroup}\n */\nexport class EventGroup {\n private static _uniqueId: number = 0;\n private _parent: any;\n private _eventRecords: IEventRecord[];\n private _id: number = EventGroup._uniqueId++;\n private _isDisposed!: boolean;\n\n /** For IE8, bubbleEvent is ignored here and must be dealt with by the handler.\n * Events raised here by default have bubbling set to false and cancelable set to true.\n * This applies also to built-in events being raised manually here on HTMLElements,\n * which may lead to unexpected behavior if it differs from the defaults.\n *\n */\n public static raise(\n target: any,\n eventName: string,\n eventArgs?: any,\n bubbleEvent?: boolean,\n doc?: Document,\n ): boolean | undefined {\n let retVal;\n const theDoc = doc ?? getDocument()!;\n\n if (EventGroup._isElement(target)) {\n if (typeof theDoc !== 'undefined' && theDoc.createEvent) {\n let ev = theDoc.createEvent('HTMLEvents');\n\n // eslint-disable-next-line deprecation/deprecation\n ev.initEvent(eventName, bubbleEvent || false, true);\n\n assign(ev, eventArgs);\n\n retVal = target.dispatchEvent(ev);\n } else if (typeof theDoc !== 'undefined' && (theDoc as any).createEventObject) {\n // IE8\n let evObj = (theDoc as any).createEventObject(eventArgs);\n // cannot set cancelBubble on evObj, fireEvent will overwrite it\n target.fireEvent('on' + eventName, evObj);\n }\n } else {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore -- FIXME: strictBindCallApply error - https://github.com/microsoft/fluentui/issues/17331\n while (target && retVal !== false) {\n let events = target.__events__;\n let eventRecords = events ? events[eventName] : null;\n\n if (eventRecords) {\n for (let id in eventRecords) {\n if (eventRecords.hasOwnProperty(id)) {\n let eventRecordList = eventRecords[id];\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore -- FIXME: strictBindCallApply error - https://github.com/microsoft/fluentui/issues/17331\n for (let listIndex = 0; retVal !== false && listIndex < eventRecordList.length; listIndex++) {\n let record = eventRecordList[listIndex];\n\n if (record.objectCallback) {\n retVal = record.objectCallback.call(record.parent, eventArgs);\n }\n }\n }\n }\n }\n\n // If the target has a parent, bubble the event up.\n target = bubbleEvent ? target.parent : null;\n }\n }\n\n return retVal;\n }\n\n public static isObserved(target: any, eventName: string): boolean {\n let events = target && target.__events__;\n\n return !!events && !!events[eventName];\n }\n\n /** Check to see if the target has declared support of the given event. */\n public static isDeclared(target: any, eventName: string): boolean {\n let declaredEvents = target && target.__declaredEvents;\n\n return !!declaredEvents && !!declaredEvents[eventName];\n }\n\n public static stopPropagation(event: any): void {\n if (event.stopPropagation) {\n event.stopPropagation();\n } else {\n // IE8\n event.cancelBubble = true;\n }\n }\n\n private static _isElement(target: HTMLElement): boolean {\n return (\n !!target && (!!target.addEventListener || (typeof HTMLElement !== 'undefined' && target instanceof HTMLElement))\n );\n }\n\n /** parent: the context in which events attached to non-HTMLElements are called */\n public constructor(parent: any) {\n this._parent = parent;\n this._eventRecords = [];\n }\n\n public dispose(): void {\n if (!this._isDisposed) {\n this._isDisposed = true;\n\n this.off();\n this._parent = null;\n }\n }\n\n /** On the target, attach a set of events, where the events object is a name to function mapping. */\n public onAll(target: any, events: { [key: string]: (args?: any) => void }, useCapture?: boolean): void {\n for (let eventName in events) {\n if (events.hasOwnProperty(eventName)) {\n this.on(target, eventName, events[eventName], useCapture);\n }\n }\n }\n\n /**\n * On the target, attach an event whose handler will be called in the context of the parent\n * of this instance of EventGroup.\n */\n public on(\n target: any,\n eventName: string,\n callback: (args?: any) => void,\n options?: boolean | AddEventListenerOptions,\n ): void {\n if (eventName.indexOf(',') > -1) {\n let events = eventName.split(/[ ,]+/);\n\n for (let i = 0; i < events.length; i++) {\n this.on(target, events[i], callback, options);\n }\n } else {\n let parent = this._parent;\n let eventRecord: IEventRecord = {\n target,\n eventName,\n parent,\n callback,\n options,\n };\n\n // Initialize and wire up the record on the target, so that it can call the callback if the event fires.\n let events = (target.__events__ = target.__events__ || {});\n events[eventName] =\n events[eventName] ||\n {\n count: 0,\n };\n events[eventName][this._id] = events[eventName][this._id] || [];\n (events[eventName][this._id]).push(eventRecord);\n events[eventName].count++;\n\n if (EventGroup._isElement(target)) {\n let processElementEvent = (...args: any[]) => {\n if (this._isDisposed) {\n return;\n }\n\n let result;\n try {\n result = callback.apply(parent, args);\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore -- FIXME: strictBindCallApply error - https://github.com/microsoft/fluentui/issues/17331\n if (result === false && args[0]) {\n let e = args[0];\n\n if (e.preventDefault) {\n e.preventDefault();\n }\n\n if (e.stopPropagation) {\n e.stopPropagation();\n }\n\n e.cancelBubble = true;\n }\n } catch (e) {\n // ignore\n }\n\n return result;\n };\n\n eventRecord.elementCallback = processElementEvent;\n\n if (target.addEventListener) {\n (target).addEventListener(eventName, processElementEvent, options);\n } else if (target.attachEvent) {\n // IE8\n target.attachEvent('on' + eventName, processElementEvent);\n }\n } else {\n let processObjectEvent = (...args: any[]) => {\n if (this._isDisposed) {\n return;\n }\n\n return callback.apply(parent, args);\n };\n\n eventRecord.objectCallback = processObjectEvent;\n }\n\n // Remember the record locally, so that it can be removed.\n this._eventRecords.push(eventRecord);\n }\n }\n\n public off(\n target?: any,\n eventName?: string,\n callback?: (args?: any) => void,\n options?: boolean | AddEventListenerOptions,\n ): void {\n for (let i = 0; i < this._eventRecords.length; i++) {\n let eventRecord = this._eventRecords[i];\n if (\n (!target || target === eventRecord.target) &&\n (!eventName || eventName === eventRecord.eventName) &&\n (!callback || callback === eventRecord.callback) &&\n (typeof options !== 'boolean' || options === eventRecord.options)\n ) {\n let events = eventRecord.target.__events__;\n let targetArrayLookup = events[eventRecord.eventName];\n let targetArray = targetArrayLookup ? targetArrayLookup[this._id] : null;\n\n // We may have already target's entries, so check for null.\n if (targetArray) {\n if (targetArray.length === 1 || !callback) {\n targetArrayLookup.count -= targetArray.length;\n delete events[eventRecord.eventName][this._id];\n } else {\n targetArrayLookup.count--;\n targetArray.splice(targetArray.indexOf(eventRecord), 1);\n }\n\n if (!targetArrayLookup.count) {\n delete events[eventRecord.eventName];\n }\n }\n\n if (eventRecord.elementCallback) {\n if (eventRecord.target.removeEventListener) {\n eventRecord.target.removeEventListener(\n eventRecord.eventName,\n eventRecord.elementCallback,\n eventRecord.options,\n );\n } else if (eventRecord.target.detachEvent) {\n // IE8\n eventRecord.target.detachEvent('on' + eventRecord.eventName, eventRecord.elementCallback);\n }\n }\n\n this._eventRecords.splice(i--, 1);\n }\n }\n }\n\n /** Trigger the given event in the context of this instance of EventGroup. */\n public raise(eventName: string, eventArgs?: any, bubbleEvent?: boolean): boolean | undefined {\n return EventGroup.raise(this._parent, eventName, eventArgs, bubbleEvent);\n }\n\n /** Declare an event as being supported by this instance of EventGroup. */\n public declare(event: string | string[]): void {\n let declaredEvents = (this._parent.__declaredEvents = this._parent.__declaredEvents || {});\n\n if (typeof event === 'string') {\n declaredEvents[event] = true;\n } else {\n for (let i = 0; i < event.length; i++) {\n declaredEvents[event[i]] = true;\n }\n }\n }\n}\n","import { getDocument } from './dom/getDocument';\nimport { mergeStyles } from '@fluentui/merge-styles';\nimport { EventGroup } from './EventGroup';\nimport { getWindow } from './dom/getWindow';\n\nlet _scrollbarWidth: number;\nlet _bodyScrollDisabledCount = 0;\n\nconst DisabledScrollClassName = mergeStyles({\n overflow: 'hidden !important' as 'hidden',\n});\n\n/**\n * Placing this attribute on scrollable divs optimizes detection to know\n * if the div is scrollable or not (given we can avoid expensive operations\n * like getComputedStyle.)\n *\n * @public\n */\nexport const DATA_IS_SCROLLABLE_ATTRIBUTE = 'data-is-scrollable';\n\n/**\n * Allows the user to scroll within a element,\n * while preventing the user from scrolling the body\n */\nexport const allowScrollOnElement = (element: HTMLElement | null, events: EventGroup): void => {\n const window = getWindow(element);\n\n if (!element || !window) {\n return;\n }\n\n let _previousClientY = 0;\n let _element: Element | null = null;\n let computedStyles: CSSStyleDeclaration | undefined = window.getComputedStyle(element);\n\n // remember the clientY for future calls of _preventOverscrolling\n const _saveClientY = (event: TouchEvent): void => {\n if (event.targetTouches.length === 1) {\n _previousClientY = event.targetTouches[0].clientY;\n }\n };\n\n // prevent the body from scrolling when the user attempts\n // to scroll past the top or bottom of the element\n const _preventOverscrolling = (event: TouchEvent): void => {\n // only respond to a single-finger touch\n if (event.targetTouches.length !== 1) {\n return;\n }\n\n // prevent the body touchmove handler from firing\n // so that scrolling is allowed within the element\n event.stopPropagation();\n\n if (!_element) {\n return;\n }\n\n const clientY = event.targetTouches[0].clientY - _previousClientY;\n\n const scrollableParent = findScrollableParent(event.target as HTMLElement) as HTMLElement;\n if (scrollableParent && _element !== scrollableParent) {\n _element = scrollableParent;\n computedStyles = window.getComputedStyle(_element);\n }\n\n const scrollTop = _element.scrollTop;\n const isColumnReverse = computedStyles?.flexDirection === 'column-reverse';\n\n // if the element is scrolled to the top,\n // prevent the user from scrolling up\n if (scrollTop === 0 && (isColumnReverse ? clientY < 0 : clientY > 0)) {\n event.preventDefault();\n }\n\n // if the element is scrolled to the bottom,\n // prevent the user from scrolling down\n if (\n _element.scrollHeight - Math.abs(Math.ceil(scrollTop)) <= _element.clientHeight &&\n (isColumnReverse ? clientY > 0 : clientY < 0)\n ) {\n event.preventDefault();\n }\n };\n\n events.on(element, 'touchstart', _saveClientY, { passive: false });\n events.on(element, 'touchmove', _preventOverscrolling, { passive: false });\n\n _element = element;\n};\n\n/**\n * Same as allowScrollOnElement but does not prevent overscrolling.\n */\nexport const allowOverscrollOnElement = (element: HTMLElement | null, events: EventGroup): void => {\n if (!element) {\n return;\n }\n const _allowElementScroll = (event: TouchEvent) => {\n event.stopPropagation();\n };\n events.on(element, 'touchmove', _allowElementScroll, { passive: false });\n};\n\nconst _disableIosBodyScroll = (event: TouchEvent) => {\n event.preventDefault();\n};\n\n/**\n * Disables the body scrolling.\n *\n * @public\n */\nexport function disableBodyScroll(): void {\n let doc = getDocument();\n\n if (doc && doc.body && !_bodyScrollDisabledCount) {\n doc.body.classList.add(DisabledScrollClassName);\n doc.body.addEventListener('touchmove', _disableIosBodyScroll, { passive: false, capture: false });\n }\n\n _bodyScrollDisabledCount++;\n}\n\n/**\n * Enables the body scrolling.\n *\n * @public\n */\nexport function enableBodyScroll(): void {\n if (_bodyScrollDisabledCount > 0) {\n let doc = getDocument();\n\n if (doc && doc.body && _bodyScrollDisabledCount === 1) {\n doc.body.classList.remove(DisabledScrollClassName);\n doc.body.removeEventListener('touchmove', _disableIosBodyScroll);\n }\n\n _bodyScrollDisabledCount--;\n }\n}\n\n/**\n * Calculates the width of a scrollbar for the browser/os.\n *\n * @public\n */\nexport function getScrollbarWidth(doc?: Document): number {\n if (_scrollbarWidth === undefined) {\n const theDoc = doc ?? getDocument()!;\n let scrollDiv: HTMLElement = theDoc.createElement('div');\n scrollDiv.style.setProperty('width', '100px');\n scrollDiv.style.setProperty('height', '100px');\n scrollDiv.style.setProperty('overflow', 'scroll');\n scrollDiv.style.setProperty('position', 'absolute');\n scrollDiv.style.setProperty('top', '-9999px');\n theDoc.body.appendChild(scrollDiv);\n // Get the scrollbar width\n _scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;\n\n // Delete the DIV\n theDoc.body.removeChild(scrollDiv);\n }\n\n return _scrollbarWidth;\n}\n\n/**\n * Traverses up the DOM for the element with the data-is-scrollable=true attribute, or returns\n * document.body.\n *\n * @public\n */\nexport function findScrollableParent(startingElement: HTMLElement | null): HTMLElement | Window | undefined | null {\n let el: HTMLElement | Window | undefined | null = startingElement;\n const doc = getDocument(startingElement)!;\n\n // First do a quick scan for the scrollable attribute.\n while (el && el !== doc.body) {\n if (el.getAttribute(DATA_IS_SCROLLABLE_ATTRIBUTE) === 'true') {\n return el;\n }\n el = el.parentElement;\n }\n\n // If we haven't found it, the use the slower method: compute styles to evaluate if overflow is set.\n el = startingElement;\n\n while (el && el !== doc.body) {\n if (el.getAttribute(DATA_IS_SCROLLABLE_ATTRIBUTE) !== 'false') {\n const computedStyles = getComputedStyle(el);\n let overflowY = computedStyles ? computedStyles.getPropertyValue('overflow-y') : '';\n\n if (overflowY && (overflowY === 'scroll' || overflowY === 'auto')) {\n return el;\n }\n }\n\n el = el.parentElement;\n }\n\n // Fall back to window scroll.\n if (!el || el === doc.body) {\n el = getWindow(startingElement);\n }\n\n return el;\n}\n","/******************************************************************************\nCopyright (c) Microsoft Corporation.\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\nPERFORMANCE OF THIS SOFTWARE.\n***************************************************************************** */\n/* global Reflect, Promise, SuppressedError, Symbol */\n\nvar extendStatics = function(d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n};\n\nexport function __extends(d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n}\n\nexport var __assign = function() {\n __assign = Object.assign || function __assign(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n return t;\n }\n return __assign.apply(this, arguments);\n}\n\nexport function __rest(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}\n\nexport function __decorate(decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n}\n\nexport function __param(paramIndex, decorator) {\n return function (target, key) { decorator(target, key, paramIndex); }\n}\n\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\n function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\n var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\n var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\n var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\n var _, done = false;\n for (var i = decorators.length - 1; i >= 0; i--) {\n var context = {};\n for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\n for (var p in contextIn.access) context.access[p] = contextIn.access[p];\n context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\n var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\n if (kind === \"accessor\") {\n if (result === void 0) continue;\n if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\n if (_ = accept(result.get)) descriptor.get = _;\n if (_ = accept(result.set)) descriptor.set = _;\n if (_ = accept(result.init)) initializers.unshift(_);\n }\n else if (_ = accept(result)) {\n if (kind === \"field\") initializers.unshift(_);\n else descriptor[key] = _;\n }\n }\n if (target) Object.defineProperty(target, contextIn.name, descriptor);\n done = true;\n};\n\nexport function __runInitializers(thisArg, initializers, value) {\n var useValue = arguments.length > 2;\n for (var i = 0; i < initializers.length; i++) {\n value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\n }\n return useValue ? value : void 0;\n};\n\nexport function __propKey(x) {\n return typeof x === \"symbol\" ? x : \"\".concat(x);\n};\n\nexport function __setFunctionName(f, name, prefix) {\n if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\n return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\n};\n\nexport function __metadata(metadataKey, metadataValue) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\n}\n\nexport function __awaiter(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}\n\nexport function __generator(thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (g && (g = 0, op[0] && (_ = 0)), _) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n}\n\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n});\n\nexport function __exportStar(m, o) {\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\n}\n\nexport function __values(o) {\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\n if (m) return m.call(o);\n if (o && typeof o.length === \"number\") return {\n next: function () {\n if (o && i >= o.length) o = void 0;\n return { value: o && o[i++], done: !o };\n }\n };\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\n}\n\nexport function __read(o, n) {\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\n if (!m) return o;\n var i = m.call(o), r, ar = [], e;\n try {\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\n }\n catch (error) { e = { error: error }; }\n finally {\n try {\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\n }\n finally { if (e) throw e.error; }\n }\n return ar;\n}\n\n/** @deprecated */\nexport function __spread() {\n for (var ar = [], i = 0; i < arguments.length; i++)\n ar = ar.concat(__read(arguments[i]));\n return ar;\n}\n\n/** @deprecated */\nexport function __spreadArrays() {\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\n r[k] = a[j];\n return r;\n}\n\nexport function __spreadArray(to, from, pack) {\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n if (ar || !(i in from)) {\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n ar[i] = from[i];\n }\n }\n return to.concat(ar || Array.prototype.slice.call(from));\n}\n\nexport function __await(v) {\n return this instanceof __await ? (this.v = v, this) : new __await(v);\n}\n\nexport function __asyncGenerator(thisArg, _arguments, generator) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;\n function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }\n function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\n function fulfill(value) { resume(\"next\", value); }\n function reject(value) { resume(\"throw\", value); }\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\n}\n\nexport function __asyncDelegator(o) {\n var i, p;\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\n}\n\nexport function __asyncValues(o) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var m = o[Symbol.asyncIterator], i;\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\n}\n\nexport function __makeTemplateObject(cooked, raw) {\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\n return cooked;\n};\n\nvar __setModuleDefault = Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n};\n\nexport function __importStar(mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n}\n\nexport function __importDefault(mod) {\n return (mod && mod.__esModule) ? mod : { default: mod };\n}\n\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n}\n\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\n}\n\nexport function __classPrivateFieldIn(state, receiver) {\n if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\n return typeof state === \"function\" ? receiver === state : state.has(receiver);\n}\n\nexport function __addDisposableResource(env, value, async) {\n if (value !== null && value !== void 0) {\n if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\n var dispose, inner;\n if (async) {\n if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\n dispose = value[Symbol.asyncDispose];\n }\n if (dispose === void 0) {\n if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\n dispose = value[Symbol.dispose];\n if (async) inner = dispose;\n }\n if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\n if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };\n env.stack.push({ value: value, dispose: dispose, async: async });\n }\n else if (async) {\n env.stack.push({ async: true });\n }\n return value;\n}\n\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\n var e = new Error(message);\n return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\n};\n\nexport function __disposeResources(env) {\n function fail(e) {\n env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\n env.hasError = true;\n }\n function next() {\n while (env.stack.length) {\n var rec = env.stack.pop();\n try {\n var result = rec.dispose && rec.dispose.call(rec.value);\n if (rec.async) return Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\n }\n catch (e) {\n fail(e);\n }\n }\n if (env.hasError) throw env.error;\n }\n return next();\n}\n\nexport default {\n __extends,\n __assign,\n __rest,\n __decorate,\n __param,\n __metadata,\n __awaiter,\n __generator,\n __createBinding,\n __exportStar,\n __values,\n __read,\n __spread,\n __spreadArrays,\n __spreadArray,\n __await,\n __asyncGenerator,\n __asyncDelegator,\n __asyncValues,\n __makeTemplateObject,\n __importStar,\n __importDefault,\n __classPrivateFieldGet,\n __classPrivateFieldSet,\n __classPrivateFieldIn,\n __addDisposableResource,\n __disposeResources,\n};\n","/* eslint-disable no-console */\n\nlet _warningCallback: ((message: string) => void) | undefined = undefined;\n\nexport type ISettingsMap = { [P in keyof T]?: string };\n\n/**\n * Sends a warning to console, if the api is present.\n *\n * @public\n * @param message - Warning message.\n */\nexport function warn(message: string): void {\n if (_warningCallback && process.env.NODE_ENV !== 'production') {\n _warningCallback(message);\n } else if (console && console.warn) {\n console.warn(message);\n }\n}\n\n/**\n * Configures the warning callback. Passing in undefined will reset it to use the default\n * console.warn function.\n *\n * @public\n * @param warningCallback - Callback to override the generated warnings.\n */\nexport function setWarningCallback(warningCallback?: (message: string) => void): void {\n _warningCallback = warningCallback;\n}\n","import { warn } from './warn';\n/**\n * Warns when props are required if a condition is met.\n *\n * @public\n * @param componentName - The name of the component being used.\n * @param props - The props passed into the component.\n * @param requiredProps - The name of the props that are required when the condition is met.\n * @param conditionalPropName - The name of the prop that the condition is based on.\n * @param condition - Whether the condition is met.\n */\nexport function warnConditionallyRequiredProps

(\n componentName: string,\n props: P,\n requiredProps: string[],\n conditionalPropName: string,\n condition: boolean,\n): void {\n if (condition === true && process.env.NODE_ENV !== 'production') {\n for (const requiredPropName of requiredProps) {\n if (!(requiredPropName in props)) {\n warn(`${componentName} property '${requiredPropName}' is required when '${conditionalPropName}' is used.'`);\n }\n }\n }\n}\n","import * as React from 'react';\nimport { Async } from './Async';\nimport { EventGroup } from './EventGroup';\nimport { warnConditionallyRequiredProps } from './warn/warnConditionallyRequiredProps';\nimport { warnMutuallyExclusive } from './warn/warnMutuallyExclusive';\nimport { warnDeprecations } from './warn/warnDeprecations';\nimport type { IDisposable } from './IDisposable';\nimport type { ISettingsMap } from './warn/warn';\nimport type { IRefObject } from './createRef';\nimport type { IBaseProps } from './BaseComponent.types';\n\n/**\n * BaseComponent class, which provides basic helpers for all components.\n *\n * @public\n * {@docCategory BaseComponent}\n *\n * @deprecated Do not use. We are moving away from class component.\n */\nexport class BaseComponent extends React.Component<\n TProps,\n TState\n> {\n /**\n * @deprecated Use React's error boundaries instead.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n public static onError: (errorMessage?: string, ex?: any) => void;\n\n /**\n * Controls whether the componentRef prop will be resolved by this component instance. If you are\n * implementing a passthrough (higher-order component), you would set this to false and pass through\n * the props to the inner component, allowing it to resolve the componentRef.\n */\n protected _skipComponentRefResolution!: boolean;\n\n private __async!: Async;\n private __events!: EventGroup;\n private __disposables!: IDisposable[] | null;\n private __resolves!: { [name: string]: (ref: React.ReactNode) => React.ReactNode };\n private __className!: string;\n\n /**\n * BaseComponent constructor\n * @param props - The props for the component.\n * @param context - The context for the component.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n constructor(props: TProps, context?: any) {\n super(props, context);\n\n // eslint-disable-next-line deprecation/deprecation\n _makeAllSafe(this, BaseComponent.prototype, [\n 'componentDidMount',\n 'shouldComponentUpdate',\n 'getSnapshotBeforeUpdate',\n 'render',\n 'componentDidUpdate',\n 'componentWillUnmount',\n ]);\n }\n\n /**\n * When the component receives props, make sure the componentRef is updated.\n */\n public componentDidUpdate(prevProps: TProps, prevState: TState): void {\n this._updateComponentRef(prevProps, this.props);\n }\n\n /**\n * When the component has mounted, update the componentRef.\n */\n public componentDidMount(): void {\n this._setComponentRef(this.props.componentRef, this);\n }\n\n /**\n * If we have disposables, dispose them automatically on unmount.\n */\n public componentWillUnmount(): void {\n this._setComponentRef(this.props.componentRef, null);\n\n if (this.__disposables) {\n for (let i = 0, len = this._disposables.length; i < len; i++) {\n let disposable = this.__disposables[i];\n\n if (disposable.dispose) {\n disposable.dispose();\n }\n }\n this.__disposables = null;\n }\n }\n\n /**\n * Gets the object's class name.\n */\n public get className(): string {\n if (!this.__className) {\n let funcNameRegex = /function (.{1,})\\(/;\n let results = funcNameRegex.exec(this.constructor.toString());\n\n this.__className = results && results.length > 1 ? results[1] : '';\n }\n\n return this.__className;\n }\n\n /**\n * Allows subclasses to push things to this._disposables to be auto disposed.\n */\n protected get _disposables(): IDisposable[] {\n if (!this.__disposables) {\n this.__disposables = [];\n }\n return this.__disposables;\n }\n\n /**\n * Gets the async instance associated with the component, created on demand. The async instance gives\n * subclasses a way to execute setTimeout/setInterval async calls safely, where the callbacks\n * will be cleared/ignored automatically after unmounting. The helpers within the async object also\n * preserve the this pointer so that you don't need to \"bind\" the callbacks.\n */\n protected get _async(): Async {\n if (!this.__async) {\n this.__async = new Async(this);\n this._disposables.push(this.__async);\n }\n\n return this.__async;\n }\n\n /**\n * Gets the event group instance assocaited with the component, created on demand. The event instance\n * provides on/off methods for listening to DOM (or regular javascript object) events. The event callbacks\n * will be automatically disconnected after unmounting. The helpers within the events object also\n * preserve the this reference so that you don't need to \"bind\" the callbacks.\n */\n protected get _events(): EventGroup {\n if (!this.__events) {\n this.__events = new EventGroup(this);\n this._disposables.push(this.__events);\n }\n\n return this.__events;\n }\n\n /**\n * Helper to return a memoized ref resolver function.\n * @param refName - Name of the member to assign the ref to.\n * @returns A function instance keyed from the given refname.\n * @deprecated Use `createRef` from React.createRef.\n */\n protected _resolveRef(refName: string): (ref: React.ReactNode) => React.ReactNode {\n if (!this.__resolves) {\n this.__resolves = {};\n }\n\n if (!this.__resolves[refName]) {\n this.__resolves[refName] = (ref: React.ReactNode) => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return ((this as any)[refName] = ref);\n };\n }\n\n return this.__resolves[refName];\n }\n\n /**\n * Updates the componentRef (by calling it with \"this\" when necessary.)\n */\n protected _updateComponentRef(currentProps: IBaseProps, newProps: IBaseProps = {}): void {\n // currentProps *should* always be defined, but verify that just in case a subclass is manually\n // calling a lifecycle method with no parameters (which has happened) or other odd usage.\n if (currentProps && newProps && currentProps.componentRef !== newProps.componentRef) {\n this._setComponentRef(currentProps.componentRef, null);\n this._setComponentRef(newProps.componentRef, this);\n }\n }\n\n /**\n * Warns when a deprecated props are being used.\n *\n * @param deprecationMap - The map of deprecations, where key is the prop name and the value is\n * either null or a replacement prop name.\n */\n protected _warnDeprecations(deprecationMap: ISettingsMap): void {\n warnDeprecations(this.className, this.props, deprecationMap);\n }\n\n /**\n * Warns when props which are mutually exclusive with each other are both used.\n *\n * @param mutuallyExclusiveMap - The map of mutually exclusive props.\n */\n protected _warnMutuallyExclusive(mutuallyExclusiveMap: ISettingsMap): void {\n warnMutuallyExclusive(this.className, this.props, mutuallyExclusiveMap);\n }\n\n /**\n * Warns when props are required if a condition is met.\n *\n * @param requiredProps - The name of the props that are required when the condition is met.\n * @param conditionalPropName - The name of the prop that the condition is based on.\n * @param condition - Whether the condition is met.\n */\n protected _warnConditionallyRequiredProps(\n requiredProps: string[],\n conditionalPropName: string,\n condition: boolean,\n ): void {\n warnConditionallyRequiredProps(this.className, this.props, requiredProps, conditionalPropName, condition);\n }\n\n private _setComponentRef(\n ref: IRefObject | undefined,\n value: TRefInterface | null,\n ): void {\n if (!this._skipComponentRefResolution && ref) {\n if (typeof ref === 'function') {\n ref(value);\n }\n\n if (typeof ref === 'object') {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (ref as any).current = value;\n }\n }\n }\n}\n\n/**\n * Helper to override a given method with a wrapper method that can try/catch the original, but also\n * ensures that the BaseComponent's methods are called before the subclass's. This ensures that\n * componentWillUnmount in the base is called and that things in the _disposables array are disposed.\n */\n// eslint-disable-next-line deprecation/deprecation\nfunction _makeAllSafe(obj: BaseComponent<{}, {}>, prototype: Object, methodNames: string[]): void {\n for (let i = 0, len = methodNames.length; i < len; i++) {\n _makeSafe(obj, prototype, methodNames[i]);\n }\n}\n\n// eslint-disable-next-line deprecation/deprecation\nfunction _makeSafe(obj: BaseComponent<{}, {}>, prototype: Object, methodName: string): void {\n /* eslint-disable @typescript-eslint/no-explicit-any */\n let classMethod = (obj as any)[methodName];\n let prototypeMethod = (prototype as any)[methodName];\n\n if (classMethod || prototypeMethod) {\n (obj as any)[methodName] = function (...args: any[]): any {\n /* eslint-enable @typescript-eslint/no-explicit-any */\n let retVal;\n\n if (prototypeMethod) {\n retVal = prototypeMethod.apply(this, args);\n }\n if (classMethod !== prototypeMethod) {\n retVal = classMethod.apply(this, args);\n }\n\n return retVal;\n };\n }\n}\n\n/**\n * Simple constant function for returning null, used to render empty templates in JSX.\n *\n * @public\n */\nexport function nullRender(): JSX.Element | null {\n return null;\n}\n","import * as React from 'react';\nimport { getWindow } from './dom/getWindow';\nimport { IReactProps } from './React.types';\n\n/**\n * DelayedRender component props.\n *\n * @public\n */\nexport interface IDelayedRenderProps extends IReactProps<{}> {\n /**\n * Number of milliseconds to delay rendering children.\n */\n delay?: number;\n}\n\n/**\n * DelayedRender component state.\n *\n * @internal\n */\nexport interface IDelayedRenderState {\n /**\n * Whether the component is rendered or not.\n */\n isRendered: boolean;\n}\n\n/**\n * Utility component for delaying the render of a child component after a given delay. This component\n * requires a single child component; don't pass in many components. Wrap multiple components in a DIV\n * if necessary.\n *\n * @public\n * {@docCategory DelayedRender}\n */\nexport class DelayedRender extends React.Component {\n public static defaultProps = {\n delay: 0,\n };\n\n private _timeoutId: number | undefined;\n\n constructor(props: IDelayedRenderProps) {\n super(props);\n this.state = {\n isRendered: getWindow() === undefined,\n };\n }\n\n public componentDidMount(): void {\n let { delay } = this.props;\n // eslint-disable-next-line no-restricted-globals\n this._timeoutId = window.setTimeout(() => {\n this.setState({\n isRendered: true,\n });\n }, delay);\n }\n\n public componentWillUnmount(): void {\n if (this._timeoutId) {\n clearTimeout(this._timeoutId);\n }\n }\n\n public render(): React.ReactElement<{}> | null {\n return this.state.isRendered ? (React.Children.only(this.props.children) as React.ReactElement<{}>) : null;\n }\n}\n","import { getWindow } from './dom/getWindow';\n\n/**\n * Storing global state in local module variables has issues when more than one copy\n * if the module gets loaded on the page (due to a bundling error or simply by consuming\n * a prebundled script.)\n *\n * This file contains helpers to deal with the getting and setting local state, and allows\n * callers to get called back when it mutates.\n */\n\nconst GLOBAL_SETTINGS_PROP_NAME = '__globalSettings__';\nconst CALLBACK_STATE_PROP_NAME = '__callbacks__';\n\nlet _counter = 0;\n\n/**\n * Change description used for change callbacks in GlobalSettings.\n *\n * @public\n * {@docCategory IChangeDescription}\n */\nexport interface IChangeDescription {\n key: string;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n oldValue: any;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n value: any;\n}\n\n/**\n * Change event callback.\n *\n * @public\n * {@docCategory IChangeEventCallback}\n */\nexport interface IChangeEventCallback {\n __id__?: string;\n (changeDescription?: IChangeDescription): void;\n}\n\n/**\n * Global settings helper, which stores settings in the global (window) namespace.\n * If window is not provided, it will store settings in module scope. Provides a\n * way to observe changes as well when their values change.\n *\n * @public\n * {@docCategory GlobalSettings}\n */\nexport class GlobalSettings {\n public static getValue(key: string, defaultValue?: T | (() => T)): T {\n const globalSettings = _getGlobalSettings();\n\n if (globalSettings[key] === undefined) {\n globalSettings[key] = typeof defaultValue === 'function' ? (defaultValue as Function)() : defaultValue;\n }\n\n return globalSettings[key];\n }\n\n public static setValue(key: string, value: T): T {\n const globalSettings = _getGlobalSettings();\n const callbacks = globalSettings[CALLBACK_STATE_PROP_NAME];\n let oldValue = globalSettings[key];\n\n if (value !== oldValue) {\n globalSettings[key] = value;\n\n let changeDescription = {\n oldValue,\n value,\n key,\n };\n\n for (let id in callbacks) {\n if (callbacks.hasOwnProperty(id)) {\n callbacks[id](changeDescription);\n }\n }\n }\n\n return value;\n }\n\n public static addChangeListener(cb: IChangeEventCallback): void {\n // Note: we use generated ids on the callbacks to create a map of the callbacks, which optimizes removal.\n // (It's faster to delete a key than it is to look up the index of an object and splice an array.)\n let id = cb.__id__;\n const callbacks = _getCallbacks();\n\n if (!id) {\n id = cb.__id__ = String(_counter++);\n }\n\n callbacks[id] = cb;\n }\n\n public static removeChangeListener(cb: IChangeEventCallback): void {\n const callbacks = _getCallbacks();\n delete callbacks[cb.__id__ as string];\n }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction _getGlobalSettings(): { [key: string]: any } {\n const win = getWindow();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const globalObj: { [key: string]: any } = win || {};\n\n if (!globalObj[GLOBAL_SETTINGS_PROP_NAME]) {\n globalObj[GLOBAL_SETTINGS_PROP_NAME] = {\n [CALLBACK_STATE_PROP_NAME]: {},\n };\n }\n\n return globalObj[GLOBAL_SETTINGS_PROP_NAME];\n}\n\nfunction _getCallbacks(): { [key: string]: () => void } {\n const globalSettings = _getGlobalSettings();\n return globalSettings[CALLBACK_STATE_PROP_NAME];\n}\n","/**\n * Simulated enum for keycodes. These will get inlined by uglify when used much like an enum\n *\n * @public\n * {@docCategory KeyCodes}\n */\nexport const KeyCodes = {\n backspace: 8 as 8,\n tab: 9 as 9,\n enter: 13 as 13,\n shift: 16 as 16,\n ctrl: 17 as 17,\n alt: 18 as 18,\n pauseBreak: 19 as 19,\n capslock: 20 as 20,\n escape: 27 as 27,\n space: 32 as 32,\n pageUp: 33 as 33,\n pageDown: 34 as 34,\n end: 35 as 35,\n home: 36 as 36,\n left: 37 as 37,\n up: 38 as 38,\n right: 39 as 39,\n down: 40 as 40,\n insert: 45 as 45,\n del: 46 as 46,\n zero: 48 as 48,\n one: 49 as 49,\n two: 50 as 50,\n three: 51 as 51,\n four: 52 as 52,\n five: 53 as 53,\n six: 54 as 54,\n seven: 55 as 55,\n eight: 56 as 56,\n nine: 57 as 57,\n colon: 58 as 58,\n a: 65 as 65,\n b: 66 as 66,\n c: 67 as 67,\n d: 68 as 68,\n e: 69 as 69,\n f: 70 as 70,\n g: 71 as 71,\n h: 72 as 72,\n i: 73 as 73,\n j: 74 as 74,\n k: 75 as 75,\n l: 76 as 76,\n m: 77 as 77,\n n: 78 as 78,\n o: 79 as 79,\n p: 80 as 80,\n q: 81 as 81,\n r: 82 as 82,\n s: 83 as 83,\n t: 84 as 84,\n u: 85 as 85,\n v: 86 as 86,\n w: 87 as 87,\n x: 88 as 88,\n y: 89 as 89,\n z: 90 as 90,\n leftWindow: 91 as 91,\n rightWindow: 92 as 92,\n select: 93 as 93,\n /* eslint-disable @typescript-eslint/naming-convention */\n zero_numpad: 96 as 96,\n one_numpad: 97 as 97,\n two_numpad: 98 as 98,\n three_numpad: 99 as 99,\n four_numpad: 100 as 100,\n five_numpad: 101 as 101,\n six_numpad: 102 as 102,\n seven_numpad: 103 as 103,\n eight_numpad: 104 as 104,\n nine_numpad: 105 as 105,\n /* eslint-enable @typescript-eslint/naming-convention */\n multiply: 106 as 106,\n add: 107 as 107,\n subtract: 109 as 109,\n decimalPoint: 110 as 110,\n divide: 111 as 111,\n f1: 112 as 112,\n f2: 113 as 113,\n f3: 114 as 114,\n f4: 115 as 115,\n f5: 116 as 116,\n f6: 117 as 117,\n f7: 118 as 118,\n f8: 119 as 119,\n f9: 120 as 120,\n f10: 121 as 121,\n f11: 122 as 122,\n f12: 123 as 123,\n numlock: 144 as 144,\n scrollLock: 145 as 145,\n semicolon: 186 as 186,\n equalSign: 187 as 187,\n comma: 188 as 188,\n dash: 189 as 189,\n period: 190 as 190,\n forwardSlash: 191 as 191,\n graveAccent: 192 as 192,\n openBracket: 219 as 219,\n backSlash: 220 as 220,\n closeBracket: 221 as 221,\n singleQuote: 222 as 222,\n};\nexport type KeyCodes = number;\n","/**\n * Rectangle helper class.\n *\n * @public\n * {@docCategory Rectangle}\n */\nexport class Rectangle {\n public top: number;\n public bottom: number;\n public left: number;\n public right: number;\n\n constructor(left: number = 0, right: number = 0, top: number = 0, bottom: number = 0) {\n this.top = top;\n this.bottom = bottom;\n this.left = left;\n this.right = right;\n }\n\n /**\n * Calculated automatically by subtracting the right from left\n */\n public get width(): number {\n return this.right - this.left;\n }\n\n /**\n * Calculated automatically by subtracting the bottom from top.\n */\n public get height(): number {\n return this.bottom - this.top;\n }\n\n /**\n * Tests if another rect is approximately equal to this rect (within 4 decimal places.)\n */\n public equals(rect: Rectangle): boolean {\n // Fixing to 4 decimal places because it allows enough precision and will handle cases when something\n // should be rounded, like .999999 should round to 1.\n return (\n parseFloat(this.top.toFixed(4)) === parseFloat(rect.top.toFixed(4)) &&\n parseFloat(this.bottom.toFixed(4)) === parseFloat(rect.bottom.toFixed(4)) &&\n parseFloat(this.left.toFixed(4)) === parseFloat(rect.left.toFixed(4)) &&\n parseFloat(this.right.toFixed(4)) === parseFloat(rect.right.toFixed(4))\n );\n }\n}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\n\n/**\n * Returns a single function which will call each of the given functions in the context of the\n * parent.\n */\nexport function appendFunction(parent: any, ...functions: any[]): () => void {\n if (functions.length < 2) {\n return functions[0] as () => void;\n }\n\n return (...args: any[]): void => {\n functions.forEach((f: () => void) => f && f.apply(parent, args));\n };\n}\n","/**\n * ARIA helper to concatenate attributes, returning undefined if all attributes\n * are undefined. (Empty strings are not a valid ARIA attribute value.)\n *\n * @param ariaAttributes - ARIA attributes to merge\n */\nexport function mergeAriaAttributeValues(...ariaAttributes: (string | undefined | false)[]): string | undefined {\n const mergedAttribute = ariaAttributes\n .filter((arg: string | undefined | false) => arg)\n .join(' ')\n .trim();\n return mergedAttribute === '' ? undefined : mergedAttribute;\n}\n","/**\n * Helper to find the index of an item within an array, using a callback to\n * determine the match.\n *\n * @public\n * @param array - Array to search.\n * @param cb - Callback which returns true on matches.\n * @param fromIndex - Optional index to start from (defaults to 0)\n */\nexport function findIndex(array: T[], cb: (item: T, index: number) => boolean, fromIndex: number = 0): number {\n let index = -1;\n\n for (let i = fromIndex; array && i < array.length; i++) {\n if (cb(array[i], i)) {\n index = i;\n break;\n }\n }\n\n return index;\n}\n\n/**\n * Helper to find the first item within an array that satisfies the callback.\n * @param array - Array to search\n * @param cb - Callback which returns true on matches\n */\nexport function find(array: T[], cb: (item: T, index: number) => boolean): T | undefined {\n let index = findIndex(array, cb);\n\n if (index < 0) {\n return undefined;\n }\n\n return array[index];\n}\n\n/**\n * Creates an array of a given size and helper method to populate.\n *\n * @public\n * @param size - Size of array.\n * @param getItem - Callback to populate given cell index.\n */\nexport function createArray(size: number, getItem: (index: number) => T): T[] {\n let array: T[] = [];\n\n for (let i = 0; i < size; i++) {\n array.push(getItem(i));\n }\n\n return array;\n}\n\n/**\n * Convert the given array to a matrix with columnCount number\n * of columns.\n *\n * @public\n * @param items - The array to convert\n * @param columnCount - The number of columns for the resulting matrix\n * @returns A matrix of items\n */\nexport function toMatrix(items: T[], columnCount: number): T[][] {\n return items.reduce((rows: T[][], currentValue: T, index: number) => {\n if (index % columnCount === 0) {\n rows.push([currentValue]);\n } else {\n rows[rows.length - 1].push(currentValue);\n }\n return rows;\n }, [] as T[][]);\n}\n\n/**\n * Given an array, it returns a new array that does not contain the item at the given index.\n * @param array - The array to operate on\n * @param index - The index of the element to remove\n */\nexport function removeIndex(array: T[], index: number): T[] {\n return array.filter((_: T, i: number) => index !== i);\n}\n\n/**\n * Given an array, this function returns a new array where the element at a given index has been replaced.\n * @param array - The array to operate on\n * @param newElement - The element that will be placed in the new array\n * @param index - The index of the element that should be replaced\n */\nexport function replaceElement(array: T[], newElement: T, index: number): T[] {\n const copy = array.slice();\n copy[index] = newElement;\n return copy;\n}\n\n/**\n * Given an array, this function returns a new array where an element has been inserted at the given index.\n * @param array - The array to operate on\n * @param index - The index where an element should be inserted\n * @param itemToAdd - The element to insert\n */\nexport function addElementAtIndex(array: T[], index: number, itemToAdd: T): T[] {\n const copy = array.slice();\n copy.splice(index, 0, itemToAdd);\n return copy;\n}\n\n/**\n * Given an array where each element is of type T or T[], flatten it into an array of T\n * @param array - The array where each element can optionally also be an array\n */\nexport function flatten(array: (T | T[])[]): T[] {\n let result: T[] = [];\n array.forEach((item: T | T[]): T[] => (result = result.concat(item)));\n return result;\n}\n\n/**\n * Returns a boolean indicating if the two given arrays are equal in length and values.\n *\n * @param array1 - First array to compare\n * @param array2 - Second array to compare\n * @returns True if the arrays are the same length and have the same values in the same positions, false otherwise.\n */\nexport function arraysEqual(array1: T[], array2: T[]): boolean {\n if (array1.length !== array2.length) {\n return false;\n }\n for (let i = 0; i < array1.length; i++) {\n if (array1[i] !== array2[i]) {\n return false;\n }\n }\n return true;\n}\n","import { getWindow } from './dom/getWindow';\n\n/**\n * Fetches an item from session storage without throwing an exception\n * @param key The key of the item to fetch from session storage\n */\nexport function getItem(key: string): string | null {\n let result = null;\n try {\n const win = getWindow();\n result = win ? win.sessionStorage.getItem(key) : null;\n } catch (e) {\n /* Eat the exception */\n }\n return result;\n}\n\n/**\n * Inserts an item into session storage without throwing an exception\n * @param key The key of the item to add to session storage\n * @param data The data to put into session storage\n */\nexport function setItem(key: string, data: string): void {\n try {\n getWindow()?.sessionStorage.setItem(key, data);\n } catch (e) {\n /* Eat the exception */\n }\n}\n","import { KeyCodes } from './KeyCodes';\nimport { getDocument } from './dom/getDocument';\nimport { getItem, setItem } from './sessionStorage';\nimport { setRTL as mergeStylesSetRTL } from '@fluentui/merge-styles';\n\nconst RTL_LOCAL_STORAGE_KEY = 'isRTL';\n\n// Default to undefined so that we initialize on first read.\nlet _isRTL: boolean | undefined;\n\n/**\n * Gets the rtl state of the page (returns true if in rtl.)\n */\nexport function getRTL(theme: { rtl?: boolean } = {}): boolean {\n if (theme.rtl !== undefined) {\n return theme.rtl;\n }\n if (_isRTL === undefined) {\n // Fabric supports persisting the RTL setting between page refreshes via session storage\n let savedRTL = getItem(RTL_LOCAL_STORAGE_KEY);\n if (savedRTL !== null) {\n _isRTL = savedRTL === '1';\n setRTL(_isRTL);\n }\n\n let doc = getDocument();\n if (_isRTL === undefined && doc) {\n _isRTL = ((doc.body && doc.body.getAttribute('dir')) || doc.documentElement.getAttribute('dir')) === 'rtl';\n mergeStylesSetRTL(_isRTL);\n }\n }\n\n return !!_isRTL;\n}\n\n/**\n * Sets the rtl state of the page (by adjusting the dir attribute of the html element.)\n */\nexport function setRTL(isRTL: boolean, persistSetting: boolean = false): void {\n let doc = getDocument();\n if (doc) {\n doc.documentElement.setAttribute('dir', isRTL ? 'rtl' : 'ltr');\n }\n\n if (persistSetting) {\n setItem(RTL_LOCAL_STORAGE_KEY, isRTL ? '1' : '0');\n }\n\n _isRTL = isRTL;\n mergeStylesSetRTL(_isRTL);\n}\n\n/**\n * Returns the given key, but flips right/left arrows if necessary.\n */\nexport function getRTLSafeKeyCode(key: number, theme: { rtl?: boolean } = {}): number {\n if (getRTL(theme)) {\n if (key === KeyCodes.left) {\n key = KeyCodes.right;\n } else if (key === KeyCodes.right) {\n key = KeyCodes.left;\n }\n }\n\n return key;\n}\n","import { mergeCssSets, Stylesheet } from '@fluentui/merge-styles';\nimport { getRTL } from './rtl';\nimport { getWindow } from './dom';\nimport type { IStyleSet, IStyleSetBase, IProcessedStyleSet, IStyleFunctionOrObject } from '@fluentui/merge-styles';\nimport type { StyleFunction } from './styled';\n\nconst MAX_CACHE_COUNT = 50;\nconst DEFAULT_SPECIFICITY_MULTIPLIER = 5;\n\nlet _memoizedClassNames = 0;\n\nconst stylesheet = Stylesheet.getInstance();\n\nif (stylesheet && stylesheet.onReset) {\n stylesheet.onReset(() => _memoizedClassNames++);\n}\n\n// Note that because of the caching nature within the classNames memoization,\n// I've disabled this rule to simply be able to work with any types.\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\n// This represents a prop we attach to each Map to indicate the cached return value\n// associated with the graph node.\nconst retVal = '__retval__';\n\ninterface IRecursiveMemoNode extends Map {\n [retVal]?: string;\n}\n\ntype AppWindow = (Window & { FabricConfig?: { enableClassNameCacheFullWarning?: boolean } }) | undefined;\n\nexport interface IClassNamesFunctionOptions {\n /**\n * Disables class caching for scenarios where styleProp parts mutate frequently.\n */\n disableCaching?: boolean;\n\n /**\n * Size of the cache. It overwrites default cache size when defined.\n */\n cacheSize?: number;\n\n /**\n * Set to true if component base styles are implemented in scss instead of css-in-js.\n */\n useStaticStyles?: boolean;\n}\n\n/**\n * Creates a getClassNames function which calls getStyles given the props, and injects them\n * into mergeStyleSets.\n *\n * Note that the props you pass in on every render should be in the same order and\n * immutable (numbers, strings, and booleans). This will allow the results to be memoized. Violating\n * these will cause extra recalcs to occur.\n */\nexport function classNamesFunction(\n options: IClassNamesFunctionOptions = {},\n): (\n getStyles: IStyleFunctionOrObject | undefined,\n styleProps?: TStyleProps,\n) => IProcessedStyleSet {\n // We build a trie where each node is a Map. The map entry key represents an argument\n // value, and the entry value is another node (Map). Each node has a `__retval__`\n // property which is used to hold the cached response.\n\n // To derive the response, we can simply ensure the arguments are added or already\n // exist in the trie. At the last node, if there is a `__retval__` we return that. Otherwise\n // we call the `getStyles` api to evaluate, cache on the property, and return that.\n // let map: IRecursiveMemoNode = new Map();\n let windowMap: Map<'__default__' | Window, IRecursiveMemoNode> = new Map();\n let styleCalcCount = 0;\n let getClassNamesCount = 0;\n let currentMemoizedClassNames = _memoizedClassNames;\n\n const getClassNames = (\n styleFunctionOrObject: IStyleFunctionOrObject | undefined,\n styleProps: TStyleProps = {} as TStyleProps,\n ): IProcessedStyleSet => {\n // If useStaticStyles is true, styleFunctionOrObject returns slot to classname mappings.\n // If there is also no style overrides, we can skip merge styles completely and\n // simply return the result from the style funcion.\n if (\n options.useStaticStyles &&\n typeof styleFunctionOrObject === 'function' &&\n (styleFunctionOrObject as StyleFunction).__noStyleOverride__\n ) {\n return styleFunctionOrObject(styleProps) as IProcessedStyleSet;\n }\n\n getClassNamesCount++;\n const shadowConfig = styleFunctionOrObject\n ? (styleFunctionOrObject as StyleFunction).__shadowConfig__\n : undefined;\n const key = shadowConfig && shadowConfig.window ? shadowConfig.window : '__default__';\n\n if (!windowMap.has(key)) {\n windowMap.set(key, new Map());\n }\n let current: Map = windowMap.get(key)!;\n\n // let current: Map = map;\n const { theme } = styleProps as any;\n const rtl = theme && theme.rtl !== undefined ? theme.rtl : getRTL();\n\n const disableCaching = options.disableCaching;\n\n // On reset of our stylesheet, reset memoized cache.\n if (currentMemoizedClassNames !== _memoizedClassNames) {\n currentMemoizedClassNames = _memoizedClassNames;\n // map = new Map();\n windowMap.set(key, new Map());\n current = windowMap.get(key)!;\n styleCalcCount = 0;\n }\n\n if (!options.disableCaching) {\n current = _traverseMap(windowMap.get(key)!, styleFunctionOrObject as any);\n current = _traverseMap(current, styleProps);\n }\n\n if (disableCaching || !(current as any)[retVal]) {\n if (styleFunctionOrObject === undefined) {\n (current as any)[retVal] = {} as IProcessedStyleSet;\n } else {\n (current as any)[retVal] = mergeCssSets(\n [\n (typeof styleFunctionOrObject === 'function'\n ? styleFunctionOrObject(styleProps)\n : styleFunctionOrObject) as IStyleSet,\n ],\n {\n shadowConfig: (styleFunctionOrObject as StyleFunction).__shadowConfig__,\n rtl: !!rtl,\n specificityMultiplier: options.useStaticStyles ? DEFAULT_SPECIFICITY_MULTIPLIER : undefined,\n },\n );\n }\n\n if (!disableCaching) {\n styleCalcCount++;\n }\n }\n\n if (styleCalcCount > (options.cacheSize || MAX_CACHE_COUNT)) {\n const win = getWindow() as AppWindow;\n if (win?.FabricConfig?.enableClassNameCacheFullWarning) {\n // eslint-disable-next-line no-console\n console.warn(\n `Styles are being recalculated too frequently. Cache miss rate is ${styleCalcCount}/${getClassNamesCount}.`,\n );\n // eslint-disable-next-line no-console\n console.trace();\n }\n\n windowMap.get(key)!.clear();\n styleCalcCount = 0;\n\n // Mutate the options passed in, that's all we can do.\n options.disableCaching = true;\n }\n\n // Note: the retVal is an attached property on the Map; not a key in the Map. We use this attached property to\n // cache the return value for this branch of the graph.\n return (current as any)[retVal];\n };\n\n return getClassNames;\n}\n\nfunction _traverseEdge(current: Map, value: any): Map {\n value = _normalizeValue(value);\n\n if (!current.has(value)) {\n current.set(value, new Map());\n }\n\n return current.get(value);\n}\n\nfunction _traverseMap(current: Map, inputs: any[] | Object): Map {\n if (typeof inputs === 'function') {\n const cachedInputsFromStyled = (inputs as StyleFunction).__cachedInputs__;\n if (cachedInputsFromStyled) {\n // The styled helper will generate the styles function and will attach the cached\n // inputs (consisting of the default styles, customzied styles, and user provided styles.)\n // These should be used as cache keys for deriving the memoized value.\n for (const input of (inputs as any).__cachedInputs__) {\n current = _traverseEdge(current, input);\n }\n } else {\n current = _traverseEdge(current, inputs);\n }\n } else if (typeof inputs === 'object') {\n for (const propName in inputs) {\n if (inputs.hasOwnProperty(propName)) {\n current = _traverseEdge(current, (inputs as any)[propName]);\n }\n }\n }\n\n return current;\n}\n\nfunction _normalizeValue(value: any): string {\n switch (value) {\n case undefined:\n return '__undefined__';\n case null:\n return '__null__';\n default:\n return value;\n }\n}\n","import { Stylesheet } from '@fluentui/merge-styles';\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\ndeclare class WeakMap {\n public get(key: any): any;\n public set(key: any, value: any): void;\n public has(key: any): boolean;\n}\n\nlet _initializedStylesheetResets = false;\nlet _resetCounter = 0;\nconst _emptyObject = { empty: true };\nconst _dictionary: any = {};\nlet _weakMap = typeof WeakMap === 'undefined' ? null : WeakMap;\n\ninterface IMemoizeNode {\n map: WeakMap | null;\n value?: any;\n}\n\n/**\n * Test utility for providing a custom weakmap.\n *\n * @internal\n * */\nexport function setMemoizeWeakMap(weakMap: any): void {\n _weakMap = weakMap;\n}\n\n/**\n * Reset memoizations.\n */\nexport function resetMemoizations(): void {\n _resetCounter++;\n}\n\n/**\n * Memoize decorator to be used on class methods. WARNING: the `this` reference\n * will be inaccessible within a memoized method, given that a cached method's `this`\n * would not be instance-specific.\n *\n * @public\n */\nexport function memoize(\n _target: any,\n _key: string,\n descriptor: TypedPropertyDescriptor,\n): {\n configurable: boolean;\n get(): T;\n} {\n // We bind to \"null\" to prevent people from inadvertently pulling values from \"this\",\n // rather than passing them in as input values which can be memoized.\n let fn = memoizeFunction(descriptor.value && descriptor.value.bind(null));\n\n return {\n configurable: true,\n get(): T {\n return fn;\n },\n };\n}\n\n/**\n * Memoizes a function; when you pass in the same parameters multiple times, it returns a cached result.\n * Be careful when passing in objects, you need to pass in the same INSTANCE for caching to work. Otherwise\n * it will grow the cache unnecessarily. Also avoid using default values that evaluate functions; passing in\n * undefined for a value and relying on a default function will execute it the first time, but will not\n * re-evaluate subsequent times which may have been unexpected.\n *\n * By default, the cache will reset after 100 permutations, to avoid abuse cases where the function is\n * unintendedly called with unique objects. Without a reset, the cache could grow infinitely, so we safeguard\n * by resetting. To override this behavior, pass a value of 0 to the maxCacheSize parameter.\n *\n * @public\n * @param cb - The function to memoize.\n * @param maxCacheSize - Max results to cache. If the cache exceeds this value, it will reset on the next call.\n * @param ignoreNullOrUndefinedResult - Flag to decide whether to cache callback result if it is undefined/null.\n * If the flag is set to true, the callback result is recomputed every time till the callback result is\n * not undefined/null for the first time, and then the non-undefined/null version gets cached.\n * @returns A memoized version of the function.\n */\nexport function memoizeFunction RetType, RetType>(\n cb: T,\n maxCacheSize: number = 100,\n ignoreNullOrUndefinedResult: boolean = false,\n): T {\n // Avoid breaking scenarios which don't have weak map.\n if (!_weakMap) {\n return cb;\n }\n\n if (!_initializedStylesheetResets) {\n const stylesheet = Stylesheet.getInstance();\n\n if (stylesheet && (stylesheet as { onReset?: unknown }).onReset) {\n Stylesheet.getInstance().onReset(resetMemoizations);\n }\n _initializedStylesheetResets = true;\n }\n\n let rootNode: any;\n let cacheSize = 0;\n let localResetCounter = _resetCounter;\n\n return function memoizedFunction(...args: any[]): RetType {\n let currentNode: any = rootNode;\n\n if (\n rootNode === undefined ||\n localResetCounter !== _resetCounter ||\n (maxCacheSize > 0 && cacheSize > maxCacheSize)\n ) {\n rootNode = _createNode();\n cacheSize = 0;\n localResetCounter = _resetCounter;\n }\n\n currentNode = rootNode;\n\n // Traverse the tree until we find the match.\n for (let i = 0; i < args.length; i++) {\n let arg = _normalizeArg(args[i]);\n\n if (!currentNode.map.has(arg)) {\n currentNode.map.set(arg, _createNode());\n }\n\n currentNode = currentNode.map.get(arg);\n }\n\n if (!currentNode.hasOwnProperty('value')) {\n currentNode.value = cb(...args);\n cacheSize++;\n }\n\n if (ignoreNullOrUndefinedResult && (currentNode.value === null || currentNode.value === undefined)) {\n currentNode.value = cb(...args);\n }\n\n return currentNode.value;\n } as any;\n}\n\n/**\n * Creates a memoizer for a single-value function, backed by a WeakMap.\n * With a WeakMap, the memoized values are only kept as long as the source objects,\n * ensuring that there is no memory leak.\n *\n * This function assumes that the input values passed to the wrapped function will be\n * `function` or `object` types. To memoize functions which accept other inputs, use\n * `memoizeFunction`, which memoizes against arbitrary inputs using a lookup cache.\n *\n * @public\n */\nexport function createMemoizer any>(getValue: F): F {\n if (!_weakMap) {\n // Without a `WeakMap` implementation, memoization is not possible.\n return getValue;\n }\n\n const cache = new _weakMap();\n\n function memoizedGetValue(input: any): any {\n if (!input || (typeof input !== 'function' && typeof input !== 'object')) {\n // A WeakMap can only be used to test against reference values, i.e. 'function' and 'object'.\n // All other inputs cannot be memoized against in this manner.\n return getValue(input);\n }\n\n if (cache.has(input)) {\n return cache.get(input)!;\n }\n\n const value = getValue(input);\n\n cache.set(input, value);\n\n return value;\n }\n\n return memoizedGetValue as F;\n}\n\nfunction _normalizeArg(val: null | undefined): { empty: boolean } | any;\nfunction _normalizeArg(val: object): any;\nfunction _normalizeArg(val: any): any {\n if (!val) {\n return _emptyObject;\n } else if (typeof val === 'object' || typeof val === 'function') {\n return val;\n } else if (!_dictionary[val]) {\n _dictionary[val] = { val };\n }\n\n return _dictionary[val];\n}\n\nfunction _createNode(): IMemoizeNode {\n return {\n map: _weakMap ? new _weakMap() : null,\n };\n}\n","import * as React from 'react';\nimport { createMemoizer } from '../memoize';\nimport type { IComponentAs, IComponentAsProps } from '../IComponentAs';\n\ninterface IComposeComponentAs {\n (outer: IComponentAs): (inner: IComponentAs) => IComponentAs;\n}\n\nfunction createComposedComponent(\n outer: IComponentAs,\n): (inner: IComponentAs) => IComponentAs {\n const Outer = outer;\n\n const outerMemoizer = createMemoizer((inner: IComponentAs) => {\n if (outer === inner) {\n throw new Error('Attempted to compose a component with itself.');\n }\n\n const Inner = inner;\n\n const innerMemoizer = createMemoizer((defaultRender: IComponentAs) => {\n const InnerWithDefaultRender: React.ComponentType> = (\n innerProps: IComponentAsProps,\n ): JSX.Element => {\n return ;\n };\n\n return InnerWithDefaultRender;\n });\n\n const OuterWithDefaultRender: React.ComponentType> = (\n outerProps: IComponentAsProps,\n ): JSX.Element => {\n const { defaultRender } = outerProps;\n\n return ;\n };\n\n return OuterWithDefaultRender;\n });\n\n return outerMemoizer;\n}\n\nconst componentAsMemoizer = createMemoizer(createComposedComponent);\n\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(\n outer: IComponentAs,\n inner: IComponentAs,\n): IComponentAs {\n return componentAsMemoizer(outer)(inner);\n}\n","/**\n * Determines whether a component is controlled.\n * @param props - Component props\n * @param valueProp - Prop containing the controlled value\n * @returns true if controlled, false if uncontrolled\n */\nexport function isControlled

(props: P, valueProp: keyof P): boolean {\n // React's built-in considers a prop to be provided if its value is non-null/undefined.\n // Mirror that behavior here (rather than checking for just undefined).\n return props[valueProp] !== undefined && props[valueProp] !== null;\n}\n","/**\n * Dictionary of booleans.\n *\n * @internal\n */\nexport interface IDictionary {\n [className: string]: boolean;\n}\n\n/**\n * Serializable object.\n *\n * @internal\n */\nexport interface ISerializableObject {\n toString?: () => string;\n}\n\n/**\n * css input type.\n *\n * @internal\n */\nexport type ICssInput = string | ISerializableObject | IDictionary | null | undefined | boolean;\n\n/**\n * Concatination helper, which can merge class names together. Skips over falsey values.\n *\n * @public\n */\nexport function css(...args: ICssInput[]): string {\n let classes = [];\n\n for (let arg of args) {\n if (arg) {\n if (typeof arg === 'string') {\n classes.push(arg);\n } else if (arg.hasOwnProperty('toString') && typeof arg.toString === 'function') {\n classes.push(arg.toString());\n } else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n for (let key in arg as any) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if ((arg as any)[key]) {\n classes.push(key);\n }\n }\n }\n }\n }\n\n return classes.join(' ');\n}\n","import { GlobalSettings } from '../GlobalSettings';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type ISettings = { [key: string]: any };\nexport type ISettingsFunction = (settings: ISettings) => ISettings;\n\n/**\n * @deprecated Use ISettings.\n */\nexport type Settings = ISettings;\n\n/**\n * @deprecated Use ISettingsFunction.\n */\nexport type SettingsFunction = ISettingsFunction;\n\nexport interface ICustomizations {\n settings: ISettings;\n scopedSettings: { [key: string]: ISettings };\n inCustomizerContext?: boolean;\n}\n\nconst CustomizationsGlobalKey = 'customizations';\nconst NO_CUSTOMIZATIONS = { settings: {}, scopedSettings: {}, inCustomizerContext: false };\n\nlet _allSettings = GlobalSettings.getValue(CustomizationsGlobalKey, {\n settings: {},\n scopedSettings: {},\n inCustomizerContext: false,\n});\n\nlet _events: (() => void)[] = [];\n\nexport class Customizations {\n private static _suppressUpdates: boolean;\n\n public static reset(): void {\n _allSettings.settings = {};\n _allSettings.scopedSettings = {};\n }\n\n /** Apply global Customization settings.\n * @example Customizations.applySettings(\\{ theme: \\{...\\} \\});\n */\n public static applySettings(settings: ISettings): void {\n _allSettings.settings = { ..._allSettings.settings, ...settings };\n Customizations._raiseChange();\n }\n\n /** Apply Customizations to a particular named scope, like a component.\n * @example Customizations.applyScopedSettings('Nav', \\{ styles: () =\\> \\{\\} \\});\n */\n public static applyScopedSettings(scopeName: string, settings: ISettings): void {\n _allSettings.scopedSettings[scopeName] = { ..._allSettings.scopedSettings[scopeName], ...settings };\n Customizations._raiseChange();\n }\n\n public static getSettings(\n properties: string[],\n scopeName?: string,\n localSettings: ICustomizations = NO_CUSTOMIZATIONS,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ): any {\n const settings: ISettings = {};\n const localScopedSettings = (scopeName && localSettings.scopedSettings[scopeName]) || {};\n const globalScopedSettings = (scopeName && _allSettings.scopedSettings[scopeName]) || {};\n\n for (let property of properties) {\n settings[property] =\n localScopedSettings[property] ||\n localSettings.settings[property] ||\n globalScopedSettings[property] ||\n _allSettings.settings[property];\n }\n\n return settings;\n }\n\n /** Used to run some code that sets Customizations without triggering an update until the end.\n * Useful for applying Customizations that don't affect anything currently rendered, or for\n * applying many customizations at once.\n * @param suppressUpdate - Do not raise the change event at the end, preventing all updates\n */\n public static applyBatchedUpdates(code: () => void, suppressUpdate?: boolean): void {\n Customizations._suppressUpdates = true;\n try {\n code();\n } catch {\n /* do nothing */\n }\n Customizations._suppressUpdates = false;\n if (!suppressUpdate) {\n Customizations._raiseChange();\n }\n }\n\n public static observe(onChange: () => void): void {\n _events.push(onChange);\n }\n\n public static unobserve(onChange: () => void): void {\n _events = _events.filter((cb: () => void) => cb !== onChange);\n }\n\n private static _raiseChange(): void {\n if (!Customizations._suppressUpdates) {\n _events.forEach((cb: () => void) => cb());\n }\n }\n}\n","import * as React from 'react';\nimport type { ICustomizations } from './Customizations';\n\nexport interface ICustomizerContext {\n customizations: ICustomizations;\n}\n\nexport const CustomizerContext = React.createContext({\n customizations: {\n inCustomizerContext: false,\n settings: {},\n scopedSettings: {},\n },\n});\n","import type { ISettings, ISettingsFunction } from './Customizations';\n\n/**\n * Merge new and old settings, giving priority to new settings.\n * New settings is optional in which case oldSettings is returned as-is.\n * @param oldSettings - Old settings to fall back to.\n * @param newSettings - New settings that will be merged over oldSettings.\n * @returns Merged settings.\n */\nexport function mergeSettings(oldSettings: ISettings = {}, newSettings?: ISettings | ISettingsFunction): ISettings {\n const mergeSettingsWith = _isSettingsFunction(newSettings) ? newSettings : _settingsMergeWith(newSettings);\n\n return mergeSettingsWith(oldSettings);\n}\n\nexport function mergeScopedSettings(\n oldSettings: ISettings = {},\n newSettings?: ISettings | ISettingsFunction,\n): ISettings {\n const mergeSettingsWith = _isSettingsFunction(newSettings) ? newSettings : _scopedSettingsMergeWith(newSettings);\n\n return mergeSettingsWith(oldSettings);\n}\n\nfunction _isSettingsFunction(settings?: ISettings | ISettingsFunction): settings is ISettingsFunction {\n return typeof settings === 'function';\n}\n\nfunction _settingsMergeWith(newSettings?: object): (settings: ISettings) => ISettings {\n return (settings: ISettings) => (newSettings ? { ...settings, ...newSettings } : settings);\n}\n\nfunction _scopedSettingsMergeWith(scopedSettingsFromProps: ISettings = {}): (scopedSettings: ISettings) => ISettings {\n return (oldScopedSettings: ISettings): ISettings => {\n const newScopedSettings: ISettings = { ...oldScopedSettings };\n\n for (let scopeName in scopedSettingsFromProps) {\n if (scopedSettingsFromProps.hasOwnProperty(scopeName)) {\n newScopedSettings[scopeName] = { ...oldScopedSettings[scopeName], ...scopedSettingsFromProps[scopeName] };\n }\n }\n\n return newScopedSettings;\n };\n}\n","import { mergeSettings, mergeScopedSettings } from './mergeSettings';\nimport type { ICustomizerProps } from './Customizer.types';\nimport type { ICustomizerContext } from './CustomizerContext';\n\n/**\n * Merge props and customizations giving priority to props over context.\n * NOTE: This function will always perform multiple merge operations. Use with caution.\n * @param props - New settings to merge in.\n * @param parentContext - Context containing current settings.\n * @returns Merged customizations.\n */\nexport function mergeCustomizations(props: ICustomizerProps, parentContext: ICustomizerContext): ICustomizerContext {\n const { customizations = { settings: {}, scopedSettings: {} } } = parentContext || {};\n\n return {\n customizations: {\n settings: mergeSettings(customizations.settings, props.settings),\n scopedSettings: mergeScopedSettings(customizations.scopedSettings, props.scopedSettings),\n inCustomizerContext: true,\n },\n };\n}\n","import * as React from 'react';\nimport { Customizations } from './Customizations';\nimport { CustomizerContext } from './CustomizerContext';\nimport { mergeCustomizations } from './mergeCustomizations';\nimport type { ICustomizerContext } from './CustomizerContext';\nimport type { ICustomizerProps } from './Customizer.types';\n\n/**\n * The Customizer component allows for default props to be mixed into components which\n * are decorated with the customizable() decorator, or use the styled HOC. This enables\n * injection scenarios like:\n *\n * 1. render svg icons instead of the icon font within all buttons\n * 2. inject a custom theme object into a component\n *\n * Props are provided via the settings prop which should be one of the following:\n * - A json map which contains 1 or more name/value pairs representing injectable props.\n * - A function that receives the current settings and returns the new ones that apply to the scope\n *\n * @public\n *\n * @deprecated This component is deprecated for purpose of applying theme to components\n * as of `@fluentui/react` version 8. Use `ThemeProvider` for applying theme instead.\n */\nexport class Customizer extends React.Component {\n public componentDidMount(): void {\n Customizations.observe(this._onCustomizationChange);\n }\n\n public componentWillUnmount(): void {\n Customizations.unobserve(this._onCustomizationChange);\n }\n\n public render(): React.ReactElement<{}> {\n const { contextTransform } = this.props;\n return (\n \n {(parentContext: ICustomizerContext) => {\n let newContext = mergeCustomizations(this.props, parentContext);\n\n if (contextTransform) {\n newContext = contextTransform(newContext);\n }\n\n return {this.props.children};\n }}\n \n );\n }\n\n private _onCustomizationChange = () => this.forceUpdate();\n}\n","/**\n * Allows you to hoist static functions in components.\n * Created for the purpose of fixing broken static functions in classes\n * that utilize decorators.\n *\n * @public\n * @param source - The object where the methods are hoisted from.\n * @param dest - The object to hoist the methods onto.\n * @returns The dest object with methods added\n */\n\nexport function hoistStatics(source: TSource, dest: TDest): TDest {\n for (const name in source) {\n if (source.hasOwnProperty(name)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (dest as any)[name] = source[name];\n }\n }\n\n return dest;\n}\n","import { DEFAULT_SHADOW_CONFIG, ExtendedCSSStyleSheet } from '@fluentui/merge-styles';\nimport * as React from 'react';\n\nimport type { AdoptedStylesheetExHook, AdoptedStylesheetHook } from '../hooks/useAdoptedStylesheet';\nimport type { ShadowConfigHook } from '../hooks/useShadowConfig';\nimport type {\n HasMergeStylesShadowRootContextHook,\n MergeStylesShadowRootContextHook,\n} from '../hooks/useMergeStylesShadowRoot';\nimport type { MergeStylesRootStylesheetsHook } from '../hooks/useMergeStylesRootStylesheets';\nimport type { UseStyledHook } from '../hooks/useStyled';\n\nexport const noop = () => false;\nexport const noopShadow = () => DEFAULT_SHADOW_CONFIG;\nexport const noopRootStylesheets = () => new Map();\nexport const noopUndefined = () => undefined;\n\nexport const getNewContext = (): MergeStylesDefaultContextValue => {\n return {\n stylesheets: new Map(),\n useAdoptedStylesheetEx: noop,\n useAdoptedStylesheet: noop,\n useShadowConfig: noopShadow,\n useMergeStylesShadowRootContext: noopUndefined,\n useHasMergeStylesShadowRootContext: noop,\n useMergeStylesRootStylesheets: noopRootStylesheets,\n useWindow: noopUndefined,\n useStyled: noopUndefined,\n };\n};\n\nexport type UseWindowHook = () => Window | undefined;\n\nexport type MergeStylesDefaultContextValue = {\n stylesheets: Map;\n useAdoptedStylesheetEx: AdoptedStylesheetExHook;\n useAdoptedStylesheet: AdoptedStylesheetHook;\n useShadowConfig: ShadowConfigHook;\n useMergeStylesShadowRootContext: MergeStylesShadowRootContextHook;\n useHasMergeStylesShadowRootContext: HasMergeStylesShadowRootContextHook;\n useMergeStylesRootStylesheets: MergeStylesRootStylesheetsHook;\n useWindow: UseWindowHook;\n useStyled: UseStyledHook;\n};\n\nexport const MergeStylesDefaultContext = React.createContext(getNewContext());\n","import * as React from 'react';\nimport { MergeStylesDefaultContext } from '../contexts/MergeStylesDefaultContext';\n\nexport const useMergeStylesHooks = () => {\n const ctx = React.useContext(MergeStylesDefaultContext);\n return {\n useAdoptedStylesheet: ctx.useAdoptedStylesheet,\n useAdoptedStylesheetEx: ctx.useAdoptedStylesheetEx,\n useShadowConfig: ctx.useShadowConfig,\n useMergeStylesShadowRootContext: ctx.useMergeStylesShadowRootContext,\n useHasMergeStylesShadowRootContext: ctx.useHasMergeStylesShadowRootContext,\n useMergeStylesRootStylesheets: ctx.useMergeStylesRootStylesheets,\n useWindow: ctx.useWindow,\n useStyled: ctx.useStyled,\n };\n};\n","import * as React from 'react';\nimport { GLOBAL_STYLESHEET_KEY } from '@fluentui/merge-styles';\nimport { useMergeStylesHooks } from '../hooks/useMergeStylesHooks';\n\nexport type MergeStylesShadowRootContextValue = {\n /**\n * Map of stylesheets available in the context.\n */\n stylesheets: Map;\n\n /**\n * Shadow root for this context.\n */\n shadowRoot?: ShadowRoot | null;\n};\n\nexport const MergeStylesShadowRootContext = React.createContext(\n undefined,\n);\n\nexport type MergeStylesShadowRootProviderProps = {\n /**\n * Shadow root for this context.\n */\n shadowRoot?: ShadowRoot | null;\n};\n\n/**\n * Context for a shadow root.\n */\nexport const MergeStylesShadowRootProvider: React.FC = ({\n shadowRoot,\n ...props\n}) => {\n const value = React.useMemo(() => {\n return {\n stylesheets: new Map(),\n shadowRoot,\n };\n }, [shadowRoot]);\n\n return (\n \n \n {props.children}\n \n );\n};\n\nconst GlobalStyles: React.FC = props => {\n const { useAdoptedStylesheet } = useMergeStylesHooks();\n useAdoptedStylesheet(GLOBAL_STYLESHEET_KEY);\n return null;\n};\n","import * as React from 'react';\nimport {\n MergeStylesShadowRootContext,\n MergeStylesShadowRootContextValue,\n} from '../contexts/MergeStylesShadowRootContext';\n\nexport type HasMergeStylesShadowRootContextHook = () => boolean;\nexport type MergeStylesShadowRootContextHook = () => MergeStylesShadowRootContextValue | undefined;\n\n/**\n * Test if a context is available.\n * @returns true if there is a context.\n */\nexport const useHasMergeStylesShadowRootContext: HasMergeStylesShadowRootContextHook = () => {\n return !!useMergeStylesShadowRootContext();\n};\n\n/**\n * Get a reference to the shadow root context.\n * @returns The context for the shadow root.\n */\nexport const useMergeStylesShadowRootContext: MergeStylesShadowRootContextHook = () => {\n return React.useContext(MergeStylesShadowRootContext);\n};\n","import type * as React from 'react';\nimport { GLOBAL_STYLESHEET_KEY } from '@fluentui/merge-styles';\nimport { useMergeStylesHooks } from '../hooks/useMergeStylesHooks';\nimport { useMergeStylesShadowRootContext } from '../hooks/useMergeStylesShadowRoot';\n\nexport type MergeStylesContextConsumerProps = {\n stylesheetKey: string;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n children: (inShadow: boolean) => React.ReactElement;\n};\n\nexport const MergeStylesShadowRootConsumer: React.FC = ({\n stylesheetKey,\n children,\n}) => {\n const { useAdoptedStylesheetEx, useMergeStylesRootStylesheets, useWindow } = useMergeStylesHooks();\n const shadowCtx = useMergeStylesShadowRootContext();\n const rootMergeStyles = useMergeStylesRootStylesheets();\n const win = useWindow();\n\n useAdoptedStylesheetEx(GLOBAL_STYLESHEET_KEY, shadowCtx, rootMergeStyles, win);\n useAdoptedStylesheetEx(stylesheetKey, shadowCtx, rootMergeStyles, win);\n\n return children(!!shadowCtx);\n};\n",null,"import * as React from 'react';\nimport { Customizations } from './Customizations';\nimport { hoistStatics } from '../hoistStatics';\nimport { CustomizerContext } from './CustomizerContext';\nimport { concatStyleSets, makeShadowConfig } from '@fluentui/merge-styles';\nimport { MergeStylesShadowRootConsumer } from '../shadowDom/contexts/MergeStylesShadowRootConsumer';\nimport { getWindow } from '../dom/getWindow';\nimport { WindowContext } from '@fluentui/react-window-provider';\nimport type { ICustomizerContext } from './CustomizerContext';\nimport type { ShadowConfig } from '@fluentui/merge-styles';\n\nimport { memoizeFunction } from '../memoize';\n\nconst memoizedMakeShadowConfig = memoizeFunction(makeShadowConfig);\nconst mergeComponentStyles = memoizeFunction(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (defaultStyles: any, componentStyles: any, shadowConfig: ShadowConfig): any => {\n const styles = componentStyles ?? defaultStyles ?? {};\n styles.__shadowConfig__ = shadowConfig;\n\n return styles;\n },\n);\n\nexport function customizable(\n scope: string,\n fields: string[],\n concatStyles?: boolean,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n):

(ComposedComponent: React.ComponentType

) => any {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return function customizableFactory

(ComposedComponent: React.ComponentType

): any {\n const resultClass = class ComponentWithInjectedProps extends React.Component {\n public static displayName: string = 'Customized' + scope;\n public static contextType = WindowContext;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _styleCache: { default?: any; component?: any; merged?: any } = {};\n\n constructor(props: P) {\n super(props);\n\n this._onSettingChanged = this._onSettingChanged.bind(this);\n }\n\n public componentDidMount(): void {\n Customizations.observe(this._onSettingChanged);\n }\n\n public componentWillUnmount(): void {\n Customizations.unobserve(this._onSettingChanged);\n }\n\n public render(): JSX.Element {\n return (\n \n {(inShadow: boolean) => {\n return (\n \n {(context: ICustomizerContext) => {\n const defaultProps = Customizations.getSettings(fields, scope, context.customizations);\n\n const win = this.context.window ?? getWindow();\n const shadowConfig = memoizedMakeShadowConfig(scope, inShadow, win);\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const componentProps = this.props as any;\n\n // If defaultProps.styles is a function, evaluate it before calling concatStyleSets\n if (defaultProps.styles && typeof defaultProps.styles === 'function') {\n defaultProps.styles = defaultProps.styles({ ...defaultProps, ...componentProps });\n }\n\n // If concatStyles is true and custom styles have been defined compute those styles\n if (concatStyles && defaultProps.styles) {\n if (\n this._styleCache.default !== defaultProps.styles ||\n this._styleCache.component !== componentProps.styles\n ) {\n const mergedStyles = concatStyleSets(defaultProps.styles, componentProps.styles);\n mergedStyles.__shadowConfig__ = shadowConfig;\n this._styleCache.default = defaultProps.styles;\n this._styleCache.component = componentProps.styles;\n this._styleCache.merged = mergedStyles;\n }\n\n return (\n \n );\n }\n\n const styles = mergeComponentStyles(defaultProps.styles, componentProps.styles, shadowConfig);\n\n return ;\n }}\n \n );\n }}\n \n );\n }\n\n private _onSettingChanged(): void {\n this.forceUpdate();\n }\n };\n\n return hoistStatics(ComposedComponent, resultClass);\n };\n}\n","import * as React from 'react';\nimport { Customizations } from './Customizations';\nimport { CustomizerContext } from './CustomizerContext';\nimport type { ISettings } from './Customizations';\n\n/**\n * Hook to get Customizations settings from Customizations singleton or CustomizerContext.\n * It will trigger component state update on settings change observed.\n */\nexport function useCustomizationSettings(properties: string[], scopeName?: string): ISettings {\n const forceUpdate = useForceUpdate();\n const { customizations } = React.useContext(CustomizerContext);\n const { inCustomizerContext } = customizations;\n React.useEffect(() => {\n if (!inCustomizerContext) {\n Customizations.observe(forceUpdate);\n }\n return () => {\n if (!inCustomizerContext) {\n Customizations.unobserve(forceUpdate);\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- exclude forceUpdate\n }, [inCustomizerContext]);\n\n return Customizations.getSettings(properties, scopeName, customizations);\n}\n\nfunction useForceUpdate() {\n const [, setValue] = React.useState(0);\n return () => setValue(value => ++value);\n}\n","import * as React from 'react';\nimport { appendFunction } from './appendFunction';\n\n/**\n * Extends a component's lifetime methods by appending new functions to the existing lifetime functions.\n */\nexport function extendComponent(parent: T, methods: { [key in keyof T]?: T[key] }): void {\n for (let name in methods) {\n if (methods.hasOwnProperty(name)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n parent[name] = appendFunction(parent, parent[name], methods[name]) as any;\n }\n }\n}\n","import { getWindow } from './dom/getWindow';\nimport { Stylesheet } from '@fluentui/merge-styles';\n\n// Initialize global window id.\nconst CURRENT_ID_PROPERTY = '__currentId__';\nconst DEFAULT_ID_STRING = 'id__';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nlet _global: any = getWindow() || {};\n\nif (_global[CURRENT_ID_PROPERTY] === undefined) {\n _global[CURRENT_ID_PROPERTY] = 0;\n}\n\nlet _initializedStylesheetResets = false;\n\n/**\n * Generates a unique id in the global scope (this spans across duplicate copies of the same library.)\n *\n * @public\n */\nexport function getId(prefix?: string): string {\n if (!_initializedStylesheetResets) {\n // Configure ids to reset on stylesheet resets.\n const stylesheet = Stylesheet.getInstance();\n\n if (stylesheet && stylesheet.onReset) {\n stylesheet.onReset(resetIds);\n }\n _initializedStylesheetResets = true;\n }\n\n let index = _global[CURRENT_ID_PROPERTY]++;\n\n return (prefix === undefined ? DEFAULT_ID_STRING : prefix) + index;\n}\n\n/**\n * Resets id counter to an (optional) number.\n *\n * @public\n */\nexport function resetIds(counter: number = 0): void {\n _global[CURRENT_ID_PROPERTY] = counter;\n}\n","const toObjectMap = (...items: (string[] | Record)[]) => {\n const result: Record = {};\n\n for (const item of items) {\n const keys = Array.isArray(item) ? item : Object.keys(item);\n\n for (const key of keys) {\n result[key] = 1;\n }\n }\n\n return result;\n};\n\n/**\n * An array of events that are allowed on every html element type.\n *\n * @public\n */\nexport const baseElementEvents = toObjectMap([\n 'onCopy',\n 'onCut',\n 'onPaste',\n 'onCompositionEnd',\n 'onCompositionStart',\n 'onCompositionUpdate',\n 'onFocus',\n 'onFocusCapture',\n 'onBlur',\n 'onBlurCapture',\n 'onChange',\n 'onInput',\n 'onSubmit',\n 'onLoad',\n 'onError',\n 'onKeyDown',\n 'onKeyDownCapture',\n 'onKeyPress',\n 'onKeyUp',\n 'onAbort',\n 'onCanPlay',\n 'onCanPlayThrough',\n 'onDurationChange',\n 'onEmptied',\n 'onEncrypted',\n 'onEnded',\n 'onLoadedData',\n 'onLoadedMetadata',\n 'onLoadStart',\n 'onPause',\n 'onPlay',\n 'onPlaying',\n 'onProgress',\n 'onRateChange',\n 'onSeeked',\n 'onSeeking',\n 'onStalled',\n 'onSuspend',\n 'onTimeUpdate',\n 'onVolumeChange',\n 'onWaiting',\n 'onClick',\n 'onClickCapture',\n 'onContextMenu',\n 'onDoubleClick',\n 'onDrag',\n 'onDragEnd',\n 'onDragEnter',\n 'onDragExit',\n 'onDragLeave',\n 'onDragOver',\n 'onDragStart',\n 'onDrop',\n 'onMouseDown',\n 'onMouseDownCapture',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseMove',\n 'onMouseOut',\n 'onMouseOver',\n 'onMouseUp',\n 'onMouseUpCapture',\n 'onSelect',\n 'onTouchCancel',\n 'onTouchEnd',\n 'onTouchMove',\n 'onTouchStart',\n 'onScroll',\n 'onWheel',\n 'onPointerCancel',\n 'onPointerDown',\n 'onPointerEnter',\n 'onPointerLeave',\n 'onPointerMove',\n 'onPointerOut',\n 'onPointerOver',\n 'onPointerUp',\n 'onGotPointerCapture',\n 'onLostPointerCapture',\n]);\n\n/**\n * An array of element attributes which are allowed on every html element type.\n *\n * @public\n */\nexport const baseElementProperties = toObjectMap([\n 'accessKey', // global\n 'children', // global\n 'className', // global\n 'contentEditable', // global\n 'dir', // global\n 'draggable', // global\n 'hidden', // global\n 'htmlFor', // global\n 'id', // global\n 'lang', // global\n 'ref', // global\n 'role', // global\n 'style', // global\n 'tabIndex', // global\n 'title', // global\n 'translate', // global\n 'spellCheck', // global\n 'name', // global\n]);\n\n/**\n * An array of HTML element properties and events.\n *\n * @public\n */\nexport const htmlElementProperties = toObjectMap(baseElementProperties, baseElementEvents);\n\n/**\n * An array of LABEL tag properties and events.\n *\n * @public\n */\nexport const labelProperties = toObjectMap(htmlElementProperties, [\n 'form', // button, fieldset, input, label, meter, object, output, select, textarea\n]);\n\n/**\n * An array of AUDIO tag properties and events.\n\n * @public\n */\nexport const audioProperties = toObjectMap(htmlElementProperties, [\n 'height', // canvas, embed, iframe, img, input, object, video\n 'loop', // audio, video\n 'muted', // audio, video\n 'preload', // audio, video\n 'src', // audio, embed, iframe, img, input, script, source, track, video\n 'width', // canvas, embed, iframe, img, input, object, video\n]);\n\n/**\n * An array of VIDEO tag properties and events.\n *\n * @public\n */\nexport const videoProperties = toObjectMap(audioProperties, [\n 'poster', // video\n]);\n\n/**\n * An array of OL tag properties and events.\n *\n * @public\n */\nexport const olProperties = toObjectMap(htmlElementProperties, [\n 'start', // ol\n]);\n\n/**\n * An array of LI tag properties and events.\n *\n * @public\n */\nexport const liProperties = toObjectMap(htmlElementProperties, [\n 'value', // button, input, li, option, meter, progress, param\n]);\n\n/**\n * An array of A tag properties and events.\n *\n * @public\n */\nexport const anchorProperties = toObjectMap(htmlElementProperties, [\n 'download', // a, area\n 'href', // a, area, base, link\n 'hrefLang', // a, area, link\n 'media', // a, area, link, source, style\n 'rel', // a, area, link\n 'target', // a, area, base, form\n 'type', // a, button, input, link, menu, object, script, source, style\n]);\n\n/**\n * An array of BUTTON tag properties and events.\n *\n * @public\n */\nexport const buttonProperties = toObjectMap(htmlElementProperties, [\n 'autoFocus', // button, input, select, textarea\n 'disabled', // button, fieldset, input, optgroup, option, select, textarea\n 'form', // button, fieldset, input, label, meter, object, output, select, textarea\n 'formAction', // input, button\n 'formEncType', // input, button\n 'formMethod', // input, button\n 'formNoValidate', // input, button\n 'formTarget', // input, button\n 'type', // a, button, input, link, menu, object, script, source, style\n 'value', // button, input, li, option, meter, progress, param,\n]);\n\n/**\n * An array of INPUT tag properties and events.\n *\n * @public\n */\nexport const inputProperties = toObjectMap(buttonProperties, [\n 'accept', // input\n 'alt', // area, img, input\n 'autoCapitalize', // input, textarea\n 'autoComplete', // form, input\n 'checked', // input\n 'dirname', // input, textarea\n 'form', // button, fieldset, input, label, meter, object, output, select, textarea\n 'height', // canvas, embed, iframe, img, input, object, video\n 'inputMode', // input\n 'list', // input\n 'max', // input, meter\n 'maxLength', // input, textarea\n 'min', // input, meter\n 'minLength', // input, textarea\n 'multiple', // input, select\n 'pattern', // input\n 'placeholder', // input, textarea\n 'readOnly', // input, textarea\n 'required', // input, select, textarea\n 'src', // audio, embed, iframe, img, input, script, source, track, video\n 'step', // input\n 'size', // input\n 'type', // a, button, input, link, menu, object, script, source, style\n 'value', // button, input, li, option, meter, progress, param\n 'width', // canvas, embed, iframe, img, input, object, video\n]);\n\n/**\n * An array of TEXTAREA tag properties and events.\n *\n * @public\n */\nexport const textAreaProperties = toObjectMap(buttonProperties, [\n 'autoCapitalize', // input, textarea\n 'cols', // textarea\n 'dirname', // input, textarea\n 'form', // button, fieldset, input, label, meter, object, output, select, textarea\n 'maxLength', // input, textarea\n 'minLength', // input, textarea\n 'placeholder', // input, textarea\n 'readOnly', // input, textarea\n 'required', // input, select, textarea\n 'rows', // textarea\n 'wrap', // textarea\n]);\n\n/**\n * An array of SELECT tag properties and events.\n *\n * @public\n */\nexport const selectProperties = toObjectMap(buttonProperties, [\n 'form', // button, fieldset, input, label, meter, object, output, select, textarea\n 'multiple', // input, select\n 'required', // input, select, textarea\n]);\n\nexport const optionProperties = toObjectMap(htmlElementProperties, [\n 'selected', // option\n 'value', // button, input, li, option, meter, progress, param\n]);\n\n/**\n * An array of TABLE tag properties and events.\n *\n * @public\n */\nexport const tableProperties = toObjectMap(htmlElementProperties, [\n 'cellPadding', // table\n 'cellSpacing', // table\n]);\n\n/**\n * An array of TR tag properties and events.\n *\n * @public\n */\nexport const trProperties = htmlElementProperties;\n\n/**\n * An array of TH tag properties and events.\n *\n * @public\n */\nexport const thProperties = toObjectMap(htmlElementProperties, [\n 'rowSpan', // td, th\n 'scope', // th\n]);\n\n/**\n * An array of TD tag properties and events.\n *\n * @public\n */\nexport const tdProperties = toObjectMap(htmlElementProperties, [\n 'colSpan', // td\n 'headers', // td\n 'rowSpan', // td, th\n 'scope', // th\n]);\n\nexport const colGroupProperties = toObjectMap(htmlElementProperties, [\n 'span', // col, colgroup\n]);\n\nexport const colProperties = toObjectMap(htmlElementProperties, [\n 'span', // col, colgroup\n]);\n\n/**\n * An array of FORM tag properties and events.\n *\n * @public\n */\nexport const formProperties = toObjectMap(htmlElementProperties, [\n 'acceptCharset', // form\n 'action', // form\n 'encType', // form\n 'encType', // form\n 'method', // form\n 'noValidate', // form\n 'target', // form\n]);\n\n/**\n * An array of IFRAME tag properties and events.\n *\n * @public\n */\nexport const iframeProperties = toObjectMap(htmlElementProperties, [\n 'allow', // iframe\n 'allowFullScreen', // iframe\n 'allowPaymentRequest', // iframe\n 'allowTransparency', // iframe\n 'csp', // iframe\n 'height', // canvas, embed, iframe, img, input, object, video\n 'importance', // iframe\n 'referrerPolicy', // iframe\n 'sandbox', // iframe\n 'src', // audio, embed, iframe, img, input, script, source, track, video\n 'srcDoc', // iframe\n 'width', // canvas, embed, iframe, img, input, object, video,\n]);\n\n/**\n * An array of IMAGE tag properties and events.\n *\n * @public\n */\nexport const imgProperties = toObjectMap(htmlElementProperties, [\n 'alt', // area, img, input\n 'crossOrigin', // img\n 'height', // canvas, embed, iframe, img, input, object, video\n 'src', // audio, embed, iframe, img, input, script, source, track, video\n 'srcSet', // img, source\n 'useMap', // img, object,\n 'width', // canvas, embed, iframe, img, input, object, video\n]);\n\n/**\n * @deprecated Use imgProperties for img elements.\n */\nexport const imageProperties = imgProperties;\n\n/**\n * An array of DIV tag properties and events.\n *\n * @public\n */\nexport const divProperties = htmlElementProperties;\n\n/**\n * Gets native supported props for an html element provided the allowance set. Use one of the property\n * sets defined (divProperties, buttonPropertes, etc) to filter out supported properties from a given\n * props set. Note that all data- and aria- prefixed attributes will be allowed.\n * NOTE: getNativeProps should always be applied first when adding props to a react component. The\n * non-native props should be applied second. This will prevent getNativeProps from overriding your custom props.\n * For example, if props passed to getNativeProps has an onClick function and getNativeProps is added to\n * the component after an onClick function is added, then the getNativeProps onClick will override it.\n *\n * @public\n * @param props - The unfiltered input props\n * @param allowedPropsNames - The array or record of allowed prop names.\n * @returns The filtered props\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function getNativeProps>(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n props: Record,\n allowedPropNames: string[] | Record,\n excludedPropNames?: string[],\n): T {\n // It'd be great to properly type this while allowing 'aria-` and 'data-' attributes like TypeScript does for\n // JSX attributes, but that ability is hardcoded into the TS compiler with no analog in TypeScript typings.\n // Then we'd be able to enforce props extends native props (including aria- and data- attributes), and then\n // return native props.\n // We should be able to do this once this PR is merged: https://github.com/microsoft/TypeScript/pull/26797\n\n const isArray = Array.isArray(allowedPropNames);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const result: Record = {};\n const keys = Object.keys(props);\n\n for (const key of keys) {\n const isNativeProp =\n (!isArray && (allowedPropNames as Record)[key]) ||\n (isArray && (allowedPropNames as string[]).indexOf(key) >= 0) ||\n key.indexOf('data-') === 0 ||\n key.indexOf('aria-') === 0;\n\n if (isNativeProp && (!excludedPropNames || excludedPropNames?.indexOf(key) === -1)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n result[key] = props![key] as any;\n }\n }\n\n return result as T;\n}\n","import {\n labelProperties,\n audioProperties,\n videoProperties,\n olProperties,\n liProperties,\n anchorProperties,\n buttonProperties,\n inputProperties,\n textAreaProperties,\n selectProperties,\n optionProperties,\n tableProperties,\n trProperties,\n thProperties,\n tdProperties,\n colGroupProperties,\n colProperties,\n formProperties,\n iframeProperties,\n imgProperties,\n htmlElementProperties,\n getNativeProps,\n} from './properties';\nimport * as React from 'react';\n\nconst nativeElementMap: Record> = {\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/**\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>(\n tagName: string,\n props: {},\n excludedPropNames?: string[],\n): TAttributes {\n const allowedPropNames = (tagName && nativeElementMap[tagName]) || htmlElementProperties;\n\n return getNativeProps(props, allowedPropNames, excludedPropNames);\n}\n","const REACT_LIFECYCLE_EXCLUSIONS = [\n 'setState',\n 'render',\n 'componentWillMount',\n 'UNSAFE_componentWillMount',\n 'componentDidMount',\n 'componentWillReceiveProps',\n 'UNSAFE_componentWillReceiveProps',\n 'shouldComponentUpdate',\n 'componentWillUpdate',\n 'getSnapshotBeforeUpdate',\n 'UNSAFE_componentWillUpdate',\n 'componentDidUpdate',\n 'componentWillUnmount',\n];\n\n/**\n * Allows you to hoist methods, except those in an exclusion set from a source object into a destination object.\n *\n * @public\n * @param destination - The instance of the object to hoist the methods onto.\n * @param source - The instance of the object where the methods are hoisted from.\n * @param exclusions - (Optional) What methods to exclude from being hoisted.\n * @returns An array of names of methods that were hoisted.\n */\nexport function hoistMethods(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n destination: any,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n source: any,\n exclusions: string[] = REACT_LIFECYCLE_EXCLUSIONS,\n): string[] {\n let hoisted: string[] = [];\n for (let methodName in source) {\n if (\n typeof source[methodName] === 'function' &&\n destination[methodName] === undefined &&\n (!exclusions || exclusions.indexOf(methodName) === -1)\n ) {\n hoisted.push(methodName);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n destination[methodName] = function (...args: any[]): void {\n source[methodName](...args);\n };\n }\n }\n\n return hoisted;\n}\n\n/**\n * Provides a method for convenience to unhoist hoisted methods.\n *\n * @public\n * @param source - The source object upon which methods were hoisted.\n * @param methodNames - An array of method names to unhoist.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function unhoistMethods(source: any, methodNames: string[]): void {\n methodNames.forEach((methodName: string) => delete source[methodName]);\n}\n","import * as React from 'react';\nimport { extendComponent } from './extendComponent';\nimport type { IBaseProps } from './BaseComponent.types';\n\n/**\n * Helper to manage componentRef resolution. Internally appends logic to\n * lifetime methods to resolve componentRef to the passed in object.\n *\n * Usage: call initializeComponentRef(this) in the constructor,\n */\nexport function initializeComponentRef(obj: React.Component): void {\n extendComponent(obj, {\n componentDidMount: _onMount,\n componentDidUpdate: _onUpdate,\n componentWillUnmount: _onUnmount,\n });\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction _onMount(this: any): void {\n _setComponentRef(this.props.componentRef, this);\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction _onUpdate(this: any, prevProps: IBaseProps): void {\n if (prevProps.componentRef !== this.props.componentRef) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n _setComponentRef((prevProps as any).componentRef, null);\n _setComponentRef(this.props.componentRef, this);\n }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction _onUnmount(this: any): void {\n _setComponentRef(this.props.componentRef, null);\n}\n\nfunction _setComponentRef(componentRef: React.RefObject, value: TInterface | null): void {\n if (componentRef) {\n if (typeof componentRef === 'object') {\n (componentRef as { current: TInterface | null }).current = value;\n } else if (typeof componentRef === 'function') {\n (componentRef as Function)(value);\n }\n }\n}\n","import { KeyCodes } from './KeyCodes';\n\nconst DirectionalKeyCodes: { [key: number]: number } = {\n [KeyCodes.up]: 1,\n [KeyCodes.down]: 1,\n [KeyCodes.left]: 1,\n [KeyCodes.right]: 1,\n [KeyCodes.home]: 1,\n [KeyCodes.end]: 1,\n [KeyCodes.tab]: 1,\n [KeyCodes.pageUp]: 1,\n [KeyCodes.pageDown]: 1,\n};\n\n/**\n * Returns true if the keycode is a directional keyboard key.\n */\nexport function isDirectionalKeyCode(which: number): boolean {\n return !!DirectionalKeyCodes[which];\n}\n\n/**\n * Adds a keycode to the list of keys that, when pressed, should cause the focus outlines to be visible.\n * This can be used to add global shortcut keys that directionally move from section to section within\n * an app or between focus trap zones.\n */\nexport function addDirectionalKeyCode(which: number): void {\n DirectionalKeyCodes[which] = 1;\n}\n\n/**\n * Removes a keycode to the list of keys that, when pressed, should cause the focus outlines to be visible.\n * This can be used to remove global shortcut keys that directionally move from section to section within\n * an app or between focus trap zones.\n */\nexport function removeDirectionalKeyCode(which: number): void {\n delete DirectionalKeyCodes[which];\n}\n","import * as React from 'react';\nimport { getWindow } from './dom/getWindow';\nexport const IsFocusVisibleClassName = 'ms-Fabric--isFocusVisible';\nexport const IsFocusHiddenClassName = 'ms-Fabric--isFocusHidden';\n\nfunction updateClassList(el: HTMLElement | null | undefined, enabled: boolean) {\n if (el) {\n el.classList.add(enabled ? IsFocusVisibleClassName : IsFocusHiddenClassName);\n el.classList.remove(enabled ? IsFocusHiddenClassName : IsFocusVisibleClassName);\n }\n}\n\n/**\n * Sets the visibility of focus styling.\n *\n * By default, focus styles (the box surrounding a focused Button, for example) only show up when navigational\n * keypresses occur (through Tab, arrows, PgUp/PgDn, Home and End), and are hidden when mouse interactions occur.\n * This API provides an imperative way to turn them on/off.\n *\n * A use case might be when you have a keypress like ctrl-f6 navigate to a particular region on the page,\n * and want focus to show up.\n *\n * @param enabled - Whether to turn focus visibility on or off.\n * @param target - Optional target from which to get window in case no `providerElem` has been specified.\n * @param registeredProviders - Array of provider refs that are associated with a FocusRectsProvider. If no array\n * is passed in, the classnames are attached to the document body that contains `target`.\n */\nexport function setFocusVisibility(\n enabled: boolean,\n target?: Element,\n registeredProviders?: React.RefObject[],\n): void {\n if (registeredProviders) {\n registeredProviders.forEach(ref => updateClassList(ref.current, enabled));\n } else {\n updateClassList(getWindow(target)?.document.body, enabled);\n }\n}\n","import * as React from 'react';\nimport { getWindow } from './dom/getWindow';\nimport { isDirectionalKeyCode } from './keyboard';\nimport { setFocusVisibility } from './setFocusVisibility';\n\n/**\n * Counter for mounted component that uses focus rectangles.\n * We want to cleanup the listeners before the last component that uses focus rectangles unmounts.\n */\nexport type ListenerCallbacks = {\n onMouseDown: (ev: MouseEvent) => void;\n onPointerDown: (ev: PointerEvent) => void;\n onKeyDown: (ev: KeyboardEvent) => void;\n onKeyUp: (ev: KeyboardEvent) => void;\n};\nlet mountCounters = new WeakMap();\nlet callbackMap = new WeakMap();\n\nfunction setMountCounters(key: Window | HTMLElement, delta: number): number {\n let newValue;\n const currValue = mountCounters.get(key);\n if (currValue) {\n newValue = currValue + delta;\n } else {\n newValue = 1;\n }\n\n mountCounters.set(key, newValue);\n return newValue;\n}\n\nfunction setCallbackMap(context: IFocusRectsContext): ListenerCallbacks {\n let callbacks = callbackMap.get(context);\n if (callbacks) {\n return callbacks;\n }\n\n const onMouseDown = (ev: MouseEvent) => _onMouseDown(ev, context.registeredProviders);\n const onPointerDown = (ev: PointerEvent) => _onPointerDown(ev, context.registeredProviders);\n const onKeyDown = (ev: KeyboardEvent) => _onKeyDown(ev, context.registeredProviders);\n const onKeyUp = (ev: KeyboardEvent) => _onKeyUp(ev, context.registeredProviders);\n callbacks = { onMouseDown, onPointerDown, onKeyDown, onKeyUp };\n\n callbackMap.set(context, callbacks);\n return callbacks;\n}\n\ntype AppWindow = (Window & { FabricConfig?: { disableFocusRects?: boolean } }) | undefined;\n\nexport type IFocusRectsContext = {\n /**\n * Ref to the root element of the provider\n */\n readonly providerRef: React.RefObject;\n\n /**\n * Array of this and all child provider elements under this one in the React tree.\n *\n * Tracking all child providers will allow a focus event in the parent to also set focus styling in its descendants.\n * This is needed for Combobox, for example, because the focus events happen on the parent context, but the visual\n * focus indicator is in the combobox callout. The callout needs to be notified on focus events from the parent.\n */\n readonly registeredProviders: React.RefObject[];\n\n /**\n * Used by child FocusRectsProviders to register their element with the parent provider.\n */\n readonly registerProvider: (ref: React.RefObject) => void;\n\n /**\n * Used by child FocusRectsProviders to unregister their element from the parent provider.\n */\n readonly unregisterProvider: (ref: React.RefObject) => void;\n};\n\nexport const FocusRectsContext = React.createContext(undefined);\n\n/**\n * Initializes the logic which:\n *\n * 1. Subscribes keydown, keyup, mousedown and pointerdown events. (It will only do it once for the current element of\n * the FocusRectsContext providerRef or once per window if no such element is provided via context, so it's safe to\n * call this method multiple times.)\n * 2. When the user presses triggers a keydown or keyup event via directional keyboard keys, adds the\n * 'ms-Fabric--isFocusVisible' classname to the current element of the FocusRectsContext providerRef or the document\n * body if no such element is provided via context, and removes the 'ms-Fabric-isFocusHidden' classname.\n * 3. When the user triggers a mousedown or pointerdown event, adds the 'ms-Fabric-isFocusHidden' classname to the\n * current element of the FocusRectsContext providerRef or the document body if no such element is provided via\n * context, and removes the 'ms-Fabric--isFocusVisible' classname.\n *\n * This logic allows components on the page to conditionally render focus treatments based on\n * the existence of global classnames, which simplifies logic overall.\n *\n * @param rootRef - A Ref object. Focus rectangle can be applied on itself and all its children.\n */\nexport function useFocusRects(rootRef?: React.RefObject): void {\n const context = React.useContext(FocusRectsContext);\n\n React.useEffect(() => {\n const win = getWindow(rootRef?.current) as AppWindow;\n\n if (!win || win.FabricConfig?.disableFocusRects === true) {\n return undefined;\n }\n\n let el: Window | HTMLElement = win;\n let onMouseDown: (ev: MouseEvent) => void;\n let onPointerDown: (ev: PointerEvent) => void;\n let onKeyDown: (ev: KeyboardEvent) => void;\n let onKeyUp: (ev: KeyboardEvent) => void;\n if (\n context?.providerRef?.current &&\n (context?.providerRef?.current as Partial>)?.addEventListener\n ) {\n el = context.providerRef.current;\n // The NOINLINE directive tells terser not to move the setCallbackMap implementation into the call site during\n // minification.\n // This prevents the function from capturing additional variables in the closure, which can cause memory leaks.\n const callbacks = /*@__NOINLINE__*/ setCallbackMap(context);\n onMouseDown = callbacks.onMouseDown;\n onPointerDown = callbacks.onPointerDown;\n onKeyDown = callbacks.onKeyDown;\n onKeyUp = callbacks.onKeyUp;\n } else {\n onMouseDown = _onMouseDown;\n onPointerDown = _onPointerDown;\n onKeyDown = _onKeyDown;\n onKeyUp = _onKeyUp;\n }\n\n let count = setMountCounters(el, 1);\n if (count <= 1) {\n el.addEventListener('mousedown', onMouseDown, true);\n el.addEventListener('pointerdown', onPointerDown, true);\n el.addEventListener('keydown', onKeyDown, true);\n el.addEventListener('keyup', onKeyUp, true);\n }\n\n return () => {\n if (!win || win.FabricConfig?.disableFocusRects === true) {\n return;\n }\n count = setMountCounters(el, -1);\n if (count === 0) {\n el.removeEventListener('mousedown', onMouseDown, true);\n el.removeEventListener('pointerdown', onPointerDown, true);\n el.removeEventListener('keydown', onKeyDown, true);\n el.removeEventListener('keyup', onKeyUp, true);\n }\n };\n }, [context, rootRef]);\n}\n\n/**\n * Function Component wrapper which enables calling `useFocusRects` hook.\n * Renders nothing.\n */\nexport const FocusRects: React.FunctionComponent<{ rootRef?: React.RefObject }> = props => {\n useFocusRects(props.rootRef);\n return null;\n};\n\nfunction _onMouseDown(ev: MouseEvent, registeredProviders?: React.RefObject[]): void {\n setFocusVisibility(false, ev.target as Element, registeredProviders);\n}\n\nfunction _onPointerDown(ev: PointerEvent, registeredProviders?: React.RefObject[]): void {\n if (ev.pointerType !== 'mouse') {\n setFocusVisibility(false, ev.target as Element, registeredProviders);\n }\n}\n\n// You need both a keydown and a keyup listener that sets focus visibility to true to handle two distinct scenarios when\n// attaching the listeners and classnames to the provider instead of the document body.\n// If you only have a keydown listener, then the focus rectangles will not show when moving from outside of the provider\n// to inside it. That is why a keyup listener is needed, since it will always trigger after the focus event is fired.\n// If you only have a keyup listener, then the focus rectangles will not show moving between different tabbable elements\n// if the tab key is pressed without being released. That's is why we need a keydown listener, since it will trigger for\n// every element that is being tabbed into.\n// This works because `classList.add` is smart and will not duplicate a classname that already exists on the classList\n// when focus visibility is turned on.\nfunction _onKeyDown(ev: KeyboardEvent, registeredProviders?: React.RefObject[]): void {\n // eslint-disable-next-line deprecation/deprecation\n if (isDirectionalKeyCode(ev.which)) {\n setFocusVisibility(true, ev.target as Element, registeredProviders);\n }\n}\n\nfunction _onKeyUp(ev: KeyboardEvent, registeredProviders?: React.RefObject[]): void {\n // eslint-disable-next-line deprecation/deprecation\n if (isDirectionalKeyCode(ev.which)) {\n setFocusVisibility(true, ev.target as Element, registeredProviders);\n }\n}\n","import * as React from 'react';\nimport { FocusRectsContext } from './useFocusRects';\n\nexport type FocusRectsProviderProps = {\n /**\n * Ref to the root element that this is providing focus rects for.\n */\n providerRef: React.RefObject;\n\n /**\n * Indicates that this is the root of a layer, and should not inherit the providerRef from a parent context.\n */\n layerRoot?: boolean;\n};\n\nexport const FocusRectsProvider: React.FC = props => {\n const { providerRef, layerRoot } = props;\n const [registeredProviders] = React.useState[]>([]);\n const parentContext = React.useContext(FocusRectsContext);\n\n // Inherit the parent context if it exists, unless this is a layer root.\n // This allows the topmost provider element in the DOM tree to handle the focus events.\n // Since layers are in a separate HTML tree from their parent, they shouldn't use the parent's providerRef.\n const inheritParentContext = parentContext !== undefined && !layerRoot;\n\n const context = React.useMemo(\n () =>\n inheritParentContext\n ? undefined\n : {\n providerRef,\n registeredProviders,\n registerProvider: (ref: React.RefObject) => {\n // Register this child provider with the current context, and any parent contexts\n registeredProviders.push(ref);\n parentContext?.registerProvider(ref);\n },\n unregisterProvider: (ref: React.RefObject) => {\n parentContext?.unregisterProvider(ref);\n const i = registeredProviders.indexOf(ref);\n if (i >= 0) {\n registeredProviders.splice(i, 1);\n }\n },\n },\n [providerRef, registeredProviders, parentContext, inheritParentContext],\n );\n\n React.useEffect(() => {\n if (context) {\n context.registerProvider(context.providerRef);\n return () => context.unregisterProvider(context.providerRef);\n }\n }, [context]);\n\n // Create a new context provider if this is not inheriting from the parent.\n if (context) {\n return {props.children};\n } else {\n return <>{props.children};\n }\n};\n","/**\n * Regular expressions matching characters to ignore when calculating the initials.\n */\n\n/**\n * Regular expression matching characters within various types of enclosures, including the enclosures themselves\n * so for example, (xyz) [xyz] {xyz} all would be ignored\n */\nconst UNWANTED_ENCLOSURES_REGEX: RegExp = /[\\(\\[\\{\\<][^\\)\\]\\}\\>]*[\\)\\]\\}\\>]/g;\n\n/**\n * Regular expression matching special ASCII characters except space, plus some unicode special characters.\n * Applies after unwanted enclosures have been removed\n */\nconst UNWANTED_CHARS_REGEX: RegExp = /[\\0-\\u001F\\!-/:-@\\[-`\\{-\\u00BF\\u0250-\\u036F\\uD800-\\uFFFF]/g;\n\n/**\n * Regular expression matching phone numbers. Applied after chars matching UNWANTED_CHARS_REGEX have been removed\n * and number has been trimmed for whitespaces\n */\nconst PHONENUMBER_REGEX: RegExp = /^\\d+[\\d\\s]*(:?ext|x|)\\s*\\d+$/i;\n\n/** Regular expression matching one or more spaces. */\nconst MULTIPLE_WHITESPACES_REGEX: RegExp = /\\s+/g;\n\n/**\n * Regular expression matching languages for which we currently don't support initials.\n * Arabic: Arabic, Arabic Supplement, Arabic Extended-A.\n * Korean: Hangul Jamo, Hangul Compatibility Jamo, Hangul Jamo Extended-A, Hangul Syllables, Hangul Jamo Extended-B.\n * Japanese: Hiragana, Katakana.\n * CJK: CJK Unified Ideographs Extension A, CJK Unified Ideographs, CJK Compatibility Ideographs,\n * CJK Unified Ideographs Extension B\n */\nconst UNSUPPORTED_TEXT_REGEX: RegExp =\n // eslint-disable-next-line @fluentui/max-len\n /[\\u0600-\\u06FF\\u0750-\\u077F\\u08A0-\\u08FF\\u1100-\\u11FF\\u3130-\\u318F\\uA960-\\uA97F\\uAC00-\\uD7AF\\uD7B0-\\uD7FF\\u3040-\\u309F\\u30A0-\\u30FF\\u3400-\\u4DBF\\u4E00-\\u9FFF\\uF900-\\uFAFF]|[\\uD840-\\uD869][\\uDC00-\\uDED6]/;\n\nfunction getInitialsLatin(displayName: string, isRtl: boolean): string {\n let initials = '';\n\n const splits: string[] = displayName.split(' ');\n\n if (splits.length === 2) {\n initials += splits[0].charAt(0).toUpperCase();\n initials += splits[1].charAt(0).toUpperCase();\n } else if (splits.length === 3) {\n initials += splits[0].charAt(0).toUpperCase();\n initials += splits[2].charAt(0).toUpperCase();\n } else if (splits.length !== 0) {\n initials += splits[0].charAt(0).toUpperCase();\n }\n\n if (isRtl && initials.length > 1) {\n return initials.charAt(1) + initials.charAt(0);\n }\n\n return initials;\n}\n\nfunction cleanupDisplayName(displayName: string): string {\n displayName = displayName.replace(UNWANTED_ENCLOSURES_REGEX, '');\n displayName = displayName.replace(UNWANTED_CHARS_REGEX, '');\n displayName = displayName.replace(MULTIPLE_WHITESPACES_REGEX, ' ');\n displayName = displayName.trim();\n\n return displayName;\n}\n\n/**\n * Get (up to 2 characters) initials based on display name of the persona.\n *\n * @public\n */\nexport function getInitials(\n displayName: string | undefined | null,\n isRtl: boolean,\n allowPhoneInitials?: boolean,\n): string {\n if (!displayName) {\n return '';\n }\n\n displayName = cleanupDisplayName(displayName);\n\n // For names containing CJK characters, and phone numbers, we don't display initials\n if (UNSUPPORTED_TEXT_REGEX.test(displayName) || (!allowPhoneInitials && PHONENUMBER_REGEX.test(displayName))) {\n return '';\n }\n\n return getInitialsLatin(displayName, isRtl);\n}\n","import { getWindow } from './dom/getWindow';\n\n/**\n * Fetches an item from local storage without throwing an exception\n * @param key The key of the item to fetch from local storage\n */\nexport function getItem(key: string): string | null {\n let result = null;\n try {\n const win = getWindow();\n result = win ? win.localStorage.getItem(key) : null;\n } catch (e) {\n /* Eat the exception */\n }\n return result;\n}\n\n/**\n * Inserts an item into local storage without throwing an exception\n * @param key The key of the item to add to local storage\n * @param data The data to put into local storage\n */\nexport function setItem(key: string, data: string): void {\n try {\n const win = getWindow();\n\n win && win.localStorage.setItem(key, data);\n } catch (e) {\n /* Eat the exception */\n }\n}\n","import { getDocument } from './dom/getDocument';\nimport * as localStorage from './localStorage';\nimport * as sessionStorage from './sessionStorage';\n\n// Default to undefined so that we initialize on first read.\nlet _language: string | null;\n\nconst STORAGE_KEY = 'language';\n\n/**\n * Gets the language set for the page.\n * @param persistenceType - Where to persist the value. Default is `sessionStorage` if available.\n */\nexport function getLanguage(\n persistenceType: 'localStorage' | 'sessionStorage' | 'none' = 'sessionStorage',\n): string | null {\n if (_language === undefined) {\n let doc = getDocument();\n const savedLanguage =\n persistenceType === 'localStorage'\n ? localStorage.getItem(STORAGE_KEY)\n : persistenceType === 'sessionStorage'\n ? sessionStorage.getItem(STORAGE_KEY)\n : undefined;\n\n if (savedLanguage) {\n _language = savedLanguage;\n }\n\n if (_language === undefined && doc) {\n _language = doc.documentElement.getAttribute('lang');\n }\n\n if (_language === undefined) {\n _language = 'en';\n }\n }\n\n return _language;\n}\n\n/**\n * Sets the language for the page (by adjusting the lang attribute of the html element).\n * @param language - Language to set.\n * @param persistenceType - Where to persist the value. Default is `sessionStorage` if available.\n */\nexport function setLanguage(language: string, persistenceType?: 'localStorage' | 'sessionStorage' | 'none'): void;\n/**\n * Sets the language for the page (by adjusting the lang attribute of the html element).\n * @deprecated Use string parameter version.\n * @param language - Language to set.\n * @param avoidPersisting - If true, don't store the value.\n */\nexport function setLanguage(language: string, avoidPersisting?: boolean): void;\nexport function setLanguage(\n language: string,\n persistenceParam?: 'localStorage' | 'sessionStorage' | 'none' | boolean,\n): void {\n let doc = getDocument();\n\n if (doc) {\n doc.documentElement.setAttribute('lang', language);\n }\n\n const persistenceType = persistenceParam === true ? 'none' : !persistenceParam ? 'sessionStorage' : persistenceParam;\n if (persistenceType === 'localStorage') {\n localStorage.setItem(STORAGE_KEY, language);\n } else if (persistenceType === 'sessionStorage') {\n sessionStorage.setItem(STORAGE_KEY, language);\n }\n\n _language = language;\n}\n","/**\n * Simple deep merge function. Takes all arguments and returns a deep copy of the objects merged\n * together in the order provided. If an object creates a circular reference, it will assign the\n * original reference.\n */\nexport function merge(target: Partial, ...args: (Partial | null | undefined | false)[]): T {\n for (const arg of args) {\n _merge(target || {}, arg as Partial);\n }\n\n return target as T;\n}\n\n/**\n * The _merge helper iterates through all props on source and assigns them to target.\n * When the value is an object, we will create a deep clone of the object. However if\n * there is a circular reference, the value will not be deep cloned and will persist\n * the reference.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction _merge(target: T, source: T, circularReferences: any[] = []): T {\n circularReferences.push(source);\n\n for (let name in source) {\n if (source.hasOwnProperty(name)) {\n if (name !== '__proto__' && name !== 'constructor' && name !== 'prototype') {\n const value: T[Extract] = source[name];\n if (typeof value === 'object' && value !== null && !Array.isArray(value)) {\n const isCircularReference = circularReferences.indexOf(value) > -1;\n target[name] = (\n isCircularReference ? value : _merge(target[name] || {}, value, circularReferences)\n ) as T[Extract];\n } else {\n target[name] = value;\n }\n }\n }\n }\n\n circularReferences.pop();\n\n return target;\n}\n","/**\n * Returns true if and only if the user is on a iOS device.\n * Used to determine whether iOS-specific behavior should be applied.\n */\nexport const isIOS = (): boolean => {\n // eslint-disable-next-line no-restricted-globals\n if (!window || !window.navigator || !window.navigator.userAgent) {\n return false;\n }\n // eslint-disable-next-line no-restricted-globals\n return /iPad|iPhone|iPod/i.test(window.navigator.userAgent);\n};\n","/**\n * The helper functions here will make the target element as modal to screen readers, by placing aria-hidden on elements\n * that are siblings to the target element and the target element's ancestors (because aria-hidden gets inherited).\n * That way, all other elements on the page are hidden to the screen reader.\n */\n\nimport { getDocument } from './dom/getDocument';\n\n/** Tag names to ignore when modalizing */\nconst tagsToIgnore = ['TEMPLATE', 'STYLE', 'SCRIPT'];\n\n/**\n * Call this on a target element to make it modal to screen readers.\n * Returns a function that undoes the changes it made.\n */\nexport function modalize(target: HTMLElement): () => void {\n const targetDocument = getDocument(target);\n if (!targetDocument) {\n // can't do this in SSR\n return () => undefined;\n }\n\n let affectedNodes: [HTMLElement, string | null][] = [];\n\n // start at target, then recurse and do the same for parent, until we reach \n while (target !== targetDocument.body && target.parentElement) {\n // grab all siblings of current element\n for (const sibling of target.parentElement.children as unknown as HTMLElement[]) {\n // but ignore elements that are already aria-hidden\n const ariaHidden = sibling.getAttribute('aria-hidden');\n if (sibling !== target && ariaHidden?.toLowerCase() !== 'true' && tagsToIgnore.indexOf(sibling.tagName) === -1) {\n affectedNodes.push([sibling, ariaHidden]);\n }\n }\n\n target = target.parentElement;\n }\n\n // take all those elements and set aria-hidden=true on them\n affectedNodes.forEach(([node]) => {\n node.setAttribute('aria-hidden', 'true');\n });\n\n return () => {\n unmodalize(affectedNodes);\n affectedNodes = []; // dispose\n };\n}\n\n/**\n * Undoes the changes that modalize() did.\n */\nfunction unmodalize(affectedNodes: [HTMLElement, string | null][]) {\n affectedNodes.forEach(([node, originalValue]) => {\n // Restore the original value (false or unset)\n if (originalValue) {\n node.setAttribute('aria-hidden', originalValue);\n } else {\n node.removeAttribute('aria-hidden');\n }\n });\n}\n","import { getWindow } from './dom/getWindow';\n\nlet isMacResult: boolean | undefined;\n\n/**\n * Returns true if the user is on a Mac. Caches the result value.\n * @param reset - Reset the cached result value (mainly for testing).\n */\nexport function isMac(reset?: boolean): boolean {\n if (typeof isMacResult === 'undefined' || reset) {\n const win = getWindow();\n // In certain SSR frameworks, `window` will be defined even on the server but `navigator` will be undefined\n const userAgent = win?.navigator?.userAgent;\n isMacResult = !!userAgent && userAgent.indexOf('Macintosh') !== -1;\n }\n return !!isMacResult;\n}\n","/**\n * Detects whether an element's content has horizontal overflow\n *\n * @public\n * @param element - Element to check for overflow\n * @returns True if element's content overflows\n */\nexport function hasHorizontalOverflow(element: HTMLElement): boolean {\n return element.clientWidth < element.scrollWidth;\n}\n\n/**\n * Detects whether an element's content has vertical overflow\n *\n * @public\n * @param element - Element to check for overflow\n * @returns True if element's content overflows\n */\nexport function hasVerticalOverflow(element: HTMLElement): boolean {\n return element.clientHeight < element.scrollHeight;\n}\n\n/**\n * Detects whether an element's content has overflow in any direction\n *\n * @public\n * @param element - Element to check for overflow\n * @returns True if element's content overflows\n */\nexport function hasOverflow(element: HTMLElement): boolean {\n return hasHorizontalOverflow(element) || hasVerticalOverflow(element);\n}\n","import { createMemoizer } from '../memoize';\nimport type { IRenderFunction } from '../IRenderFunction';\n\ninterface IRenderFunctionComposer {\n (outer: IRenderFunction): (inner: IRenderFunction) => IRenderFunction;\n}\n\nfunction createComposedRenderFunction(\n outer: IRenderFunction,\n): (inner: IRenderFunction) => IRenderFunction {\n const outerMemoizer = createMemoizer((inner: IRenderFunction) => {\n const innerMemoizer = createMemoizer((defaultRender: IRenderFunction) => {\n return (innerProps?: TProps) => {\n return inner(innerProps, defaultRender);\n };\n });\n\n return (outerProps?: TProps, defaultRender?: IRenderFunction) => {\n return outer(outerProps, defaultRender ? innerMemoizer(defaultRender) : inner);\n };\n });\n\n return outerMemoizer;\n}\n\nconst memoizer = createMemoizer(createComposedRenderFunction);\n\n/**\n * Composes two 'render functions' to produce a final render function that renders\n * the outer function, passing the inner function as 'default render'. The inner function\n * is then passed the original 'default render' prop.\n * @public\n */\nexport function composeRenderFunction(\n outer: IRenderFunction,\n inner: IRenderFunction,\n): IRenderFunction {\n return memoizer(outer)(inner);\n}\n","import * as React from 'react';\nimport { extendComponent } from './extendComponent';\n\n/**\n * Generates a function to be attached to a React component, which can be called\n * as a replacement to RAF. In-flight async calls will be auto canceled if the component\n * is unmounting before the async code is executed, preventing bugs where code\n * accesses things within the component after being unmounted.\n */\nexport const safeRequestAnimationFrame = (component: React.Component): ((cb: Function) => void) => {\n let activeTimeouts: Set;\n\n return (cb: Function) => {\n if (!activeTimeouts) {\n activeTimeouts = new Set();\n\n extendComponent(component, {\n componentWillUnmount: () => {\n activeTimeouts.forEach((id: number) => cancelAnimationFrame(id));\n },\n });\n }\n\n const timeoutId = requestAnimationFrame(() => {\n activeTimeouts.delete(timeoutId);\n cb();\n });\n\n activeTimeouts.add(timeoutId);\n };\n};\n","/**\n * {@docCategory Selection}\n */\nexport interface IObjectWithKey {\n key?: string | number;\n}\n\nexport const SELECTION_CHANGE = 'change';\nexport const SELECTION_ITEMS_CHANGE = 'items-change';\n\n/**\n * {@docCategory Selection}\n */\nexport enum SelectionMode {\n none = 0,\n single = 1,\n multiple = 2,\n}\n\n/**\n * {@docCategory Selection}\n */\nexport interface ISelection {\n count: number;\n mode: SelectionMode;\n\n canSelectItem: (item: TItem, index?: number) => boolean;\n\n // Obesrvable methods.\n setChangeEvents(isEnabled: boolean, suppressChange?: boolean): void;\n\n // Initialization methods.\n\n setItems(items: TItem[], shouldClear: boolean): void;\n getItems(): TItem[];\n\n // Item utility methods.\n getItemIndex?(key: string): number;\n\n // Read selection methods.\n\n getSelection(): TItem[];\n getSelectedIndices(): number[];\n getSelectedCount(): number;\n isRangeSelected(fromIndex: number, count: number): boolean;\n\n isAllSelected(): boolean;\n isKeySelected(key: string): boolean;\n isIndexSelected(index: number): boolean;\n\n isModal?(): boolean;\n\n // Write selection methods.\n\n setAllSelected(isAllSelected: boolean): void;\n setKeySelected(key: string, isSelected: boolean, shouldAnchor: boolean): void;\n setIndexSelected(index: number, isSelected: boolean, shouldAnchor: boolean): void;\n setRangeSelected?(fromIndex: number, count: number, isSelected: boolean, shouldAnchor: boolean): void;\n\n setModal?(isModal: boolean): void; // TODO make non-optional on next breaking change\n\n // Write range selection methods.\n\n selectToKey(key: string, clearSelection?: boolean): void;\n selectToIndex(index: number, clearSelection?: boolean): void;\n selectToRange?(index: number, count: number, clearSelection?: boolean): void;\n\n // Toggle helpers.\n\n toggleAllSelected(): void;\n toggleKeySelected(key: string): void;\n toggleIndexSelected(index: number): void;\n toggleRangeSelected(fromIndex: number, count: number): void;\n}\n\n/**\n * {@docCategory Selection}\n */\nexport enum SelectionDirection {\n horizontal = 0,\n vertical = 1,\n}\n","import { SELECTION_CHANGE, SelectionMode, SELECTION_ITEMS_CHANGE } from './Selection.types';\nimport { EventGroup } from '../EventGroup';\nimport type { IObjectWithKey, ISelection } from './Selection.types';\n\n/**\n * {@docCategory Selection}\n */\nexport interface ISelectionOptions {\n onSelectionChanged?: () => void;\n onItemsChanged?: () => void;\n /** Custom logic to generate item keys. Required if `TItem` does not have a `key` property. */\n getKey?: (item: TItem, index?: number) => string | number;\n canSelectItem?: (item: TItem, index?: number) => boolean;\n selectionMode?: SelectionMode;\n items?: TItem[];\n}\n\n/**\n * Selection options with required `getKey` property.\n * {@docCategory Selection}\n */\nexport type ISelectionOptionsWithRequiredGetKey = ISelectionOptions &\n Required, 'getKey'>>;\n\n/**\n * {@docCategory Selection}\n */\nexport class Selection implements ISelection {\n /** Number of items selected. Do not modify. */\n public count!: number;\n public readonly mode!: SelectionMode;\n\n private _getKey!: (item: TItem, index?: number) => string | number;\n private _canSelectItem!: (item: TItem, index?: number) => boolean;\n\n private _changeEventSuppressionCount: number;\n private _items!: TItem[];\n private _selectedItems!: TItem[] | null;\n private _selectedIndices: number[] | undefined;\n private _isAllSelected!: boolean;\n private _exemptedIndices!: { [index: string]: boolean };\n private _exemptedCount: number;\n private _keyToIndexMap!: { [key: string]: number };\n private _anchoredIndex: number;\n private _onSelectionChanged: (() => void) | undefined;\n private _onItemsChanged: (() => void) | undefined;\n private _hasChanged!: boolean;\n private _unselectableIndices!: { [index: string]: boolean };\n private _unselectableCount: number;\n private _isModal: boolean;\n\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 constructor(\n ...options: TItem extends IObjectWithKey // If the item type has a built-in key...\n ? [] | [ISelectionOptions] // Then the arguments can be empty or have the options without `getKey`\n : [ISelectionOptionsWithRequiredGetKey] // Otherwise, arguments require options with `getKey`.\n ) {\n const {\n onSelectionChanged,\n onItemsChanged,\n getKey,\n canSelectItem = () => true,\n items,\n selectionMode = SelectionMode.multiple,\n } = options[0] || ({} as ISelectionOptions);\n\n this.mode = selectionMode;\n\n this._getKey = getKey || defaultGetKey;\n\n this._changeEventSuppressionCount = 0;\n this._exemptedCount = 0;\n this._anchoredIndex = 0;\n this._unselectableCount = 0;\n\n this._onSelectionChanged = onSelectionChanged;\n this._onItemsChanged = onItemsChanged;\n this._canSelectItem = canSelectItem;\n this._keyToIndexMap = {};\n\n this._isModal = false;\n\n this.setItems(items || [], true);\n\n this.count = this.getSelectedCount();\n }\n\n public canSelectItem(item: TItem, index?: number): boolean {\n if (typeof index === 'number' && index < 0) {\n return false;\n }\n\n return this._canSelectItem(item, index);\n }\n\n public getKey(item: TItem, index?: number): string {\n const key = this._getKey(item, index);\n\n return typeof key === 'number' || key ? `${key}` : '';\n }\n\n public setChangeEvents(isEnabled: boolean, suppressChange?: boolean): void {\n this._changeEventSuppressionCount += isEnabled ? -1 : 1;\n\n if (this._changeEventSuppressionCount === 0 && this._hasChanged) {\n this._hasChanged = false;\n\n if (!suppressChange) {\n this._change();\n }\n }\n }\n\n public isModal(): boolean {\n return this._isModal;\n }\n\n public setModal(isModal: boolean): void {\n if (this._isModal !== isModal) {\n this.setChangeEvents(false);\n\n this._isModal = isModal;\n\n if (!isModal) {\n this.setAllSelected(false);\n }\n\n this._change();\n\n this.setChangeEvents(true);\n }\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 public setItems(items: TItem[], shouldClear: boolean = true): void {\n const newKeyToIndexMap: { [key: string]: number } = {};\n const newUnselectableIndices: { [key: string]: boolean } = {};\n let hasSelectionChanged = false;\n\n this.setChangeEvents(false);\n\n // Reset the unselectable count.\n this._unselectableCount = 0;\n\n let haveItemsChanged = false;\n\n // Build lookup table for quick selection evaluation.\n for (let i = 0; i < items.length; i++) {\n const item = items[i];\n\n if (item) {\n const key = this.getKey(item, i);\n\n if (key) {\n if (!haveItemsChanged && (!(key in this._keyToIndexMap) || this._keyToIndexMap[key] !== i)) {\n haveItemsChanged = true;\n }\n\n newKeyToIndexMap[key] = i;\n }\n }\n\n newUnselectableIndices[i] = item && !this.canSelectItem(item);\n if (newUnselectableIndices[i]) {\n this._unselectableCount++;\n }\n }\n\n if (shouldClear || items.length === 0) {\n this._setAllSelected(false, true);\n }\n\n // Check the exemption list for discrepencies.\n const newExemptedIndicies: { [key: string]: boolean } = {};\n let newExemptedCount = 0;\n\n for (const indexProperty in this._exemptedIndices) {\n if (this._exemptedIndices.hasOwnProperty(indexProperty)) {\n const index = Number(indexProperty);\n const item = this._items[index];\n const exemptKey = item ? this.getKey(item, Number(index)) : undefined;\n const newIndex = exemptKey ? newKeyToIndexMap[exemptKey] : index;\n\n if (newIndex === undefined) {\n // The item has likely been replaced or removed.\n hasSelectionChanged = true;\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\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\n if (!haveItemsChanged) {\n for (const key of Object.keys(this._keyToIndexMap)) {\n if (!(key in newKeyToIndexMap)) {\n haveItemsChanged = true;\n break;\n }\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\n if (hasSelectionChanged) {\n this._updateCount();\n }\n\n if (haveItemsChanged) {\n EventGroup.raise(this, SELECTION_ITEMS_CHANGE);\n\n if (this._onItemsChanged) {\n this._onItemsChanged();\n }\n }\n\n if (hasSelectionChanged) {\n this._change();\n }\n\n this.setChangeEvents(true);\n }\n\n public getItems(): TItem[] {\n return this._items;\n }\n\n public getSelection(): TItem[] {\n if (!this._selectedItems) {\n this._selectedItems = [];\n\n const items = this._items;\n\n if (items) {\n for (let i = 0; i < items.length; i++) {\n if (this.isIndexSelected(i)) {\n this._selectedItems.push(items[i]);\n }\n }\n }\n }\n\n return this._selectedItems;\n }\n\n public getSelectedCount(): number {\n return this._isAllSelected\n ? this._items.length - this._exemptedCount - this._unselectableCount\n : this._exemptedCount;\n }\n\n public getSelectedIndices(): number[] {\n if (!this._selectedIndices) {\n this._selectedIndices = [];\n\n const items = this._items;\n\n if (items) {\n for (let i = 0; i < items.length; i++) {\n if (this.isIndexSelected(i)) {\n this._selectedIndices.push(i);\n }\n }\n }\n }\n\n return this._selectedIndices;\n }\n\n public getItemIndex(key: string): number {\n const index = this._keyToIndexMap[key];\n\n return index ?? -1;\n }\n\n public isRangeSelected(fromIndex: number, count: number): boolean {\n if (count === 0) {\n return false;\n }\n\n const endIndex = fromIndex + count;\n\n for (let i = fromIndex; i < endIndex; i++) {\n if (!this.isIndexSelected(i)) {\n return false;\n }\n }\n\n return true;\n }\n\n public isAllSelected(): boolean {\n let selectableCount = this._items.length - this._unselectableCount;\n\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\n return (\n (this.count > 0 && this._isAllSelected && this._exemptedCount === 0) ||\n (!this._isAllSelected && this._exemptedCount === selectableCount && selectableCount > 0)\n );\n }\n\n public isKeySelected(key: string): boolean {\n const index = this._keyToIndexMap[key];\n\n return this.isIndexSelected(index);\n }\n\n public isIndexSelected(index: number): boolean {\n return !!(\n (this.count > 0 && this._isAllSelected && !this._exemptedIndices[index] && !this._unselectableIndices[index]) ||\n (!this._isAllSelected && this._exemptedIndices[index])\n );\n }\n\n public setAllSelected(isAllSelected: boolean): void {\n if (isAllSelected && this.mode !== SelectionMode.multiple) {\n return;\n }\n\n const selectableCount = this._items ? this._items.length - this._unselectableCount : 0;\n\n this.setChangeEvents(false);\n\n if (selectableCount > 0 && (this._exemptedCount > 0 || isAllSelected !== this._isAllSelected)) {\n this._exemptedIndices = {};\n\n if (isAllSelected !== this._isAllSelected || this._exemptedCount > 0) {\n this._exemptedCount = 0;\n this._isAllSelected = isAllSelected;\n this._change();\n }\n\n this._updateCount();\n }\n\n this.setChangeEvents(true);\n }\n\n public setKeySelected(key: string, isSelected: boolean, shouldAnchor: boolean): void {\n const index = this._keyToIndexMap[key];\n\n if (index >= 0) {\n this.setIndexSelected(index, isSelected, shouldAnchor);\n }\n }\n\n public setIndexSelected(index: number, isSelected: boolean, shouldAnchor: boolean): void {\n if (this.mode === SelectionMode.none) {\n return;\n }\n\n // Clamp the index.\n index = Math.min(Math.max(0, index), this._items.length - 1);\n\n // No-op on out of bounds selections.\n if (index < 0 || index >= this._items.length) {\n return;\n }\n\n this.setChangeEvents(false);\n\n const isExempt = this._exemptedIndices[index];\n const canSelect = !this._unselectableIndices[index];\n\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\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\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\n if (shouldAnchor) {\n this._anchoredIndex = index;\n }\n }\n\n this._updateCount();\n\n this.setChangeEvents(true);\n }\n\n public setRangeSelected(fromIndex: number, count: number, isSelected: boolean, shouldAnchor: boolean): void {\n if (this.mode === SelectionMode.none) {\n return;\n }\n\n // Clamp the index.\n fromIndex = Math.min(Math.max(0, fromIndex), this._items.length - 1);\n\n // Clamp the range.\n count = Math.min(Math.max(0, count), this._items.length - fromIndex);\n\n // No-op on out of bounds selections.\n if (fromIndex < 0 || fromIndex >= this._items.length || count === 0) {\n return;\n }\n\n this.setChangeEvents(false);\n\n const anchorIndex = this._anchoredIndex || 0;\n let startIndex = fromIndex;\n const endIndex = fromIndex + count - 1;\n\n const newAnchorIndex = anchorIndex >= endIndex ? startIndex : endIndex;\n\n for (; startIndex <= endIndex; startIndex++) {\n this.setIndexSelected(startIndex, isSelected, shouldAnchor ? startIndex === newAnchorIndex : false);\n }\n\n this.setChangeEvents(true);\n }\n\n public selectToKey(key: string, clearSelection?: boolean): void {\n this.selectToIndex(this._keyToIndexMap[key], clearSelection);\n }\n\n public selectToRange(fromIndex: number, count: number, clearSelection?: boolean): void {\n if (this.mode === SelectionMode.none) {\n return;\n }\n\n if (this.mode === SelectionMode.single) {\n if (count === 1) {\n this.setIndexSelected(fromIndex, true, true);\n }\n return;\n }\n\n const anchorIndex = this._anchoredIndex || 0;\n let startIndex = Math.min(fromIndex, anchorIndex);\n const endIndex = Math.max(fromIndex + count - 1, anchorIndex);\n\n this.setChangeEvents(false);\n\n if (clearSelection) {\n this._setAllSelected(false, true);\n }\n\n for (; startIndex <= endIndex; startIndex++) {\n this.setIndexSelected(startIndex, true, false);\n }\n\n this.setChangeEvents(true);\n }\n\n public selectToIndex(index: number, clearSelection?: boolean): void {\n if (this.mode === SelectionMode.none) {\n return;\n }\n\n if (this.mode === SelectionMode.single) {\n this.setIndexSelected(index, true, true);\n return;\n }\n\n const anchorIndex = this._anchoredIndex || 0;\n let startIndex = Math.min(index, anchorIndex);\n const endIndex = Math.max(index, anchorIndex);\n\n this.setChangeEvents(false);\n\n if (clearSelection) {\n this._setAllSelected(false, true);\n }\n\n for (; startIndex <= endIndex; startIndex++) {\n this.setIndexSelected(startIndex, true, false);\n }\n\n this.setChangeEvents(true);\n }\n\n public toggleAllSelected(): void {\n this.setAllSelected(!this.isAllSelected());\n }\n\n public toggleKeySelected(key: string): void {\n this.setKeySelected(key, !this.isKeySelected(key), true);\n }\n\n public toggleIndexSelected(index: number): void {\n this.setIndexSelected(index, !this.isIndexSelected(index), true);\n }\n\n public toggleRangeSelected(fromIndex: number, count: number): void {\n if (this.mode === SelectionMode.none) {\n return;\n }\n\n const isRangeSelected = this.isRangeSelected(fromIndex, count);\n const endIndex = fromIndex + count;\n\n if (this.mode === SelectionMode.single && count > 1) {\n return;\n }\n\n this.setChangeEvents(false);\n for (let i = fromIndex; i < endIndex; i++) {\n this.setIndexSelected(i, !isRangeSelected, false);\n }\n this.setChangeEvents(true);\n }\n\n private _updateCount(preserveModalState: boolean = false): void {\n const count = this.getSelectedCount();\n\n if (count !== this.count) {\n this.count = count;\n this._change();\n }\n\n if (!this.count && !preserveModalState) {\n this.setModal(false);\n }\n }\n\n private _setAllSelected(isAllSelected: boolean, preserveModalState: boolean = false): void {\n if (isAllSelected && this.mode !== SelectionMode.multiple) {\n return;\n }\n\n const selectableCount = this._items ? this._items.length - this._unselectableCount : 0;\n\n this.setChangeEvents(false);\n\n if (selectableCount > 0 && (this._exemptedCount > 0 || isAllSelected !== this._isAllSelected)) {\n this._exemptedIndices = {};\n\n if (isAllSelected !== this._isAllSelected || this._exemptedCount > 0) {\n this._exemptedCount = 0;\n this._isAllSelected = isAllSelected;\n this._change();\n }\n\n this._updateCount(preserveModalState);\n }\n\n this.setChangeEvents(true);\n }\n\n private _change(): void {\n if (this._changeEventSuppressionCount === 0) {\n this._selectedItems = null;\n this._selectedIndices = undefined;\n\n EventGroup.raise(this, SELECTION_CHANGE);\n\n if (this._onSelectionChanged) {\n this._onSelectionChanged();\n }\n } else {\n this._hasChanged = true;\n }\n }\n}\n\nfunction defaultGetKey(item: TItem, index?: number): string | number {\n // 0 may be used as a key\n const { key = `${index}` } = (item || {}) as IObjectWithKey;\n return key;\n}\n","// Regex that finds { and } so they can be removed on a lookup for string format\nconst FORMAT_ARGS_REGEX = /[\\{\\}]/g;\n\n// Regex that finds {#} so it can be replaced by the arguments in string format\nconst FORMAT_REGEX = /\\{\\d+\\}/g;\n\n/**\n * String format method, used for scenarios where at runtime you\n * need to evaluate a formatted string given a tokenized string. This\n * usually only is needed in localization scenarios.\n\n * @example\n * ```tsx\n * \"I love {0} every {1}\".format(\"CXP\")\n * ```\n * will result in a Debug Exception.\n *\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function format(s: string, ...values: any[]): string {\n let args = values;\n // Callback match function\n function replaceFunc(match: string): string {\n // looks up in the args\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let replacement = args[match.replace(FORMAT_ARGS_REGEX, '') as any];\n\n // catches undefined in nondebug and null in debug and nondebug\n if (replacement === null || replacement === undefined) {\n replacement = '';\n }\n\n return replacement;\n }\n return s.replace(FORMAT_REGEX, replaceFunc);\n}\n","import * as React from 'react';\nimport { concatStyleSetsWithProps } from '@fluentui/merge-styles';\nimport { useMergeStylesHooks } from './shadowDom/index';\nimport { useCustomizationSettings } from './customizations/useCustomizationSettings';\nimport type { IStyleSetBase, IStyleFunctionOrObject, ShadowConfig } from '@fluentui/merge-styles';\n\nexport interface IPropsWithStyles {\n styles?: IStyleFunctionOrObject;\n}\n\nexport interface ICustomizableProps {\n /**\n * Name of scope, which can be targeted using the Customizer.\n */\n scope: string;\n\n /**\n * List of fields which can be customized.\n * @defaultvalue [ 'theme', 'styles' ]\n */\n fields?: string[];\n}\n\nconst DefaultFields = ['theme', 'styles'];\n\nexport type StyleFunction = IStyleFunctionOrObject<\n TStyleProps,\n TStyleSet\n> & {\n /** Cache for all style functions. */\n __cachedInputs__: (IStyleFunctionOrObject | undefined)[];\n\n /** True if no styles prop or styles from Customizer is passed to wrapped component. */\n __noStyleOverride__: boolean;\n\n /** Shadow DOM configuration object */\n __shadowConfig__?: ShadowConfig;\n};\n\n/**\n * The styled HOC wrapper allows you to create a functional wrapper around a given component which will resolve\n * getStyles functional props, and mix customized props passed in using concatStyleSets.\n *\n * @example\n * ```tsx\n * export const Toggle = styled(\n * ToggleBase,\n * props => ({ root: { background: 'red' }})\n * );\n * ```\n * @param Component - The unstyled base component to render, which receives styles.\n * @param baseStyles - The styles which should be curried with the component.\n * @param getProps - A helper which provides default props.\n * @param customizable - An object which defines which props can be customized using the Customizer.\n * @param pure - A boolean indicating if the component should avoid re-rendering when props haven't changed.\n * Note that pure should not be used on components which allow children, or take in complex objects or\n * arrays as props which could mutate on every render.\n */\nexport function styled<\n TComponentProps extends IPropsWithStyles,\n TStyleProps,\n TStyleSet extends IStyleSetBase,\n>(\n Component: React.ComponentClass | React.FunctionComponent,\n baseStyles: IStyleFunctionOrObject,\n getProps?: (props: TComponentProps) => Partial,\n customizable?: ICustomizableProps,\n pure?: boolean,\n): React.FunctionComponent;\nexport function styled<\n TComponentProps extends IPropsWithStyles & React.RefAttributes,\n TStyleProps,\n TStyleSet extends IStyleSetBase,\n TRef = unknown,\n>(\n Component: React.ComponentClass | React.FunctionComponent,\n baseStyles: IStyleFunctionOrObject,\n getProps?: (props: TComponentProps) => Partial,\n customizable?: ICustomizableProps,\n pure?: boolean,\n): React.ForwardRefExoticComponent & React.RefAttributes>;\nexport function styled<\n TComponentProps extends IPropsWithStyles & React.RefAttributes,\n TStyleProps,\n TStyleSet extends IStyleSetBase,\n TRef = unknown,\n>(\n Component: React.ComponentClass | React.FunctionComponent,\n baseStyles: IStyleFunctionOrObject,\n getProps?: (props: TComponentProps) => Partial,\n customizable?: ICustomizableProps,\n pure?: boolean,\n) {\n customizable = customizable || { scope: '', fields: undefined };\n\n const { scope, fields = DefaultFields } = customizable;\n\n const Wrapped = React.forwardRef((props: TComponentProps, forwardedRef: React.Ref) => {\n const styles = React.useRef>();\n\n const settings = useCustomizationSettings(fields, scope);\n const { styles: customizedStyles, dir, ...rest } = settings;\n const additionalProps = getProps ? getProps(props) : undefined;\n\n const { useStyled } = useMergeStylesHooks();\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const cache = (styles.current && (styles.current as any).__cachedInputs__) || [];\n const propStyles = props.styles;\n if (!styles.current || customizedStyles !== cache[1] || propStyles !== cache[2]) {\n // Using styled components as the Component arg will result in nested styling arrays.\n // The function can be cached and in order to prevent the props from being retained within it's closure\n // we pass in just the styles and not the entire props\n const concatenatedStyles: IStyleFunctionOrObject = (styleProps: TStyleProps) =>\n concatStyleSetsWithProps(styleProps, baseStyles, customizedStyles, propStyles);\n\n // The __cachedInputs__ array is attached to the function and consumed by the\n // classNamesFunction as a list of keys to include for memoizing classnames.\n (concatenatedStyles as StyleFunction).__cachedInputs__ = [\n baseStyles,\n customizedStyles,\n propStyles,\n ];\n\n (concatenatedStyles as StyleFunction).__noStyleOverride__ =\n !customizedStyles && !propStyles;\n\n styles.current = concatenatedStyles as StyleFunction;\n }\n\n styles.current.__shadowConfig__ = useStyled(scope);\n\n return ;\n });\n // Function.prototype.name is an ES6 feature, so the cast to any is required until we're\n // able to drop IE 11 support and compile with ES6 libs\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Wrapped.displayName = `Styled${Component.displayName || (Component as any).name}`;\n\n // This preserves backwards compatibility.\n const pureComponent = pure ? React.memo(Wrapped) : Wrapped;\n // Check if the wrapper has a displayName after it has been memoized. Then assign it to the pure component.\n if (Wrapped.displayName) {\n pureComponent.displayName = Wrapped.displayName;\n }\n\n return pureComponent;\n}\n","import { getWindow } from './dom/getWindow';\n\nexport const isIE11 = (): boolean => {\n const win = getWindow();\n\n if (!win?.navigator?.userAgent) {\n return false;\n }\n\n return win.navigator.userAgent.indexOf('rv:11.0') > -1;\n};\n","/**\n * Function to apply default values to a component props object. This function is intended for function components,\n * to maintain parity with the `defaultProps` feature of class components. It accounts for properties that are\n * specified, but undefined.\n * @param defaultProps- An object with default values for various properties\n * @param propsWithoutDefaults- The props object passed into the component\n */\nexport function getPropsWithDefaults(\n defaultProps: Partial,\n propsWithoutDefaults: TProps,\n): TProps {\n const props = { ...propsWithoutDefaults };\n for (const key of Object.keys(defaultProps) as (keyof TProps)[]) {\n if (props[key] === undefined) {\n props[key] = defaultProps[key]!;\n }\n }\n\n return props;\n}\n","import * as React from 'react';\nimport { arraysEqual } from './array';\n\n/**\n * Internal state type for the ref.\n */\ntype LocalState = {\n refs: (React.Ref | undefined)[];\n resolver?: (newValue: TType | TValue | null) => void;\n};\n\n/**\n * Set up a ref resolver function given internal state managed for the ref.\n * @param local Set\n */\nconst createResolver =\n (local: LocalState) =>\n (newValue: TType | TValue | null) => {\n for (const ref of local.refs) {\n if (typeof ref === 'function') {\n ref(newValue);\n } else if (ref) {\n // work around the immutability of the React.Ref type\n (ref as unknown as React.MutableRefObject).current = newValue;\n }\n }\n };\n\n/**\n * Helper to merge refs from within class components.\n */\nexport const createMergedRef = (value?: TValue) => {\n const local: LocalState = {\n refs: [] as LocalState['refs'],\n };\n\n return (\n ...newRefs: (React.Ref | undefined)[]\n ): ((newValue: TType | TValue | null) => void) => {\n if (!local.resolver || !arraysEqual(local.refs, newRefs)) {\n local.resolver = createResolver(local);\n }\n\n local.refs = newRefs;\n\n return local.resolver!;\n };\n};\n","import * as React from 'react';\nimport { canUseDOM } from './dom/canUseDOM';\n\n/**\n * React currently throws a warning when using `useLayoutEffect` on the server. To get around it,\n * this hook calls `useEffect` on the server (no-op) and `useLayoutEffect` in the browser.\n *\n * Prefer `useEffect` unless you have a specific need to do something after mount and before paint,\n * such as to avoid a render flash for certain operations.\n *\n * Server-side rendering is detected based on `canUseDOM` from `@fluentui/utilities`.\n *\n * https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\n * https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js\n */\n// eslint-disable-next-line no-restricted-properties\nexport const useIsomorphicLayoutEffect: typeof React.useEffect = canUseDOM() ? React.useLayoutEffect : React.useEffect;\n","import { GlobalSettings, warn } from '@fluentui/utilities';\nimport { fontFace, mergeStyles, Stylesheet } from '@fluentui/merge-styles';\nimport type { IRawStyle, IFontFace } from '@fluentui/merge-styles';\n\nexport interface IIconSubset {\n fontFace?: IFontFace;\n icons: {\n [key: string]: string | JSX.Element;\n };\n\n style?: IRawStyle;\n /**\n * Indicates to the icon renderer that it is safe to merge any props on the original `Icon` element\n * onto the child content element registered for the icon which are valid for HTML images.\n */\n mergeImageProps?: boolean;\n}\n\nexport interface IIconSubsetRecord extends IIconSubset {\n isRegistered?: boolean;\n className?: string;\n}\n\nexport interface IIconRecord {\n code: string | undefined;\n subset: IIconSubsetRecord;\n}\n\nexport interface IIconOptions {\n /**\n * By default, registering the same set of icons will generate a console warning per duplicate icon\n * registered, because this scenario can create unexpected consequences.\n *\n * Some scenarios include:\n *\n * Icon set was previously registered using a different base url.\n * Icon set was previously registered but a different version was provided.\n * Icons in a previous registered set overlap with a new set.\n *\n * To simply ignore previously registered icons, you can specify to disable warnings. This means\n * that if an icon which was previous registered is registered again, it will be silently ignored.\n * However, consider whether the problems listed above will cause issues.\n **/\n disableWarnings: boolean;\n\n /**\n * @deprecated Use `disableWarnings` instead.\n */\n warnOnMissingIcons?: boolean;\n}\n\nexport interface IIconRecords {\n __options: IIconOptions;\n __remapped: { [key: string]: string };\n [key: string]: IIconRecord | {};\n}\n\nconst ICON_SETTING_NAME = 'icons';\n\nconst _iconSettings = GlobalSettings.getValue(ICON_SETTING_NAME, {\n __options: {\n disableWarnings: false,\n warnOnMissingIcons: true,\n },\n __remapped: {},\n});\n\n// Reset icon registration on stylesheet resets.\nconst stylesheet = Stylesheet.getInstance();\n\nif (stylesheet && stylesheet.onReset) {\n stylesheet.onReset(() => {\n for (const name in _iconSettings) {\n if (_iconSettings.hasOwnProperty(name) && !!(_iconSettings[name] as IIconRecord).subset) {\n (_iconSettings[name] as IIconRecord).subset.className = undefined;\n }\n }\n });\n}\n\n/**\n * Normalizes an icon name for consistent mapping.\n * Current implementation is to convert the icon name to lower case.\n *\n * @param name - Icon name to normalize.\n * @returns {string} Normalized icon name to use for indexing and mapping.\n */\nconst normalizeIconName = (name: string): string => name.toLowerCase();\n\n/**\n * Registers a given subset of icons.\n *\n * @param iconSubset - the icon subset definition.\n */\nexport function registerIcons(iconSubset: IIconSubset, options?: Partial): void {\n let subset = {\n ...iconSubset,\n isRegistered: false,\n className: undefined,\n };\n let { icons } = iconSubset;\n\n // Grab options, optionally mix user provided ones on top.\n options = options ? { ..._iconSettings.__options, ...options } : _iconSettings.__options;\n\n for (const iconName in icons) {\n if (icons.hasOwnProperty(iconName)) {\n const code = icons[iconName];\n const normalizedIconName = normalizeIconName(iconName);\n\n if (_iconSettings[normalizedIconName]) {\n _warnDuplicateIcon(iconName);\n } else {\n _iconSettings[normalizedIconName] = {\n code,\n subset,\n } as IIconRecord;\n }\n }\n }\n}\n\n/**\n * Unregisters icons by name.\n *\n * @param iconNames - List of icons to unregister.\n */\nexport function unregisterIcons(iconNames: string[]): void {\n const options = _iconSettings.__options;\n\n for (const iconName of iconNames) {\n const normalizedIconName = normalizeIconName(iconName);\n if (_iconSettings[normalizedIconName]) {\n delete _iconSettings[normalizedIconName];\n } else {\n // Warn that we are trying to delete an icon that doesn't exist\n if (!options.disableWarnings) {\n warn(`The icon \"${iconName}\" tried to unregister but was not registered.`);\n }\n }\n\n // Delete any aliases for this iconName\n if (_iconSettings.__remapped[normalizedIconName]) {\n delete _iconSettings.__remapped[normalizedIconName];\n }\n\n // Delete any items that were an alias for this iconName\n Object.keys(_iconSettings.__remapped).forEach((key: string) => {\n if (_iconSettings.__remapped[key] === normalizedIconName) {\n delete _iconSettings.__remapped[key];\n }\n });\n }\n}\n\n/**\n * Remaps one icon name to another.\n */\nexport function registerIconAlias(iconName: string, mappedToName: string): void {\n _iconSettings.__remapped[normalizeIconName(iconName)] = normalizeIconName(mappedToName);\n}\n\n/**\n * Gets an icon definition. If an icon is requested but the subset has yet to be registered,\n * it will get registered immediately.\n *\n * @public\n * @param name - Name of icon.\n */\nexport function getIcon(name?: string): IIconRecord | undefined {\n let icon: IIconRecord | undefined = undefined;\n const options = _iconSettings.__options;\n\n name = name ? normalizeIconName(name) : '';\n name = _iconSettings.__remapped[name] || name;\n\n if (name) {\n icon = _iconSettings[name!] as IIconRecord;\n\n if (icon) {\n let { subset } = icon;\n if (subset && subset.fontFace) {\n if (!subset.isRegistered) {\n fontFace(subset.fontFace);\n subset.isRegistered = true;\n }\n\n if (!subset.className) {\n subset.className = mergeStyles(subset.style, {\n fontFamily: subset.fontFace.fontFamily,\n fontWeight: subset.fontFace.fontWeight || 'normal',\n fontStyle: subset.fontFace.fontStyle || 'normal',\n });\n }\n }\n } else {\n // eslint-disable-next-line deprecation/deprecation\n if (!options.disableWarnings && options.warnOnMissingIcons) {\n warn(\n `The icon \"${name}\" was used but not registered. See https://github.com/microsoft/fluentui/wiki/Using-icons for more information.`,\n );\n }\n }\n }\n\n return icon;\n}\n\n/**\n * Sets the icon options.\n *\n * @public\n */\nexport function setIconOptions(options: Partial): void {\n _iconSettings.__options = {\n ..._iconSettings.__options,\n ...options,\n };\n}\n\nlet _missingIcons: string[] = [];\nlet _missingIconsTimer: ReturnType | undefined = undefined;\n\nfunction _warnDuplicateIcon(iconName: string): void {\n const options = _iconSettings.__options;\n const warningDelay = 2000;\n const maxIconsInMessage = 10;\n\n if (!options.disableWarnings) {\n _missingIcons.push(iconName);\n if (_missingIconsTimer === undefined) {\n _missingIconsTimer = setTimeout(() => {\n warn(\n `Some icons were re-registered. Applications should only call registerIcons for any given ` +\n `icon once. Redefining what an icon is may have unintended consequences. Duplicates ` +\n `include: \\n` +\n _missingIcons.slice(0, maxIconsInMessage).join(', ') +\n (_missingIcons.length > maxIconsInMessage ? ` (+ ${_missingIcons.length - maxIconsInMessage} more)` : ''),\n );\n _missingIconsTimer = undefined;\n _missingIcons = [];\n }, warningDelay);\n }\n }\n}\n","/******************************************************************************\nCopyright (c) Microsoft Corporation.\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\nPERFORMANCE OF THIS SOFTWARE.\n***************************************************************************** */\n/* global Reflect, Promise, SuppressedError, Symbol, Iterator */\n\nvar extendStatics = function(d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n};\n\nexport function __extends(d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n}\n\nexport var __assign = function() {\n __assign = Object.assign || function __assign(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n return t;\n }\n return __assign.apply(this, arguments);\n}\n\nexport function __rest(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}\n\nexport function __decorate(decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n}\n\nexport function __param(paramIndex, decorator) {\n return function (target, key) { decorator(target, key, paramIndex); }\n}\n\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\n function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\n var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\n var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\n var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\n var _, done = false;\n for (var i = decorators.length - 1; i >= 0; i--) {\n var context = {};\n for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\n for (var p in contextIn.access) context.access[p] = contextIn.access[p];\n context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\n var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\n if (kind === \"accessor\") {\n if (result === void 0) continue;\n if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\n if (_ = accept(result.get)) descriptor.get = _;\n if (_ = accept(result.set)) descriptor.set = _;\n if (_ = accept(result.init)) initializers.unshift(_);\n }\n else if (_ = accept(result)) {\n if (kind === \"field\") initializers.unshift(_);\n else descriptor[key] = _;\n }\n }\n if (target) Object.defineProperty(target, contextIn.name, descriptor);\n done = true;\n};\n\nexport function __runInitializers(thisArg, initializers, value) {\n var useValue = arguments.length > 2;\n for (var i = 0; i < initializers.length; i++) {\n value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\n }\n return useValue ? value : void 0;\n};\n\nexport function __propKey(x) {\n return typeof x === \"symbol\" ? x : \"\".concat(x);\n};\n\nexport function __setFunctionName(f, name, prefix) {\n if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\n return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\n};\n\nexport function __metadata(metadataKey, metadataValue) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\n}\n\nexport function __awaiter(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}\n\nexport function __generator(thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === \"function\" ? Iterator : Object).prototype);\n return g.next = verb(0), g[\"throw\"] = verb(1), g[\"return\"] = verb(2), typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (g && (g = 0, op[0] && (_ = 0)), _) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n}\n\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n});\n\nexport function __exportStar(m, o) {\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\n}\n\nexport function __values(o) {\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\n if (m) return m.call(o);\n if (o && typeof o.length === \"number\") return {\n next: function () {\n if (o && i >= o.length) o = void 0;\n return { value: o && o[i++], done: !o };\n }\n };\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\n}\n\nexport function __read(o, n) {\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\n if (!m) return o;\n var i = m.call(o), r, ar = [], e;\n try {\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\n }\n catch (error) { e = { error: error }; }\n finally {\n try {\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\n }\n finally { if (e) throw e.error; }\n }\n return ar;\n}\n\n/** @deprecated */\nexport function __spread() {\n for (var ar = [], i = 0; i < arguments.length; i++)\n ar = ar.concat(__read(arguments[i]));\n return ar;\n}\n\n/** @deprecated */\nexport function __spreadArrays() {\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\n r[k] = a[j];\n return r;\n}\n\nexport function __spreadArray(to, from, pack) {\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n if (ar || !(i in from)) {\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n ar[i] = from[i];\n }\n }\n return to.concat(ar || Array.prototype.slice.call(from));\n}\n\nexport function __await(v) {\n return this instanceof __await ? (this.v = v, this) : new __await(v);\n}\n\nexport function __asyncGenerator(thisArg, _arguments, generator) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\n return i = Object.create((typeof AsyncIterator === \"function\" ? AsyncIterator : Object).prototype), verb(\"next\"), verb(\"throw\"), verb(\"return\", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;\n function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }\n function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\n function fulfill(value) { resume(\"next\", value); }\n function reject(value) { resume(\"throw\", value); }\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\n}\n\nexport function __asyncDelegator(o) {\n var i, p;\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\n}\n\nexport function __asyncValues(o) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var m = o[Symbol.asyncIterator], i;\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\n}\n\nexport function __makeTemplateObject(cooked, raw) {\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\n return cooked;\n};\n\nvar __setModuleDefault = Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n};\n\nvar ownKeys = function(o) {\n ownKeys = Object.getOwnPropertyNames || function (o) {\n var ar = [];\n for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;\n return ar;\n };\n return ownKeys(o);\n};\n\nexport function __importStar(mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== \"default\") __createBinding(result, mod, k[i]);\n __setModuleDefault(result, mod);\n return result;\n}\n\nexport function __importDefault(mod) {\n return (mod && mod.__esModule) ? mod : { default: mod };\n}\n\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n}\n\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\n}\n\nexport function __classPrivateFieldIn(state, receiver) {\n if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\n return typeof state === \"function\" ? receiver === state : state.has(receiver);\n}\n\nexport function __addDisposableResource(env, value, async) {\n if (value !== null && value !== void 0) {\n if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\n var dispose, inner;\n if (async) {\n if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\n dispose = value[Symbol.asyncDispose];\n }\n if (dispose === void 0) {\n if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\n dispose = value[Symbol.dispose];\n if (async) inner = dispose;\n }\n if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\n if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };\n env.stack.push({ value: value, dispose: dispose, async: async });\n }\n else if (async) {\n env.stack.push({ async: true });\n }\n return value;\n}\n\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\n var e = new Error(message);\n return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\n};\n\nexport function __disposeResources(env) {\n function fail(e) {\n env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\n env.hasError = true;\n }\n var r, s = 0;\n function next() {\n while (r = env.stack.pop()) {\n try {\n if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);\n if (r.dispose) {\n var result = r.dispose.call(r.value);\n if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\n }\n else s |= 1;\n }\n catch (e) {\n fail(e);\n }\n }\n if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();\n if (env.hasError) throw env.error;\n }\n return next();\n}\n\nexport function __rewriteRelativeImportExtension(path, preserveJsx) {\n if (typeof path === \"string\" && /^\\.\\.?\\//.test(path)) {\n return path.replace(/\\.(tsx)$|((?:\\.d)?)((?:\\.[^./]+?)?)\\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {\n return tsx ? preserveJsx ? \".jsx\" : \".js\" : d && (!ext || !cm) ? m : (d + ext + \".\" + cm.toLowerCase() + \"js\");\n });\n }\n return path;\n}\n\nexport default {\n __extends,\n __assign,\n __rest,\n __decorate,\n __param,\n __esDecorate,\n __runInitializers,\n __propKey,\n __setFunctionName,\n __metadata,\n __awaiter,\n __generator,\n __createBinding,\n __exportStar,\n __values,\n __read,\n __spread,\n __spreadArrays,\n __spreadArray,\n __await,\n __asyncGenerator,\n __asyncDelegator,\n __asyncValues,\n __makeTemplateObject,\n __importStar,\n __importDefault,\n __classPrivateFieldGet,\n __classPrivateFieldSet,\n __classPrivateFieldIn,\n __addDisposableResource,\n __disposeResources,\n __rewriteRelativeImportExtension,\n};\n","import type { IEffects, IPalette, ISemanticColors } from '../types/index';\n\n/** Generates all the semantic slot colors based on the theme so far\n * We'll use these as fallbacks for semantic slots that the passed in theme did not define.\n * The caller must still mix in the customized semantic slots at the end.\n */\nexport function makeSemanticColors(\n p: IPalette,\n e: IEffects,\n s: Partial | undefined,\n isInverted: boolean,\n depComments: boolean = false,\n): ISemanticColors {\n const semanticColors: Partial = {\n primaryButtonBorder: 'transparent',\n\n errorText: !isInverted ? '#a4262c' : '#F1707B',\n\n messageText: !isInverted ? '#323130' : '#F3F2F1',\n messageLink: !isInverted ? '#005A9E' : '#6CB8F6',\n messageLinkHovered: !isInverted ? '#004578' : '#82C7FF',\n\n infoIcon: !isInverted ? '#605e5c' : '#C8C6C4',\n errorIcon: !isInverted ? '#A80000' : '#F1707B',\n blockingIcon: !isInverted ? '#FDE7E9' : '#442726',\n warningIcon: !isInverted ? '#797775' : '#C8C6C4',\n severeWarningIcon: !isInverted ? '#D83B01' : '#FCE100',\n successIcon: !isInverted ? '#107C10' : '#92C353',\n\n infoBackground: !isInverted ? '#f3f2f1' : '#323130',\n errorBackground: !isInverted ? '#FDE7E9' : '#442726',\n blockingBackground: !isInverted ? '#FDE7E9' : '#442726',\n warningBackground: !isInverted ? '#FFF4CE' : '#433519',\n severeWarningBackground: !isInverted ? '#FED9CC' : '#4F2A0F',\n successBackground: !isInverted ? '#DFF6DD' : '#393D1B',\n\n // deprecated\n warningHighlight: !isInverted ? '#ffb900' : '#fff100',\n successText: !isInverted ? '#107C10' : '#92c353',\n\n ...s,\n };\n\n const fullSemanticColors = getSemanticColors(p, e, semanticColors, isInverted);\n return _fixDeprecatedSlots(fullSemanticColors, depComments);\n}\n\n/**\n * Map partial platte and effects to partial semantic colors.\n */\nexport function getSemanticColors>(\n p: Partial | undefined,\n e: Partial | undefined,\n s: Partial | undefined,\n isInverted: boolean,\n depComments: boolean = false,\n): TResult {\n let result: Partial = {};\n\n // map palette\n const {\n white,\n black,\n themePrimary,\n themeDark,\n themeDarker,\n themeDarkAlt,\n themeLighter,\n neutralLight,\n neutralLighter,\n neutralDark,\n neutralQuaternary,\n neutralQuaternaryAlt,\n neutralPrimary,\n neutralSecondary,\n neutralSecondaryAlt,\n neutralTertiary,\n neutralTertiaryAlt,\n neutralLighterAlt,\n accent,\n } = p || {};\n\n if (white) {\n result.bodyBackground = white;\n result.bodyFrameBackground = white;\n result.accentButtonText = white;\n result.buttonBackground = white;\n result.primaryButtonText = white;\n result.primaryButtonTextHovered = white;\n result.primaryButtonTextPressed = white;\n result.inputBackground = white;\n result.inputForegroundChecked = white;\n result.listBackground = white;\n result.menuBackground = white;\n result.cardStandoutBackground = white;\n }\n if (black) {\n result.bodyTextChecked = black;\n result.buttonTextCheckedHovered = black;\n }\n if (themePrimary) {\n result.link = themePrimary;\n result.primaryButtonBackground = themePrimary;\n result.inputBackgroundChecked = themePrimary;\n result.inputIcon = themePrimary;\n result.inputFocusBorderAlt = themePrimary;\n result.menuIcon = themePrimary;\n result.menuHeader = themePrimary;\n result.accentButtonBackground = themePrimary;\n }\n if (themeDark) {\n result.primaryButtonBackgroundPressed = themeDark;\n result.inputBackgroundCheckedHovered = themeDark;\n result.inputIconHovered = themeDark;\n }\n if (themeDarker) {\n result.linkHovered = themeDarker;\n }\n if (themeDarkAlt) {\n result.primaryButtonBackgroundHovered = themeDarkAlt;\n }\n if (themeLighter) {\n result.inputPlaceholderBackgroundChecked = themeLighter;\n }\n if (neutralLight) {\n result.bodyBackgroundChecked = neutralLight;\n result.bodyFrameDivider = neutralLight;\n result.bodyDivider = neutralLight;\n result.variantBorder = neutralLight;\n result.buttonBackgroundCheckedHovered = neutralLight;\n result.buttonBackgroundPressed = neutralLight;\n result.listItemBackgroundChecked = neutralLight;\n result.listHeaderBackgroundPressed = neutralLight;\n result.menuItemBackgroundPressed = neutralLight;\n // eslint-disable-next-line deprecation/deprecation\n result.menuItemBackgroundChecked = neutralLight;\n }\n if (neutralLighter) {\n result.bodyBackgroundHovered = neutralLighter;\n result.buttonBackgroundHovered = neutralLighter;\n result.buttonBackgroundDisabled = neutralLighter;\n result.buttonBorderDisabled = neutralLighter;\n result.primaryButtonBackgroundDisabled = neutralLighter;\n result.disabledBackground = neutralLighter;\n result.listItemBackgroundHovered = neutralLighter;\n result.listHeaderBackgroundHovered = neutralLighter;\n result.menuItemBackgroundHovered = neutralLighter;\n }\n if (neutralQuaternary) {\n result.primaryButtonTextDisabled = neutralQuaternary;\n result.disabledSubtext = neutralQuaternary;\n }\n if (neutralQuaternaryAlt) {\n result.listItemBackgroundCheckedHovered = neutralQuaternaryAlt;\n }\n if (neutralTertiary) {\n result.disabledBodyText = neutralTertiary;\n result.variantBorderHovered = s?.variantBorderHovered || neutralTertiary;\n result.buttonTextDisabled = neutralTertiary;\n result.inputIconDisabled = neutralTertiary;\n result.disabledText = neutralTertiary;\n }\n if (neutralPrimary) {\n result.bodyText = neutralPrimary;\n result.actionLink = neutralPrimary;\n result.buttonText = neutralPrimary;\n result.inputBorderHovered = neutralPrimary;\n result.inputText = neutralPrimary;\n result.listText = neutralPrimary;\n result.menuItemText = neutralPrimary;\n }\n if (neutralLighterAlt) {\n result.bodyStandoutBackground = neutralLighterAlt;\n result.defaultStateBackground = neutralLighterAlt;\n }\n if (neutralDark) {\n result.actionLinkHovered = neutralDark;\n result.buttonTextHovered = neutralDark;\n result.buttonTextChecked = neutralDark;\n result.buttonTextPressed = neutralDark;\n result.inputTextHovered = neutralDark;\n result.menuItemTextHovered = neutralDark;\n }\n if (neutralSecondary) {\n result.bodySubtext = neutralSecondary;\n result.focusBorder = neutralSecondary;\n result.inputBorder = neutralSecondary;\n result.smallInputBorder = neutralSecondary;\n result.inputPlaceholderText = neutralSecondary;\n }\n if (neutralSecondaryAlt) {\n result.buttonBorder = neutralSecondaryAlt;\n }\n if (neutralTertiaryAlt) {\n result.disabledBodySubtext = neutralTertiaryAlt;\n result.disabledBorder = neutralTertiaryAlt;\n result.buttonBackgroundChecked = neutralTertiaryAlt;\n result.menuDivider = neutralTertiaryAlt;\n }\n if (accent) {\n result.accentButtonBackground = accent;\n }\n\n // map effects\n if (e?.elevation4) {\n result.cardShadow = e.elevation4;\n }\n if (!isInverted && e?.elevation8) {\n result.cardShadowHovered = e.elevation8;\n } else if (result.variantBorderHovered) {\n result.cardShadowHovered = '0 0 1px ' + result.variantBorderHovered;\n }\n\n result = {\n ...result,\n // mix in customized semantic slots\n ...s,\n };\n\n return result as TResult;\n}\n\nfunction _fixDeprecatedSlots(s: ISemanticColors, depComments: boolean): ISemanticColors {\n // Add @deprecated tag as comment if enabled\n let dep = '';\n if (depComments === true) {\n dep = ' /* @deprecated */';\n }\n\n /* eslint-disable deprecation/deprecation */\n s.listTextColor = s.listText + dep;\n s.menuItemBackgroundChecked += dep;\n s.warningHighlight += dep;\n s.warningText = s.messageText + dep;\n s.successText += dep;\n /* eslint-enable deprecation/deprecation */\n return s;\n}\n","import { merge } from '@fluentui/utilities';\nimport { getSemanticColors } from './utilities/makeSemanticColors';\nimport type { IFontStyles, PartialTheme, Theme } from './types/index';\n\n/**\n * Merge a partial/full theme into a full theme and returns a merged full theme.\n */\nexport function mergeThemes(theme: Theme, partialTheme: PartialTheme = {}): Theme {\n const mergedTheme = merge({}, theme, partialTheme, {\n semanticColors: getSemanticColors(\n partialTheme.palette,\n partialTheme.effects,\n partialTheme.semanticColors,\n partialTheme.isInverted === undefined ? theme.isInverted : partialTheme.isInverted,\n ),\n }) as Theme;\n\n if (partialTheme.palette?.themePrimary && !partialTheme.palette?.accent) {\n mergedTheme.palette.accent = partialTheme.palette.themePrimary;\n }\n\n if (partialTheme.defaultFontStyle) {\n for (const fontStyle of Object.keys(mergedTheme.fonts) as (keyof IFontStyles)[]) {\n mergedTheme.fonts[fontStyle] = merge(\n mergedTheme.fonts[fontStyle],\n partialTheme.defaultFontStyle,\n partialTheme?.fonts?.[fontStyle],\n );\n }\n }\n\n return mergedTheme;\n}\n","import type { IPalette } from '../types/index';\n\n// When adding or removing a color, make sure you keep this consistent with IColorClassNames\n// by adding the color variants.\nexport const DefaultPalette: IPalette = {\n themeDarker: '#004578',\n themeDark: '#005a9e',\n themeDarkAlt: '#106ebe',\n themePrimary: '#0078d4',\n themeSecondary: '#2b88d8',\n themeTertiary: '#71afe5',\n themeLight: '#c7e0f4',\n themeLighter: '#deecf9',\n themeLighterAlt: '#eff6fc',\n black: '#000000',\n blackTranslucent40: 'rgba(0,0,0,.4)',\n neutralDark: '#201f1e',\n neutralPrimary: '#323130',\n neutralPrimaryAlt: '#3b3a39',\n neutralSecondary: '#605e5c',\n neutralSecondaryAlt: '#8a8886',\n neutralTertiary: '#a19f9d',\n neutralTertiaryAlt: '#c8c6c4',\n neutralQuaternary: '#d2d0ce',\n neutralQuaternaryAlt: '#e1dfdd',\n neutralLight: '#edebe9',\n neutralLighter: '#f3f2f1',\n neutralLighterAlt: '#faf9f8',\n accent: '#0078d4',\n white: '#ffffff',\n whiteTranslucent40: 'rgba(255,255,255,.4)',\n yellowDark: '#d29200',\n yellow: '#ffb900',\n yellowLight: '#fff100',\n orange: '#d83b01',\n orangeLight: '#ea4300',\n orangeLighter: '#ff8c00',\n redDark: '#a4262c',\n red: '#e81123',\n magentaDark: '#5c005c',\n magenta: '#b4009e',\n magentaLight: '#e3008c',\n purpleDark: '#32145a',\n purple: '#5c2d91',\n purpleLight: '#b4a0ff',\n blueDark: '#002050',\n blueMid: '#00188f',\n blue: '#0078d4',\n blueLight: '#00bcf2',\n tealDark: '#004b50',\n teal: '#008272',\n tealLight: '#00b294',\n greenDark: '#004b1c',\n green: '#107c10',\n greenLight: '#bad80a',\n};\n","export namespace Depths {\n export const depth0 = '0 0 0 0 transparent';\n export const depth4 = '0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)';\n export const depth8 = '0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)';\n export const depth16 = '0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)';\n export const depth64 = '0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)';\n}\n","import { Depths } from './FluentDepths';\nimport type { IEffects } from '../types/index';\n\nexport const DefaultEffects: IEffects = {\n elevation4: Depths.depth4,\n elevation8: Depths.depth8,\n elevation16: Depths.depth16,\n elevation64: Depths.depth64,\n\n roundedCorner2: '2px',\n roundedCorner4: '4px',\n roundedCorner6: '6px',\n};\n","import type { ISpacing } from '../types/index';\n\nexport const DefaultSpacing: ISpacing = {\n s2: '4px',\n s1: '8px',\n m: '16px',\n l1: '20px',\n l2: '32px',\n};\n","import { keyframes } from '@fluentui/merge-styles';\nimport type { IAnimationStyles, IAnimationVariables } from '../types/IAnimationStyles';\nimport type { IRawStyle } from '@fluentui/merge-styles';\n\n/* Register the keyframes */\n\nconst EASING_FUNCTION_1 = 'cubic-bezier(.1,.9,.2,1)';\nconst EASING_FUNCTION_2 = 'cubic-bezier(.1,.25,.75,.9)';\nconst DURATION_1 = '0.167s';\nconst DURATION_2 = '0.267s';\nconst DURATION_3 = '0.367s';\nconst DURATION_4 = '0.467s';\n\nconst FADE_IN: string = keyframes({\n from: { opacity: 0 },\n to: { opacity: 1 },\n});\n\nconst FADE_OUT: string = keyframes({\n from: { opacity: 1 },\n to: { opacity: 0, visibility: 'hidden' },\n});\n\nconst SLIDE_RIGHT_IN10: string = _createSlideInX(-10);\nconst SLIDE_RIGHT_IN20: string = _createSlideInX(-20);\nconst SLIDE_RIGHT_IN40: string = _createSlideInX(-40);\nconst SLIDE_RIGHT_IN400: string = _createSlideInX(-400);\nconst SLIDE_LEFT_IN10: string = _createSlideInX(10);\nconst SLIDE_LEFT_IN20: string = _createSlideInX(20);\nconst SLIDE_LEFT_IN40: string = _createSlideInX(40);\nconst SLIDE_LEFT_IN400: string = _createSlideInX(400);\nconst SLIDE_UP_IN10: string = _createSlideInY(10);\nconst SLIDE_UP_IN20: string = _createSlideInY(20);\nconst SLIDE_DOWN_IN10: string = _createSlideInY(-10);\nconst SLIDE_DOWN_IN20: string = _createSlideInY(-20);\n\nconst SLIDE_RIGHT_OUT10: string = _createSlideOutX(10);\nconst SLIDE_RIGHT_OUT20: string = _createSlideOutX(20);\nconst SLIDE_RIGHT_OUT40: string = _createSlideOutX(40);\nconst SLIDE_RIGHT_OUT400: string = _createSlideOutX(400);\nconst SLIDE_LEFT_OUT10: string = _createSlideOutX(-10);\nconst SLIDE_LEFT_OUT20: string = _createSlideOutX(-20);\nconst SLIDE_LEFT_OUT40: string = _createSlideOutX(-40);\nconst SLIDE_LEFT_OUT400: string = _createSlideOutX(-400);\nconst SLIDE_UP_OUT10: string = _createSlideOutY(-10);\nconst SLIDE_UP_OUT20: string = _createSlideOutY(-20);\nconst SLIDE_DOWN_OUT10: string = _createSlideOutY(10);\nconst SLIDE_DOWN_OUT20: string = _createSlideOutY(20);\n\nconst SCALE_UP100: string = keyframes({\n from: { transform: 'scale3d(.98,.98,1)' },\n to: { transform: 'scale3d(1,1,1)' },\n});\n\nconst SCALE_DOWN98: string = keyframes({\n from: { transform: 'scale3d(1,1,1)' },\n to: { transform: 'scale3d(.98,.98,1)' },\n});\n\nconst SCALE_DOWN100: string = keyframes({\n from: { transform: 'scale3d(1.03,1.03,1)' },\n to: { transform: 'scale3d(1,1,1)' },\n});\n\nconst SCALE_UP103: string = keyframes({\n from: { transform: 'scale3d(1,1,1)' },\n to: { transform: 'scale3d(1.03,1.03,1)' },\n});\n\nconst ROTATE90: string = keyframes({\n from: { transform: 'rotateZ(0deg)' },\n to: { transform: 'rotateZ(90deg)' },\n});\n\nconst ROTATE_N90: string = keyframes({\n from: { transform: 'rotateZ(0deg)' },\n to: { transform: 'rotateZ(-90deg)' },\n});\n\n/**\n * Exporting raw duraction values and easing functions to be used in custom animations\n */\nexport const AnimationVariables: IAnimationVariables = {\n easeFunction1: EASING_FUNCTION_1,\n easeFunction2: EASING_FUNCTION_2,\n durationValue1: DURATION_1,\n durationValue2: DURATION_2,\n durationValue3: DURATION_3,\n durationValue4: DURATION_4,\n};\n\n/**\n * All Fabric standard animations, exposed as json objects referencing predefined\n * keyframes. These objects can be mixed in with other class definitions.\n */\nexport const AnimationStyles: IAnimationStyles = {\n slideRightIn10: _createAnimation(`${FADE_IN},${SLIDE_RIGHT_IN10}`, DURATION_3, EASING_FUNCTION_1),\n slideRightIn20: _createAnimation(`${FADE_IN},${SLIDE_RIGHT_IN20}`, DURATION_3, EASING_FUNCTION_1),\n slideRightIn40: _createAnimation(`${FADE_IN},${SLIDE_RIGHT_IN40}`, DURATION_3, EASING_FUNCTION_1),\n slideRightIn400: _createAnimation(`${FADE_IN},${SLIDE_RIGHT_IN400}`, DURATION_3, EASING_FUNCTION_1),\n slideLeftIn10: _createAnimation(`${FADE_IN},${SLIDE_LEFT_IN10}`, DURATION_3, EASING_FUNCTION_1),\n slideLeftIn20: _createAnimation(`${FADE_IN},${SLIDE_LEFT_IN20}`, DURATION_3, EASING_FUNCTION_1),\n slideLeftIn40: _createAnimation(`${FADE_IN},${SLIDE_LEFT_IN40}`, DURATION_3, EASING_FUNCTION_1),\n slideLeftIn400: _createAnimation(`${FADE_IN},${SLIDE_LEFT_IN400}`, DURATION_3, EASING_FUNCTION_1),\n slideUpIn10: _createAnimation(`${FADE_IN},${SLIDE_UP_IN10}`, DURATION_3, EASING_FUNCTION_1),\n slideUpIn20: _createAnimation(`${FADE_IN},${SLIDE_UP_IN20}`, DURATION_3, EASING_FUNCTION_1),\n slideDownIn10: _createAnimation(`${FADE_IN},${SLIDE_DOWN_IN10}`, DURATION_3, EASING_FUNCTION_1),\n slideDownIn20: _createAnimation(`${FADE_IN},${SLIDE_DOWN_IN20}`, DURATION_3, EASING_FUNCTION_1),\n\n slideRightOut10: _createAnimation(`${FADE_OUT},${SLIDE_RIGHT_OUT10}`, DURATION_3, EASING_FUNCTION_1),\n slideRightOut20: _createAnimation(`${FADE_OUT},${SLIDE_RIGHT_OUT20}`, DURATION_3, EASING_FUNCTION_1),\n slideRightOut40: _createAnimation(`${FADE_OUT},${SLIDE_RIGHT_OUT40}`, DURATION_3, EASING_FUNCTION_1),\n slideRightOut400: _createAnimation(`${FADE_OUT},${SLIDE_RIGHT_OUT400}`, DURATION_3, EASING_FUNCTION_1),\n slideLeftOut10: _createAnimation(`${FADE_OUT},${SLIDE_LEFT_OUT10}`, DURATION_3, EASING_FUNCTION_1),\n slideLeftOut20: _createAnimation(`${FADE_OUT},${SLIDE_LEFT_OUT20}`, DURATION_3, EASING_FUNCTION_1),\n slideLeftOut40: _createAnimation(`${FADE_OUT},${SLIDE_LEFT_OUT40}`, DURATION_3, EASING_FUNCTION_1),\n slideLeftOut400: _createAnimation(`${FADE_OUT},${SLIDE_LEFT_OUT400}`, DURATION_3, EASING_FUNCTION_1),\n slideUpOut10: _createAnimation(`${FADE_OUT},${SLIDE_UP_OUT10}`, DURATION_3, EASING_FUNCTION_1),\n slideUpOut20: _createAnimation(`${FADE_OUT},${SLIDE_UP_OUT20}`, DURATION_3, EASING_FUNCTION_1),\n slideDownOut10: _createAnimation(`${FADE_OUT},${SLIDE_DOWN_OUT10}`, DURATION_3, EASING_FUNCTION_1),\n slideDownOut20: _createAnimation(`${FADE_OUT},${SLIDE_DOWN_OUT20}`, DURATION_3, EASING_FUNCTION_1),\n\n scaleUpIn100: _createAnimation(`${FADE_IN},${SCALE_UP100}`, DURATION_3, EASING_FUNCTION_1),\n scaleDownIn100: _createAnimation(`${FADE_IN},${SCALE_DOWN100}`, DURATION_3, EASING_FUNCTION_1),\n scaleUpOut103: _createAnimation(`${FADE_OUT},${SCALE_UP103}`, DURATION_1, EASING_FUNCTION_2),\n scaleDownOut98: _createAnimation(`${FADE_OUT},${SCALE_DOWN98}`, DURATION_1, EASING_FUNCTION_2),\n\n fadeIn100: _createAnimation(FADE_IN, DURATION_1, EASING_FUNCTION_2),\n fadeIn200: _createAnimation(FADE_IN, DURATION_2, EASING_FUNCTION_2),\n fadeIn400: _createAnimation(FADE_IN, DURATION_3, EASING_FUNCTION_2),\n fadeIn500: _createAnimation(FADE_IN, DURATION_4, EASING_FUNCTION_2),\n\n fadeOut100: _createAnimation(FADE_OUT, DURATION_1, EASING_FUNCTION_2),\n fadeOut200: _createAnimation(FADE_OUT, DURATION_2, EASING_FUNCTION_2),\n fadeOut400: _createAnimation(FADE_OUT, DURATION_3, EASING_FUNCTION_2),\n fadeOut500: _createAnimation(FADE_OUT, DURATION_4, EASING_FUNCTION_2),\n\n rotate90deg: _createAnimation(ROTATE90, '0.1s', EASING_FUNCTION_2),\n rotateN90deg: _createAnimation(ROTATE_N90, '0.1s', EASING_FUNCTION_2),\n\n // expandCollapse 100/200/400, delay 100/200\n};\n\nfunction _createAnimation(\n animationName: string,\n animationDuration: string,\n animationTimingFunction: string,\n): IRawStyle {\n return {\n animationName,\n animationDuration,\n animationTimingFunction,\n animationFillMode: 'both',\n };\n}\n\nfunction _createSlideInX(fromX: number): string {\n return keyframes({\n from: { transform: `translate3d(${fromX}px,0,0)`, pointerEvents: 'none' },\n to: { transform: `translate3d(0,0,0)`, pointerEvents: 'auto' },\n });\n}\n\nfunction _createSlideInY(fromY: number): string {\n return keyframes({\n from: { transform: `translate3d(0,${fromY}px,0)`, pointerEvents: 'none' },\n to: { transform: `translate3d(0,0,0)`, pointerEvents: 'auto' },\n });\n}\n\nfunction _createSlideOutX(toX: number): string {\n return keyframes({\n from: { transform: `translate3d(0,0,0)` },\n to: { transform: `translate3d(${toX}px,0,0)` },\n });\n}\n\nfunction _createSlideOutY(toY: number): string {\n return keyframes({\n from: { transform: `translate3d(0,0,0)` },\n to: { transform: `translate3d(0,${toY}px,0)` },\n });\n}\n","import type { IFontWeight } from '@fluentui/merge-styles';\n\n// Font face names to be registered.\nexport namespace LocalizedFontNames {\n export const Arabic = 'Segoe UI Web (Arabic)';\n export const Cyrillic = 'Segoe UI Web (Cyrillic)';\n export const EastEuropean = 'Segoe UI Web (East European)';\n export const Greek = 'Segoe UI Web (Greek)';\n export const Hebrew = 'Segoe UI Web (Hebrew)';\n export const Thai = 'Leelawadee UI Web';\n export const Vietnamese = 'Segoe UI Web (Vietnamese)';\n export const WestEuropean = 'Segoe UI Web (West European)';\n export const Selawik = 'Selawik Web';\n export const Armenian = 'Segoe UI Web (Armenian)';\n export const Georgian = 'Segoe UI Web (Georgian)';\n}\n\n// Font families with fallbacks, for the general regions.\nexport namespace LocalizedFontFamilies {\n export const Arabic = `'${LocalizedFontNames.Arabic}'`;\n export const ChineseSimplified = `'Microsoft Yahei UI', Verdana, Simsun`;\n export const ChineseTraditional = `'Microsoft Jhenghei UI', Pmingliu`;\n export const Cyrillic = `'${LocalizedFontNames.Cyrillic}'`;\n export const EastEuropean = `'${LocalizedFontNames.EastEuropean}'`;\n export const Greek = `'${LocalizedFontNames.Greek}'`;\n export const Hebrew = `'${LocalizedFontNames.Hebrew}'`;\n export const Hindi = `'Nirmala UI'`;\n export const Japanese = `'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka`;\n export const Korean = `'Malgun Gothic', Gulim`;\n export const Selawik = `'${LocalizedFontNames.Selawik}'`;\n export const Thai = `'Leelawadee UI Web', 'Kmer UI'`;\n export const Vietnamese = `'${LocalizedFontNames.Vietnamese}'`;\n export const WestEuropean = `'${LocalizedFontNames.WestEuropean}'`;\n export const Armenian = `'${LocalizedFontNames.Armenian}'`;\n export const Georgian = `'${LocalizedFontNames.Georgian}'`;\n}\n\n// Standard font sizes.\nexport namespace FontSizes {\n export const size10 = '10px';\n export const size12 = '12px';\n export const size14 = '14px';\n export const size16 = '16px';\n export const size18 = '18px';\n export const size20 = '20px';\n export const size24 = '24px';\n export const size28 = '28px';\n export const size32 = '32px';\n export const size42 = '42px';\n export const size68 = '68px';\n\n export const mini: string = '10px';\n export const xSmall: string = '10px';\n export const small: string = '12px';\n export const smallPlus: string = '12px';\n export const medium: string = '14px';\n export const mediumPlus: string = '16px';\n export const icon: string = '16px';\n export const large: string = '18px';\n export const xLarge: string = '20px';\n export const xLargePlus: string = '24px';\n export const xxLarge: string = '28px';\n export const xxLargePlus: string = '32px';\n export const superLarge: string = '42px';\n export const mega: string = '68px';\n}\n\n// Standard font weights.\nexport namespace FontWeights {\n export const light: IFontWeight = 100;\n export const semilight: IFontWeight = 300;\n export const regular: IFontWeight = 400;\n export const semibold: IFontWeight = 600;\n export const bold: IFontWeight = 700;\n}\n\n// Standard Icon Sizes.\nexport namespace IconFontSizes {\n export const xSmall: string = '10px';\n export const small: string = '12px';\n export const medium: string = '16px';\n export const large: string = '20px';\n}\n","import { FontSizes, FontWeights, LocalizedFontFamilies, LocalizedFontNames } from './FluentFonts';\nimport type { IFontWeight, IRawStyle } from '@fluentui/merge-styles';\nimport type { IFontStyles } from '../types/IFontStyles';\n\n// Fallback fonts, if specified system or web fonts are unavailable.\nconst FontFamilyFallbacks = `'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif`;\n\n// By default, we favor system fonts for the default.\n// All localized fonts use a web font and never use the system font.\nconst defaultFontFamily = `'Segoe UI', '${LocalizedFontNames.WestEuropean}'`;\n\n// Mapping of language prefix to to font family.\nconst LanguageToFontMap = {\n ar: LocalizedFontFamilies.Arabic,\n bg: LocalizedFontFamilies.Cyrillic,\n cs: LocalizedFontFamilies.EastEuropean,\n el: LocalizedFontFamilies.Greek,\n et: LocalizedFontFamilies.EastEuropean,\n he: LocalizedFontFamilies.Hebrew,\n hi: LocalizedFontFamilies.Hindi,\n hr: LocalizedFontFamilies.EastEuropean,\n hu: LocalizedFontFamilies.EastEuropean,\n ja: LocalizedFontFamilies.Japanese,\n kk: LocalizedFontFamilies.EastEuropean,\n ko: LocalizedFontFamilies.Korean,\n lt: LocalizedFontFamilies.EastEuropean,\n lv: LocalizedFontFamilies.EastEuropean,\n pl: LocalizedFontFamilies.EastEuropean,\n ru: LocalizedFontFamilies.Cyrillic,\n sk: LocalizedFontFamilies.EastEuropean,\n 'sr-latn': LocalizedFontFamilies.EastEuropean,\n th: LocalizedFontFamilies.Thai,\n tr: LocalizedFontFamilies.EastEuropean,\n uk: LocalizedFontFamilies.Cyrillic,\n vi: LocalizedFontFamilies.Vietnamese,\n 'zh-hans': LocalizedFontFamilies.ChineseSimplified,\n 'zh-hant': LocalizedFontFamilies.ChineseTraditional,\n hy: LocalizedFontFamilies.Armenian,\n ka: LocalizedFontFamilies.Georgian,\n};\n\nfunction _fontFamilyWithFallbacks(fontFamily: string): string {\n return `${fontFamily}, ${FontFamilyFallbacks}`;\n}\n\n/**\n * If there is a localized font for this language, return that.\n * Returns undefined if there is no localized font for that language.\n */\nfunction _getLocalizedFontFamily(language: string | null): string {\n for (const lang in LanguageToFontMap) {\n if (LanguageToFontMap.hasOwnProperty(lang) && language && lang.indexOf(language) === 0) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return (LanguageToFontMap as any)[lang];\n }\n }\n\n return defaultFontFamily;\n}\n\nfunction _createFont(size: string, weight: IFontWeight, fontFamily: string): IRawStyle {\n return {\n fontFamily: fontFamily,\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontSize: size,\n fontWeight: weight,\n };\n}\n\nexport function createFontStyles(localeCode: string | null): IFontStyles {\n const localizedFont = _getLocalizedFontFamily(localeCode);\n const fontFamilyWithFallback = _fontFamilyWithFallbacks(localizedFont);\n\n const fontStyles = {\n tiny: _createFont(FontSizes.mini, FontWeights.regular, fontFamilyWithFallback),\n xSmall: _createFont(FontSizes.xSmall, FontWeights.regular, fontFamilyWithFallback),\n small: _createFont(FontSizes.small, FontWeights.regular, fontFamilyWithFallback),\n smallPlus: _createFont(FontSizes.smallPlus, FontWeights.regular, fontFamilyWithFallback),\n medium: _createFont(FontSizes.medium, FontWeights.regular, fontFamilyWithFallback),\n mediumPlus: _createFont(FontSizes.mediumPlus, FontWeights.regular, fontFamilyWithFallback),\n large: _createFont(FontSizes.large, FontWeights.regular, fontFamilyWithFallback),\n xLarge: _createFont(FontSizes.xLarge, FontWeights.semibold, fontFamilyWithFallback),\n xLargePlus: _createFont(FontSizes.xLargePlus, FontWeights.semibold, fontFamilyWithFallback),\n xxLarge: _createFont(FontSizes.xxLarge, FontWeights.semibold, fontFamilyWithFallback),\n xxLargePlus: _createFont(FontSizes.xxLargePlus, FontWeights.semibold, fontFamilyWithFallback),\n superLarge: _createFont(FontSizes.superLarge, FontWeights.semibold, fontFamilyWithFallback),\n mega: _createFont(FontSizes.mega, FontWeights.semibold, fontFamilyWithFallback),\n };\n\n return fontStyles;\n}\n","import { fontFace } from '@fluentui/merge-styles';\nimport { FontWeights, LocalizedFontFamilies, LocalizedFontNames } from './FluentFonts';\nimport { createFontStyles } from './createFontStyles';\nimport { getLanguage, getWindow } from '@fluentui/utilities';\nimport type { IFontWeight } from '@fluentui/merge-styles';\nimport type { IFontStyles } from '../types/IFontStyles';\nimport type { IFabricConfig } from '../types/IFabricConfig';\n\n// Default urls.\nconst DefaultBaseUrl = 'https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets';\n\n// Standard font styling.\nexport const DefaultFontStyles: IFontStyles = createFontStyles(getLanguage());\n\nfunction _registerFontFace(fontFamily: string, url: string, fontWeight?: IFontWeight, localFontName?: string): void {\n fontFamily = `'${fontFamily}'`;\n\n const localFontSrc = localFontName !== undefined ? `local('${localFontName}'),` : '';\n\n fontFace({\n fontFamily,\n src: localFontSrc + `url('${url}.woff2') format('woff2'),` + `url('${url}.woff') format('woff')`,\n fontWeight,\n fontStyle: 'normal',\n fontDisplay: 'swap',\n });\n}\n\nfunction _registerFontFaceSet(\n baseUrl: string,\n fontFamily: string,\n cdnFolder: string,\n cdnFontName: string = 'segoeui',\n localFontName?: string,\n): void {\n const urlBase = `${baseUrl}/${cdnFolder}/${cdnFontName}`;\n\n _registerFontFace(fontFamily, urlBase + '-light', FontWeights.light, localFontName && localFontName + ' Light');\n _registerFontFace(\n fontFamily,\n urlBase + '-semilight',\n FontWeights.semilight,\n localFontName && localFontName + ' SemiLight',\n );\n _registerFontFace(fontFamily, urlBase + '-regular', FontWeights.regular, localFontName);\n _registerFontFace(\n fontFamily,\n urlBase + '-semibold',\n FontWeights.semibold,\n localFontName && localFontName + ' SemiBold',\n );\n _registerFontFace(fontFamily, urlBase + '-bold', FontWeights.bold, localFontName && localFontName + ' Bold');\n}\n\nexport function registerDefaultFontFaces(baseUrl: string): void {\n if (baseUrl) {\n const fontUrl = `${baseUrl}/fonts`;\n\n // Produce @font-face definitions for all supported web fonts.\n _registerFontFaceSet(fontUrl, LocalizedFontNames.Thai, 'leelawadeeui-thai', 'leelawadeeui');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.Arabic, 'segoeui-arabic');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.Cyrillic, 'segoeui-cyrillic');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.EastEuropean, 'segoeui-easteuropean');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.Greek, 'segoeui-greek');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.Hebrew, 'segoeui-hebrew');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.Vietnamese, 'segoeui-vietnamese');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.WestEuropean, 'segoeui-westeuropean', 'segoeui', 'Segoe UI');\n _registerFontFaceSet(fontUrl, LocalizedFontFamilies.Selawik, 'selawik', 'selawik');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.Armenian, 'segoeui-armenian');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.Georgian, 'segoeui-georgian');\n\n // Leelawadee UI (Thai) does not have a 'light' weight, so we override\n // the font-face generated above to use the 'semilight' weight instead.\n _registerFontFace('Leelawadee UI Web', `${fontUrl}/leelawadeeui-thai/leelawadeeui-semilight`, FontWeights.light);\n\n // Leelawadee UI (Thai) does not have a 'semibold' weight, so we override\n // the font-face generated above to use the 'bold' weight instead.\n _registerFontFace('Leelawadee UI Web', `${fontUrl}/leelawadeeui-thai/leelawadeeui-bold`, FontWeights.semibold);\n }\n}\n\n/**\n * Reads the fontBaseUrl from window.FabricConfig.fontBaseUrl or falls back to a default.\n */\nfunction _getFontBaseUrl(): string {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const fabricConfig: IFabricConfig | undefined = (getWindow() as any)?.FabricConfig;\n\n return fabricConfig?.fontBaseUrl ?? DefaultBaseUrl;\n}\n\n/**\n * Register the font faces.\n */\nregisterDefaultFontFaces(_getFontBaseUrl());\n","import { DefaultPalette } from './colors/index';\nimport { DefaultEffects } from './effects/index';\nimport { DefaultFontStyles } from './fonts/index';\nimport { mergeThemes } from './mergeThemes';\nimport { DefaultSpacing } from './spacing/index';\nimport { makeSemanticColors } from './utilities/makeSemanticColors';\nimport type { PartialTheme, Theme } from './types/index';\n\n/**\n * Creates a custom theme definition.\n * @param theme - Partial theme object.\n * @param depComments - Whether to include deprecated tags as comments for deprecated slots.\n */\nexport function createTheme(theme: PartialTheme = {}, depComments: boolean = false): Theme {\n const isInverted = !!theme.isInverted;\n const baseTheme: Theme = {\n palette: DefaultPalette,\n effects: DefaultEffects,\n fonts: DefaultFontStyles,\n spacing: DefaultSpacing,\n isInverted,\n disableGlobalClassNames: false,\n semanticColors: makeSemanticColors(DefaultPalette, DefaultEffects, undefined, isInverted, depComments),\n rtl: undefined,\n };\n\n return mergeThemes(baseTheme, theme);\n}\n","import type { IRawStyle } from '../MergeStyles';\n\nexport const HighContrastSelector = '@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)';\nexport const HighContrastSelectorWhite =\n // eslint-disable-next-line @fluentui/max-len\n '@media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light)';\nexport const HighContrastSelectorBlack =\n // eslint-disable-next-line @fluentui/max-len\n '@media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)';\n/**\n * @deprecated Use `HighContrastSelector`\n */\nexport const EdgeChromiumHighContrastSelector =\n '@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)';\n\nexport const ScreenWidthMinSmall = 320;\nexport const ScreenWidthMinMedium = 480;\nexport const ScreenWidthMinLarge = 640;\nexport const ScreenWidthMinXLarge = 1024;\nexport const ScreenWidthMinXXLarge = 1366;\nexport const ScreenWidthMinXXXLarge = 1920;\nexport const ScreenWidthMaxSmall = ScreenWidthMinMedium - 1;\nexport const ScreenWidthMaxMedium = ScreenWidthMinLarge - 1;\nexport const ScreenWidthMaxLarge = ScreenWidthMinXLarge - 1;\nexport const ScreenWidthMaxXLarge = ScreenWidthMinXXLarge - 1;\nexport const ScreenWidthMaxXXLarge = ScreenWidthMinXXXLarge - 1;\n\nexport const ScreenWidthMinUhfMobile = 768;\n\nexport function getScreenSelector(min: number | undefined, max: number | undefined): string {\n const minSelector = typeof min === 'number' ? ` and (min-width: ${min}px)` : '';\n const maxSelector = typeof max === 'number' ? ` and (max-width: ${max}px)` : '';\n return `@media only screen${minSelector}${maxSelector}`;\n}\n\n/**\n * The style which turns off high contrast adjustment in browsers.\n */\nexport function getHighContrastNoAdjustStyle(): IRawStyle {\n return {\n forcedColorAdjust: 'none',\n MsHighContrastAdjust: 'none',\n };\n}\n\n/**\n * The style which turns off high contrast adjustment in (only) Edge Chromium browser.\n * @deprecated Use `getHighContrastNoAdjustStyle`\n */\n// eslint-disable-next-line deprecation/deprecation\nexport function getEdgeChromiumNoHighContrastAdjustSelector(): { [EdgeChromiumHighContrastSelector]: IRawStyle } {\n return {\n // eslint-disable-next-line deprecation/deprecation\n [EdgeChromiumHighContrastSelector]: {\n forcedColorAdjust: 'none',\n MsHighContrastAdjust: 'none',\n },\n };\n}\n","export namespace ZIndexes {\n export const Nav: number = 1;\n /**\n * @deprecated Do not use\n */\n export const ScrollablePane: number = 1;\n export const FocusStyle: number = 1;\n export const Coachmark: number = 1000;\n export const Layer: number = 1000000;\n export const KeytipLayer: number = 1000001;\n}\n","import { HighContrastSelector } from './CommonStyles';\nimport { IsFocusVisibleClassName } from '@fluentui/utilities';\nimport { ZIndexes } from './zIndexes';\nimport type { IRawStyle } from '@fluentui/merge-styles';\nimport type { IGetFocusStylesOptions, ITheme } from '../interfaces/index';\n\n/**\n * Generates a focus style which can be used to define an :after focus border.\n *\n * @param theme - The theme object to use.\n * @param options - Options to customize the focus border.\n * @returns The style object.\n */\nexport function getFocusStyle(theme: ITheme, options?: IGetFocusStylesOptions): IRawStyle;\n/**\n * Generates a focus style which can be used to define an :after focus border.\n *\n * @param theme - The theme object to use.\n * @param inset - The number of pixels to inset the border.\n * @param position - The positioning applied to the container. Must\n * be 'relative' or 'absolute' so that the focus border can live around it.\n * @param highContrastStyle - Style for high contrast mode.\n * @param borderColor - Color of the border.\n * @param outlineColor - Color of the outline.\n * @param isFocusedOnly - If the styles should apply on focus or not.\n * @param borderRadius - If the style should include a rounded border.\n * @returns The style object.\n * @deprecated Use the object parameter version instead.\n */\nexport function getFocusStyle(\n theme: ITheme,\n inset?: number,\n position?: 'relative' | 'absolute',\n highContrastStyle?: IRawStyle | undefined,\n borderColor?: string,\n outlineColor?: string,\n isFocusedOnly?: boolean,\n borderRadius?: string | number | undefined,\n): IRawStyle;\nexport function getFocusStyle(\n theme: ITheme,\n insetOrOptions?: number | IGetFocusStylesOptions,\n position?: 'relative' | 'absolute',\n highContrastStyle?: IRawStyle,\n borderColor?: string,\n outlineColor?: string,\n isFocusedOnly?: boolean,\n borderRadius?: string | number | undefined,\n): IRawStyle {\n if (typeof insetOrOptions === 'number' || !insetOrOptions) {\n return _getFocusStyleInternal(theme, {\n inset: insetOrOptions,\n position,\n highContrastStyle,\n borderColor,\n outlineColor,\n isFocusedOnly,\n borderRadius,\n });\n } else {\n return _getFocusStyleInternal(theme, insetOrOptions);\n }\n}\n\nfunction _getFocusStyleInternal(theme: ITheme, options: IGetFocusStylesOptions = {}): IRawStyle {\n const {\n borderRadius,\n inset = 0,\n width = 1,\n position = 'relative',\n highContrastStyle,\n borderColor = theme.palette.white,\n outlineColor = theme.palette.neutralSecondary,\n isFocusedOnly = true,\n pointerEvents,\n } = options;\n\n return {\n // Clear browser-specific focus styles and use 'transparent' as placeholder for focus style.\n outline: 'transparent',\n // Requirement because pseudo-element is absolutely positioned.\n position,\n\n selectors: {\n // Clear the focus border in Firefox.\n // Reference: http://stackoverflow.com/a/199319/1436671\n '::-moz-focus-inner': {\n border: '0',\n },\n\n // When the element that uses this mixin is in a :focus state, add a pseudo-element to\n // create a border.\n [`.${IsFocusVisibleClassName} &${isFocusedOnly ? ':focus' : ''}:after, :host(.${IsFocusVisibleClassName}) &${\n isFocusedOnly ? ':focus' : ''\n }:after`]: {\n content: '\"\"',\n position: 'absolute',\n pointerEvents,\n left: inset + 1,\n top: inset + 1,\n bottom: inset + 1,\n right: inset + 1,\n border: `${width}px solid ${borderColor}`,\n outline: `${width}px solid ${outlineColor}`,\n zIndex: ZIndexes.FocusStyle,\n borderRadius,\n selectors: {\n [HighContrastSelector]: highContrastStyle,\n },\n },\n },\n };\n}\n\n/**\n * Generates style to clear browser specific focus styles.\n */\nexport function focusClear(): IRawStyle {\n return {\n selectors: {\n '&::-moz-focus-inner': {\n // Clear the focus border in Firefox. Reference: http://stackoverflow.com/a/199319/1436671\n border: 0,\n },\n '&': {\n // Clear browser specific focus styles and use transparent as placeholder for focus style\n outline: 'transparent',\n },\n },\n };\n}\n\n/**\n * Generates a style which can be used to set a border on focus.\n *\n * @param theme - The theme object to use.\n * @param inset - The number of pixels to inset the border (default 0)\n * @param width - The border width in pixels (default 1)\n * @param color - Color of the outline (default `theme.palette.neutralSecondary`)\n * @returns The style object.\n */\nexport function getFocusOutlineStyle(theme: ITheme, inset: number = 0, width: number = 1, color?: string): IRawStyle {\n return {\n selectors: {\n [`:global(${IsFocusVisibleClassName}) &:focus`]: {\n outline: `${width} solid ${color || theme.palette.neutralSecondary}`,\n outlineOffset: `${-inset}px`,\n },\n },\n };\n}\n\n/**\n * Generates text input border styles on focus.\n *\n * @param borderColor - Color of the border.\n * @param borderRadius - Radius of the border.\n * @param borderType - Type of the border.\n * @param borderPosition - Position of the border relative to the input element (default to -1\n * as it's the most common border width of the input element)\n * @returns The style object.\n */\nexport const getInputFocusStyle = (\n borderColor: string,\n borderRadius: string | number,\n borderType: 'border' | 'borderBottom' = 'border',\n borderPosition: number = -1,\n): IRawStyle => {\n const isBorderBottom = borderType === 'borderBottom';\n\n return {\n borderColor,\n selectors: {\n ':after': {\n pointerEvents: 'none',\n content: \"''\",\n position: 'absolute',\n left: isBorderBottom ? 0 : borderPosition,\n top: borderPosition,\n bottom: borderPosition,\n right: isBorderBottom ? 0 : borderPosition,\n [borderType]: `2px solid ${borderColor}`,\n borderRadius,\n width: borderType === 'borderBottom' ? '100%' : undefined,\n selectors: {\n [HighContrastSelector]: {\n [borderType === 'border' ? 'borderColor' : 'borderBottomColor']: 'Highlight',\n },\n },\n },\n },\n };\n};\n","import type { IRawStyle } from '@fluentui/merge-styles';\n\nexport const hiddenContentStyle: IRawStyle = {\n position: 'absolute',\n width: 1,\n height: 1,\n margin: -1,\n padding: 0,\n border: 0,\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n};\n","import { Stylesheet } from '@fluentui/merge-styles';\nimport { memoizeFunction } from '@fluentui/utilities';\nimport type { ITheme } from '../interfaces/index';\n\nexport type GlobalClassNames = Record;\n\n/**\n * Internal memoized function which simply takes in the class map and the\n * disable boolean. These immutable values can be memoized.\n */\nconst _getGlobalClassNames = memoizeFunction(\n (classNames: GlobalClassNames, disableGlobalClassNames?: boolean): GlobalClassNames => {\n const styleSheet = Stylesheet.getInstance();\n\n if (disableGlobalClassNames) {\n // disable global classnames\n return (Object.keys(classNames) as (keyof T)[]).reduce((acc, className) => {\n acc[className] = styleSheet.getClassName(classNames[className]);\n return acc;\n }, {} as GlobalClassNames);\n }\n\n // use global classnames\n return classNames;\n },\n);\n\n/**\n * Checks for the `disableGlobalClassNames` property on the `theme` to determine if it should return `classNames`\n * Note that calls to this function are memoized.\n *\n * @param classNames - The collection of global class names that apply when the flag is false. Make sure to pass in\n * the same instance on each call to benefit from memoization.\n * @param theme - The theme to check the flag on\n * @param disableGlobalClassNames - Optional. Explicitly opt in/out of disabling global classnames. Defaults to false.\n */\nexport function getGlobalClassNames(\n classNames: GlobalClassNames,\n theme: ITheme,\n disableGlobalClassNames?: boolean,\n): GlobalClassNames {\n return _getGlobalClassNames(\n classNames,\n disableGlobalClassNames !== undefined ? disableGlobalClassNames : theme.disableGlobalClassNames,\n );\n}\n","// Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.\n// See LICENSE in the project root for license information.\n\n/**\n * An IThemingInstruction can specify a rawString to be preserved or a theme slot and a default value\n * to use if that slot is not specified by the theme.\n */\n\n/* eslint-disable @typescript-eslint/no-use-before-define */\n\n// Declaring a global here in case that the execution environment is Node.js (without importing the\n// entire node.js d.ts for now)\ndeclare let global: any; // eslint-disable-line @typescript-eslint/no-explicit-any\n\nexport interface IThemingInstruction {\n theme?: string;\n defaultValue?: string;\n rawString?: string;\n}\n\nexport type ThemableArray = IThemingInstruction[];\n\nexport interface ITheme {\n [key: string]: string;\n}\n\ninterface IStyleSheet {\n cssText: string;\n}\n\ninterface IExtendedHtmlStyleElement extends HTMLStyleElement {\n styleSheet: IStyleSheet;\n}\n\n/**\n * Performance Measurement of loading styles\n */\ninterface IMeasurement {\n /**\n * Count of style element injected, which is the slow operation in IE\n */\n count: number;\n /**\n * Total duration of all loadStyles exections\n */\n duration: number;\n}\n\ninterface IRunState {\n mode: Mode;\n buffer: ThemableArray[];\n flushTimer: number;\n}\n\ninterface IThemeState {\n theme: ITheme | undefined;\n lastStyleElement: IExtendedHtmlStyleElement;\n registeredStyles: IStyleRecord[]; // records of already registered non-themable styles\n registeredThemableStyles: IStyleRecord[]; // records of already registered themable styles\n loadStyles: ((processedStyles: string, rawStyles?: string | ThemableArray) => void) | undefined;\n perf: IMeasurement;\n runState: IRunState;\n}\n\ninterface IStyleRecord {\n styleElement: Element;\n themableStyle: ThemableArray;\n}\n\ninterface ICustomEvent extends Event {\n args?: T;\n}\n\n/**\n * object returned from resolveThemableArray function\n */\ninterface IThemableArrayResolveResult {\n /** this string is the processed styles in string */\n styleString: string;\n\n /** this boolean indicates if this style array is themable */\n themable: boolean;\n}\n\n/**\n * In sync mode, styles are registered as style elements synchronously with loadStyles() call.\n * In async mode, styles are buffered and registered as batch in async timer for performance purpose.\n */\nexport const enum Mode {\n sync,\n async\n}\n\n/**\n * Themable styles and non-themable styles are tracked separately\n * Specify ClearStyleOptions when calling clearStyles API to specify which group of registered styles should be cleared.\n */\nexport const enum ClearStyleOptions {\n /** only themable styles will be cleared */\n onlyThemable = 1,\n /** only non-themable styles will be cleared */\n onlyNonThemable = 2,\n /** both themable and non-themable styles will be cleared */\n all = 3\n}\n\n// Store the theming state in __themeState__ global scope for reuse in the case of duplicate\n// load-themed-styles hosted on the page.\nconst _root: any = typeof window === 'undefined' ? global : window; // eslint-disable-line @typescript-eslint/no-explicit-any\n\n// Nonce string to inject into script tag if one provided. This is used in CSP (Content Security Policy).\nconst _styleNonce: string = _root && _root.CSPSettings && _root.CSPSettings.nonce;\n\nconst _themeState: IThemeState = initializeThemeState();\n\n/**\n * Matches theming tokens. For example, \"[theme: themeSlotName, default: #FFF]\" (including the quotes).\n */\nconst _themeTokenRegex: RegExp =\n /[\\'\\\"]\\[theme:\\s*(\\w+)\\s*(?:\\,\\s*default:\\s*([\\\\\"\\']?[\\.\\,\\(\\)\\#\\-\\s\\w]*[\\.\\,\\(\\)\\#\\-\\w][\\\"\\']?))?\\s*\\][\\'\\\"]/g;\n\nconst now: () => number = () =>\n typeof performance !== 'undefined' && !!performance.now ? performance.now() : Date.now();\n\nfunction measure(func: () => void): void {\n const start: number = now();\n func();\n const end: number = now();\n _themeState.perf.duration += end - start;\n}\n\n/**\n * initialize global state object\n */\nfunction initializeThemeState(): IThemeState {\n let state: IThemeState = _root.__themeState__ || {\n theme: undefined,\n lastStyleElement: undefined,\n registeredStyles: []\n };\n\n if (!state.runState) {\n state = {\n ...state,\n perf: {\n count: 0,\n duration: 0\n },\n runState: {\n flushTimer: 0,\n mode: Mode.sync,\n buffer: []\n }\n };\n }\n if (!state.registeredThemableStyles) {\n state = {\n ...state,\n registeredThemableStyles: []\n };\n }\n _root.__themeState__ = state;\n return state;\n}\n\n/**\n * Loads a set of style text. If it is registered too early, we will register it when the window.load\n * event is fired.\n * @param {string | ThemableArray} styles Themable style text to register.\n * @param {boolean} loadAsync When true, always load styles in async mode, irrespective of current sync mode.\n */\nexport function loadStyles(styles: string | ThemableArray, loadAsync: boolean = false): void {\n measure(() => {\n const styleParts: ThemableArray = Array.isArray(styles) ? styles : splitStyles(styles);\n const { mode, buffer, flushTimer } = _themeState.runState;\n if (loadAsync || mode === Mode.async) {\n buffer.push(styleParts);\n if (!flushTimer) {\n _themeState.runState.flushTimer = asyncLoadStyles();\n }\n } else {\n applyThemableStyles(styleParts);\n }\n });\n}\n\n/**\n * Allows for customizable loadStyles logic. e.g. for server side rendering application\n * @param {(processedStyles: string, rawStyles?: string | ThemableArray) => void}\n * a loadStyles callback that gets called when styles are loaded or reloaded\n */\nexport function configureLoadStyles(\n loadStylesFn: ((processedStyles: string, rawStyles?: string | ThemableArray) => void) | undefined\n): void {\n _themeState.loadStyles = loadStylesFn;\n}\n\n/**\n * Configure run mode of load-themable-styles\n * @param mode load-themable-styles run mode, async or sync\n */\nexport function configureRunMode(mode: Mode): void {\n _themeState.runState.mode = mode;\n}\n\n/**\n * external code can call flush to synchronously force processing of currently buffered styles\n */\nexport function flush(): void {\n measure(() => {\n const styleArrays: ThemableArray[] = _themeState.runState.buffer.slice();\n _themeState.runState.buffer = [];\n const mergedStyleArray: ThemableArray = ([] as ThemableArray).concat.apply([], styleArrays);\n if (mergedStyleArray.length > 0) {\n applyThemableStyles(mergedStyleArray);\n }\n });\n}\n\n/**\n * register async loadStyles\n */\nfunction asyncLoadStyles(): number {\n return setTimeout(() => {\n _themeState.runState.flushTimer = 0;\n flush();\n }, 0);\n}\n\n/**\n * Loads a set of style text. If it is registered too early, we will register it when the window.load event\n * is fired.\n * @param {string} styleText Style to register.\n * @param {IStyleRecord} styleRecord Existing style record to re-apply.\n */\nfunction applyThemableStyles(stylesArray: ThemableArray, styleRecord?: IStyleRecord): void {\n if (_themeState.loadStyles) {\n _themeState.loadStyles(resolveThemableArray(stylesArray).styleString, stylesArray);\n } else {\n registerStyles(stylesArray);\n }\n}\n\n/**\n * Registers a set theme tokens to find and replace. If styles were already registered, they will be\n * replaced.\n * @param {theme} theme JSON object of theme tokens to values.\n */\nexport function loadTheme(theme: ITheme | undefined): void {\n _themeState.theme = theme;\n\n // reload styles.\n reloadStyles();\n}\n\n/**\n * Clear already registered style elements and style records in theme_State object\n * @param option - specify which group of registered styles should be cleared.\n * Default to be both themable and non-themable styles will be cleared\n */\nexport function clearStyles(option: ClearStyleOptions = ClearStyleOptions.all): void {\n if (option === ClearStyleOptions.all || option === ClearStyleOptions.onlyNonThemable) {\n clearStylesInternal(_themeState.registeredStyles);\n _themeState.registeredStyles = [];\n }\n if (option === ClearStyleOptions.all || option === ClearStyleOptions.onlyThemable) {\n clearStylesInternal(_themeState.registeredThemableStyles);\n _themeState.registeredThemableStyles = [];\n }\n}\n\nfunction clearStylesInternal(records: IStyleRecord[]): void {\n records.forEach((styleRecord: IStyleRecord) => {\n const styleElement: HTMLStyleElement = styleRecord && (styleRecord.styleElement as HTMLStyleElement);\n if (styleElement && styleElement.parentElement) {\n styleElement.parentElement.removeChild(styleElement);\n }\n });\n}\n\n/**\n * Reloads styles.\n */\nfunction reloadStyles(): void {\n if (_themeState.theme) {\n const themableStyles: ThemableArray[] = [];\n for (const styleRecord of _themeState.registeredThemableStyles) {\n themableStyles.push(styleRecord.themableStyle);\n }\n if (themableStyles.length > 0) {\n clearStyles(ClearStyleOptions.onlyThemable);\n applyThemableStyles(([] as ThemableArray).concat.apply([], themableStyles));\n }\n }\n}\n\n/**\n * Find theme tokens and replaces them with provided theme values.\n * @param {string} styles Tokenized styles to fix.\n */\nexport function detokenize(styles: string | undefined): string | undefined {\n if (styles) {\n styles = resolveThemableArray(splitStyles(styles)).styleString;\n }\n\n return styles;\n}\n\n/**\n * Resolves ThemingInstruction objects in an array and joins the result into a string.\n * @param {ThemableArray} splitStyleArray ThemableArray to resolve and join.\n */\nfunction resolveThemableArray(splitStyleArray: ThemableArray): IThemableArrayResolveResult {\n const { theme }: IThemeState = _themeState;\n let themable: boolean = false;\n // Resolve the array of theming instructions to an array of strings.\n // Then join the array to produce the final CSS string.\n const resolvedArray: (string | undefined)[] = (splitStyleArray || []).map(\n (currentValue: IThemingInstruction) => {\n const themeSlot: string | undefined = currentValue.theme;\n if (themeSlot) {\n themable = true;\n // A theming annotation. Resolve it.\n const themedValue: string | undefined = theme ? theme[themeSlot] : undefined;\n const defaultValue: string = currentValue.defaultValue || 'inherit';\n\n // Warn to console if we hit an unthemed value even when themes are provided, but only if \"DEBUG\" is true.\n // Allow the themedValue to be undefined to explicitly request the default value.\n if (\n theme &&\n !themedValue &&\n console &&\n !(themeSlot in theme) &&\n typeof DEBUG !== 'undefined' &&\n DEBUG\n ) {\n console.warn(`Theming value not provided for \"${themeSlot}\". Falling back to \"${defaultValue}\".`);\n }\n\n return themedValue || defaultValue;\n } else {\n // A non-themable string. Preserve it.\n return currentValue.rawString;\n }\n }\n );\n\n return {\n styleString: resolvedArray.join(''),\n themable: themable\n };\n}\n\n/**\n * Split tokenized CSS into an array of strings and theme specification objects\n * @param {string} styles Tokenized styles to split.\n */\nexport function splitStyles(styles: string): ThemableArray {\n const result: ThemableArray = [];\n if (styles) {\n let pos: number = 0; // Current position in styles.\n let tokenMatch: RegExpExecArray | null;\n while ((tokenMatch = _themeTokenRegex.exec(styles))) {\n const matchIndex: number = tokenMatch.index;\n if (matchIndex > pos) {\n result.push({\n rawString: styles.substring(pos, matchIndex)\n });\n }\n\n result.push({\n theme: tokenMatch[1],\n defaultValue: tokenMatch[2] // May be undefined\n });\n\n // index of the first character after the current match\n pos = _themeTokenRegex.lastIndex;\n }\n\n // Push the rest of the string after the last match.\n result.push({\n rawString: styles.substring(pos)\n });\n }\n\n return result;\n}\n\n/**\n * Registers a set of style text. If it is registered too early, we will register it when the\n * window.load event is fired.\n * @param {ThemableArray} styleArray Array of IThemingInstruction objects to register.\n * @param {IStyleRecord} styleRecord May specify a style Element to update.\n */\nfunction registerStyles(styleArray: ThemableArray): void {\n if (typeof document === 'undefined') {\n return;\n }\n const head: HTMLHeadElement = document.getElementsByTagName('head')[0];\n const styleElement: HTMLStyleElement = document.createElement('style');\n const { styleString, themable } = resolveThemableArray(styleArray);\n\n styleElement.setAttribute('data-load-themed-styles', 'true');\n if (_styleNonce) {\n styleElement.setAttribute('nonce', _styleNonce);\n }\n styleElement.appendChild(document.createTextNode(styleString));\n _themeState.perf.count++;\n head.appendChild(styleElement);\n\n const ev: ICustomEvent<{ newStyle: HTMLStyleElement }> = document.createEvent('HTMLEvents');\n ev.initEvent('styleinsert', true /* bubbleEvent */, false /* cancelable */);\n ev.args = {\n newStyle: styleElement\n };\n document.dispatchEvent(ev);\n\n const record: IStyleRecord = {\n styleElement: styleElement,\n themableStyle: styleArray\n };\n\n if (themable) {\n _themeState.registeredThemableStyles.push(record);\n } else {\n _themeState.registeredStyles.push(record);\n }\n}\n","import { Customizations, getWindow } from '@fluentui/utilities';\nimport { loadTheme as legacyLoadTheme } from '@microsoft/load-themed-styles';\nimport { createTheme } from '@fluentui/theme';\nimport type { ITheme, IPartialTheme, IFontStyles } from '../interfaces/index';\nimport type { IRawStyle } from '@fluentui/merge-styles';\n\nexport { createTheme } from '@fluentui/theme';\n\nlet _theme: ITheme = createTheme({});\nlet _onThemeChangeCallbacks: Array<(theme: ITheme) => void> = [];\n\nexport const ThemeSettingName = 'theme';\n\nexport function initializeThemeInCustomizations(): void {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const win: any = getWindow();\n\n if (win?.FabricConfig?.legacyTheme) {\n // does everything the `else` clause does and more, such as invoke legacy theming\n loadTheme(win.FabricConfig.legacyTheme);\n } else if (!Customizations.getSettings([ThemeSettingName]).theme) {\n if (win?.FabricConfig?.theme) {\n _theme = createTheme(win.FabricConfig.theme);\n }\n\n // Set the default theme.\n Customizations.applySettings({ [ThemeSettingName]: _theme });\n }\n}\n\ninitializeThemeInCustomizations();\n\n/**\n * Gets the theme object\n * @param depComments - Whether to include deprecated tags as comments for deprecated slots.\n */\nexport function getTheme(depComments: boolean = false): ITheme {\n if (depComments === true) {\n _theme = createTheme({}, depComments);\n }\n return _theme;\n}\n\n/**\n * Registers a callback that gets called whenever the theme changes.\n * This should only be used when the component cannot automatically get theme changes through its state.\n * This will not register duplicate callbacks.\n */\nexport function registerOnThemeChangeCallback(callback: (theme: ITheme) => void): void {\n if (_onThemeChangeCallbacks.indexOf(callback) === -1) {\n _onThemeChangeCallbacks.push(callback);\n }\n}\n\n/**\n * See registerOnThemeChangeCallback().\n * Removes previously registered callbacks.\n */\nexport function removeOnThemeChangeCallback(callback: (theme: ITheme) => void): void {\n const i = _onThemeChangeCallbacks.indexOf(callback);\n if (i === -1) {\n return;\n }\n\n _onThemeChangeCallbacks.splice(i, 1);\n}\n\n/**\n * Applies the theme, while filling in missing slots.\n * @param theme - Partial theme object.\n * @param depComments - Whether to include deprecated tags as comments for deprecated slots.\n */\nexport function loadTheme(theme: IPartialTheme, depComments: boolean = false): ITheme {\n _theme = createTheme(theme, depComments);\n\n // Invoke the legacy method of theming the page as well.\n legacyLoadTheme({ ..._theme.palette, ..._theme.semanticColors, ..._theme.effects, ..._loadFonts(_theme) });\n\n Customizations.applySettings({ [ThemeSettingName]: _theme });\n\n _onThemeChangeCallbacks.forEach((callback: (theme: ITheme) => void) => {\n try {\n callback(_theme);\n } catch (e) {\n // don't let a bad callback break everything else\n }\n });\n\n return _theme;\n}\n\n/**\n * Loads font variables into a JSON object.\n * @param theme - The theme object\n */\nfunction _loadFonts(theme: ITheme): { [name: string]: string } {\n const lines: { [key: string]: string } = {};\n\n for (const fontName of Object.keys(theme.fonts)) {\n const font: IRawStyle = theme.fonts[fontName as keyof IFontStyles];\n\n for (const propName of Object.keys(font)) {\n const name: string = fontName + propName.charAt(0).toUpperCase() + propName.slice(1);\n let value = font[propName as keyof IRawStyle] as string;\n\n if (propName === 'fontSize' && typeof value === 'number') {\n // if it's a number, convert it to px by default like our theming system does\n value = value + 'px';\n }\n lines[name] = value;\n }\n }\n return lines;\n}\n","import type { IRawStyle } from '@fluentui/merge-styles';\n\n// This file mimics styles and mixins from _General.Mixins.scss\nexport const normalize: IRawStyle = {\n boxShadow: 'none',\n margin: 0,\n padding: 0,\n boxSizing: 'border-box',\n};\n\nexport const noWrap: IRawStyle = {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n};\n","import type { IStyle } from '@fluentui/merge-styles';\n\n/**\n * Generates placeholder style for each of the browsers supported by `@fluentui/react`.\n * @param styles - The style to use.\n * @returns The placeholder style object for each browser depending on the placeholder directive it uses.\n */\nexport function getPlaceholderStyles(styles: IStyle): IStyle {\n return {\n selectors: {\n '::placeholder': styles, // Chrome, Safari, Opera, Firefox\n ':-ms-input-placeholder': styles, // IE 10+\n '::-ms-input-placeholder': styles, // Edge\n },\n };\n}\n","import { buildClassMap } from '../utilities/index';\nimport { AnimationStyles } from '../styles/index';\nimport type { IAnimationStyles } from '../interfaces/index';\n\n/**\n * {@docCategory AnimationClassNames}\n */\nexport const AnimationClassNames: { [key in keyof IAnimationStyles]?: string } = buildClassMap(AnimationStyles);\n","export const FLUENT_CDN_BASE_URL = 'https://res.cdn.office.net/files/fabric-cdn-prod_20241029.001';\n","// 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/style-utilities', '8.11.4');","export { AnimationClassNames, FontClassNames, ColorClassNames } from './classNames/index';\n\nexport {\n AnimationStyles,\n AnimationVariables,\n DefaultPalette,\n DefaultEffects,\n DefaultFontStyles,\n registerDefaultFontFaces,\n FontSizes,\n FontWeights,\n IconFontSizes,\n createFontStyles,\n hiddenContentStyle,\n PulsingBeaconAnimationStyles,\n getGlobalClassNames,\n // eslint-disable-next-line deprecation/deprecation\n getFocusStyle,\n getFocusOutlineStyle,\n getInputFocusStyle,\n getThemedContext,\n focusClear,\n ThemeSettingName,\n getTheme,\n loadTheme,\n createTheme,\n registerOnThemeChangeCallback,\n removeOnThemeChangeCallback,\n HighContrastSelector,\n HighContrastSelectorWhite,\n HighContrastSelectorBlack,\n // eslint-disable-next-line deprecation/deprecation\n EdgeChromiumHighContrastSelector,\n ScreenWidthMinSmall,\n ScreenWidthMinMedium,\n ScreenWidthMinLarge,\n ScreenWidthMinXLarge,\n ScreenWidthMinXXLarge,\n ScreenWidthMinXXXLarge,\n ScreenWidthMaxSmall,\n ScreenWidthMaxMedium,\n ScreenWidthMaxLarge,\n ScreenWidthMaxXLarge,\n ScreenWidthMaxXXLarge,\n ScreenWidthMinUhfMobile,\n getScreenSelector,\n getHighContrastNoAdjustStyle,\n // eslint-disable-next-line deprecation/deprecation\n getEdgeChromiumNoHighContrastAdjustSelector,\n normalize,\n noWrap,\n getFadedOverflowStyle,\n getPlaceholderStyles,\n ZIndexes,\n} from './styles/index';\nexport type { GlobalClassNames } from './styles/index';\n\nexport {\n buildClassMap,\n getIcon,\n registerIcons,\n registerIconAlias,\n unregisterIcons,\n setIconOptions,\n getIconClassName,\n} from './utilities/index';\nexport type { IIconRecord, IIconSubset, IIconSubsetRecord, IIconOptions } from './utilities/index';\n\nexport type {\n IAnimationStyles,\n IAnimationVariables,\n IGetFocusStylesOptions,\n IEffects,\n IFontStyles,\n IPalette,\n ISemanticColors,\n ISemanticTextColors,\n ISpacing,\n ITheme,\n IPartialTheme,\n IScheme,\n ISchemeNames,\n} from './interfaces/index';\n\nexport {\n InjectionMode,\n Stylesheet,\n concatStyleSets,\n concatStyleSetsWithProps,\n fontFace,\n keyframes,\n mergeStyleSets,\n mergeStyles,\n} from './MergeStyles';\nexport type {\n IFontFace,\n IFontWeight,\n IRawStyle,\n IStyle,\n IStyleSet,\n IStyleSetBase,\n IProcessedStyleSet,\n IStyleSheetConfig,\n ICSPSettings,\n ShadowConfig,\n} from './MergeStyles';\n\nexport { FLUENT_CDN_BASE_URL } from './cdn';\n\nimport './version';\n\n// Ensure theme is initialized when this package is referenced.\nimport { initializeThemeInCustomizations } from './styles/theme';\ninitializeThemeInCustomizations();\n","export const DirectionalHint = {\n /**\n * Appear above the target element, with the left edges of the callout and target aligning.\n */\n topLeftEdge: 0 as 0,\n\n /**\n * Appear above the target element, with the centers of the callout and target aligning.\n */\n topCenter: 1 as 1,\n\n /**\n * Appear above the target element, with the right edges of the callout and target aligning.\n */\n topRightEdge: 2 as 2,\n\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 as 3,\n\n /**\n * Appear below the target element, with the left edges of the callout and target aligning.\n */\n bottomLeftEdge: 4 as 4,\n\n /**\n * Appear below the target element, with the centers of the callout and target aligning.\n */\n bottomCenter: 5 as 5,\n\n /**\n * Appear below the target element, with the right edges of the callout and target aligning.\n */\n bottomRightEdge: 6 as 6,\n\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 as 7,\n\n /**\n * Appear to the left of the target element, with the top edges of the callout and target aligning.\n */\n leftTopEdge: 8 as 8,\n\n /**\n * Appear to the left of the target element, with the centers of the callout and target aligning.\n */\n leftCenter: 9 as 9,\n\n /**\n * Appear to the left of the target element, with the bottom edges of the callout and target aligning.\n */\n leftBottomEdge: 10 as 10,\n\n /**\n * Appear to the right of the target element, with the top edges of the callout and target aligning.\n */\n rightTopEdge: 11 as 11,\n\n /**\n * Appear to the right of the target element, with the centers of the callout and target aligning.\n */\n rightCenter: 12 as 12,\n\n /**\n * Appear to the right of the target element, with the bottom edges of the callout and target aligning.\n */\n rightBottomEdge: 13 as 13,\n};\n\nexport type DirectionalHint = (typeof DirectionalHint)[keyof typeof DirectionalHint];\n","import { DirectionalHint } from '../../common/DirectionalHint';\nimport type { IRectangle, Point } from '../../Utilities';\n\nexport enum RectangleEdge {\n top = 1,\n bottom = -1,\n left = 2,\n right = -2,\n}\n\nexport enum Position {\n top = 0,\n bottom = 1,\n start = 2,\n end = 3,\n}\n\n/**\n * Window with typings for experimental features regarding Dual Screen devices.\n */\nexport interface IWindowWithSegments extends Window {\n getWindowSegments?: () => DOMRect[];\n}\n\nexport interface IPositionProps {\n target?: Element | MouseEvent | Point;\n /** how the element should be positioned */\n directionalHint?: DirectionalHint;\n /**\n * How the element should be positioned in RTL layouts.\n * If not specified, a mirror of `directionalHint` will be used instead\n */\n directionalHintForRTL?: DirectionalHint;\n /** The gap between the callout and the target */\n gapSpace?: number;\n /**\n * The bounding rectangle for which the contextual menu can appear in.\n */\n bounds?: IRectangle;\n /**\n * If true the position returned will have the menu element cover the target.\n * If false then it will position next to the target;\n */\n coverTarget?: boolean;\n /**\n * If true the position will not change edges in an attempt to fit the rectangle within bounds.\n * It will still attempt to align it to whatever bounds are given.\n * @defaultvalue false\n */\n directionalHintFixed?: boolean;\n\n /**\n * If true the positioning logic will prefer flipping edges over nudging the rectangle to fit within bounds,\n * thus making sure the element align perfectly with target.\n */\n alignTargetEdge?: boolean;\n}\n\nexport interface ICalloutPositionProps extends IPositionProps {\n /**\n * The width of the beak.\n */\n beakWidth?: number;\n\n /**\n * Whether or not the beak is visible\n */\n isBeakVisible?: boolean;\n}\n\nexport interface IPositionedData {\n /**\n * The new position of the element.\n */\n elementPosition: IPosition;\n /**\n * The finalized target edge that element is aligning to. For instance RectangleEdge.bottom would mean\n * that the bottom edge of the target is being aligned to by the RectangleEdge.top of the element\n * that is being positioned.\n */\n targetEdge: RectangleEdge;\n /**\n * The finalized alignment edge that the element is aligning too. For instance, RectangleEdge.left means\n * that the left edge of the target should be in line with the left edge of the element being positioned.\n */\n alignmentEdge?: RectangleEdge;\n}\n\nexport interface ICalloutPositionedInfo extends IPositionedData {\n beakPosition: ICalloutBeakPositionedInfo;\n}\n\nexport interface ICalloutBeakPositionedInfo extends IPositionedData {\n closestEdge: RectangleEdge;\n hideBeak?: boolean;\n}\n\n/**\n * Gives the position of some element on the page. Only a pair of vertical and horizontal edges need to be\n * given. So top/left or bottom/left is sufficient.\n * The number given is the distance in pixels from whatever host was given..\n * So bottom: 100 would be 100px up from the bottom of the host while top: 100px from the top.\n */\nexport interface IPosition {\n top?: number;\n left?: number;\n bottom?: number;\n right?: number;\n [key: string]: number | undefined;\n}\n\nexport interface IPositionDirectionalHintData {\n targetEdge: RectangleEdge;\n alignmentEdge?: RectangleEdge;\n isAuto?: boolean;\n alignTargetEdge?: boolean;\n}\n\nexport interface IRelativePositions {\n calloutPosition: IPosition;\n beakPosition: { position: IPosition | undefined; display: 'block' };\n directionalClassName: string;\n submenuDirection: DirectionalHint;\n}\n\n// eslint-disable-next-line deprecation/deprecation\nexport type { Point, IPoint } from '../../Utilities';\n","import { DirectionalHint } from '../../common/DirectionalHint';\nimport { getScrollbarWidth, getRTL, getWindow } from '../../Utilities';\nimport { RectangleEdge } from './positioning.types';\nimport { Rectangle } from '../../Utilities';\nimport type { IRectangle, Point } from '../../Utilities';\nimport type {\n IPositionDirectionalHintData,\n IPositionedData,\n ICalloutPositionedInfo,\n ICalloutBeakPositionedInfo,\n IPositionProps,\n ICalloutPositionProps,\n IWindowWithSegments,\n} from './positioning.types';\n\nfunction _createPositionData(\n targetEdge: RectangleEdge,\n alignmentEdge?: RectangleEdge,\n isAuto?: boolean,\n): IPositionDirectionalHintData {\n return {\n targetEdge,\n alignmentEdge,\n isAuto,\n };\n}\n\n// Currently the beakPercent is set to 50 for all positions meaning that it should tend to the center of the target\nconst DirectionalDictionary: { [key: number]: IPositionDirectionalHintData } = {\n [DirectionalHint.topLeftEdge]: _createPositionData(RectangleEdge.top, RectangleEdge.left),\n [DirectionalHint.topCenter]: _createPositionData(RectangleEdge.top),\n [DirectionalHint.topRightEdge]: _createPositionData(RectangleEdge.top, RectangleEdge.right),\n [DirectionalHint.topAutoEdge]: _createPositionData(RectangleEdge.top, undefined, true),\n [DirectionalHint.bottomLeftEdge]: _createPositionData(RectangleEdge.bottom, RectangleEdge.left),\n [DirectionalHint.bottomCenter]: _createPositionData(RectangleEdge.bottom),\n [DirectionalHint.bottomRightEdge]: _createPositionData(RectangleEdge.bottom, RectangleEdge.right),\n [DirectionalHint.bottomAutoEdge]: _createPositionData(RectangleEdge.bottom, undefined, true),\n [DirectionalHint.leftTopEdge]: _createPositionData(RectangleEdge.left, RectangleEdge.top),\n [DirectionalHint.leftCenter]: _createPositionData(RectangleEdge.left),\n [DirectionalHint.leftBottomEdge]: _createPositionData(RectangleEdge.left, RectangleEdge.bottom),\n [DirectionalHint.rightTopEdge]: _createPositionData(RectangleEdge.right, RectangleEdge.top),\n [DirectionalHint.rightCenter]: _createPositionData(RectangleEdge.right),\n [DirectionalHint.rightBottomEdge]: _createPositionData(RectangleEdge.right, RectangleEdge.bottom),\n};\n\n/**\n * Do not call methods from this directly, use either positionCallout or positionElement or make another function that\n * utilizes them.\n * START Private functions and interfaces\n */\n\nexport interface IElementPosition {\n elementRectangle: Rectangle;\n targetEdge: RectangleEdge;\n alignmentEdge: RectangleEdge | undefined;\n forcedInBounds?: boolean;\n}\n\nexport interface IElementPositionInfo extends IElementPosition {\n targetRectangle: Rectangle;\n}\n\ntype PartialIRectangle = Partial;\n\ninterface IPartialIRectangle extends PartialIRectangle {\n [key: string]: number | undefined;\n}\n\nfunction _isRectangleWithinBounds(rect: Rectangle, boundingRect: Rectangle): boolean {\n if (rect.top < boundingRect.top) {\n return false;\n }\n if (rect.bottom > boundingRect.bottom) {\n return false;\n }\n if (rect.left < boundingRect.left) {\n return false;\n }\n if (rect.right > boundingRect.right) {\n return false;\n }\n\n return true;\n}\n\n/**\n * Gets all of the edges of a rectangle that are outside of the given bounds.\n * If there are no out of bounds edges it returns an empty array.\n */\nfunction _getOutOfBoundsEdges(rect: Rectangle, boundingRect: Rectangle): RectangleEdge[] {\n const outOfBounds: RectangleEdge[] = [];\n\n if (rect.top < boundingRect.top) {\n outOfBounds.push(RectangleEdge.top);\n }\n if (rect.bottom > boundingRect.bottom) {\n outOfBounds.push(RectangleEdge.bottom);\n }\n if (rect.left < boundingRect.left) {\n outOfBounds.push(RectangleEdge.left);\n }\n if (rect.right > boundingRect.right) {\n outOfBounds.push(RectangleEdge.right);\n }\n\n return outOfBounds;\n}\n\nfunction _getEdgeValue(rect: Rectangle, edge: RectangleEdge): number {\n return (rect as any)[RectangleEdge[edge]] as number;\n}\n\nfunction _setEdgeValue(rect: Rectangle, edge: RectangleEdge, value: number) {\n (rect as any)[RectangleEdge[edge]] = value;\n return rect;\n}\n\n/**\n * Returns the middle value of an edge. Only returns 1 value rather than xy coordinates as\n * the itself already contains the other coordinate.\n * For instance, a bottom edge's current value is it's y coordinate, so the number returned is the x.\n */\nfunction _getCenterValue(rect: Rectangle, edge: RectangleEdge): number {\n const edges = _getFlankingEdges(edge);\n return (_getEdgeValue(rect, edges.positiveEdge) + _getEdgeValue(rect, edges.negativeEdge)) / 2;\n}\n\n/**\n * Flips the value depending on the edge.\n * If the edge is a \"positive\" edge, Top or Left, then the value should stay as it is.\n * If the edge is a \"negative\" edge, Bottom or Right, then the value should be flipped.\n * This is to account for the fact that the coordinates are effectively reserved in certain cases for the\n * \"negative\" edges.\n *\n * For example, when testing to see if a bottom edge 1 is within the bounds of another bottom edge 2:\n * If edge 1 is greater than edge 2 then it is out of bounds. This is reversed for top edge 1 and top edge 2.\n * If top edge 1 is less than edge 2 then it is out of bounds.\n */\nfunction _getRelativeEdgeValue(edge: RectangleEdge, value: number): number {\n if (edge > 0) {\n return value;\n } else {\n return value * -1;\n }\n}\n\nfunction _getRelativeRectEdgeValue(edge: RectangleEdge, rect: Rectangle): number {\n return _getRelativeEdgeValue(edge, _getEdgeValue(rect, edge));\n}\n\nfunction _getRelativeEdgeDifference(rect: Rectangle, hostRect: Rectangle, edge: RectangleEdge): number {\n const edgeDifference = _getEdgeValue(rect, edge) - _getEdgeValue(hostRect, edge);\n return _getRelativeEdgeValue(edge, edgeDifference);\n}\n\n/**\n * Moves the edge of a rectangle to the value given. It only moves the edge in a linear direction based on that edge.\n * For example, if it's a bottom edge it will only change y coordinates.\n * if maintainSize is set to false, it will only adjust the specified edge value\n */\nfunction _moveEdge(rect: Rectangle, edge: RectangleEdge, newValue: number, maintainSize = true): Rectangle {\n const difference = _getEdgeValue(rect, edge) - newValue;\n let returnRect = _setEdgeValue(rect, edge, newValue);\n if (maintainSize) {\n returnRect = _setEdgeValue(rect, edge * -1, _getEdgeValue(rect, edge * -1) - difference);\n }\n return returnRect;\n}\n\n/**\n * Aligns the edge on the passed in rect to the target. If there is a gap then it will have that space between the two.\n */\nfunction _alignEdges(rect: Rectangle, target: Rectangle, edge: RectangleEdge, gap: number = 0): Rectangle {\n return _moveEdge(rect, edge, _getEdgeValue(target, edge) + _getRelativeEdgeValue(edge, gap));\n}\n\n/**\n * Aligns the targetEdge on the passed in target to the rects corresponding opposite edge.\n * For instance if targetEdge is bottom, then the rects top will be moved to match it.\n */\nfunction _alignOppositeEdges(\n rect: Rectangle,\n target: Rectangle,\n targetEdge: RectangleEdge,\n gap: number = 0,\n): Rectangle {\n const oppositeEdge = targetEdge * -1;\n const adjustedGap = _getRelativeEdgeValue(oppositeEdge, gap);\n return _moveEdge(rect, targetEdge * -1, _getEdgeValue(target, targetEdge) + adjustedGap);\n}\n\n/**\n * Tests to see if the given edge is within the bounds of the given rectangle.\n */\nfunction _isEdgeInBounds(rect: Rectangle, bounds: Rectangle, edge: RectangleEdge): boolean {\n const adjustedRectValue = _getRelativeRectEdgeValue(edge, rect);\n return adjustedRectValue > _getRelativeRectEdgeValue(edge, bounds);\n}\n\n/**\n * Returns a measure of how much a rectangle is out of bounds for a given alignment;\n * this can be used to compare which rectangle is more or less out of bounds.\n * A value of 0 means the rectangle is entirely in bounds\n */\nfunction _getOutOfBoundsDegree(rect: Rectangle, bounds: Rectangle) {\n const breakingEdges = _getOutOfBoundsEdges(rect, bounds);\n let total = 0;\n for (const edge of breakingEdges) {\n total += _getRelativeEdgeDifference(rect, bounds, edge) ** 2;\n }\n\n return total;\n}\n\n/**\n * Returns true if scroll-resizing will move the target edge within the bounding rectangle,\n * and there is room between the target edge and the bounding edge for scrolled content.\n * Returns false otherwise.\n */\nfunction _canScrollResizeToFitEdge(\n target: Rectangle,\n bounding: Rectangle,\n targetEdge: RectangleEdge,\n minimumScrollResizeHeight = 200,\n) {\n // Only scroll vertically to fit - cannot scroll to fit right or left edges\n if (targetEdge !== RectangleEdge.bottom && targetEdge !== RectangleEdge.top) {\n return false;\n }\n\n return _getRelativeEdgeDifference(target, bounding, targetEdge) >= minimumScrollResizeHeight;\n}\n\n/**\n * Attempts to move the rectangle through various sides of the target to find a place to fit.\n * If no fit is found, the least bad option should be returned.\n */\nfunction _flipToFit(\n rect: Rectangle,\n target: Rectangle,\n bounding: Rectangle,\n positionData: IPositionDirectionalHintData,\n shouldScroll = false,\n minimumScrollResizeHeight?: number,\n gap: number = 0,\n): IElementPosition {\n const directions: RectangleEdge[] = [\n RectangleEdge.left,\n RectangleEdge.right,\n RectangleEdge.bottom,\n RectangleEdge.top,\n ];\n // In RTL page, RectangleEdge.right has a higher priority than RectangleEdge.left, so the order should be updated.\n if (getRTL()) {\n directions[0] *= -1;\n directions[1] *= -1;\n }\n let currentEstimate = rect;\n let currentEdge = positionData.targetEdge;\n let currentAlignment = positionData.alignmentEdge;\n\n // keep track of least bad option, in case no sides fit\n let oobDegree;\n let bestEdge = currentEdge;\n let bestAlignment = currentAlignment;\n\n // Keep switching sides until one is found with enough space.\n // If all sides don't fit then return the unmodified element.\n for (let i = 0; i < 4; i++) {\n if (_isEdgeInBounds(currentEstimate, bounding, currentEdge)) {\n // Edge is in bounds, return current estimate\n return {\n elementRectangle: currentEstimate,\n targetEdge: currentEdge,\n alignmentEdge: currentAlignment,\n };\n } else if (shouldScroll && _canScrollResizeToFitEdge(target, bounding, currentEdge, minimumScrollResizeHeight)) {\n // Scrolling will allow edge to fit, move the estimate currentEdge inside the bounds and return\n switch (currentEdge) {\n case RectangleEdge.bottom:\n currentEstimate.bottom = bounding.bottom;\n break;\n case RectangleEdge.top:\n currentEstimate.top = bounding.top;\n break;\n }\n\n return {\n elementRectangle: currentEstimate,\n targetEdge: currentEdge,\n alignmentEdge: currentAlignment,\n forcedInBounds: true,\n };\n } else {\n // update least-bad edges\n const currentOOBDegree = _getOutOfBoundsDegree(currentEstimate, bounding);\n if (!oobDegree || currentOOBDegree < oobDegree) {\n oobDegree = currentOOBDegree;\n bestEdge = currentEdge;\n bestAlignment = currentAlignment;\n }\n\n directions.splice(directions.indexOf(currentEdge), 1);\n if (directions.length > 0) {\n if (directions.indexOf(currentEdge * -1) > -1) {\n currentEdge = currentEdge * -1;\n } else {\n currentAlignment = currentEdge;\n currentEdge = directions.slice(-1)[0];\n }\n currentEstimate = _estimatePosition(\n rect,\n target,\n { targetEdge: currentEdge, alignmentEdge: currentAlignment },\n gap,\n );\n }\n }\n }\n\n // nothing fits, use least-bad option\n currentEstimate = _estimatePosition(rect, target, { targetEdge: bestEdge, alignmentEdge: bestAlignment }, gap);\n return {\n elementRectangle: currentEstimate,\n targetEdge: bestEdge,\n alignmentEdge: bestAlignment,\n };\n}\n\n/**\n * Flips only the alignment edge of an element rectangle. This is used instead of nudging the alignment edges\n * into position, when `alignTargetEdge` is specified.\n */\nfunction _flipAlignmentEdge(\n elementEstimate: IElementPosition,\n target: Rectangle,\n gap: number,\n coverTarget?: boolean,\n): IElementPosition {\n const { alignmentEdge, targetEdge, elementRectangle } = elementEstimate;\n const oppositeEdge = alignmentEdge! * -1;\n const newEstimate = _estimatePosition(\n elementRectangle,\n target,\n { targetEdge, alignmentEdge: oppositeEdge },\n gap,\n coverTarget,\n );\n\n return {\n elementRectangle: newEstimate,\n targetEdge,\n alignmentEdge: oppositeEdge,\n };\n}\n\n/**\n * Adjusts a element rectangle to fit within the bounds given. If directionalHintFixed or covertarget is passed in\n * then the element will not flip sides on the target. They will, however, be nudged to fit within the bounds given.\n */\nfunction _adjustFitWithinBounds(\n element: Rectangle,\n target: Rectangle,\n bounding: Rectangle,\n positionData: IPositionDirectionalHintData,\n shouldScroll = false,\n minimumScrollResizeHeight?: number,\n gap: number = 0,\n directionalHintFixed?: boolean,\n coverTarget?: boolean,\n): IElementPosition {\n const { alignmentEdge, alignTargetEdge } = positionData;\n let elementEstimate: IElementPosition = {\n elementRectangle: element,\n targetEdge: positionData.targetEdge,\n alignmentEdge,\n };\n\n if (!directionalHintFixed && !coverTarget) {\n elementEstimate = _flipToFit(element, target, bounding, positionData, shouldScroll, minimumScrollResizeHeight, gap);\n }\n const outOfBounds = _getOutOfBoundsEdges(elementEstimate.elementRectangle, bounding);\n // if directionalHintFixed is specified, we need to force the target edge to not change\n // we need *-1 because targetEdge refers to the target's edge; the callout edge is the opposite\n const fixedEdge = directionalHintFixed ? -elementEstimate.targetEdge : undefined;\n\n if (outOfBounds.length > 0) {\n if (alignTargetEdge) {\n // The edge opposite to the alignment edge might be out of bounds.\n // Flip alignment to see if we can get it within bounds.\n if (elementEstimate.alignmentEdge && outOfBounds.indexOf(elementEstimate.alignmentEdge * -1) > -1) {\n const flippedElementEstimate = _flipAlignmentEdge(elementEstimate, target, gap, coverTarget);\n if (_isRectangleWithinBounds(flippedElementEstimate.elementRectangle, bounding)) {\n return flippedElementEstimate;\n } else {\n // If the flipped elements edges are still out of bounds, try nudging it.\n elementEstimate = _alignOutOfBoundsEdges(\n _getOutOfBoundsEdges(flippedElementEstimate.elementRectangle, bounding),\n elementEstimate,\n bounding,\n fixedEdge,\n );\n }\n } else {\n elementEstimate = _alignOutOfBoundsEdges(outOfBounds, elementEstimate, bounding, fixedEdge);\n }\n } else {\n elementEstimate = _alignOutOfBoundsEdges(outOfBounds, elementEstimate, bounding, fixedEdge);\n }\n }\n\n return elementEstimate;\n}\n\n/**\n * Iterates through a list of out of bounds edges and tries to nudge and align them.\n * @param outOfBoundsEdges - Array of edges that are out of bounds\n * @param elementEstimate - The current element positioning estimate\n * @param bounding - The current bounds\n * @param preserveEdge - Specify an edge that should not be modified\n */\nfunction _alignOutOfBoundsEdges(\n outOfBoundsEdges: RectangleEdge[],\n elementEstimate: IElementPosition,\n bounding: Rectangle,\n preserveEdge?: RectangleEdge,\n) {\n for (const direction of outOfBoundsEdges) {\n let edgeAttempt;\n\n // if preserveEdge is specified, do not call _alignEdges, skip directly to _moveEdge\n // this is because _alignEdges will move the opposite edge\n if (preserveEdge && preserveEdge === direction * -1) {\n edgeAttempt = _moveEdge(elementEstimate.elementRectangle, direction, _getEdgeValue(bounding, direction), false);\n elementEstimate.forcedInBounds = true;\n } else {\n edgeAttempt = _alignEdges(elementEstimate.elementRectangle, bounding, direction);\n const inBounds = _isEdgeInBounds(edgeAttempt, bounding, direction * -1);\n // only update estimate if the attempt didn't break out of the opposite bounding edge\n if (!inBounds) {\n edgeAttempt = _moveEdge(edgeAttempt, direction * -1, _getEdgeValue(bounding, direction * -1), false);\n elementEstimate.forcedInBounds = true;\n }\n }\n\n elementEstimate.elementRectangle = edgeAttempt;\n }\n\n return elementEstimate;\n}\n\n/**\n * Moves the middle point on an edge to the point given.\n * Only moves in one direction. For instance if a bottom edge is passed in, then\n * the bottom edge will be moved in the x axis to match the point.\n */\nfunction _centerEdgeToPoint(rect: Rectangle, edge: RectangleEdge, point: number): Rectangle {\n const { positiveEdge } = _getFlankingEdges(edge);\n const elementMiddle = _getCenterValue(rect, edge);\n const distanceToMiddle = elementMiddle - _getEdgeValue(rect, positiveEdge);\n return _moveEdge(rect, positiveEdge, point - distanceToMiddle);\n}\n\n/**\n * Moves the element rectangle to be appropriately positioned relative to a given target.\n * Does not flip or adjust the element.\n */\nfunction _estimatePosition(\n elementToPosition: Rectangle,\n target: Rectangle,\n positionData: IPositionDirectionalHintData,\n gap: number = 0,\n coverTarget?: boolean,\n): Rectangle {\n let estimatedElementPosition = new Rectangle(\n elementToPosition.left,\n elementToPosition.right,\n elementToPosition.top,\n elementToPosition.bottom,\n );\n const { alignmentEdge, targetEdge } = positionData;\n const elementEdge = coverTarget ? targetEdge : targetEdge * -1;\n estimatedElementPosition = coverTarget\n ? _alignEdges(estimatedElementPosition, target, targetEdge, gap)\n : _alignOppositeEdges(estimatedElementPosition, target, targetEdge, gap);\n // if no alignment edge is provided it's supposed to be centered.\n if (!alignmentEdge) {\n const targetMiddlePoint = _getCenterValue(target, targetEdge);\n estimatedElementPosition = _centerEdgeToPoint(estimatedElementPosition, elementEdge, targetMiddlePoint);\n } else {\n estimatedElementPosition = _alignEdges(estimatedElementPosition, target, alignmentEdge);\n }\n\n return estimatedElementPosition;\n}\n\n/**\n * Returns the non-opposite edges of the target edge.\n * For instance if bottom is passed in then left and right will be returned.\n */\nfunction _getFlankingEdges(edge: RectangleEdge): { positiveEdge: RectangleEdge; negativeEdge: RectangleEdge } {\n if (edge === RectangleEdge.top || edge === RectangleEdge.bottom) {\n return {\n positiveEdge: RectangleEdge.left,\n negativeEdge: RectangleEdge.right,\n };\n } else {\n return {\n positiveEdge: RectangleEdge.top,\n negativeEdge: RectangleEdge.bottom,\n };\n }\n}\n\n/**\n * Retrieve the final value for the return edge of `elementRectangle`. If the `elementRectangle` is closer to one side\n * of the bounds versus the other, the return edge is flipped to grow inward.\n */\nfunction _finalizeReturnEdge(\n elementRectangle: Rectangle,\n returnEdge: RectangleEdge,\n bounds?: Rectangle,\n): RectangleEdge {\n if (\n bounds &&\n Math.abs(_getRelativeEdgeDifference(elementRectangle, bounds, returnEdge)) >\n Math.abs(_getRelativeEdgeDifference(elementRectangle, bounds, returnEdge * -1))\n ) {\n return returnEdge * -1;\n }\n\n return returnEdge;\n}\n\n/**\n * Whether or not the considered edge of the elementRectangle is lying on the edge of the bounds\n * @param elementRectangle The rectangle whose edge we are considering\n * @param bounds The rectangle marking the bounds\n * @param edge The target edge we're considering\n * @returns If the target edge of the elementRectangle is in the same location as that edge of the bounds\n */\nfunction _isEdgeOnBounds(elementRectangle: Rectangle, edge: RectangleEdge, bounds?: Rectangle): boolean {\n return bounds !== undefined && _getEdgeValue(elementRectangle, edge) === _getEdgeValue(bounds, edge);\n}\n\n/**\n * Finalizes the element position based on the hostElement. Only returns the\n * rectangle values to position such that they are anchored to the target.\n * This helps prevent resizing from looking very strange.\n * For instance, if the target edge is top and aligned with the left side then\n * the bottom and left values are returned so as the Callout shrinks it shrinks towards that corner.\n */\nfunction _finalizeElementPosition(\n elementRectangle: Rectangle,\n hostElement: HTMLElement,\n targetEdge: RectangleEdge,\n bounds?: Rectangle,\n alignmentEdge?: RectangleEdge,\n coverTarget?: boolean,\n doNotFinalizeReturnEdge?: boolean,\n forceWithinBounds?: boolean,\n): IPartialIRectangle {\n const returnValue: IPartialIRectangle = {};\n\n const hostRect: Rectangle = _getRectangleFromElement(hostElement);\n const elementEdge = coverTarget ? targetEdge : targetEdge * -1;\n let returnEdge = alignmentEdge ? alignmentEdge : _getFlankingEdges(targetEdge).positiveEdge;\n\n // If we are finalizing the return edge, choose the edge such that we grow away from the bounds\n // If we are not finalizing the return edge but the opposite edge is flush against the bounds,\n // choose that as the anchor edge so the element rect can grow away from the bounds' edge\n // In this case there will not be a visual difference because there is no more room for the elementRectangle to grow\n // in the usual direction\n if (!doNotFinalizeReturnEdge || _isEdgeOnBounds(elementRectangle, getOppositeEdge(returnEdge), bounds)) {\n returnEdge = _finalizeReturnEdge(elementRectangle, returnEdge, bounds);\n }\n\n returnValue[RectangleEdge[elementEdge]] = _getRelativeEdgeDifference(elementRectangle, hostRect, elementEdge);\n returnValue[RectangleEdge[returnEdge]] = _getRelativeEdgeDifference(elementRectangle, hostRect, returnEdge);\n\n // if the positioned element will still overflow, return all four edges with in-bounds values\n if (forceWithinBounds) {\n returnValue[RectangleEdge[elementEdge * -1]] = _getRelativeEdgeDifference(\n elementRectangle,\n hostRect,\n elementEdge * -1,\n );\n returnValue[RectangleEdge[returnEdge * -1]] = _getRelativeEdgeDifference(\n elementRectangle,\n hostRect,\n returnEdge * -1,\n );\n }\n\n return returnValue;\n}\n\n// Since the beak is rotated 45 degrees the actual height/width is the length of the diagonal.\n// We still want to position the beak based on it's midpoint which does not change. It will\n// be at (beakwidth / 2, beakwidth / 2)\nfunction _calculateActualBeakWidthInPixels(beakWidth: number): number {\n return Math.sqrt(beakWidth * beakWidth * 2);\n}\n\n/**\n * Returns the appropriate IPositionData based on the props altered for RTL.\n * If directionalHintForRTL is passed in that is used if the page is RTL.\n * If directionalHint is specified, no directionalHintForRTL is available, and the page is RTL, the hint will be\n * flipped (e.g. bottomLeftEdge would become bottomRightEdge).\n *\n * If there is no directionalHint passed in, bottomAutoEdge is chosen automatically.\n */\nfunction _getPositionData(\n directionalHint: DirectionalHint = DirectionalHint.bottomAutoEdge,\n directionalHintForRTL?: DirectionalHint,\n previousPositions?: IPositionDirectionalHintData,\n): IPositionDirectionalHintData {\n if (previousPositions) {\n return {\n alignmentEdge: previousPositions.alignmentEdge,\n isAuto: previousPositions.isAuto,\n targetEdge: previousPositions.targetEdge,\n };\n }\n const positionInformation: IPositionDirectionalHintData = { ...DirectionalDictionary[directionalHint] };\n if (getRTL()) {\n // If alignment edge exists and that alignment edge is -2 or 2, right or left, then flip it.\n if (positionInformation.alignmentEdge && positionInformation.alignmentEdge % 2 === 0) {\n positionInformation.alignmentEdge = positionInformation.alignmentEdge * -1;\n }\n\n return directionalHintForRTL !== undefined ? DirectionalDictionary[directionalHintForRTL] : positionInformation;\n }\n return positionInformation;\n}\n\n/**\n * Gets the alignment data for the given information. This only really matters if the positioning is Auto.\n * If it is auto then the alignmentEdge should be chosen based on the target edge's position relative to\n * the center of the page.\n */\nfunction _getAlignmentData(\n positionData: IPositionDirectionalHintData,\n target: Rectangle,\n boundingRect: Rectangle,\n coverTarget?: boolean,\n alignTargetEdge?: boolean,\n): IPositionDirectionalHintData {\n if (positionData.isAuto) {\n positionData.alignmentEdge = getClosestEdge(positionData.targetEdge, target, boundingRect);\n }\n\n positionData.alignTargetEdge = alignTargetEdge;\n return positionData;\n}\n\nfunction getClosestEdge(targetEdge: RectangleEdge, target: Rectangle, boundingRect: Rectangle): RectangleEdge {\n const targetCenter: number = _getCenterValue(target, targetEdge);\n const boundingCenter: number = _getCenterValue(boundingRect, targetEdge);\n const { positiveEdge, negativeEdge } = _getFlankingEdges(targetEdge);\n if (targetCenter <= boundingCenter) {\n return positiveEdge;\n } else {\n return negativeEdge;\n }\n}\n\nfunction _positionElementWithinBounds(\n elementToPosition: Rectangle,\n target: Rectangle,\n bounding: Rectangle,\n positionData: IPositionDirectionalHintData,\n gap: number,\n shouldScroll = false,\n minimumScrollResizeHeight?: number,\n directionalHintFixed?: boolean,\n coverTarget?: boolean,\n): IElementPosition {\n const estimatedElementPosition: Rectangle = _estimatePosition(\n elementToPosition,\n target,\n positionData,\n gap,\n coverTarget,\n );\n if (_isRectangleWithinBounds(estimatedElementPosition, bounding)) {\n return {\n elementRectangle: estimatedElementPosition,\n targetEdge: positionData.targetEdge,\n alignmentEdge: positionData.alignmentEdge,\n };\n } else {\n return _adjustFitWithinBounds(\n estimatedElementPosition,\n target,\n bounding,\n positionData,\n shouldScroll,\n minimumScrollResizeHeight,\n gap,\n directionalHintFixed,\n coverTarget,\n );\n }\n}\n\nfunction _finalizeBeakPosition(\n elementPosition: IElementPositionInfo,\n positionedBeak: Rectangle,\n bounds?: Rectangle,\n): ICalloutBeakPositionedInfo {\n const targetEdge = elementPosition.targetEdge * -1;\n // The \"host\" element that we will use to help position the beak.\n const actualElement = new Rectangle(\n 0,\n elementPosition.elementRectangle.width,\n 0,\n elementPosition.elementRectangle.height,\n );\n const returnValue: IPartialIRectangle = {};\n const returnEdge = _finalizeReturnEdge(\n elementPosition.elementRectangle,\n elementPosition.alignmentEdge ? elementPosition.alignmentEdge : _getFlankingEdges(targetEdge).positiveEdge,\n bounds,\n );\n\n // only show the beak if the callout is not fully covering the target\n const beakEdgeDifference = _getRelativeEdgeDifference(\n elementPosition.elementRectangle,\n elementPosition.targetRectangle,\n targetEdge,\n );\n const showBeak = beakEdgeDifference > Math.abs(_getEdgeValue(positionedBeak, targetEdge));\n\n returnValue[RectangleEdge[targetEdge]] = _getEdgeValue(positionedBeak, targetEdge);\n returnValue[RectangleEdge[returnEdge]] = _getRelativeEdgeDifference(positionedBeak, actualElement, returnEdge);\n\n return {\n elementPosition: { ...returnValue },\n closestEdge: getClosestEdge(elementPosition.targetEdge, positionedBeak, actualElement),\n targetEdge,\n hideBeak: !showBeak,\n };\n}\n\nfunction _positionBeak(beakWidth: number, elementPosition: IElementPositionInfo): Rectangle {\n const target = elementPosition.targetRectangle;\n /**\n * Note about beak positioning: The actual beak width only matters for getting the gap between the callout and\n * target, it does not impact the beak placement within the callout. For example example, if the beakWidth is 8,\n * then the actual beakWidth is sqrroot(8^2 + 8^2) = 11.31x11.31. So the callout will need to be an extra 3 pixels\n * away from its target. While the beak is being positioned in the callout it still acts as though it were 8x8.\n */\n const { positiveEdge, negativeEdge } = _getFlankingEdges(elementPosition.targetEdge);\n const beakTargetPoint = _getCenterValue(target, elementPosition.targetEdge);\n const elementBounds = new Rectangle(\n beakWidth / 2,\n elementPosition.elementRectangle.width - beakWidth / 2,\n beakWidth / 2,\n elementPosition.elementRectangle.height - beakWidth / 2,\n );\n\n let beakPosition: Rectangle = new Rectangle(0, beakWidth, 0, beakWidth);\n\n beakPosition = _moveEdge(beakPosition, elementPosition.targetEdge * -1, -beakWidth / 2);\n\n beakPosition = _centerEdgeToPoint(\n beakPosition,\n elementPosition.targetEdge * -1,\n beakTargetPoint - _getRelativeRectEdgeValue(positiveEdge, elementPosition.elementRectangle),\n );\n\n if (!_isEdgeInBounds(beakPosition, elementBounds, positiveEdge)) {\n beakPosition = _alignEdges(beakPosition, elementBounds, positiveEdge);\n } else if (!_isEdgeInBounds(beakPosition, elementBounds, negativeEdge)) {\n beakPosition = _alignEdges(beakPosition, elementBounds, negativeEdge);\n }\n return beakPosition;\n}\n\nfunction _getRectangleFromElement(element: Element): Rectangle {\n // eslint-disable-next-line deprecation/deprecation\n const clientRect: ClientRect = element.getBoundingClientRect();\n\n return new Rectangle(clientRect.left, clientRect.right, clientRect.top, clientRect.bottom);\n}\n\nfunction _getRectangleFromIRect(rect: IRectangle): Rectangle {\n return new Rectangle(rect.left, rect.right, rect.top, rect.bottom);\n}\n\nfunction _getTargetRect(bounds: Rectangle, target: Element | MouseEvent | Point | Rectangle | undefined): Rectangle {\n let targetRectangle: Rectangle;\n if (target) {\n // eslint-disable-next-line no-extra-boolean-cast\n if (!!(target as MouseEvent).preventDefault) {\n const ev = target as MouseEvent;\n targetRectangle = new Rectangle(ev.clientX, ev.clientX, ev.clientY, ev.clientY);\n // eslint-disable-next-line no-extra-boolean-cast\n } else if (!!(target as Element).getBoundingClientRect) {\n targetRectangle = _getRectangleFromElement(target as Element);\n // HTMLImgElements can have x and y values. The check for it being a point must go last.\n } else {\n const rectOrPoint: Point & Rectangle = target as Point & Rectangle;\n // eslint-disable-next-line deprecation/deprecation\n const left = rectOrPoint.left || rectOrPoint.x;\n // eslint-disable-next-line deprecation/deprecation\n const top = rectOrPoint.top || rectOrPoint.y;\n const right = rectOrPoint.right || left;\n const bottom = rectOrPoint.bottom || top;\n targetRectangle = new Rectangle(left, right, top, bottom);\n }\n\n if (!_isRectangleWithinBounds(targetRectangle, bounds)) {\n const outOfBounds: RectangleEdge[] = _getOutOfBoundsEdges(targetRectangle, bounds);\n\n for (const direction of outOfBounds) {\n (targetRectangle as any)[RectangleEdge[direction]] = (bounds as any)[RectangleEdge[direction]];\n }\n }\n } else {\n targetRectangle = new Rectangle(0, 0, 0, 0);\n }\n\n return targetRectangle;\n}\n\n/**\n * If max height is less than zero it returns the bounds height instead.\n */\nfunction _getMaxHeightFromTargetRectangle(\n targetRectangle: Rectangle,\n targetEdge: DirectionalHint,\n gapSpace: number,\n bounds: Rectangle,\n coverTarget?: boolean,\n) {\n let maxHeight = 0;\n const directionalHint = DirectionalDictionary[targetEdge];\n\n // If cover target is set, then the max height should be calculated using the opposite of the target edge since\n // that's the direction that the callout will expand in.\n // For instance, if the directionalhint is bottomLeftEdge then the callout will position so it's bottom edge\n // is aligned with the bottom of the target and expand up towards the top of the screen and the calculated max height\n // is (bottom of target) - (top of screen) - gapSpace.\n const target = coverTarget ? directionalHint.targetEdge * -1 : directionalHint.targetEdge;\n\n if (target === RectangleEdge.top) {\n maxHeight = _getEdgeValue(targetRectangle, directionalHint.targetEdge) - bounds.top - gapSpace;\n } else if (target === RectangleEdge.bottom) {\n maxHeight = bounds.bottom - _getEdgeValue(targetRectangle, directionalHint.targetEdge) - gapSpace;\n } else {\n maxHeight = bounds.bottom - targetRectangle.top - gapSpace;\n }\n\n return maxHeight > 0 ? maxHeight : bounds.height;\n}\n\nfunction _positionElementRelative(\n props: IPositionProps,\n elementToPosition: HTMLElement,\n boundingRect: Rectangle,\n previousPositions?: IPositionedData,\n shouldScroll = false,\n minimumScrollResizeHeight?: number,\n): IElementPositionInfo {\n const gap: number = props.gapSpace ? props.gapSpace : 0;\n const targetRect: Rectangle = _getTargetRect(boundingRect, props.target);\n const positionData: IPositionDirectionalHintData = _getAlignmentData(\n _getPositionData(props.directionalHint, props.directionalHintForRTL, previousPositions)!,\n targetRect,\n boundingRect,\n props.coverTarget,\n props.alignTargetEdge,\n );\n const positionedElement: IElementPosition = _positionElementWithinBounds(\n _getRectangleFromElement(elementToPosition),\n targetRect,\n boundingRect,\n positionData,\n gap,\n shouldScroll,\n minimumScrollResizeHeight,\n props.directionalHintFixed,\n props.coverTarget,\n );\n return { ...positionedElement, targetRectangle: targetRect };\n}\n\nfunction _finalizePositionData(\n positionedElement: IElementPosition,\n hostElement: HTMLElement,\n bounds?: Rectangle,\n coverTarget?: boolean,\n doNotFinalizeReturnEdge?: boolean,\n): IPositionedData {\n const finalizedElement: IPartialIRectangle = _finalizeElementPosition(\n positionedElement.elementRectangle,\n hostElement,\n positionedElement.targetEdge,\n bounds,\n positionedElement.alignmentEdge,\n coverTarget,\n doNotFinalizeReturnEdge,\n positionedElement.forcedInBounds,\n );\n return {\n elementPosition: finalizedElement,\n targetEdge: positionedElement.targetEdge,\n alignmentEdge: positionedElement.alignmentEdge,\n };\n}\n\nfunction _positionElement(\n props: IPositionProps,\n hostElement: HTMLElement,\n elementToPosition: HTMLElement,\n previousPositions?: IPositionedData,\n win?: Window,\n): IPositionedData {\n const theWin = win ?? getWindow()!;\n const boundingRect: Rectangle = props.bounds\n ? _getRectangleFromIRect(props.bounds)\n : new Rectangle(0, theWin.innerWidth - getScrollbarWidth(), 0, theWin.innerHeight);\n const positionedElement: IElementPosition = _positionElementRelative(\n props,\n elementToPosition,\n boundingRect,\n previousPositions,\n );\n return _finalizePositionData(positionedElement, hostElement, boundingRect, props.coverTarget);\n}\n\nfunction _calculateGapSpace(isBeakVisible: boolean | undefined, beakWidth = 0, gapSpace = 0): number {\n return _calculateActualBeakWidthInPixels(isBeakVisible ? beakWidth : 0) / 2 + gapSpace;\n}\n\nfunction _positionCallout(\n props: ICalloutPositionProps,\n hostElement: HTMLElement,\n callout: HTMLElement,\n previousPositions?: ICalloutPositionedInfo,\n shouldScroll = false,\n minimumScrollResizeHeight?: number,\n doNotFinalizeReturnEdge?: boolean,\n win?: Window,\n): ICalloutPositionedInfo {\n const theWin = win ?? getWindow()!;\n const beakWidth: number = props.isBeakVisible ? props.beakWidth || 0 : 0;\n const gap = _calculateGapSpace(props.isBeakVisible, props.beakWidth, props.gapSpace);\n const positionProps: IPositionProps = props;\n positionProps.gapSpace = gap;\n const boundingRect: Rectangle = props.bounds\n ? _getRectangleFromIRect(props.bounds)\n : new Rectangle(0, theWin.innerWidth - getScrollbarWidth(), 0, theWin.innerHeight);\n\n const positionedElement: IElementPositionInfo = _positionElementRelative(\n positionProps,\n callout,\n boundingRect,\n previousPositions,\n shouldScroll,\n minimumScrollResizeHeight,\n );\n\n const beakPositioned: Rectangle = _positionBeak(beakWidth, positionedElement);\n const finalizedBeakPosition: ICalloutBeakPositionedInfo = _finalizeBeakPosition(\n positionedElement,\n beakPositioned,\n boundingRect,\n );\n\n return {\n ..._finalizePositionData(positionedElement, hostElement, boundingRect, props.coverTarget, doNotFinalizeReturnEdge),\n beakPosition: finalizedBeakPosition,\n };\n}\n\nfunction _positionCard(\n props: ICalloutPositionProps,\n hostElement: HTMLElement,\n callout: HTMLElement,\n previousPositions?: ICalloutPositionedInfo,\n win?: Window,\n): ICalloutPositionedInfo {\n const theWin = win ?? getWindow()!;\n return _positionCallout(props, hostElement, callout, previousPositions, false, undefined, true, theWin);\n}\n\nfunction _getRectangleFromTarget(target: Element | MouseEvent | Point | Rectangle): Rectangle {\n const mouseTarget: MouseEvent = target as MouseEvent;\n const elementTarget: Element = target as Element;\n const rectOrPointTarget: Point & Rectangle = target as Point & Rectangle;\n let targetRect: Rectangle;\n\n // eslint-disable-next-line deprecation/deprecation\n const left = rectOrPointTarget.left ?? rectOrPointTarget.x;\n // eslint-disable-next-line deprecation/deprecation\n const top = rectOrPointTarget.top ?? rectOrPointTarget.y;\n const right = rectOrPointTarget.right ?? left;\n const bottom = rectOrPointTarget.bottom ?? top;\n\n // eslint-disable-next-line no-extra-boolean-cast -- may not actually be a MouseEvent\n if (!!mouseTarget.stopPropagation) {\n targetRect = new Rectangle(mouseTarget.clientX, mouseTarget.clientX, mouseTarget.clientY, mouseTarget.clientY);\n } else if (left !== undefined && top !== undefined) {\n targetRect = new Rectangle(left, right, top, bottom);\n } else {\n targetRect = _getRectangleFromElement(elementTarget);\n }\n\n return targetRect;\n}\n// END PRIVATE FUNCTIONS\n\nexport const __positioningTestPackage = {\n _finalizePositionData,\n _finalizeBeakPosition,\n _calculateActualBeakWidthInPixels,\n _positionElementWithinBounds,\n _positionBeak,\n _getPositionData,\n _getMaxHeightFromTargetRectangle,\n};\n\n/**\n * Used to position an element relative to the given positioning props.\n * If positioning has been completed before, previousPositions can be passed to ensure that the positioning element\n * repositions based on its previous targets rather than starting with directionalhint.\n */\nexport function positionElement(\n props: IPositionProps,\n hostElement: HTMLElement,\n elementToPosition: HTMLElement,\n previousPositions?: IPositionedData,\n win?: Window,\n): IPositionedData {\n return _positionElement(props, hostElement, elementToPosition, previousPositions, win);\n}\n\nexport function positionCallout(\n props: IPositionProps,\n hostElement: HTMLElement,\n elementToPosition: HTMLElement,\n previousPositions?: ICalloutPositionedInfo,\n shouldScroll?: boolean,\n minimumScrollResizeHeight?: number,\n win?: Window,\n): ICalloutPositionedInfo {\n return _positionCallout(\n props,\n hostElement,\n elementToPosition,\n previousPositions,\n shouldScroll,\n minimumScrollResizeHeight,\n undefined,\n win,\n );\n}\n\nexport function positionCard(\n props: IPositionProps,\n hostElement: HTMLElement,\n elementToPosition: HTMLElement,\n previousPositions?: ICalloutPositionedInfo,\n win?: Window,\n): ICalloutPositionedInfo {\n return _positionCard(props, hostElement, elementToPosition, previousPositions, win);\n}\n\n/**\n * Gets the maximum height that a rectangle can have in order to fit below or above a target.\n * If the directional hint specifies a left or right edge (i.e. leftCenter) it will limit the height to the topBorder\n * of the target given.\n * If no bounds are provided then the window is treated as the bounds.\n */\nexport function getMaxHeight(\n target: Element | MouseEvent | Point | Rectangle,\n targetEdge: DirectionalHint,\n gapSpace: number = 0,\n bounds?: IRectangle,\n coverTarget?: boolean,\n win?: Window,\n): number {\n const theWin = win ?? getWindow()!;\n const targetRect = _getRectangleFromTarget(target);\n const boundingRectangle = bounds\n ? _getRectangleFromIRect(bounds)\n : new Rectangle(0, theWin.innerWidth - getScrollbarWidth(), 0, theWin.innerHeight);\n\n return _getMaxHeightFromTargetRectangle(targetRect, targetEdge, gapSpace, boundingRectangle, coverTarget);\n}\n\n/**\n * Returns the opposite edge of the given RectangleEdge.\n */\nexport function getOppositeEdge(edge: RectangleEdge): RectangleEdge {\n return edge * -1;\n}\n\nfunction _getBoundsFromTargetWindow(\n target: Element | MouseEvent | Point | Rectangle | null,\n targetWindow: IWindowWithSegments,\n): IRectangle {\n let segments = undefined;\n if (targetWindow.getWindowSegments) {\n segments = targetWindow.getWindowSegments();\n }\n\n // Identify if we're dealing with single screen scenarios.\n if (segments === undefined || segments.length <= 1) {\n return {\n top: 0,\n left: 0,\n right: targetWindow.innerWidth,\n bottom: targetWindow.innerHeight,\n width: targetWindow.innerWidth,\n height: targetWindow.innerHeight,\n };\n }\n\n // Logic for determining dual screen scenarios.\n let x: number | undefined = 0;\n let y: number | undefined = 0;\n\n // If the target is an Element get coordinates for its center.\n if (target !== null && !!(target as Element).getBoundingClientRect) {\n const clientRect = (target as Element).getBoundingClientRect();\n x = (clientRect.left + clientRect.right) / 2;\n y = (clientRect.top + clientRect.bottom) / 2;\n }\n // If the target is not null get x-axis and y-axis coordinates directly.\n else if (target !== null) {\n // eslint-disable-next-line deprecation/deprecation\n x = (target as Point).left || (target as MouseEvent | Point).x;\n // eslint-disable-next-line deprecation/deprecation\n y = (target as Point).top || (target as MouseEvent | Point).y;\n }\n\n let bounds = { top: 0, left: 0, right: 0, bottom: 0, width: 0, height: 0 };\n\n // Define which window segment are the coordinates in and calculate bounds based on that.\n for (const segment of segments) {\n if (x && segment.left <= x && segment.right >= x && y && segment.top <= y && segment.bottom >= y) {\n bounds = {\n top: segment.top,\n left: segment.left,\n right: segment.right,\n bottom: segment.bottom,\n width: segment.width,\n height: segment.height,\n };\n }\n }\n\n return bounds;\n}\n\nexport function getBoundsFromTargetWindow(\n target: Element | MouseEvent | Point | Rectangle | null,\n targetWindow: IWindowWithSegments,\n): IRectangle {\n return _getBoundsFromTargetWindow(target, targetWindow);\n}\n\nexport function calculateGapSpace(\n isBeakVisible: boolean | undefined,\n beakWidth: number | undefined,\n gapSpace: number | undefined,\n): number {\n return _calculateGapSpace(isBeakVisible, beakWidth, gapSpace);\n}\n\nexport function getRectangleFromTarget(target: Element | MouseEvent | Point | Rectangle): Rectangle {\n return _getRectangleFromTarget(target);\n}\n","import { Async } from '@fluentui/utilities';\nimport * as React from 'react';\n\n/**\n * Hook to provide an Async instance that is automatically cleaned up on dismount.\n */\nexport function useAsync() {\n const asyncRef = React.useRef();\n if (!asyncRef.current) {\n asyncRef.current = new Async();\n }\n React.useEffect(() => {\n return () => {\n asyncRef.current?.dispose();\n asyncRef.current = undefined;\n };\n }, []);\n return asyncRef.current;\n}\n","import * as React from 'react';\n\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: T | (() => T)): T {\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 const ref = React.useRef<{ value: T }>();\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 as Function)() : initialValue,\n };\n }\n return ref.current.value;\n}\n","import * as React from 'react';\nimport { useConst } from './useConst';\n\n/** Updater callbacks returned by `useBoolean`. */\nexport interface IUseBooleanCallbacks {\n /** Set the value to true. Always has the same identity. */\n setTrue: () => void;\n /** Set the value to false. Always has the same identity. */\n setFalse: () => void;\n /** Toggle the value. Always has the same identity. */\n toggle: () => void;\n}\n\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: boolean): [boolean, IUseBooleanCallbacks] {\n const [value, setValue] = React.useState(initialState);\n\n const setTrue = useConst(() => () => {\n setValue(true);\n });\n const setFalse = useConst(() => () => {\n setValue(false);\n });\n const toggle = useConst(() => () => {\n setValue(currentValue => !currentValue);\n });\n\n return [value, { setTrue, setFalse, toggle }];\n}\n","import * as React from 'react';\nimport { useConst } from './useConst';\n\nexport type ChangeCallback<\n TElement extends HTMLElement,\n TValue,\n TEvent extends React.SyntheticEvent | undefined,\n> = (ev: TEvent, newValue: TValue | undefined) => void;\n\n/**\n * Hook to manage a value that could be either controlled or uncontrolled, such as a checked state or\n * text box string.\n * @param controlledValue - The controlled value passed in the props. This value will always be used if provided,\n * and the internal state will be updated to reflect it.\n * @param defaultUncontrolledValue - Initial value for the internal state in the uncontrolled case.\n * @returns An array of the current value and an updater callback. Like `React.useState`, the updater\n * callback always has the same identity, and it can take either a new value, or a function which\n * is passed the previous value and returns the new value.\n * @see https://reactjs.org/docs/uncontrolled-components.html\n */\nexport function useControllableValue(\n controlledValue: TValue | undefined,\n defaultUncontrolledValue: TValue | undefined,\n): Readonly<[TValue | undefined, (update: React.SetStateAction) => void]>;\nexport function useControllableValue<\n TValue,\n TElement extends HTMLElement,\n TEvent extends React.SyntheticEvent | undefined,\n>(\n controlledValue: TValue | undefined,\n defaultUncontrolledValue: TValue | undefined,\n onChange: ChangeCallback | undefined,\n): Readonly<\n [TValue | undefined, (update: React.SetStateAction, ev?: React.FormEvent) => void]\n>;\nexport function useControllableValue<\n TValue,\n TElement extends HTMLElement,\n TEvent extends React.SyntheticEvent | undefined,\n>(\n controlledValue: TValue | undefined,\n defaultUncontrolledValue: TValue | undefined,\n onChange?: ChangeCallback,\n) {\n const [value, setValue] = React.useState(defaultUncontrolledValue);\n const isControlled = useConst(controlledValue !== undefined);\n const currentValue = isControlled ? controlledValue : value;\n\n // Duplicate the current value and onChange in refs so they're accessible from\n // setValueOrCallOnChange without creating a new callback every time\n const valueRef = React.useRef(currentValue);\n const onChangeRef = React.useRef(onChange);\n React.useEffect(() => {\n valueRef.current = currentValue;\n onChangeRef.current = onChange;\n });\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 const setValueOrCallOnChange = useConst(() => (update: React.SetStateAction, ev?: TEvent) => {\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 const newValue = typeof update === 'function' ? (update as Function)(valueRef.current) : update;\n\n if (onChangeRef.current) {\n onChangeRef.current(ev!, newValue);\n }\n\n if (!isControlled) {\n setValue(newValue);\n }\n });\n\n return [currentValue, setValueOrCallOnChange] as const;\n}\n","import * as React from 'react';\nimport { useConst } from './useConst';\nimport { useIsomorphicLayoutEffect } from '@fluentui/utilities';\n\n/**\n * Modified `useCallback` that returns the same function reference every time, but internally calls\n * the most-recently passed callback implementation. Can be useful in situations such as:\n * - Event handler dependencies change too frequently, such as user props which might change on\n * every render, or volatile values such as useState/useDispatch\n * - Callback must be referenced in a captured context (such as a window event handler or unmount\n * handler that's registered once) but needs access to the latest props\n *\n * In general, prefer `useCallback` unless you've encountered one of the problems above.\n *\n * https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n *\n * @param fn - The callback function that will be used\n * @returns A function which is referentially stable but internally calls the most recently passed callback\n */\nexport function useEventCallback(fn: (...args: Args) => Return) {\n const callbackRef = React.useRef(() => {\n throw new Error('Cannot call an event handler while rendering');\n });\n\n useIsomorphicLayoutEffect(() => {\n callbackRef.current = fn;\n }, [fn]);\n\n // useConst rather than useCallback to ensure the reference is always stable\n // (useCallback's deps list is an optimization, not a guarantee)\n return useConst(() => (...args: Args) => {\n const callback = callbackRef.current;\n return callback(...args);\n });\n}\n","import * as React from 'react';\nimport { getId } from '@fluentui/utilities';\n\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?: string, providedId?: string): string {\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 const ref = React.useRef(providedId);\n if (!ref.current) {\n ref.current = getId(prefix);\n }\n return ref.current;\n}\n","/******************************************************************************\nCopyright (c) Microsoft Corporation.\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\nPERFORMANCE OF THIS SOFTWARE.\n***************************************************************************** */\n/* global Reflect, Promise, SuppressedError, Symbol, Iterator */\n\nvar extendStatics = function(d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n};\n\nexport function __extends(d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n}\n\nexport var __assign = function() {\n __assign = Object.assign || function __assign(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n return t;\n }\n return __assign.apply(this, arguments);\n}\n\nexport function __rest(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}\n\nexport function __decorate(decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n}\n\nexport function __param(paramIndex, decorator) {\n return function (target, key) { decorator(target, key, paramIndex); }\n}\n\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\n function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\n var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\n var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\n var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\n var _, done = false;\n for (var i = decorators.length - 1; i >= 0; i--) {\n var context = {};\n for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\n for (var p in contextIn.access) context.access[p] = contextIn.access[p];\n context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\n var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\n if (kind === \"accessor\") {\n if (result === void 0) continue;\n if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\n if (_ = accept(result.get)) descriptor.get = _;\n if (_ = accept(result.set)) descriptor.set = _;\n if (_ = accept(result.init)) initializers.unshift(_);\n }\n else if (_ = accept(result)) {\n if (kind === \"field\") initializers.unshift(_);\n else descriptor[key] = _;\n }\n }\n if (target) Object.defineProperty(target, contextIn.name, descriptor);\n done = true;\n};\n\nexport function __runInitializers(thisArg, initializers, value) {\n var useValue = arguments.length > 2;\n for (var i = 0; i < initializers.length; i++) {\n value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\n }\n return useValue ? value : void 0;\n};\n\nexport function __propKey(x) {\n return typeof x === \"symbol\" ? x : \"\".concat(x);\n};\n\nexport function __setFunctionName(f, name, prefix) {\n if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\n return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\n};\n\nexport function __metadata(metadataKey, metadataValue) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\n}\n\nexport function __awaiter(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}\n\nexport function __generator(thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === \"function\" ? Iterator : Object).prototype);\n return g.next = verb(0), g[\"throw\"] = verb(1), g[\"return\"] = verb(2), typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (g && (g = 0, op[0] && (_ = 0)), _) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n}\n\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n});\n\nexport function __exportStar(m, o) {\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\n}\n\nexport function __values(o) {\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\n if (m) return m.call(o);\n if (o && typeof o.length === \"number\") return {\n next: function () {\n if (o && i >= o.length) o = void 0;\n return { value: o && o[i++], done: !o };\n }\n };\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\n}\n\nexport function __read(o, n) {\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\n if (!m) return o;\n var i = m.call(o), r, ar = [], e;\n try {\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\n }\n catch (error) { e = { error: error }; }\n finally {\n try {\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\n }\n finally { if (e) throw e.error; }\n }\n return ar;\n}\n\n/** @deprecated */\nexport function __spread() {\n for (var ar = [], i = 0; i < arguments.length; i++)\n ar = ar.concat(__read(arguments[i]));\n return ar;\n}\n\n/** @deprecated */\nexport function __spreadArrays() {\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\n r[k] = a[j];\n return r;\n}\n\nexport function __spreadArray(to, from, pack) {\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n if (ar || !(i in from)) {\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n ar[i] = from[i];\n }\n }\n return to.concat(ar || Array.prototype.slice.call(from));\n}\n\nexport function __await(v) {\n return this instanceof __await ? (this.v = v, this) : new __await(v);\n}\n\nexport function __asyncGenerator(thisArg, _arguments, generator) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\n return i = Object.create((typeof AsyncIterator === \"function\" ? AsyncIterator : Object).prototype), verb(\"next\"), verb(\"throw\"), verb(\"return\", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;\n function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }\n function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\n function fulfill(value) { resume(\"next\", value); }\n function reject(value) { resume(\"throw\", value); }\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\n}\n\nexport function __asyncDelegator(o) {\n var i, p;\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\n}\n\nexport function __asyncValues(o) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var m = o[Symbol.asyncIterator], i;\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\n}\n\nexport function __makeTemplateObject(cooked, raw) {\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\n return cooked;\n};\n\nvar __setModuleDefault = Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n};\n\nvar ownKeys = function(o) {\n ownKeys = Object.getOwnPropertyNames || function (o) {\n var ar = [];\n for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;\n return ar;\n };\n return ownKeys(o);\n};\n\nexport function __importStar(mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== \"default\") __createBinding(result, mod, k[i]);\n __setModuleDefault(result, mod);\n return result;\n}\n\nexport function __importDefault(mod) {\n return (mod && mod.__esModule) ? mod : { default: mod };\n}\n\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n}\n\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\n}\n\nexport function __classPrivateFieldIn(state, receiver) {\n if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\n return typeof state === \"function\" ? receiver === state : state.has(receiver);\n}\n\nexport function __addDisposableResource(env, value, async) {\n if (value !== null && value !== void 0) {\n if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\n var dispose, inner;\n if (async) {\n if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\n dispose = value[Symbol.asyncDispose];\n }\n if (dispose === void 0) {\n if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\n dispose = value[Symbol.dispose];\n if (async) inner = dispose;\n }\n if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\n if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };\n env.stack.push({ value: value, dispose: dispose, async: async });\n }\n else if (async) {\n env.stack.push({ async: true });\n }\n return value;\n}\n\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\n var e = new Error(message);\n return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\n};\n\nexport function __disposeResources(env) {\n function fail(e) {\n env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\n env.hasError = true;\n }\n var r, s = 0;\n function next() {\n while (r = env.stack.pop()) {\n try {\n if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);\n if (r.dispose) {\n var result = r.dispose.call(r.value);\n if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\n }\n else s |= 1;\n }\n catch (e) {\n fail(e);\n }\n }\n if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();\n if (env.hasError) throw env.error;\n }\n return next();\n}\n\nexport function __rewriteRelativeImportExtension(path, preserveJsx) {\n if (typeof path === \"string\" && /^\\.\\.?\\//.test(path)) {\n return path.replace(/\\.(tsx)$|((?:\\.d)?)((?:\\.[^./]+?)?)\\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {\n return tsx ? preserveJsx ? \".jsx\" : \".js\" : d && (!ext || !cm) ? m : (d + ext + \".\" + cm.toLowerCase() + \"js\");\n });\n }\n return path;\n}\n\nexport default {\n __extends,\n __assign,\n __rest,\n __decorate,\n __param,\n __esDecorate,\n __runInitializers,\n __propKey,\n __setFunctionName,\n __metadata,\n __awaiter,\n __generator,\n __createBinding,\n __exportStar,\n __values,\n __read,\n __spread,\n __spreadArrays,\n __spreadArray,\n __await,\n __asyncGenerator,\n __asyncDelegator,\n __asyncValues,\n __makeTemplateObject,\n __importStar,\n __importDefault,\n __classPrivateFieldGet,\n __classPrivateFieldSet,\n __classPrivateFieldIn,\n __addDisposableResource,\n __disposeResources,\n __rewriteRelativeImportExtension,\n};\n","import * as React from 'react';\n\n/**\n * A Ref function which can be treated like a ref object in that it has an attached\n * current property, which will be updated as the ref is evaluated.\n */\nexport type RefObjectFunction = React.RefObject & ((value: T) => void);\n\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(...refs: (React.Ref | undefined)[]): RefObjectFunction {\n const mergedCallback: RefObjectFunction = React.useCallback(\n (value: T) => {\n // Update the \"current\" prop hanging on the function.\n (mergedCallback as unknown as React.MutableRefObject).current = value;\n\n for (const ref of refs) {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref) {\n // work around the immutability of the React.Ref type\n (ref as unknown as React.MutableRefObject).current = value;\n }\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps -- already exhaustive\n [...refs],\n ) as unknown as RefObjectFunction;\n\n return mergedCallback;\n}\n","import { on } from '@fluentui/utilities';\nimport * as React from 'react';\n\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(\n element: React.RefObject | TElement | Window | Document | undefined | null,\n eventName: string,\n callback: (ev: TEvent) => void,\n useCapture?: boolean,\n) {\n // Use a ref for the callback to prevent repeatedly attaching/unattaching callbacks that are unstable across renders\n const callbackRef = React.useRef(callback);\n callbackRef.current = callback;\n\n React.useEffect(() => {\n const actualElement = element && 'current' in element ? element.current : element;\n if (!actualElement || !actualElement.addEventListener) {\n return;\n }\n\n const dispose = on(actualElement, eventName, (ev: TEvent) => callbackRef.current(ev), useCapture);\n return dispose;\n }, [element, eventName, useCapture]);\n}\n","import { useRef, useEffect } from 'react';\n\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: T): T | undefined {\n const ref = useRef();\n useEffect(() => {\n ref.current = value;\n });\n return ref.current;\n}\n","import * as React from 'react';\nimport { useConst } from './useConst';\n\nexport type UseSetTimeoutReturnType = {\n setTimeout: (callback: () => void, duration: number) => number;\n clearTimeout: (id: number) => void;\n};\n\n/**\n * Returns a wrapper function for `setTimeout` which automatically handles disposal.\n */\nexport const useSetTimeout = (): UseSetTimeoutReturnType => {\n const timeoutIds = useConst>({});\n\n // Cleanup function.\n React.useEffect(\n () => () => {\n for (const id of Object.keys(timeoutIds)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n clearTimeout(id as any);\n }\n },\n // useConst ensures this will never change, but react-hooks/exhaustive-deps doesn't know that\n [timeoutIds],\n );\n\n // Return wrapper which will auto cleanup.\n return useConst({\n setTimeout: (func: () => void, duration: number): number => {\n const id = setTimeout(func, duration) as unknown as number;\n\n timeoutIds[id] = 1;\n\n return id;\n },\n\n clearTimeout: (id: number): void => {\n delete timeoutIds[id];\n clearTimeout(id);\n },\n });\n};\n","import { getDocument, Rectangle } from '@fluentui/utilities';\nimport * as React from 'react';\nimport { useWindow } from '@fluentui/react-window-provider';\nimport type { Point } from '@fluentui/utilities';\n\nexport type Target = Element | string | MouseEvent | Point | Rectangle | null | React.RefObject;\n\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(\n target: Target | undefined,\n hostElement?: React.RefObject,\n): Readonly<[React.RefObject, Window | undefined]> {\n const previousTargetProp = React.useRef<\n Element | string | MouseEvent | Point | Rectangle | React.RefObject | null | undefined\n >();\n\n const 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 const targetWindow = useWindow();\n\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 const currentElement = hostElement?.current;\n if (target) {\n if (typeof target === 'string') {\n // If element is part of shadow dom, then querySelector on shadow root, else query on document\n if ((currentElement?.getRootNode() as ShadowRoot)?.host) {\n targetRef.current = (currentElement?.getRootNode() as ShadowRoot)?.querySelector(target) ?? null;\n } else {\n const currentDoc: Document = getDocument(currentElement)!;\n targetRef.current = currentDoc ? currentDoc.querySelector(target) : null;\n }\n } else if ('stopPropagation' in target) {\n targetRef.current = target;\n } else if ('getBoundingClientRect' in target) {\n targetRef.current = target;\n } else if ('current' in target) {\n targetRef.current = target.current;\n } else {\n targetRef.current = target;\n }\n }\n previousTargetProp.current = target;\n }\n\n return [targetRef, targetWindow] as const;\n}\n","import * as React from 'react';\n\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 const useUnmount = (callback: () => void) => {\n const unmountRef = React.useRef(callback);\n unmountRef.current = callback;\n React.useEffect(\n () => () => {\n unmountRef.current?.();\n },\n [],\n );\n};\n","import * as React from 'react';\nimport {\n KeyCodes,\n divProperties,\n doesElementContainFocus,\n getDocument,\n getNativeProps,\n getPropsWithDefaults,\n getWindow,\n modalize,\n} from '../../Utilities';\nimport { useMergedRefs, useAsync, useOnEvent } from '@fluentui/react-hooks';\nimport { useWindow } from '@fluentui/react-window-provider';\nimport type { IPopupProps, IPopupRestoreFocusParams } from './Popup.types';\n\nfunction useScrollbarAsync(props: IPopupProps, root: React.RefObject) {\n const async = useAsync();\n const [needsVerticalScrollBarState, setNeedsVerticalScrollBar] = React.useState(false);\n React.useEffect(() => {\n async.requestAnimationFrame(() => {\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\n let needsVerticalScrollBar = false;\n if (root && root.current && root.current?.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 const rootHeight = root.current.clientHeight;\n const 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\n return () => async.dispose();\n });\n\n return needsVerticalScrollBarState;\n}\n\nfunction defaultFocusRestorer(options: IPopupRestoreFocusParams) {\n const { originalElement, containsFocus } = options;\n\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(() => {\n originalElement.focus?.();\n }, 0);\n }\n}\n\nfunction useRestoreFocus(props: IPopupProps, root: React.RefObject) {\n const { onRestoreFocus = defaultFocusRestorer } = props;\n const originalFocusedElement = React.useRef();\n const containsFocus = React.useRef(false);\n\n React.useEffect(() => {\n originalFocusedElement.current = getDocument()!.activeElement as HTMLElement;\n\n if (doesElementContainFocus(root.current!)) {\n containsFocus.current = true;\n }\n\n return () => {\n onRestoreFocus?.({\n originalElement: originalFocusedElement.current,\n containsFocus: containsFocus.current,\n documentContainsFocus: getDocument()?.hasFocus() || false,\n });\n\n // De-reference DOM Node to avoid retainment via transpiled closure of _onKeyDown\n originalFocusedElement.current = undefined;\n };\n\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run on first render\n }, []);\n\n useOnEvent(\n root,\n 'focus',\n React.useCallback((): void => {\n containsFocus.current = true;\n }, []),\n true,\n );\n\n useOnEvent(\n root,\n 'blur',\n React.useCallback((ev: FocusEvent): void => {\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 as HTMLElement)) {\n containsFocus.current = false;\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run on first render\n }, []),\n true,\n );\n}\n\nfunction useHideSiblingNodes(props: IPopupProps, root: React.RefObject) {\n // eslint-disable-next-line deprecation/deprecation\n const shouldHideSiblings = String(props['aria-modal']).toLowerCase() === 'true' && props.enableAriaHiddenSiblings;\n\n React.useEffect(() => {\n if (!(shouldHideSiblings && root.current)) {\n return;\n }\n\n const unmodalize = modalize(root.current);\n return unmodalize;\n }, [root, shouldHideSiblings]);\n}\n\n/**\n * This adds accessibility to Dialog and Panel controls\n */\nexport const Popup: React.FunctionComponent = React.forwardRef(\n (propsWithoutDefaults, forwardedRef) => {\n const props = getPropsWithDefaults(\n { shouldRestoreFocus: true, enableAriaHiddenSiblings: true },\n propsWithoutDefaults,\n );\n\n const root = React.useRef();\n const mergedRootRef = useMergedRefs(root, forwardedRef) as React.Ref;\n\n useHideSiblingNodes(props, root);\n useRestoreFocus(props, root);\n\n const { role, className, ariaLabel, ariaLabelledBy, ariaDescribedBy, style, children, onDismiss } = props;\n const needsVerticalScrollBar = useScrollbarAsync(props, root);\n\n const onKeyDown = React.useCallback(\n (ev: React.KeyboardEvent | KeyboardEvent): void => {\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.escape:\n if (onDismiss) {\n onDismiss(ev);\n\n ev.preventDefault();\n ev.stopPropagation();\n }\n\n break;\n }\n },\n [onDismiss],\n );\n\n const win = useWindow();\n useOnEvent(win, 'keydown', onKeyDown as (ev: Event) => void);\n\n return (\n \n {children}\n \n );\n },\n);\nPopup.displayName = 'Popup';\n","import { useDocument, useWindow, WindowProviderProps } from '@fluentui/react-window-provider';\n\n/**\n * NOTE: the check for `window`/`document` is a bit verbose and perhaps\n * overkill but it ensures the prior assumbed behavior of directly\n * calling `window`/`document` is preserved.\n *\n * It is possible to set `window` to undefined on `WindowProvider` so\n * we'll fallback to directly accessing the global in that (hopefully unlikely)\n * case.\n */\n\n/**\n * Get a reference to the `document` object.\n * Use this in place of the global `document` in React function components.\n * @returns Document | undefined\n */\nexport const useDocumentEx = () => {\n // eslint-disable-next-line no-restricted-globals\n return useDocument() ?? (typeof document !== 'undefined' ? document : undefined);\n};\n\n/**\n * Get a reference to the `window` object.\n * Use this in place of the global `window` in React function components.\n * @returns Window | undefined\n */\nexport const useWindowEx = () => {\n // eslint-disable-next-line no-restricted-globals\n return useWindow() ?? (typeof window !== 'undefined' ? window : undefined);\n};\n\n/**\n * Get a reference to the `document` object.\n * Use this in place of the global `document` in React class components.\n *\n * @param ctx - Class component WindowContext\n * @returns Document | undefined\n */\nexport const getDocumentEx = (ctx: Pick | undefined) => {\n // eslint-disable-next-line no-restricted-globals\n return ctx?.window?.document ?? (typeof document !== 'undefined' ? document : undefined);\n};\n\n/**\n * Get a reference to the `window` object.\n * Use this in place of the global `window` in React class components.\n *\n * @param ctx - Class component WindowContext\n * @returns Window | undefined\n */\nexport const getWindowEx = (ctx: Pick | undefined) => {\n // eslint-disable-next-line no-restricted-globals\n return ctx?.window ?? (typeof window !== 'undefined' ? window : undefined);\n};\n","import * as React from 'react';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport {\n css,\n divProperties,\n elementContains,\n focusFirstChild,\n getNativeProps,\n on,\n shallowCompare,\n getPropsWithDefaults,\n Async,\n} from '../../Utilities';\nimport { calculateGapSpace, getRectangleFromTarget } from '../../utilities/positioning/positioning';\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';\nimport type { ICalloutProps, ICalloutContentStyleProps, ICalloutContentStyles } from './Callout.types';\nimport type { Point, IRectangle } from '../../Utilities';\nimport type { ICalloutPositionedInfo, IPositionProps, IPosition } from '../../Positioning';\nimport type { Target } from '@fluentui/react-hooks';\nimport { useWindowEx } from '../../utilities/dom';\n\nconst COMPONENT_NAME = 'CalloutContentBase';\n\nconst ANIMATIONS: { [key: number]: string | undefined } = {\n [RectangleEdge.top]: AnimationClassNames.slideUpIn10,\n [RectangleEdge.bottom]: AnimationClassNames.slideDownIn10,\n [RectangleEdge.left]: AnimationClassNames.slideLeftIn10,\n [RectangleEdge.right]: AnimationClassNames.slideRightIn10,\n};\n\nconst 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\nconst OFF_SCREEN_STYLE: React.CSSProperties = {\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)\nconst ARIA_ROLE_ATTRIBUTES = ['role', 'aria-roledescription'];\n\nconst 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} as const;\n\nconst getClassNames = classNamesFunction({\n disableCaching: true, // disabling caching because stylesProp.position mutates often\n});\n\n/**\n * (Hook) to return a function to lazily fetch the bounds of the target element for the callout.\n */\nfunction useBounds(\n { bounds, minPagePadding = DEFAULT_PROPS.minPagePadding, target }: ICalloutProps,\n targetRef: React.RefObject,\n targetWindow: Window | undefined,\n) {\n const [targetWindowResized, setTargetWindowResized] = React.useState(false);\n const cachedBounds = React.useRef();\n\n const getBounds = React.useCallback((): IRectangle | undefined => {\n if (!cachedBounds.current || targetWindowResized) {\n let currentBounds =\n typeof bounds === 'function' ? (targetWindow ? bounds(target, targetWindow) : undefined) : bounds;\n\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\n return cachedBounds.current;\n }, [bounds, minPagePadding, target, targetRef, targetWindow, targetWindowResized]);\n\n const async: Async = useAsync();\n useOnEvent(\n targetWindow,\n 'resize',\n async.debounce(\n () => {\n setTargetWindowResized(true);\n },\n 500,\n { leading: true },\n ),\n );\n\n return getBounds;\n}\n\n/**\n * (Hook) to return the maximum available height for the Callout to render into.\n */\nfunction useMaxHeight(\n {\n calloutMaxHeight,\n finalHeight,\n directionalHint,\n directionalHintFixed,\n hidden,\n gapSpace,\n beakWidth,\n isBeakVisible,\n coverTarget,\n }: ICalloutProps,\n getBounds: () => IRectangle | undefined,\n targetRef: React.RefObject,\n positions?: ICalloutPositionedInfo,\n) {\n const [maxHeight, setMaxHeight] = React.useState();\n const { top, bottom } = positions?.elementPosition ?? {};\n const targetRect = targetRef?.current ? getRectangleFromTarget(targetRef.current) : undefined;\n\n React.useEffect(() => {\n const bounds = getBounds() ?? ({} as IRectangle);\n const { top: topBounds } = bounds;\n let { bottom: bottomBounds } = bounds;\n let calculatedHeight: number | undefined;\n\n // If aligned to top edge of target and not covering target, update bottom bounds to the\n // top of the target (accounting for gap space and beak)\n if (positions?.targetEdge === RectangleEdge.top && targetRect?.top && !coverTarget) {\n bottomBounds = targetRect.top - calculateGapSpace(isBeakVisible, beakWidth, gapSpace);\n }\n\n if (typeof top === 'number' && bottomBounds) {\n calculatedHeight = bottomBounds - top;\n } else if (typeof bottom === 'number' && typeof topBounds === 'number' && bottomBounds) {\n calculatedHeight = bottomBounds - topBounds - bottom;\n }\n\n if (\n (!calloutMaxHeight && !hidden) ||\n (calloutMaxHeight && calculatedHeight && calloutMaxHeight > calculatedHeight)\n ) {\n setMaxHeight(calculatedHeight);\n } else if (calloutMaxHeight) {\n setMaxHeight(calloutMaxHeight);\n } else {\n setMaxHeight(undefined);\n }\n }, [\n bottom,\n calloutMaxHeight,\n finalHeight,\n directionalHint,\n directionalHintFixed,\n getBounds,\n hidden,\n positions,\n top,\n gapSpace,\n beakWidth,\n isBeakVisible,\n targetRect,\n coverTarget,\n ]);\n\n return maxHeight;\n}\n\n/**\n * (Hook) to find the current position of Callout. If Callout is resized then a new position is calculated.\n */\nfunction usePositions(\n props: ICalloutProps,\n hostElement: React.RefObject,\n calloutElement: HTMLDivElement | null,\n targetRef: React.RefObject,\n getBounds: () => IRectangle | undefined,\n popupRef: React.RefObject,\n) {\n const [positions, setPositions] = React.useState();\n const positionAttempts = React.useRef(0);\n const previousTarget = React.useRef();\n const async = useAsync();\n const {\n hidden,\n target,\n finalHeight,\n calloutMaxHeight,\n onPositioned,\n directionalHint,\n hideOverflow,\n preferScrollResizePositioning,\n } = props;\n\n const win = useWindowEx();\n const localRef = React.useRef();\n let popupStyles: CSSStyleDeclaration | undefined;\n if (localRef.current !== popupRef.current) {\n localRef.current = popupRef.current;\n popupStyles = popupRef.current ? win?.getComputedStyle(popupRef.current) : undefined;\n }\n const popupOverflowY = popupStyles?.overflowY;\n\n React.useEffect(() => {\n if (!hidden) {\n const timerId = async.requestAnimationFrame(() => {\n if (hostElement.current && calloutElement) {\n const currentProps: IPositionProps = {\n ...props,\n target: targetRef.current!,\n bounds: getBounds(),\n };\n\n // duplicate calloutElement & remove useMaxHeight's maxHeight for position calc\n const dupeCalloutElement = calloutElement.cloneNode(true) as HTMLElement;\n dupeCalloutElement.style.maxHeight = calloutMaxHeight ? `${calloutMaxHeight}` : '';\n dupeCalloutElement.style.visibility = 'hidden';\n calloutElement.parentElement?.appendChild(dupeCalloutElement);\n\n const previousPositions = previousTarget.current === target ? positions : undefined;\n\n // only account for scroll resizing if styles allow callout to scroll\n // (popup styles determine if callout will scroll)\n const isOverflowYHidden = hideOverflow || popupOverflowY === 'clip' || popupOverflowY === 'hidden';\n const shouldScroll = preferScrollResizePositioning && !isOverflowYHidden;\n\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 const newPositions: ICalloutPositionedInfo = finalHeight\n ? positionCard(currentProps, hostElement.current, dupeCalloutElement, previousPositions, win)\n : positionCallout(\n currentProps,\n hostElement.current,\n dupeCalloutElement,\n previousPositions,\n shouldScroll,\n undefined,\n win,\n );\n\n // clean up duplicate calloutElement\n calloutElement.parentElement?.removeChild(dupeCalloutElement);\n\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 (\n (!positions && newPositions) ||\n (positions && newPositions && !arePositionsEqual(positions, newPositions) && positionAttempts.current < 5)\n ) {\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 } 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?.(positions);\n }\n }\n }, calloutElement);\n\n previousTarget.current = target;\n\n return () => {\n async.cancelAnimationFrame(timerId);\n previousTarget.current = undefined;\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 hideOverflow,\n preferScrollResizePositioning,\n popupOverflowY,\n win,\n ]);\n\n return positions;\n}\n\n/**\n * (Hook) to set up behavior to automatically focus the callout when it appears, if indicated by props.\n */\nfunction useAutoFocus(\n { hidden, setInitialFocus }: ICalloutProps,\n positions: ICalloutPositionedInfo | undefined,\n calloutElement: HTMLDivElement | null,\n) {\n const async = useAsync();\n const hasPositions = !!positions;\n React.useEffect(() => {\n if (!hidden && setInitialFocus && hasPositions && calloutElement) {\n const timerId = async.requestAnimationFrame(() => focusFirstChild(calloutElement), calloutElement);\n\n return () => async.cancelAnimationFrame(timerId);\n }\n }, [hidden, hasPositions, async, calloutElement, setInitialFocus]);\n}\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(\n {\n hidden,\n onDismiss,\n // eslint-disable-next-line deprecation/deprecation\n preventDismissOnScroll,\n // eslint-disable-next-line deprecation/deprecation\n preventDismissOnResize,\n // eslint-disable-next-line deprecation/deprecation\n preventDismissOnLostFocus,\n dismissOnTargetClick,\n shouldDismissOnWindowFocus,\n preventDismissOnEvent,\n }: ICalloutProps,\n positions: ICalloutPositionedInfo | undefined,\n hostElement: React.RefObject,\n targetRef: React.RefObject,\n targetWindow: Window | undefined,\n) {\n const isMouseDownOnPopup = React.useRef(false);\n const async = useAsync();\n\n const mouseDownHandlers = useConst([\n () => {\n isMouseDownOnPopup.current = true;\n },\n () => {\n isMouseDownOnPopup.current = false;\n },\n ] as const);\n\n const positionsExists = !!positions;\n\n React.useEffect(() => {\n const dismissOnScroll = (ev: Event) => {\n if (positionsExists && !preventDismissOnScroll) {\n dismissOnClickOrScroll(ev);\n }\n };\n\n const dismissOnResize = (ev: Event) => {\n if (!preventDismissOnResize && !(preventDismissOnEvent && preventDismissOnEvent(ev))) {\n onDismiss?.(ev);\n }\n };\n\n const dismissOnLostFocus = (ev: Event) => {\n if (!preventDismissOnLostFocus) {\n dismissOnClickOrScroll(ev);\n }\n };\n\n const dismissOnClickOrScroll = (ev: Event) => {\n const eventPaths: Array = ev.composedPath ? ev.composedPath() : [];\n const target = eventPaths.length > 0 ? (eventPaths[0] as HTMLElement) : (ev.target as HTMLElement);\n const isEventTargetOutsideCallout = hostElement.current && !elementContains(hostElement.current, target);\n\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\n if (\n (!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 as HTMLElement, target))))\n ) {\n if (preventDismissOnEvent && preventDismissOnEvent(ev)) {\n return;\n }\n onDismiss?.(ev);\n }\n };\n\n const dismissOnTargetWindowBlur = (ev: FocusEvent) => {\n // Do nothing\n if (!shouldDismissOnWindowFocus) {\n return;\n }\n\n if (\n ((preventDismissOnEvent && !preventDismissOnEvent(ev)) ||\n (!preventDismissOnEvent && !preventDismissOnLostFocus)) &&\n !targetWindow?.document.hasFocus() &&\n ev.relatedTarget === null\n ) {\n onDismiss?.(ev);\n }\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 const disposablesPromise = new Promise<() => void>(resolve => {\n async.setTimeout(() => {\n if (!hidden && targetWindow) {\n const disposables = [\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\n resolve(() => {\n disposables.forEach(dispose => dispose());\n });\n }\n }, 0);\n });\n\n return () => {\n disposablesPromise.then(dispose => 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\n return mouseDownHandlers;\n}\n\nexport const CalloutContentBase: React.FunctionComponent = React.memo(\n React.forwardRef((propsWithoutDefaults, forwardedRef) => {\n const props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n\n const {\n styles,\n style,\n ariaLabel,\n ariaDescribedBy,\n ariaLabelledBy,\n className,\n isBeakVisible,\n children,\n beakWidth,\n calloutWidth,\n calloutMaxWidth,\n calloutMinWidth,\n doNotLayer,\n finalHeight,\n hideOverflow = !!finalHeight,\n backgroundColor,\n calloutMaxHeight,\n onScroll,\n // eslint-disable-next-line deprecation/deprecation\n shouldRestoreFocus = true,\n target,\n hidden,\n onLayerMounted,\n popupProps,\n } = props;\n\n const hostElement = React.useRef(null);\n const popupRef = React.useRef(null);\n const mergedPopupRefs = useMergedRefs(popupRef, popupProps?.ref);\n const [calloutElement, setCalloutElement] = React.useState(null);\n const calloutCallback = React.useCallback((calloutEl: any) => {\n setCalloutElement(calloutEl);\n }, []);\n const rootRef = useMergedRefs(hostElement, forwardedRef);\n\n const [targetRef, targetWindow] = useTarget(props.target, {\n current: calloutElement,\n });\n const getBounds = useBounds(props, targetRef, targetWindow);\n const positions = usePositions(props, hostElement, calloutElement, targetRef, getBounds, mergedPopupRefs);\n const maxHeight = useMaxHeight(props, getBounds, targetRef, positions);\n const [mouseDownOnPopup, mouseUpOnPopup] = useDismissHandlers(\n props,\n positions,\n hostElement,\n targetRef,\n targetWindow,\n );\n\n // do not set both top and bottom css props from positions\n // instead, use maxHeight\n const isForcedInBounds = positions?.elementPosition.top && positions?.elementPosition.bottom;\n const cssPositions = {\n ...positions?.elementPosition,\n maxHeight,\n };\n if (isForcedInBounds) {\n cssPositions.bottom = undefined;\n }\n\n useAutoFocus(props, positions, calloutElement);\n\n React.useEffect(() => {\n if (!hidden) {\n onLayerMounted?.();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run if hidden changes\n }, [hidden]);\n\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\n const overflowYHidden = hideOverflow;\n\n const beakVisible = isBeakVisible && !!target;\n const classNames = getClassNames(styles!, {\n theme: props.theme!,\n className,\n overflowYHidden,\n calloutWidth,\n positions,\n beakWidth,\n backgroundColor,\n calloutMaxWidth,\n calloutMinWidth,\n doNotLayer,\n });\n\n const overflowStyle: React.CSSProperties = {\n maxHeight: calloutMaxHeight ? calloutMaxHeight : '100%',\n ...style,\n ...(overflowYHidden && { overflowY: 'hidden' }),\n };\n\n const visibilityStyle: React.CSSProperties | undefined = 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 (\n

\n \n {beakVisible &&
}\n {beakVisible &&
}\n \n {children}\n \n
\n
\n );\n }),\n (previousProps: ICalloutProps, nextProps: ICalloutProps) => {\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\n/**\n * (Utility) to find and return the current `Callout` Beak position.\n *\n * @param positions\n */\nfunction getBeakPosition(positions?: ICalloutPositionedInfo): React.CSSProperties {\n const beakPositionStyle: React.CSSProperties = {\n ...positions?.beakPosition?.elementPosition,\n display: positions?.beakPosition?.hideBeak ? 'none' : undefined,\n };\n\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\n return beakPositionStyle;\n}\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(\n prevElementPositions: ICalloutPositionedInfo,\n newElementPosition: ICalloutPositionedInfo,\n): boolean {\n return (\n comparePositions(prevElementPositions.elementPosition, newElementPosition.elementPosition) &&\n comparePositions(prevElementPositions.beakPosition.elementPosition, newElementPosition.beakPosition.elementPosition)\n );\n}\n\n/**\n * (Utility) used in **arePositionsEqual** to compare two different elementPositions.\n *\n * @param prevElementPositions\n * @param newElementPositions\n */\nfunction comparePositions(prevElementPositions: IPosition, newElementPositions: IPosition): boolean {\n for (const key in newElementPositions) {\n if (newElementPositions.hasOwnProperty(key)) {\n const oldPositionEdge = prevElementPositions[key];\n const newPositionEdge = newElementPositions[key];\n if (oldPositionEdge !== undefined && newPositionEdge !== undefined) {\n if (oldPositionEdge.toFixed(2) !== newPositionEdge.toFixed(2)) {\n return false;\n }\n } else {\n return false;\n }\n }\n }\n return true;\n}\n\nCalloutContentBase.displayName = COMPONENT_NAME;\n","import { HighContrastSelector, focusClear, getGlobalClassNames, ZIndexes } from '../../Styling';\nimport type { IRawStyle } from '../../Styling';\nimport type { ICalloutContentStyleProps, ICalloutContentStyles } from './Callout.types';\n\nfunction getBeakStyle(beakWidth?: number): IRawStyle {\n return {\n height: beakWidth,\n width: beakWidth,\n };\n}\n\nconst 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};\n\nexport const getStyles = (props: ICalloutContentStyleProps): ICalloutContentStyles => {\n const {\n theme,\n className,\n overflowYHidden,\n calloutWidth,\n beakWidth,\n backgroundColor,\n calloutMaxWidth,\n calloutMinWidth,\n doNotLayer,\n } = props;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n const { semanticColors, effects } = theme;\n\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: {\n [HighContrastSelector]: {\n borderWidth: 1,\n borderStyle: 'solid',\n borderColor: 'WindowText',\n },\n },\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,\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,\n },\n ],\n };\n};\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { CalloutContentBase } from './CalloutContent.base';\nimport { getStyles } from './CalloutContent.styles';\nimport type { ICalloutProps } from './Callout.types';\n\nexport const CalloutContent: React.FunctionComponent = styled(CalloutContentBase, getStyles, undefined, {\n scope: 'CalloutContent',\n});\n","import * as React from 'react';\nvar PortalCompatContext = React.createContext(undefined);\nvar portalCompatContextDefaultValue = function() {\n return function() {\n return undefined;\n };\n};\nexport var PortalCompatContextProvider = PortalCompatContext.Provider;\nexport function usePortalCompat() {\n var _React_useContext;\n return (_React_useContext = React.useContext(PortalCompatContext)) !== null && _React_useContext !== void 0 ? _React_useContext : portalCompatContextDefaultValue;\n}\n","import * as React from 'react';\nimport {\n classNamesFunction,\n divProperties,\n getDocument,\n getNativeProps,\n getRTL,\n memoizeFunction,\n Customizer,\n FocusRectsProvider,\n} from '../../Utilities';\nimport { createTheme } from '../../Styling';\nimport { useMergedRefs } from '@fluentui/react-hooks';\nimport type { IFabricProps, IFabricStyleProps, IFabricStyles } from './Fabric.types';\nimport type { IProcessedStyleSet } from '@fluentui/merge-styles';\nimport type { ITheme } from '../../Styling';\n\nconst getClassNames = classNamesFunction();\nconst getFabricTheme = memoizeFunction((theme?: ITheme, isRTL?: boolean) => createTheme({ ...theme, rtl: isRTL }));\n\nconst getDir = ({ theme, dir }: IFabricProps) => {\n const contextDir = getRTL(theme) ? 'rtl' : 'ltr';\n const pageDir = getRTL() ? 'rtl' : 'ltr';\n const 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};\n\nexport const FabricBase: React.FunctionComponent = React.forwardRef(\n (props, ref) => {\n const { className, theme, applyTheme, applyThemeToBody, styles } = props;\n\n const classNames = getClassNames(styles, {\n theme: theme!,\n applyTheme,\n className,\n });\n\n const rootElement = React.useRef(null);\n useApplyThemeToBody(applyThemeToBody, classNames, rootElement);\n\n return <>{useRenderedContent(props, classNames, rootElement, ref)};\n },\n);\nFabricBase.displayName = 'FabricBase';\n\nfunction useRenderedContent(\n props: IFabricProps,\n { root }: IProcessedStyleSet,\n rootElement: React.RefObject,\n ref: React.Ref,\n) {\n const { as: Root = 'div', dir, theme } = props;\n const divProps = getNativeProps>(props, divProperties, ['dir']);\n\n const { rootDir, needsTheme } = getDir(props);\n\n let renderedContent = (\n \n \n \n );\n\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 {renderedContent}\n );\n }\n\n return renderedContent;\n}\n\nfunction useApplyThemeToBody(\n applyThemeToBody: boolean | undefined,\n { bodyThemed }: IProcessedStyleSet,\n rootElement: React.RefObject,\n) {\n React.useEffect((): void | (() => void) => {\n if (applyThemeToBody) {\n const currentDoc = getDocument(rootElement.current);\n if (currentDoc) {\n currentDoc.body.classList.add(bodyThemed);\n return () => {\n currentDoc.body.classList.remove(bodyThemed);\n };\n }\n }\n }, [bodyThemed, applyThemeToBody, rootElement]);\n\n return rootElement;\n}\n","import { getGlobalClassNames } from '../../Styling';\nimport type { IFabricStyleProps, IFabricStyles } from './Fabric.types';\n\nconst inheritFont = { fontFamily: 'inherit' };\n\nconst GlobalClassNames = {\n root: 'ms-Fabric',\n bodyThemed: 'ms-Fabric-bodyThemed',\n};\n\nexport interface IFabricClassNames {\n root: string;\n bodyThemed: string;\n}\n\nexport const getStyles = (props: IFabricStyleProps): IFabricStyles => {\n const { applyTheme, className, preventBlanketFontInheritance, theme } = props;\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n {\n color: theme.palette.neutralPrimary,\n },\n !preventBlanketFontInheritance && {\n '& button': inheritFont,\n '& input': inheritFont,\n '& textarea': inheritFont,\n },\n // apply theme to only if applyTheme is true\n applyTheme && {\n color: theme.semanticColors.bodyText,\n backgroundColor: theme.semanticColors.bodyBackground,\n },\n className,\n ],\n bodyThemed: [\n {\n backgroundColor: theme.semanticColors.bodyBackground,\n },\n ],\n };\n};\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { FabricBase } from './Fabric.base';\nimport { getStyles } from './Fabric.styles';\nimport type { IFabricProps, IFabricStyleProps, IFabricStyles } from './Fabric.types';\n\n/**\n * @deprecated This component is deprecated as of `@fluentui/react` version 8. Use `ThemeProvider` instead.\n */\nexport const Fabric: React.FunctionComponent = styled(\n FabricBase,\n getStyles,\n undefined,\n {\n scope: 'Fabric',\n },\n);\n","import { ILayerHost } from './LayerHost.types';\n\nconst _layersByHostId: { [hostId: string]: (() => void)[] } = {};\nconst _layerHostsById: { [hostId: string]: ILayerHost[] } = {};\n\nconst defaultHostId = 'fluent-default-layer-host';\nlet _defaultHostSelector: string | undefined = `#${defaultHostId}`;\n\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: string, callback: () => void) {\n if (!_layersByHostId[hostId]) {\n _layersByHostId[hostId] = [];\n }\n\n _layersByHostId[hostId].push(callback);\n\n const layerHosts = _layerHostsById[hostId];\n\n if (layerHosts) {\n for (const layerHost of layerHosts) {\n layerHost.notifyLayersChanged();\n }\n }\n}\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: string, callback: () => void) {\n const layers = _layersByHostId[hostId];\n\n if (layers) {\n const idx = layers.indexOf(callback);\n if (idx >= 0) {\n layers.splice(idx, 1);\n\n if (layers.length === 0) {\n delete _layersByHostId[hostId];\n }\n }\n }\n\n const layerHosts = _layerHostsById[hostId];\n\n if (layerHosts) {\n for (const layerHost of layerHosts) {\n layerHost.notifyLayersChanged();\n }\n }\n}\n\n/**\n * Gets the number of layers currently registered with a host id.\n * @param hostId - Id of the layer host.\n * @returns The number of layers currently registered with the host.\n */\nexport function getLayerCount(hostId: string): number {\n const layers = _layerHostsById[hostId];\n\n return layers ? layers.length : 0;\n}\n\n/**\n * Gets the Layer Host instance associated with a hostId, if applicable.\n * @param hostId - Id of the layer host\n * @returns A component ref for the associated layer host.\n */\nexport function getLayerHost(hostId: string): ILayerHost | undefined {\n const layerHosts = _layerHostsById[hostId];\n\n return (layerHosts && layerHosts[0]) || undefined;\n}\n\n/**\n * Registers a Layer Host with an associated hostId.\n * @param hostId - Id of the layer host\n * @param layerHost - layer host instance\n */\nexport function registerLayerHost(hostId: string, layerHost: ILayerHost): void {\n const layerHosts = _layerHostsById[hostId] || (_layerHostsById[hostId] = []);\n\n // Insert this at the start of an array to avoid race conditions between mount and unmount.\n // If a LayerHost is re-mounted, and mount of the new instance may occur before the unmount of the old one.\n // Putting the new instance at the start of this array ensures that calls to `getLayerHost` will immediately\n // get the new one even if the old one is around briefly.\n layerHosts.unshift(layerHost);\n}\n\n/**\n * Unregisters a Layer Host from the associated hostId.\n * @param hostId - Id of the layer host\n * @param layerHost - layer host instance\n */\nexport function unregisterLayerHost(hostId: string, layerHost: ILayerHost): void {\n const layerHosts = _layerHostsById[hostId];\n\n if (layerHosts) {\n const idx = layerHosts.indexOf(layerHost);\n\n if (idx >= 0) {\n layerHosts.splice(idx, 1);\n }\n\n if (layerHosts.length === 0) {\n delete _layerHostsById[hostId];\n }\n }\n}\n\n/**\n * When no default layer host is provided, this function is executed to create the default host.\n */\nexport function createDefaultLayerHost(doc: Document, shadowRoot: ShadowRoot | null = null): Node | null {\n const host = doc.createElement('div');\n host.setAttribute('id', defaultHostId);\n (host as HTMLElement).style.cssText = 'position:fixed;z-index:1000000';\n\n if (shadowRoot) {\n shadowRoot.appendChild(host);\n } else {\n doc?.body.appendChild(host);\n }\n\n // doc?.body.appendChild(host);\n\n return host;\n}\n\n/**\n * This function can be optionally called to clean up the default layer host as needed.\n */\nexport function cleanupDefaultLayerHost(doc: Document, shadowRoot: ShadowRoot | null = null) {\n const root = shadowRoot ?? doc;\n const host = root.querySelector(`#${defaultHostId}`);\n\n if (host) {\n root.removeChild(host);\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: string) {\n if (_layersByHostId[id]) {\n _layersByHostId[id].forEach(callback => callback());\n }\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?: string) {\n _defaultHostSelector = selector;\n}\n\n/**\n * Get the default target selector when determining a host\n */\nexport function getDefaultTarget(): string | undefined {\n return _defaultHostSelector;\n}\n","// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore \"react-portal-compat-context\" uses v9 configs via path aliases\nimport { usePortalCompat } from '@fluentui/react-portal-compat-context';\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { Fabric } from '../../Fabric';\nimport {\n classNamesFunction,\n css,\n getDocument,\n setPortalAttribute,\n setVirtualParent,\n FocusRectsProvider,\n FocusRectsContext,\n IsFocusVisibleClassName,\n} from '../../Utilities';\nimport {\n registerLayer,\n getDefaultTarget,\n unregisterLayer,\n getLayerHost,\n createDefaultLayerHost,\n} from './Layer.notification';\nimport { useIsomorphicLayoutEffect, useMergedRefs, useWarnings } from '@fluentui/react-hooks';\nimport type { ILayerProps, ILayerStyleProps, ILayerStyles } from './Layer.types';\n\nconst getClassNames = classNamesFunction();\n\nconst getFocusVisibility = (providerRef?: React.RefObject) => {\n if (providerRef?.current) {\n return providerRef.current.classList.contains(IsFocusVisibleClassName);\n }\n\n return false;\n};\n\n// We don't want to import Tabster here, so we're using a type that matches the Tabster type to set the flag needed\n// for better interop between Fluent UI V8 and V9.\ninterface IHTMLElementWithTabsterFlags extends HTMLElement {\n __tabsterElementFlags?: {\n noDirectAriaHidden?: boolean; // When Modalizer sets aria-hidden on everything outside of the modal,\n // do not set aria-hidden directly on this element, go inside and check its children,\n // and set aria-hidden on the children. This is to be set on a container that hosts\n // elements which have the active modal dialog as virtual parent.\n };\n}\n\nexport const LayerBase: React.FunctionComponent = React.forwardRef(\n (props, ref) => {\n const registerPortalEl = usePortalCompat();\n\n const rootRef = React.useRef(null);\n const mergedRef = useMergedRefs(rootRef, ref);\n const layerRef = React.useRef();\n const fabricElementRef = React.useRef(null);\n const focusContext = React.useContext(FocusRectsContext);\n\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 const [needRaiseLayerMount, setNeedRaiseLayerMount] = React.useState(false);\n\n // Sets the focus visible className when the FocusRectsProvider for the layer is rendered\n // This allows the current focus visibility style to be carried over to the layer content\n const focusRectsRef = React.useCallback(\n el => {\n const isFocusVisible = getFocusVisibility(focusContext?.providerRef);\n if (el && isFocusVisible) {\n el.classList.add(IsFocusVisibleClassName);\n }\n },\n [focusContext],\n );\n\n const {\n children,\n className,\n eventBubblingEnabled,\n fabricProps,\n hostId,\n insertFirst,\n onLayerDidMount = () => undefined,\n // eslint-disable-next-line deprecation/deprecation\n onLayerMounted = () => undefined,\n onLayerWillUnmount,\n styles,\n theme,\n } = props;\n\n const fabricRef = useMergedRefs(fabricElementRef, fabricProps?.ref, focusRectsRef);\n\n const classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n isNotHost: !hostId,\n });\n\n // Returns the user provided hostId props element, the default target selector,\n // or undefined if document doesn't exist.\n const getHost = (doc: Document, shadowRoot: ShadowRoot | null = null): Node | null => {\n const root = shadowRoot ?? doc;\n if (hostId) {\n const layerHost = getLayerHost(hostId);\n\n if (layerHost) {\n return layerHost.rootRef.current ?? null;\n }\n\n return root.getElementById(hostId) ?? null;\n } else {\n const defaultHostSelector = getDefaultTarget();\n\n // Find the host.\n let host: Node | null = defaultHostSelector ? (root.querySelector(defaultHostSelector) as Node) : null;\n\n // If no host is available, create a container for injecting layers in.\n // Having a container scopes layout computation.\n if (!host) {\n host = createDefaultLayerHost(doc, shadowRoot);\n }\n\n return host;\n }\n };\n\n // Removes the current layer element's parentNode and runs onLayerWillUnmount prop if provided.\n const removeLayerElement = (): void => {\n onLayerWillUnmount?.();\n\n const elem = layerRef.current;\n\n // Clear ref before removing from the DOM\n layerRef.current = undefined;\n\n if (elem && elem.parentNode) {\n elem.parentNode.removeChild(elem);\n }\n };\n\n // If a doc or host exists, it will remove and update layer parentNodes.\n const createLayerElement = () => {\n const doc = getDocument(rootRef.current);\n const shadowRoot = (rootRef.current?.getRootNode() as ShadowRoot)?.host\n ? (rootRef?.current?.getRootNode() as ShadowRoot)\n : undefined;\n\n if (!doc || (!doc && !shadowRoot)) {\n return;\n }\n\n const host = getHost(doc, shadowRoot) as IHTMLElementWithTabsterFlags | null;\n\n if (!host) {\n return;\n }\n\n // Tabster in V9 sets aria-hidden on the elements outside of the modal dialog. And it doesn't set aria-hidden\n // on the virtual children of the dialog. But the host element itself is not a virtual child of a dialog, it\n // might contain virtual children. noDirectAriaHidden flag makes Tabster to poke inside the element and set\n // aria-hidden on the children (if they are not virtual children of the active V9 dialog) not on the host element.\n // To avoid importing Tabster as a dependency here, we just set a flag on the host element which is checked by\n // Tabster.\n if (!host.__tabsterElementFlags) {\n host.__tabsterElementFlags = {};\n }\n host.__tabsterElementFlags.noDirectAriaHidden = true;\n\n // Remove and re-create any previous existing layer elements.\n removeLayerElement();\n\n const el = (host.ownerDocument ?? doc).createElement('div');\n\n el.className = classNames.root!;\n setPortalAttribute(el);\n setVirtualParent(el, rootRef.current!);\n\n insertFirst ? host.insertBefore(el, host.firstChild) : host.appendChild(el);\n layerRef.current = el;\n setNeedRaiseLayerMount(true);\n };\n\n useIsomorphicLayoutEffect(() => {\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\n const unregisterPortalEl = layerRef.current ? registerPortalEl(layerRef.current) : undefined;\n\n return () => {\n if (unregisterPortalEl) {\n unregisterPortalEl();\n }\n\n removeLayerElement();\n\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\n React.useEffect(() => {\n if (layerRef.current && needRaiseLayerMount) {\n onLayerMounted?.();\n onLayerDidMount?.();\n setNeedRaiseLayerMount(false);\n }\n }, [needRaiseLayerMount, onLayerMounted, onLayerDidMount]);\n\n useDebugWarnings(props);\n\n return (\n \n {layerRef.current &&\n ReactDOM.createPortal(\n \n {/* eslint-disable deprecation/deprecation */}\n \n {children}\n \n {/* eslint-enable deprecation/deprecation */}\n ,\n layerRef.current,\n )}\n \n );\n },\n);\nLayerBase.displayName = 'LayerBase';\n\nlet filteredEventProps: { [key: string]: (ev: React.SyntheticEvent) => void };\n\nconst onFilterEvent = (ev: React.SyntheticEvent): void => {\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 (\n ev.eventPhase === Event.BUBBLING_PHASE &&\n ev.type !== 'mouseenter' &&\n ev.type !== 'mouseleave' &&\n ev.type !== 'touchstart' &&\n ev.type !== 'touchend'\n ) {\n ev.stopPropagation();\n }\n};\n\nfunction getFilteredEvents() {\n if (!filteredEventProps) {\n filteredEventProps = {} as any;\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(name => (filteredEventProps[name] = onFilterEvent));\n }\n return filteredEventProps;\n}\n\nfunction useDebugWarnings(props: ILayerProps) {\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,\n deprecations: { onLayerMounted: 'onLayerDidMount' },\n });\n }\n}\n","import { ZIndexes, getGlobalClassNames } from '../../Styling';\nimport type { ILayerStyleProps, ILayerStyles } from './Layer.types';\n\nconst GlobalClassNames = {\n root: 'ms-Layer',\n rootNoHost: 'ms-Layer--fixed',\n content: 'ms-Layer-content',\n};\n\nexport const getStyles = (props: ILayerStyleProps): ILayerStyles => {\n const { className, isNotHost, theme } = props;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\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","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { LayerBase } from './Layer.base';\nimport { getStyles } from './Layer.styles';\nimport type { ILayerProps, ILayerStyleProps, ILayerStyles } from './Layer.types';\n\nexport const Layer: React.FunctionComponent = styled(\n LayerBase,\n getStyles,\n undefined,\n {\n scope: 'Layer',\n fields: ['hostId', 'theme', 'styles'],\n },\n);\n","import * as React from 'react';\nimport { CalloutContent } from './CalloutContent';\nimport { Layer } from '../../Layer';\nimport type { ICalloutProps } from './Callout.types';\n\nexport const Callout: React.FunctionComponent = React.forwardRef(\n ({ layerProps, doNotLayer, ...rest }, forwardedRef) => {\n const content = ;\n return doNotLayer ? content : {content};\n },\n);\nCallout.displayName = 'Callout';\n","import * as React from 'react';\nimport {\n getActiveElement,\n getEventTarget,\n elementContains,\n getNativeProps,\n divProperties,\n getFirstTabbable,\n getLastTabbable,\n getNextElement,\n focusAsync,\n getPropsWithDefaults,\n modalize,\n on,\n useHasMergeStylesShadowRootContext,\n} from '../../Utilities';\nimport { useId, useConst, useMergedRefs, useEventCallback, usePrevious, useUnmount } from '@fluentui/react-hooks';\nimport { useDocument } from '../../WindowProvider';\nimport type { IRefObject } from '../../Utilities';\nimport type { IFocusTrapZoneProps, IFocusTrapZone } from './FocusTrapZone.types';\nimport { useWindowEx } from '../../utilities/dom';\n\ninterface IFocusTrapZoneInternalState {\n previouslyFocusedElementInTrapZone?: HTMLElement;\n hasFocus: boolean;\n /** ID tracked in focusStack. Don't respect prop updates in case the ID changes while the FTZ is active. */\n focusStackId: string;\n}\n\nconst COMPONENT_NAME = 'FocusTrapZone';\n\nconst DEFAULT_PROPS = {\n disabled: false,\n disableFirstFocus: false,\n forceFocusInsideTrap: true,\n isClickableOutsideFocusTrap: false,\n // Hardcoding completely uncontrolled flag for proper interop with FluentUI V9.\n 'data-tabster': '{\"uncontrolled\": {\"completely\": true}}',\n};\n\nconst useComponentRef = (\n componentRef: IRefObject | undefined,\n previouslyFocusedElement: HTMLElement | undefined,\n focusFTZ: () => void,\n) => {\n React.useImperativeHandle(\n componentRef,\n () => ({\n get previouslyFocusedElement() {\n return previouslyFocusedElement;\n },\n focus: focusFTZ,\n }),\n [focusFTZ, previouslyFocusedElement],\n );\n};\n\nexport const FocusTrapZone: React.FunctionComponent & {\n /**\n * Stack of active FocusTrapZone identifiers, exposed for testing purposes only.\n * (This is always set, just marked as optional to avoid a cast in the component definition.)\n * @internal\n */\n focusStack?: string[];\n} = React.forwardRef((propsWithoutDefaults, ref) => {\n const root = React.useRef(null);\n const firstBumper = React.useRef(null);\n const lastBumper = React.useRef(null);\n const mergedRootRef = useMergedRefs(root, ref) as React.Ref;\n const doc = useDocument();\n const win = useWindowEx()!;\n const inShadow = useHasMergeStylesShadowRootContext();\n\n const isFirstRender = usePrevious(false) ?? true;\n\n const props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n\n const internalState = useConst({\n hasFocus: false,\n focusStackId: useId('ftz-', props.id),\n });\n\n const {\n children,\n componentRef,\n disabled,\n disableFirstFocus,\n forceFocusInsideTrap,\n focusPreviouslyFocusedInnerElement,\n // eslint-disable-next-line deprecation/deprecation\n firstFocusableSelector,\n firstFocusableTarget,\n // eslint-disable-next-line deprecation/deprecation\n disableRestoreFocus = props.ignoreExternalFocusing,\n isClickableOutsideFocusTrap,\n enableAriaHiddenSiblings,\n } = props;\n\n const bumperProps = {\n 'aria-hidden': true,\n style: {\n pointerEvents: 'none',\n position: 'fixed', // 'fixed' prevents browsers from scrolling to bumpers when viewport does not contain them\n },\n tabIndex: disabled ? -1 : 0, // make bumpers tabbable only when enabled\n 'data-is-visible': true,\n 'data-is-focus-trap-zone-bumper': true,\n } as React.HTMLAttributes;\n\n const focusElementAsync = React.useCallback((element: HTMLElement) => {\n if (element !== firstBumper.current && element !== lastBumper.current) {\n focusAsync(element);\n }\n }, []);\n\n /**\n * Callback to force focus into FTZ (named to avoid overlap with global focus() callback).\n * useEventCallback always returns the same callback reference but updates the implementation\n * every render to avoid stale captured values.\n */\n const focusFTZ = useEventCallback(() => {\n if (!root.current) {\n return; // not done mounting\n }\n\n const { previouslyFocusedElementInTrapZone } = internalState;\n if (\n focusPreviouslyFocusedInnerElement &&\n previouslyFocusedElementInTrapZone &&\n elementContains(root.current, previouslyFocusedElementInTrapZone)\n ) {\n // focus on the last item that had focus in the zone before we left the zone\n focusElementAsync(previouslyFocusedElementInTrapZone);\n return;\n }\n\n let firstFocusableChild: HTMLElement | null = null;\n\n if (typeof firstFocusableTarget === 'string') {\n firstFocusableChild = root.current.querySelector(firstFocusableTarget);\n } else if (firstFocusableTarget) {\n firstFocusableChild = firstFocusableTarget(root.current);\n } else if (firstFocusableSelector) {\n const focusSelector =\n typeof firstFocusableSelector === 'string' ? firstFocusableSelector : firstFocusableSelector();\n firstFocusableChild = root.current.querySelector('.' + focusSelector);\n }\n\n // Fall back to first element if query selector did not match any elements.\n if (!firstFocusableChild) {\n firstFocusableChild = getNextElement(\n root.current,\n root.current.firstChild as HTMLElement,\n false,\n false,\n false,\n true,\n undefined,\n undefined,\n undefined,\n inShadow,\n );\n }\n\n if (firstFocusableChild) {\n focusElementAsync(firstFocusableChild);\n }\n });\n\n /** Used in root div focus/blur handlers */\n const focusBumper = (isFirstBumper: boolean) => {\n if (disabled || !root.current) {\n return;\n }\n\n const nextFocusable =\n isFirstBumper === internalState.hasFocus\n ? getLastTabbable(root.current, lastBumper.current!, true, false, inShadow)\n : getFirstTabbable(root.current, firstBumper.current!, true, false, inShadow);\n\n if (nextFocusable) {\n if (nextFocusable === firstBumper.current || nextFocusable === lastBumper.current) {\n // This can happen when FTZ contains no tabbable elements.\n // focusFTZ() will take care of finding a focusable element in FTZ.\n focusFTZ();\n } else {\n nextFocusable.focus();\n }\n }\n };\n\n /** Root div blur handler (doesn't need useCallback since it's for a native element) */\n const onRootBlurCapture = (ev: React.FocusEvent) => {\n props.onBlurCapture?.(ev);\n let 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 = getActiveElement(doc!) as Element;\n }\n if (!elementContains(root.current, relatedTarget as HTMLElement)) {\n internalState.hasFocus = false;\n }\n };\n\n /** Root div focus handler (doesn't need useCallback since it's for a native element) */\n const onRootFocusCapture = (ev: React.FocusEvent) => {\n props.onFocusCapture?.(ev);\n\n if (ev.target === firstBumper.current) {\n focusBumper(true);\n } else if (ev.target === lastBumper.current) {\n focusBumper(false);\n }\n\n internalState.hasFocus = true;\n\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 = getEventTarget(ev.nativeEvent) as HTMLElement;\n }\n };\n\n /** Called to restore focus on unmount or props change. (useEventCallback ensures latest prop values are used.) */\n const returnFocusToInitiator = useEventCallback((elementToFocusOnDismiss: HTMLElement | null) => {\n FocusTrapZone.focusStack = FocusTrapZone.focusStack!.filter(value => internalState.focusStackId !== value);\n\n if (!doc) {\n return;\n }\n\n // Do not use getActiveElement() here.\n // When the FTZ is in shadow DOM focus returns to the\n // shadow host rather than body so we need to be\n // able to inspect that\n const activeElement = doc.activeElement as HTMLElement;\n if (\n !disableRestoreFocus &&\n typeof elementToFocusOnDismiss?.focus === 'function' &&\n // only restore focus if the current focused element is within the FTZ, or if nothing is focused\n (elementContains(root.current, activeElement) || activeElement === doc.body || activeElement.shadowRoot)\n ) {\n focusElementAsync(elementToFocusOnDismiss);\n }\n });\n\n /** Called in window event handlers. (useEventCallback ensures latest prop values are used.) */\n const forceFocusOrClickInTrap = useEventCallback((ev: FocusEvent | MouseEvent): void => {\n // be sure to use the latest values here\n if (disabled) {\n return;\n }\n if (internalState.focusStackId === FocusTrapZone.focusStack!.slice(-1)[0]) {\n const targetElement = getEventTarget(ev);\n if (targetElement && !elementContains(root.current, targetElement)) {\n if (doc && getActiveElement(doc) === doc.body) {\n setTimeout(() => {\n if (doc && getActiveElement(doc) === doc.body) {\n focusFTZ();\n internalState.hasFocus = true; // set focus here since we stop event propagation\n }\n }, 0);\n } else {\n focusFTZ();\n internalState.hasFocus = true; // set focus here since we stop event propagation\n }\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n });\n\n // Update window event handlers when relevant props change\n React.useEffect(() => {\n const disposables: Array<() => void> = [];\n\n if (forceFocusInsideTrap) {\n disposables.push(on(win, 'focus', forceFocusOrClickInTrap, true));\n }\n if (!isClickableOutsideFocusTrap) {\n disposables.push(on(win, 'click', forceFocusOrClickInTrap, true));\n }\n\n return () => {\n disposables.forEach(dispose => dispose());\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run when these two props change\n }, [forceFocusInsideTrap, isClickableOutsideFocusTrap, win]);\n\n // On prop change or first render, focus the FTZ and update focusStack if appropriate\n React.useEffect(() => {\n // Do nothing if disabled, or if it's a re-render and forceFocusInsideTrap is false\n // (to match existing behavior, the FTZ handles first focus even if forceFocusInsideTrap\n // is false, though it's debatable whether it should do this)\n if (disabled || (!isFirstRender && !forceFocusInsideTrap) || !root.current) {\n return;\n }\n\n // Transition from forceFocusInsideTrap / FTZ disabled to enabled (or initial mount)\n FocusTrapZone.focusStack!.push(internalState.focusStackId);\n\n const elementToFocusOnDismiss = props.elementToFocusOnDismiss || (getActiveElement(doc!) as HTMLElement | null);\n\n if (!disableFirstFocus && !elementContains(root.current, elementToFocusOnDismiss)) {\n focusFTZ();\n }\n\n // To match existing behavior, always return focus on cleanup (even if we didn't handle\n // initial focus), but it's debatable whether that's correct\n return () => returnFocusToInitiator(elementToFocusOnDismiss);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run when these two props change\n }, [forceFocusInsideTrap, disabled]);\n\n // Handle modalization separately from first focus\n React.useEffect(() => {\n if (!disabled && enableAriaHiddenSiblings) {\n const unmodalize = modalize(root.current!);\n return unmodalize;\n }\n }, [disabled, enableAriaHiddenSiblings, root]);\n\n // Cleanup lifecyle method for internalState.\n useUnmount(() => {\n // Dispose of element references so the DOM Nodes can be garbage-collected\n delete internalState.previouslyFocusedElementInTrapZone;\n });\n\n useComponentRef(componentRef, internalState.previouslyFocusedElementInTrapZone, focusFTZ);\n\n return (\n >(props, divProperties)}\n ref={mergedRootRef}\n onFocusCapture={onRootFocusCapture}\n onBlurCapture={onRootBlurCapture}\n >\n
\n {children}\n
\n
\n );\n});\n\nFocusTrapZone.displayName = COMPONENT_NAME;\nFocusTrapZone.focusStack = [];\n","import * as React from 'react';\nimport { classNamesFunction, divProperties, getNativeProps } from '../../Utilities';\nimport { Callout } from '../../Callout';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport type { IProcessedStyleSet } from '../../Styling';\nimport type { ITooltipProps, ITooltipStyleProps, ITooltipStyles } from './Tooltip.types';\n\nconst getClassNames = classNamesFunction();\n\nexport class TooltipBase extends React.Component {\n // Specify default props values\n public static defaultProps: Partial = {\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\n private _classNames: IProcessedStyleSet;\n\n public render(): JSX.Element {\n const {\n className,\n calloutProps,\n directionalHint,\n directionalHintForRTL,\n styles,\n id,\n maxWidth,\n onRenderContent = this._onRenderContent,\n targetElement,\n theme,\n } = this.props;\n\n this._classNames = getClassNames(styles!, {\n theme: theme!,\n className: className || (calloutProps && calloutProps.className),\n beakWidth: calloutProps && calloutProps.isBeakVisible ? calloutProps.beakWidth : 0,\n gapSpace: calloutProps && calloutProps.gapSpace,\n maxWidth: maxWidth!,\n });\n\n return (\n \n \n {onRenderContent(this.props, this._onRenderContent)}\n
\n \n );\n }\n\n private _onRenderContent = (props: ITooltipProps): JSX.Element => {\n if (typeof props.content === 'string') {\n return

{props.content}

;\n } else {\n return
{props.content}
;\n }\n };\n}\n","import { AnimationClassNames } from '../../Styling';\nimport type { ITooltipStyleProps, ITooltipStyles } from './Tooltip.types';\n\nexport const getStyles = (props: ITooltipStyleProps): ITooltipStyles => {\n const { className, beakWidth = 16, gapSpace = 0, maxWidth, theme } = props;\n const { semanticColors, fonts, effects } = theme;\n\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 const tooltipGapSpace =\n -(Math.sqrt((beakWidth * beakWidth) / 2) + gapSpace) +\n 1 /\n // There isn't really a great way to pass in a `window` reference here so disabling the line rule\n // eslint-disable-next-line no-restricted-globals\n window.devicePixelRatio;\n\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,\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","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { TooltipBase } from './Tooltip.base';\nimport { getStyles } from './Tooltip.styles';\nimport type { ITooltipProps, ITooltipStyleProps, ITooltipStyles } from './Tooltip.types';\n\nexport const Tooltip: React.FunctionComponent = styled<\n ITooltipProps,\n ITooltipStyleProps,\n ITooltipStyles\n>(TooltipBase, getStyles, undefined, {\n scope: 'Tooltip',\n});\n","import * as React from 'react';\nimport { TooltipBase } from './Tooltip.base';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport type { ICalloutProps } from '../../Callout';\nimport type { IRenderFunction, IRefObject, IStyleFunctionOrObject } from '../../Utilities';\nimport type { IStyle, ITheme } from '../../Styling';\n\n/**\n * {@docCategory Tooltip}\n */\nexport interface ITooltip {}\n\n/**\n * {@docCategory Tooltip}\n */\nexport interface ITooltipProps extends Omit, 'content'> {\n /**\n * Optional callback to access the ITooltip interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject;\n\n /**\n * Properties to pass through for Callout.\n * @defaultvalue `{ isBeakVisible: true, beakWidth: 16, gapSpace: 0, setInitialFocus: true, doNotLayer: false }`\n */\n calloutProps?: ICalloutProps;\n\n /**\n * Content to be passed to the tooltip\n */\n content?: string | JSX.Element | JSX.Element[];\n\n /**\n * Render function to populate tooltip content.\n */\n onRenderContent?: IRenderFunction;\n\n /**\n * Length of delay. Set to `TooltipDelay.zero` if you do not want a delay.\n * @defaultvalue TooltipDelay.medium\n */\n delay?: TooltipDelay;\n\n /**\n * Max width of tooltip\n * @defaultvalue 364px\n */\n maxWidth?: string | null;\n\n /**\n * Element to anchor the Tooltip to.\n */\n targetElement?: HTMLElement;\n\n /**\n * How the tooltip should be anchored to its `targetElement`.\n * @defaultvalue DirectionalHint.topCenter\n */\n directionalHint?: DirectionalHint;\n\n /**\n * How the element should be positioned in RTL layouts.\n * If not specified, a mirror of `directionalHint` will be used instead\n */\n directionalHintForRTL?: DirectionalHint;\n\n /**\n * Theme provided by higher-order component.\n */\n theme?: ITheme;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject;\n}\n\n/**\n * {@docCategory Tooltip}\n */\nexport enum TooltipDelay {\n zero = 0,\n /** 300 ms delay before showing the tooltip */\n medium = 1,\n /** 500 ms delay before showing the tooltip */\n long = 2,\n}\n\n/**\n * {@docCategory Tooltip}\n */\nexport interface ITooltipStyleProps {\n theme: ITheme;\n\n className?: string;\n\n /**\n * Delay before tooltip appears.\n * @deprecated Delay logic moved to TooltipHost vs relying on animation delay.\n */\n delay?: TooltipDelay;\n\n /**\n * Maximum width of tooltip.\n */\n maxWidth?: string;\n\n /**\n * The gap between the Callout and the target\n * @defaultvalue 0\n */\n gapSpace?: number;\n\n /**\n * The width of the Callout's beak\n * @defaultvalue 16\n */\n beakWidth?: number;\n}\n\n/**\n * {@docCategory Tooltip}\n */\nexport interface ITooltipStyles {\n /**\n * Style for the root element.\n */\n root: IStyle;\n\n /**\n * Style for the content element.\n */\n content: IStyle;\n\n /**\n * Style for the subtext element.\n */\n subText: IStyle;\n}\n","import * as React from 'react';\nimport { TooltipHostBase } from './TooltipHost.base';\nimport { TooltipDelay } from './Tooltip.types';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport type { ITooltipProps } from './Tooltip.types';\nimport type { ICalloutProps } from '../../Callout';\nimport type { IRefObject, IStyleFunctionOrObject } from '../../Utilities';\nimport type { IStyle, ITheme } from '../../Styling';\n\n/**\n * {@docCategory Tooltip}\n */\nexport interface ITooltipHost {\n /**\n * Shows the tooltip.\n */\n show: () => void;\n\n /**\n * Dismisses the tooltip.\n */\n dismiss: () => void;\n}\n\n/**\n * {@docCategory Tooltip}\n */\nexport enum TooltipOverflowMode {\n /** Only show tooltip if parent DOM element is overflowing */\n Parent,\n\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 Self,\n}\n\n/**\n * TooltipHost props. Note that native props (such as `id`, `className`, and `aria-` props) are\n * passed through to the Tooltip itself, rather than being used on the host element.\n * {@docCategory Tooltip}\n */\nexport interface ITooltipHostProps extends Omit, 'content'> {\n /**\n * Optional callback to access the ITooltipHost interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject;\n\n /**\n * Additional properties to pass through for Callout.\n */\n calloutProps?: ICalloutProps;\n\n /**\n * Number of milliseconds to delay closing the tooltip, so that the user has time to hover over\n * the tooltip and interact with it. Hovering over the tooltip will count as hovering over the\n * host, so that the tooltip will stay open if the user is actively interacting with it.\n */\n closeDelay?: number;\n\n /**\n * Content to display in the Tooltip.\n */\n content?: string | JSX.Element | JSX.Element[];\n\n /**\n * Length of delay before showing the tooltip on hover.\n * @defaultvalue TooltipDelay.medium\n */\n delay?: TooltipDelay;\n\n /**\n * How the tooltip should be anchored to its `targetElement`.\n * @defaultvalue DirectionalHint.topCenter\n */\n directionalHint?: DirectionalHint;\n\n /**\n * How the element should be positioned in RTL layouts.\n * If not specified, a mirror of `directionalHint` will be used.\n */\n directionalHintForRTL?: DirectionalHint;\n\n /**\n * Class name to apply to tooltip host.\n */\n hostClassName?: string;\n\n /**\n * Class name to apply to the *tooltip itself*, not the host.\n * To apply a class to the host, use `hostClassName` or `styles.root`.\n */\n className?: string;\n\n /**\n * If this is unset (the default), the tooltip is always shown even if there's no overflow.\n *\n * If set, only show the tooltip if the specified element (`Self` or `Parent`) has overflow.\n * When set to `Parent`, the parent element is also used as the tooltip's target element.\n *\n * Note that even with `Self` mode, the TooltipHost *does not* check whether any children have overflow.\n */\n overflowMode?: TooltipOverflowMode;\n\n /**\n * Whether or not to mark the TooltipHost root element as described by the tooltip.\n * Since this applies aria-describedby to a generic

, the description will not be\n * read by screen readers. Instead, the caller should pass an `id` to the TooltipHost\n * (to be passed through to the Tooltip) and mark the appropriate element as `aria-describedby`\n * with the `id`.\n * @defaultvalue true\n * @deprecated use aria-describedby on the appropriate element instead\n */\n setAriaDescribedBy?: boolean;\n\n /**\n * Additional properties to pass through for Tooltip.\n */\n tooltipProps?: ITooltipProps;\n\n /**\n * Optional ID to pass through to the tooltip (not used on the host itself).\n * Auto-generated if not provided.\n */\n id?: string;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject;\n\n /**\n * Theme provided by higher-order component.\n */\n theme?: ITheme;\n\n /**\n * Notifies when tooltip becomes visible or hidden, whatever the trigger was.\n */\n onTooltipToggle?(isTooltipVisible: boolean): void;\n}\n\n/**\n * {@docCategory Tooltip}\n */\nexport interface ITooltipHostStyleProps {\n theme: ITheme;\n className?: string;\n}\n\n/**\n * {@docCategory Tooltip}\n */\nexport interface ITooltipHostStyles {\n /**\n * Style for the host wrapper element.\n */\n root: IStyle;\n}\n","import * as React from 'react';\nimport { hiddenContentStyle } from '../../Styling';\nimport {\n initializeComponentRef,\n Async,\n divProperties,\n getNativeProps,\n getId,\n assign,\n hasOverflow,\n portalContainsElement,\n classNamesFunction,\n KeyCodes,\n} from '../../Utilities';\nimport { TooltipOverflowMode } from './TooltipHost.types';\nimport { Tooltip } from './Tooltip';\nimport { TooltipDelay } from './Tooltip.types';\nimport type { ITooltipHostProps, ITooltipHostStyles, ITooltipHostStyleProps, ITooltipHost } from './TooltipHost.types';\nimport { WindowContext } from '@fluentui/react-window-provider';\nimport { getDocumentEx } from '../../utilities/dom';\n\nexport interface ITooltipHostState {\n /** @deprecated No longer used internally */\n isAriaPlaceholderRendered: boolean;\n isTooltipVisible: boolean;\n}\n\nconst getClassNames = classNamesFunction();\n\nexport class TooltipHostBase extends React.Component implements ITooltipHost {\n public static defaultProps = {\n delay: TooltipDelay.medium,\n };\n\n public static contextType = WindowContext;\n private static _currentVisibleTooltip: ITooltipHost | undefined;\n\n // The wrapping div that gets the hover events\n private _tooltipHost = React.createRef();\n\n private _classNames: { [key in keyof ITooltipHostStyles]: string };\n private _async: Async;\n private _dismissTimerId: number;\n private _openTimerId: number;\n private _defaultTooltipId = getId('tooltip');\n private _ignoreNextFocusEvent: boolean;\n\n // Constructor\n constructor(props: ITooltipHostProps) {\n super(props);\n\n initializeComponentRef(this);\n\n this.state = {\n isAriaPlaceholderRendered: false,\n isTooltipVisible: false,\n };\n }\n\n // Render\n public render(): JSX.Element {\n const {\n calloutProps,\n children,\n content,\n directionalHint,\n directionalHintForRTL,\n hostClassName: className,\n id,\n // eslint-disable-next-line deprecation/deprecation\n setAriaDescribedBy = true,\n tooltipProps,\n styles,\n theme,\n } = this.props;\n\n this._classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n });\n\n const { isTooltipVisible } = this.state;\n const tooltipId = id || this._defaultTooltipId;\n\n const tooltipRenderProps = {\n id: `${tooltipId}--tooltip`,\n content,\n targetElement: this._getTargetElement(),\n directionalHint,\n directionalHintForRTL,\n calloutProps: assign({}, calloutProps, {\n onDismiss: this._hideTooltip,\n onFocus: this._onTooltipContentFocus,\n onMouseEnter: this._onTooltipMouseEnter,\n onMouseLeave: this._onTooltipMouseLeave,\n }),\n onMouseEnter: this._onTooltipMouseEnter,\n onMouseLeave: this._onTooltipMouseLeave,\n ...getNativeProps(this.props, divProperties, ['id']), // Make sure we use the id above\n ...tooltipProps,\n };\n\n // Get the content of the tooltip for use in the hidden div used for screen readers\n const tooltipContent = tooltipProps?.onRenderContent\n ? tooltipProps.onRenderContent(tooltipRenderProps, props => (props?.content ? <>{props.content} : null))\n : content;\n const showTooltip = isTooltipVisible && !!tooltipContent;\n const ariaDescribedBy = setAriaDescribedBy && isTooltipVisible && !!tooltipContent ? tooltipId : undefined;\n\n return (\n \n {children}\n {showTooltip && }\n \n
\n );\n }\n\n public componentDidMount(): void {\n this._async = new Async(this);\n }\n\n public componentWillUnmount(): void {\n if (TooltipHostBase._currentVisibleTooltip && TooltipHostBase._currentVisibleTooltip === this) {\n TooltipHostBase._currentVisibleTooltip = undefined;\n }\n\n this._async.dispose();\n }\n\n public show = (): void => {\n this._toggleTooltip(true);\n };\n\n public dismiss = (): void => {\n this._hideTooltip();\n };\n\n private _getTargetElement = (): HTMLElement | undefined => {\n if (!this._tooltipHost.current) {\n return undefined;\n }\n\n const { overflowMode } = this.props;\n\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\n case TooltipOverflowMode.Self:\n return this._tooltipHost.current;\n }\n }\n\n return this._tooltipHost.current;\n };\n\n private _onTooltipFocus = (ev: React.FocusEvent) => {\n if (this._ignoreNextFocusEvent) {\n this._ignoreNextFocusEvent = false;\n return;\n }\n\n this._onTooltipMouseEnter(ev);\n };\n\n private _onTooltipContentFocus = (ev: React.FocusEvent) => {\n if (TooltipHostBase._currentVisibleTooltip && TooltipHostBase._currentVisibleTooltip !== this) {\n TooltipHostBase._currentVisibleTooltip.dismiss();\n }\n TooltipHostBase._currentVisibleTooltip = this;\n\n this._clearDismissTimer();\n this._clearOpenTimer();\n };\n\n private _onTooltipBlur = (ev: React.FocusEvent) => {\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 = getDocumentEx(this.context)?.activeElement === ev.target;\n\n this._dismissTimerId = this._async.setTimeout(() => {\n this._hideTooltip();\n }, 0);\n };\n\n // Show Tooltip\n private _onTooltipMouseEnter = (ev: any): void => {\n const { overflowMode, delay } = this.props;\n const doc = getDocumentEx(this.context);\n\n if (TooltipHostBase._currentVisibleTooltip && TooltipHostBase._currentVisibleTooltip !== this) {\n TooltipHostBase._currentVisibleTooltip.dismiss();\n }\n TooltipHostBase._currentVisibleTooltip = this;\n\n if (overflowMode !== undefined) {\n const overflowElement = this._getTargetElement();\n if (overflowElement && !hasOverflow(overflowElement)) {\n return;\n }\n }\n\n if (ev.target && portalContainsElement(ev.target as HTMLElement, this._getTargetElement(), doc)) {\n // Do not show tooltip when target is inside a portal relative to TooltipHost.\n return;\n }\n\n this._clearDismissTimer();\n this._clearOpenTimer();\n\n if (delay !== TooltipDelay.zero) {\n const delayTime = this._getDelayTime(delay!); // non-null assertion because we set it in `defaultProps`\n\n this._openTimerId = this._async.setTimeout(() => {\n this._toggleTooltip(true);\n }, delayTime);\n } else {\n this._toggleTooltip(true);\n }\n };\n\n // Hide Tooltip\n private _onTooltipMouseLeave = (ev: any): void => {\n const { closeDelay } = this.props;\n\n this._clearDismissTimer();\n this._clearOpenTimer();\n\n if (closeDelay) {\n this._dismissTimerId = this._async.setTimeout(() => {\n this._toggleTooltip(false);\n }, closeDelay);\n } else {\n this._toggleTooltip(false);\n }\n\n if (TooltipHostBase._currentVisibleTooltip === this) {\n TooltipHostBase._currentVisibleTooltip = undefined;\n }\n };\n\n private _onTooltipKeyDown = (ev: React.KeyboardEvent): void => {\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\n private _clearDismissTimer = (): void => {\n this._async.clearTimeout(this._dismissTimerId);\n };\n\n private _clearOpenTimer = (): void => {\n this._async.clearTimeout(this._openTimerId);\n };\n\n // Hide Tooltip\n private _hideTooltip = (): void => {\n this._clearOpenTimer();\n this._clearDismissTimer();\n this._toggleTooltip(false);\n };\n\n private _toggleTooltip = (isTooltipVisible: boolean): void => {\n if (this.state.isTooltipVisible !== isTooltipVisible) {\n this.setState(\n { isTooltipVisible },\n () => this.props.onTooltipToggle && this.props.onTooltipToggle(isTooltipVisible),\n );\n }\n };\n\n private _getDelayTime = (delay: TooltipDelay): number => {\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}\n","import { getGlobalClassNames } from '../../Styling';\nimport type { ITooltipHostStyleProps, ITooltipHostStyles } from './TooltipHost.types';\n\nconst GlobalClassNames = {\n root: 'ms-TooltipHost',\n ariaPlaceholder: 'ms-TooltipHost-aria-placeholder',\n};\n\nexport const getStyles = (props: ITooltipHostStyleProps): ITooltipHostStyles => {\n const { className, theme } = props;\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n return {\n root: [\n classNames.root,\n {\n display: 'inline',\n },\n className,\n ],\n };\n};\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { TooltipHostBase } from './TooltipHost.base';\nimport { getStyles } from './TooltipHost.styles';\nimport type { ITooltipHostProps, ITooltipHostStyleProps, ITooltipHostStyles } from './TooltipHost.types';\n\nexport const TooltipHost: React.FunctionComponent = styled<\n ITooltipHostProps,\n ITooltipHostStyleProps,\n ITooltipHostStyles\n>(TooltipHostBase, getStyles, undefined, {\n scope: 'TooltipHost',\n});\n","import * as React from 'react';\nimport type { IImageProps } from '../Image/Image.types';\nimport type { IStyle, ITheme } from '../../Styling';\nimport type { IBaseProps, IStyleFunctionOrObject } from '../../Utilities';\n\n/**\n * @deprecated Icon type is inferred based on presence of `IIconProps.imageProps`\n * {@docCategory Icon}\n */\nexport enum IconType {\n /**\n * Render using the fabric icon font.\n * @deprecated Icon type is inferred based on presence of `IIconProps.imageProps`\n */\n default = 0,\n\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 image = 1,\n\n /**\n * @deprecated Icon type is inferred based on presence of `IIconProps.imageProps`\n */\n Default = 100000,\n\n /**\n * @deprecated Icon type is inferred based on presence of `IIconProps.imageProps`\n */\n Image = 100001,\n}\n\n/**\n * {@docCategory Icon}\n */\nexport interface IIconProps extends IBaseProps, React.HTMLAttributes {\n /**\n * The name of the icon to use from the icon font.\n * If string is empty, a placeholder icon will be rendered the same width as an icon.\n */\n iconName?: string;\n\n /**\n * The aria label of the icon for the benefit of screen readers.\n * @deprecated Use the native prop `aria-label`\n */\n ariaLabel?: string;\n\n /**\n * The type of icon to render (image or icon font).\n * @deprecated Inferred based on the presence of `imageProps`\n */\n // eslint-disable-next-line deprecation/deprecation\n iconType?: IconType;\n\n /**\n * If rendering an image icon, these props will be passed to the Image component.\n */\n imageProps?: IImageProps;\n\n /**\n * If rendering an image icon, this component will be rendered in the event that loading the image fails.\n */\n imageErrorAs?: React.ComponentType;\n\n /**\n * Gets the styles for an Icon.\n */\n styles?: IStyleFunctionOrObject;\n theme?: ITheme;\n}\n\n/**\n * {@docCategory Icon}\n */\nexport interface IIconStyleProps {\n className?: string;\n iconClassName?: string;\n isPlaceholder: boolean;\n isImage: boolean;\n styles?: Partial;\n theme?: ITheme;\n}\n\n/**\n * {@docCategory Icon}\n */\nexport interface IIconStyles {\n root?: IStyle;\n\n /**\n * @deprecated Use `root`.\n */\n imageContainer?: IStyle;\n}\n\n/**\n * Props for a basic icon component which only supports font glyphs and can't be targeted by customizations.\n * {@docCategory Icon}\n */\nexport interface IFontIconProps extends React.HTMLAttributes {\n /**\n * The name of the icon to use from the icon font.\n * If string is empty, a placeholder icon will be rendered the same width as an icon.\n */\n iconName?: string;\n\n /**\n * Custom class to style the icon.\n */\n className?: string;\n}\n\n/**\n * Props for a basic image icon component which doesn't directly provide image load error handling\n * and can't be targeted by customizations.\n * {@docCategory Icon}\n */\nexport interface IImageIconProps extends React.HTMLAttributes {\n /**\n * Props passed to the Image component.\n */\n imageProps: IImageProps;\n\n /**\n * Custom class to style the icon.\n */\n className?: string;\n}\n","import * as React from 'react';\nimport type { IStyle, ITheme } from '../../Styling';\nimport type { IStyleFunctionOrObject } from '../../Utilities';\n\n/**\n * {@docCategory Image}\n */\nexport interface IImage {}\n\n/**\n * {@docCategory Image}\n */\nexport interface IImageProps extends React.ImgHTMLAttributes, React.RefAttributes {\n /**\n * Call to provide customized styling that will layer on top of the variant rules\n */\n styles?: IStyleFunctionOrObject;\n\n /**\n * Theme provided by HOC.\n */\n theme?: ITheme;\n\n /**\n * Additional css class to apply to the Component\n * @defaultvalue undefined\n */\n className?: string;\n\n /**\n * If true, fades the image in when loaded.\n * @defaultvalue true\n */\n shouldFadeIn?: boolean;\n\n /**\n * If true, the image starts as visible and is hidden on error. Otherwise, the image is hidden until\n * it is successfully loaded. This disables shouldFadeIn.\n * @defaultvalue false;\n */\n shouldStartVisible?: boolean;\n\n /**\n * Used to determine how the image is scaled and cropped to fit the frame.\n *\n * @defaultvalue If both dimensions are provided, then the image is fit using `ImageFit.scale`.\n * Otherwise, the image won't be scaled or cropped.\n */\n imageFit?: ImageFit;\n\n /**\n * @deprecated Not used. Use `onLoadingStateChange` and re-render the Image with a different src.\n */\n errorSrc?: string;\n\n /**\n * If true, the image frame will expand to fill its parent container.\n */\n maximizeFrame?: boolean;\n\n /**\n * Optional callback method for when the image load state has changed.\n * The 'loadState' parameter indicates the current state of the Image.\n */\n onLoadingStateChange?: (loadState: ImageLoadState) => void;\n\n /**\n * Specifies the cover style to be used for this image. If not\n * specified, this will be dynamically calculated based on the\n * aspect ratio for the image.\n */\n coverStyle?: ImageCoverStyle;\n\n /**\n * Allows for browser-level image lazy-loading.\n */\n loading?: 'lazy' | 'eager';\n}\n\n/**\n * The possible methods that can be used to fit the image.\n * {@docCategory Image}\n */\nexport enum ImageFit {\n /**\n * The image is not scaled. The image is centered and cropped within the content box.\n */\n center = 0,\n\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 contain = 1,\n\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 cover = 2,\n\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 none = 3,\n\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 centerCover = 4,\n\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 centerContain = 5,\n}\n\n/**\n * The cover style to be used on the image\n * {@docCategory Image}\n */\nexport enum ImageCoverStyle {\n /**\n * The image will be shown at 100% height of container and the width will be scaled accordingly\n */\n landscape = 0,\n\n /**\n * The image will be shown at 100% width of container and the height will be scaled accordingly\n */\n portrait = 1,\n}\n\n/**\n * {@docCategory Image}\n */\nexport enum ImageLoadState {\n /**\n * The image has not yet been loaded, and there is no error yet.\n */\n notLoaded = 0,\n\n /**\n * The image has been loaded successfully.\n */\n loaded = 1,\n\n /**\n * An error has been encountered while loading the image.\n */\n error = 2,\n\n /**\n * @deprecated Not used. Use `onLoadingStateChange` and re-render the Image with a different src.\n */\n errorLoaded = 3,\n}\n\n/**\n * {@docCategory Image}\n */\nexport interface IImageStyleProps {\n /**\n * Accept theme prop.\n */\n theme: ITheme;\n\n /**\n * Accept custom classNames\n */\n className?: string;\n\n /**\n * If true, the image frame will expand to fill its parent container.\n */\n maximizeFrame?: boolean;\n\n /**\n * If true, the image is loaded\n */\n isLoaded?: boolean;\n\n /**\n * If true, fades the image in when loaded.\n * @defaultvalue true\n */\n shouldFadeIn?: boolean;\n\n /**\n * If true, the image starts as visible and is hidden on error. Otherwise, the image is hidden until\n * it is successfully loaded. This disables shouldFadeIn.\n * @defaultvalue false;\n */\n shouldStartVisible?: boolean;\n\n /**\n * If true the image is coverStyle landscape instead of portrait\n */\n isLandscape?: boolean;\n\n /**\n * ImageFit booleans for center, cover, contain, centerContain, centerCover, none\n */\n isCenter?: boolean;\n isContain?: boolean;\n isCover?: boolean;\n isCenterContain?: boolean;\n isCenterCover?: boolean;\n isNone?: boolean;\n\n /**\n * if true image load is in error\n */\n isError?: boolean;\n\n /**\n * if true, imageFit is undefined\n */\n isNotImageFit?: boolean;\n\n /**\n * Image width value\n */\n width?: number | string;\n\n /**\n * Image height value\n */\n height?: number | string;\n}\n\n/**\n * {@docCategory Image}\n */\nexport interface IImageStyles {\n /**\n * Style set for the root div element.\n */\n root: IStyle;\n /**\n * Style set for the img element.\n */\n image: IStyle;\n}\n","import * as React from 'react';\nimport { classNamesFunction, getNativeProps, imgProperties } from '../../Utilities';\nimport { ImageCoverStyle, ImageFit, ImageLoadState } from './Image.types';\nimport { useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-hooks';\nimport type { IImageProps, IImageStyleProps, IImageStyles } from './Image.types';\n\nconst getClassNames = classNamesFunction();\n\nexport interface IImageState {\n loadState?: ImageLoadState;\n}\n\nconst SVG_REGEX = /\\.svg$/i;\nconst KEY_PREFIX = 'fabricImage';\n\nfunction useLoadState(\n props: IImageProps,\n imageElement: React.RefObject,\n): readonly [\n ImageLoadState,\n /* onImageLoad */ (ev: React.SyntheticEvent) => void,\n /* onImageError */ (ev: React.SyntheticEvent) => void,\n] {\n const { onLoadingStateChange, onLoad, onError, src } = props;\n\n const [loadState, setLoadState] = React.useState(ImageLoadState.notLoaded);\n\n useIsomorphicLayoutEffect(() => {\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\n // eslint-disable-next-line react-hooks/exhaustive-deps -- intended to run every render\n React.useEffect(() => {\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 const isLoaded: boolean = imageElement.current\n ? (src && imageElement.current.naturalWidth > 0 && imageElement.current.naturalHeight > 0) ||\n (imageElement.current.complete && SVG_REGEX.test(src!))\n : false;\n\n if (isLoaded) {\n setLoadState(ImageLoadState.loaded);\n }\n }\n });\n\n React.useEffect(() => {\n onLoadingStateChange?.(loadState);\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run when loadState changes\n }, [loadState]);\n\n const onImageLoaded = React.useCallback(\n (ev: React.SyntheticEvent) => {\n onLoad?.(ev);\n if (src) {\n setLoadState(ImageLoadState.loaded);\n }\n },\n [src, onLoad],\n );\n\n const onImageError = React.useCallback(\n (ev: React.SyntheticEvent) => {\n onError?.(ev);\n setLoadState(ImageLoadState.error);\n },\n [onError],\n );\n\n return [loadState, onImageLoaded, onImageError] as const;\n}\n\nexport const ImageBase: React.FunctionComponent = React.forwardRef(\n (props, forwardedRef) => {\n const frameElement = React.useRef() as React.RefObject;\n const imageElement = React.useRef() as React.RefObject;\n const [loadState, onImageLoaded, onImageError] = useLoadState(props, imageElement);\n\n const imageProps = getNativeProps>(props, imgProperties, [\n 'width',\n 'height',\n ]);\n const {\n src,\n alt,\n width,\n height,\n shouldFadeIn = true,\n shouldStartVisible,\n className,\n imageFit,\n role,\n maximizeFrame,\n styles,\n theme,\n loading,\n } = props;\n const coverStyle = useCoverStyle(props, loadState, imageElement, frameElement);\n const classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n width,\n height,\n maximizeFrame,\n shouldFadeIn,\n shouldStartVisible,\n isLoaded:\n 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\n // If image dimensions aren't specified, the natural size of the image is used.\n return (\n
\n \n
\n );\n },\n);\nImageBase.displayName = 'ImageBase';\n\nfunction useCoverStyle(\n props: IImageProps,\n loadState: ImageLoadState,\n imageElement: React.RefObject,\n frameElement: React.RefObject,\n) {\n const previousLoadState = React.useRef(loadState);\n const coverStyle = React.useRef();\n\n if (\n coverStyle === undefined ||\n (previousLoadState.current === ImageLoadState.notLoaded && loadState === ImageLoadState.loaded)\n ) {\n coverStyle.current = computeCoverStyle(props, loadState, imageElement, frameElement);\n }\n\n previousLoadState.current = loadState;\n\n return coverStyle.current!;\n}\n\nfunction computeCoverStyle(\n props: IImageProps,\n loadState: ImageLoadState,\n imageElement: React.RefObject,\n frameElement: React.RefObject,\n): ImageCoverStyle {\n const { imageFit, width, height } = props;\n\n // Do not compute cover style if it was already specified in props\n if (props.coverStyle !== undefined) {\n return props.coverStyle;\n } else if (\n 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 ) {\n // Determine the desired ratio using the width and height props.\n // If those props aren't available, measure measure the frame.\n let desiredRatio;\n if (\n typeof width === 'number' &&\n typeof height === 'number' &&\n imageFit !== ImageFit.centerContain &&\n imageFit !== ImageFit.centerCover\n ) {\n desiredRatio = width / height;\n } else {\n desiredRatio = frameElement.current.clientWidth / frameElement.current.clientHeight;\n }\n\n // Examine the source image to determine its original ratio.\n const naturalRatio = imageElement.current.naturalWidth / imageElement.current.naturalHeight;\n\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","import { AnimationClassNames, getGlobalClassNames } from '../../Styling';\nimport { getWindow } from '../../Utilities';\nimport type { IStyle } from '../../Styling';\nimport type { IImageStyleProps, IImageStyles } from './Image.types';\n\nconst 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};\n\nexport const getStyles = (props: IImageStyleProps): IImageStyles => {\n const {\n className,\n width,\n height,\n maximizeFrame,\n isLoaded,\n shouldFadeIn,\n shouldStartVisible,\n isLandscape,\n isCenter,\n isContain,\n isCover,\n isCenterContain,\n isCenterCover,\n isNone,\n isError,\n isNotImageFit,\n theme,\n } = props;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n const ImageFitStyles: IStyle = {\n position: 'absolute',\n left: '50% /* @noflip */',\n top: '50%',\n transform: 'translate(-50%,-50%)', // @todo test RTL renders transform: translate(50%,-50%);\n };\n\n // Cut the mustard using msMaxTouchPoints to detect IE11 which does not support CSS object-fit\n const window: Window | undefined = getWindow();\n const supportsObjectFit: boolean =\n window !== undefined &&\n // eslint-disable-next-line @fluentui/max-len\n // cast needed as vendor prefixed `msMaxTouchPoints` api is no longer part of TS lib declaration - introduced with TS 4.4\n (window.navigator as { msMaxTouchPoints?: Window['navigator']['maxTouchPoints'] }).msMaxTouchPoints === undefined;\n const fallbackObjectFitStyles =\n (isContain && isLandscape) || (isCover && !isLandscape)\n ? { width: '100%', height: 'auto' }\n : { width: 'auto', height: '100%' };\n\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","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { ImageBase } from './Image.base';\nimport { getStyles } from './Image.styles';\nimport type { IImageProps, IImageStyleProps, IImageStyles } from './Image.types';\n\nexport const Image: React.FunctionComponent = styled(\n ImageBase,\n getStyles,\n undefined,\n {\n scope: 'Image',\n },\n true,\n);\nImage.displayName = 'Image';\n","import { mergeStyleSets } from '../../Styling';\nimport type { IIconStyleProps, IIconStyles } from './Icon.types';\n\n/** Class names used in themeable and non-themeable Icon components */\nexport const classNames = mergeStyleSets({\n root: {\n display: 'inline-block',\n textDecoration: 'inherit',\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 const MS_ICON = 'ms-Icon';\n\nexport const getStyles = (props: IIconStyleProps): IIconStyles => {\n const { className, iconClassName, isPlaceholder, isImage, styles } = props;\n\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","import * as React from 'react';\nimport { classNames, MS_ICON } from './Icon.styles';\nimport { css, getNativeProps, htmlElementProperties, memoizeFunction } from '../../Utilities';\nimport { getIcon } from '../../Styling';\nimport type { IFontIconProps } from './Icon.types';\nimport type { IIconRecord, IIconSubsetRecord } from '../../Styling';\n\nexport interface IIconContent {\n children?: string | JSX.Element;\n iconClassName?: string;\n fontFamily?: string;\n mergeImageProps?: boolean;\n}\n\nexport const getIconContent = memoizeFunction(\n (iconName?: string): IIconContent | null => {\n const { code, subset }: Pick & { subset: Partial } = getIcon(iconName) || {\n subset: {},\n code: undefined,\n };\n\n if (!code) {\n return null;\n }\n\n return {\n children: code,\n iconClassName: subset.className,\n fontFamily: subset.fontFace && subset.fontFace.fontFamily,\n mergeImageProps: subset.mergeImageProps,\n };\n },\n undefined,\n true /*ignoreNullOrUndefinedResult */,\n);\n\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 const FontIcon: React.FunctionComponent = props => {\n const { iconName, className, style = {} } = props;\n const iconContent = getIconContent(iconName) || {};\n const { iconClassName, children, fontFamily, mergeImageProps } = iconContent;\n\n const nativeProps = getNativeProps>(props, htmlElementProperties);\n const accessibleName = props['aria-label'] || props.title;\n const containerProps =\n props['aria-label'] || props['aria-labelledby'] || props.title\n ? {\n role: mergeImageProps ? undefined : 'img',\n }\n : {\n 'aria-hidden': true,\n };\n\n let finalChildren = children;\n\n if (mergeImageProps) {\n if (typeof children === 'object' && typeof children.props === 'object' && accessibleName) {\n finalChildren = React.cloneElement(children, { alt: accessibleName });\n }\n }\n\n return (\n \n {finalChildren}\n \n );\n};\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 const getFontIcon = memoizeFunction((iconName: string, className?: string, ariaLabel?: string) => {\n return FontIcon({ iconName, className, 'aria-label': ariaLabel });\n});\n","import * as React from 'react';\n\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';\nimport type { IIconProps, IIconStyleProps, IIconStyles } from './Icon.types';\nimport type { IImageProps } from '../Image/Image.types';\n\nexport interface IIconState {\n imageLoadError: boolean;\n}\n\nconst 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});\n\nexport class IconBase extends React.Component {\n constructor(props: IIconProps) {\n super(props);\n this.state = {\n imageLoadError: false,\n };\n }\n\n public render() {\n const { children, className, styles, iconName, imageErrorAs, theme } = this.props;\n const isPlaceholder = typeof iconName === 'string' && iconName.length === 0;\n const isImage =\n // eslint-disable-next-line deprecation/deprecation\n !!this.props.imageProps || this.props.iconType === IconType.image || this.props.iconType === IconType.Image;\n const iconContent = getIconContent(iconName) || {};\n const { iconClassName, children: iconContentChildren, mergeImageProps } = iconContent;\n\n const classNames = getClassNames(styles, {\n theme: theme!,\n className,\n iconClassName,\n isImage,\n isPlaceholder,\n });\n\n const RootType = isImage ? 'span' : 'i';\n const nativeProps = getNativeProps>(this.props, htmlElementProperties, [\n 'aria-label',\n ]);\n const { imageLoadError } = this.state;\n const imageProps: IImageProps = {\n ...this.props.imageProps,\n onLoadingStateChange: this._onImageLoadingStateChange,\n };\n const ImageType = (imageLoadError && imageErrorAs) || Image;\n\n // eslint-disable-next-line deprecation/deprecation\n const ariaLabel = this.props['aria-label'] || this.props.ariaLabel;\n const accessibleName = imageProps.alt || ariaLabel || this.props.title;\n const hasName = !!(\n accessibleName ||\n this.props['aria-labelledby'] ||\n imageProps['aria-label'] ||\n imageProps['aria-labelledby']\n );\n const containerProps = hasName\n ? {\n role: isImage || mergeImageProps ? undefined : 'img',\n 'aria-label': isImage || mergeImageProps ? undefined : accessibleName,\n }\n : {\n 'aria-hidden': true,\n };\n\n let finalIconContentChildren = iconContentChildren;\n\n if (mergeImageProps && iconContentChildren && typeof iconContentChildren === 'object' && accessibleName) {\n finalIconContentChildren = React.cloneElement(iconContentChildren, {\n alt: accessibleName,\n });\n }\n\n return (\n \n {isImage ? : children || finalIconContentChildren}\n \n );\n }\n\n private _onImageLoadingStateChange = (state: ImageLoadState): void => {\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}\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { IconBase } from './Icon.base';\nimport { getStyles } from './Icon.styles';\nimport type { IIconProps, IIconStyleProps, IIconStyles } from './Icon.types';\n\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 const Icon: React.FunctionComponent = styled(\n IconBase,\n getStyles,\n undefined,\n {\n scope: 'Icon',\n },\n true,\n);\nIcon.displayName = 'Icon';\n","import * as React from 'react';\nimport { Image } from '../Image/Image';\nimport { css, getNativeProps, htmlElementProperties } from '../../Utilities';\nimport { classNames, MS_ICON } from './Icon.styles';\nimport type { IImageIconProps } from './Icon.types';\n\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 const ImageIcon: React.FunctionComponent = props => {\n const { className, imageProps } = props;\n\n const nativeProps = getNativeProps>(props, htmlElementProperties, [\n 'aria-label',\n 'aria-labelledby',\n 'title',\n 'aria-describedby',\n ]);\n const altText = imageProps.alt || props['aria-label'];\n const hasName =\n altText ||\n props['aria-labelledby'] ||\n props.title ||\n imageProps['aria-label'] ||\n imageProps['aria-labelledby'] ||\n imageProps.title;\n\n // move naming or describing attributes from the container (where they are invalid) to the image\n const imageNameProps = {\n 'aria-labelledby': props['aria-labelledby'],\n 'aria-describedby': props['aria-describedby'],\n title: props.title,\n };\n\n const containerProps = hasName\n ? {}\n : {\n 'aria-hidden': true,\n };\n\n return (\n
\n {hasName\n
\n );\n};\n","import * as React from 'react';\nimport { ImageLoadState } from '../../Image';\nimport type { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities';\nimport type { IStyle, ITheme } from '../../Styling';\n\n/**\n * {@docCategory Persona}\n */\nexport interface IPersona {}\n\n/**\n * {@docCategory Persona}\n */\nexport interface IPersonaSharedProps extends React.HTMLAttributes, React.RefAttributes {\n /**\n * Primary text to display, usually the name of the person.\n */\n text?: string;\n\n /**\n * Decides the size of the control.\n * @defaultvalue PersonaSize.size48\n */\n size?: PersonaSize;\n\n /**\n * Optional custom renderer for the coin\n * @deprecated Use `onRenderPersonaCoin` for custom rendering instead\n */\n onRenderCoin?: IRenderFunction;\n\n /**\n * Optional custom renderer for the coin\n */\n onRenderPersonaCoin?: IRenderFunction;\n\n /**\n * If true, adds the css class 'is-fadeIn' to the image.\n */\n imageShouldFadeIn?: boolean;\n\n /**\n * If true, the image starts as visible and is hidden on error. Otherwise, the image is hidden until\n * it is successfully loaded. This disables imageShouldFadeIn.\n * @defaultvalue false\n */\n imageShouldStartVisible?: boolean;\n\n /**\n * Url to the image to use, should be a square aspect ratio and big enough to fit in the image area.\n */\n imageUrl?: string;\n\n /**\n * Alt text for the image to use.\n * @default `''` (empty string)\n */\n imageAlt?: string;\n\n /**\n * The user's initials to display in the image area when there is no image.\n * @defaultvalue Derived from `text`\n */\n imageInitials?: string;\n\n /**\n * Whether initials are calculated for phone numbers and number sequences.\n * Example: Set property to true to get initials for project names consisting of numbers only.\n * @defaultvalue false\n */\n allowPhoneInitials?: boolean;\n\n /**\n * Optional custom renderer for the initials\n */\n onRenderInitials?: IRenderFunction;\n\n /**\n * Optional callback for when loading state of the photo changes\n */\n onPhotoLoadingStateChange?: (newImageLoadState: ImageLoadState) => void;\n\n /**\n * The background color when the user's initials are displayed.\n * @defaultvalue Derived from `text`\n */\n initialsColor?: PersonaInitialsColor | string;\n\n /**\n * The text color when the user's initials are displayed\n */\n initialsTextColor?: string;\n\n /** The colors to be used for the presence-icon and it's background */\n presenceColors?: {\n available: string;\n away: string;\n busy: string;\n dnd: string;\n offline: string;\n oof: string;\n background: string;\n };\n\n /**\n * Presence of the person to display - will not display presence if undefined.\n * @defaultvalue PersonaPresence.none\n */\n presence?: PersonaPresence;\n\n /**\n * Presence title to be shown as a tooltip on hover over the presence icon.\n */\n presenceTitle?: string;\n\n /**\n * This flag can be used to signal the persona is out of office.\n * This will change the way the presence icon looks for statuses that support dual-presence.\n */\n isOutOfOffice?: boolean;\n\n /**\n * Secondary text to display, usually the role of the user.\n */\n secondaryText?: string;\n\n /**\n * Controls whether clipped overflow text should render in a tooltip\n * @defaultvalue true\n */\n showOverflowTooltip?: boolean;\n\n /**\n * Tertiary text to display, usually the status of the user.\n * The tertiary text will only be shown when using size72 or size100.\n */\n tertiaryText?: string;\n\n /**\n * Optional text to display, usually a custom message set. The optional text will only be shown when using size100.\n */\n optionalText?: string;\n\n /**\n * Whether to not render persona details, and just render the persona image/initials.\n */\n hidePersonaDetails?: boolean;\n\n /*\n * If true, show the secondary text line regardless of the size of the persona\n */\n showSecondaryText?: boolean;\n\n /**\n * If true, show the special coin for unknown persona.\n * It has '?' in place of initials, with static font and background colors\n */\n showUnknownPersonaCoin?: boolean;\n\n /**\n * If true renders the initials while the image is loading.\n * This only applies when an imageUrl is provided.\n * @defaultvalue false\n */\n showInitialsUntilImageLoads?: boolean;\n\n /**\n * Optional custom persona coin size in pixel.\n */\n coinSize?: number;\n\n /**\n * Optional HTML element props for Persona coin.\n */\n coinProps?: IPersonaCoinProps;\n\n /**\n * Theme provided by High-Order Component.\n */\n theme?: ITheme;\n\n /**\n * Primary text to display, usually the name of the person.\n * @deprecated Use `text` instead.\n */\n primaryText?: string;\n}\n\n/**\n * {@docCategory Persona}\n */\nexport interface IPersonaProps extends IPersonaSharedProps {\n /**\n * Optional callback to access the IPersona interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject;\n\n /**\n * Additional CSS class(es) to apply to the Persona\n */\n className?: string;\n\n /**\n * Call to provide customized styling that will layer on top of variant rules\n */\n styles?: IStyleFunctionOrObject;\n\n /**\n * Optional custom renderer for the primary text.\n */\n onRenderPrimaryText?: IRenderFunction;\n\n /**\n * Optional custom renderer for the secondary text.\n */\n onRenderSecondaryText?: IRenderFunction;\n\n /**\n * Optional custom renderer for the tertiary text.\n */\n onRenderTertiaryText?: IRenderFunction;\n\n /**\n * Optional custom renderer for the optional text.\n */\n onRenderOptionalText?: IRenderFunction;\n}\n\n/**\n * {@docCategory Persona}\n */\nexport interface IPersonaStyleProps {\n /**\n * Theme provided by High-Order Component.\n */\n theme: ITheme;\n\n /**\n * Custom class name.\n */\n className?: string;\n\n /**\n * Optional custom persona coin size in pixel.\n */\n coinSize?: number;\n\n /**\n * Decides the size of the control.\n * @defaultvalue PersonaSize.size48\n */\n size?: PersonaSize;\n\n /**\n * Presence of the person to display - will not display presence if undefined.\n * @defaultvalue PersonaPresence.none\n */\n presence?: PersonaPresence;\n\n /*\n * If true, show the secondary text line regardless of the size of the persona\n */\n showSecondaryText?: boolean;\n}\n\n/**\n * {@docCategory Persona}\n */\nexport interface IPersonaStyles {\n root: IStyle;\n details: IStyle;\n primaryText: IStyle;\n secondaryText: IStyle;\n tertiaryText: IStyle;\n optionalText: IStyle;\n textContent: IStyle;\n}\n\n/**\n * {@docCategory Persona}\n */\nexport interface IPersonaCoinProps extends IPersonaSharedProps {\n /**\n * Gets the component ref.\n */\n componentRef?: IRefObject<{}>;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules\n */\n styles?: IStyleFunctionOrObject;\n\n /**\n * Additional css class to apply to the PersonaCoin\n * @defaultvalue undefined\n */\n className?: string;\n}\n\n/**\n * {@docCategory Persona}\n */\nexport interface IPersonaCoinStyleProps {\n /**\n * Theme provided by High-Order Component.\n */\n theme: ITheme;\n\n /**\n * Custom class name.\n */\n className?: string;\n\n /**\n * Decides the size of the control.\n * @defaultvalue PersonaSize.size48\n */\n size?: PersonaSize;\n\n /**\n * Optional custom persona coin size in pixel.\n */\n coinSize?: number;\n\n /**\n * Decides whether to display coin for unknown persona\n */\n showUnknownPersonaCoin?: boolean;\n}\n\n/**\n * {@docCategory Persona}\n */\nexport interface IPersonaCoinStyles {\n coin: IStyle;\n imageArea: IStyle;\n image: IStyle;\n initials: IStyle;\n size10WithoutPresenceIcon: IStyle;\n}\n\n/**\n * {@docCategory Persona}\n */\nexport interface IPersonaPresenceProps extends IPersonaSharedProps {\n /**\n * Gets the component ref.\n */\n componentRef?: IRefObject<{}>;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules\n */\n styles?: IStyleFunctionOrObject;\n}\n\n/**\n * {@docCategory Persona}\n */\nexport type IPersonaPresenceStyleProps = Required> &\n Pick &\n Pick;\n\n/**\n * {@docCategory Persona}\n */\nexport interface IPersonaPresenceStyles {\n presence: IStyle;\n presenceIcon: IStyle;\n}\n\n/**\n * {@docCategory Persona}\n */\nexport enum PersonaSize {\n /**\n * Deprecated in favor of standardized numeric sizing.\n * @deprecated Use `size8` instead.\n */\n tiny = 0,\n\n /**\n * Deprecated in favor of standardized numeric sizing.\n * @deprecated Use `size24` instead.\n */\n extraExtraSmall = 1,\n\n /**\n * Deprecated in favor of standardized numeric sizing.\n * @deprecated Use `size32` instead.\n */\n extraSmall = 2,\n\n /**\n * Deprecated in favor of standardized numeric sizing.\n * @deprecated Use `size40` instead.\n */\n small = 3,\n\n /**\n * Deprecated in favor of standardized numeric sizing.\n * @deprecated Use `size48` instead.\n */\n regular = 4,\n\n /**\n * Deprecated in favor of standardized numeric sizing.\n * @deprecated Use `size72` instead.\n */\n large = 5,\n\n /**\n * Deprecated in favor of standardized numeric sizing.\n * @deprecated Use `size100` instead.\n */\n extraLarge = 6,\n\n /**\n * No `PersonaCoin` is rendered.\n */\n size8 = 17,\n\n /**\n * No `PersonaCoin` is rendered. Deprecated to align with design specifications.\n * @deprecated Use `size8` instead.\n */\n size10 = 9,\n\n /**\n * Renders a 16px `PersonaCoin`.\n * @deprecated Deprecated due to not being in the design specification.\n */\n size16 = 8,\n\n /**\n * Renders a 24px `PersonaCoin`.\n */\n size24 = 10,\n\n /**\n * Renders a 28px `PersonaCoin`.\n * @deprecated Deprecated due to not being in the design specification.\n */\n size28 = 7,\n\n /**\n * Renders a 32px `PersonaCoin`.\n */\n size32 = 11,\n\n /**\n * Renders a 40px `PersonaCoin`.\n */\n size40 = 12,\n\n /**\n * Renders a 48px `PersonaCoin`.\n */\n size48 = 13,\n\n /**\n * Renders a 56px `PersonaCoin`.\n */\n size56 = 16,\n\n /**\n * Renders a 72px `PersonaCoin`.\n */\n size72 = 14,\n\n /**\n * Renders a 100px `PersonaCoin`.\n */\n size100 = 15,\n\n /**\n * Renders a 120px `PersonaCoin`.\n */\n size120 = 18,\n}\n\n/**\n * {@docCategory Persona}\n */\nexport enum PersonaPresence {\n none = 0,\n offline = 1,\n online = 2,\n away = 3,\n dnd = 4,\n blocked = 5,\n busy = 6,\n}\n\n/**\n * {@docCategory Persona}\n */\nexport enum PersonaInitialsColor {\n lightBlue = 0,\n blue = 1,\n darkBlue = 2,\n teal = 3,\n lightGreen = 4,\n green = 5,\n darkGreen = 6,\n lightPink = 7,\n pink = 8,\n magenta = 9,\n purple = 10,\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 black = 11,\n orange = 12,\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 red = 13,\n darkRed = 14,\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 transparent = 15,\n violet = 16,\n lightRed = 17,\n gold = 18,\n burgundy = 19,\n warmGray = 20,\n coolGray = 21,\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 gray = 22,\n cyan = 23,\n rust = 24,\n}\n","import { PersonaPresence, PersonaSize } from './Persona.types';\n\n// Persona Sizes\nexport namespace personaSize {\n export const size8 = '20px';\n // TODO: remove in a future major release as it's deprecated.\n export const size10 = '20px';\n // TODO: remove in a future major release as it's deprecated.\n export const size16 = '16px';\n export const size24 = '24px';\n // TODO: remove in a future major release as it's deprecated.\n export const size28 = '28px';\n export const size32 = '32px';\n export const size40 = '40px';\n export const size48 = '48px';\n export const size56 = '56px';\n export const size72 = '72px';\n export const size100 = '100px';\n export const size120 = '120px';\n}\n\n// Persona Presence Sizes\nexport namespace personaPresenceSize {\n export const size6 = '6px';\n export const size8 = '8px';\n export const size12 = '12px';\n export const size16 = '16px';\n export const size20 = '20px';\n export const size28 = '28px';\n export const size32 = '32px';\n\n /**\n * @deprecated This is now unused\n */\n export const border = '2px';\n}\n\n// TODO: remove the deprecated parts in a future major release.\nexport const sizeBoolean = (size: PersonaSize) => ({\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});\n\nexport const sizeToPixels: { [key: number]: number } = {\n // Old deprecated sizes\n [PersonaSize.tiny]: 10,\n [PersonaSize.extraExtraSmall]: 24,\n [PersonaSize.extraSmall]: 28,\n [PersonaSize.small]: 40,\n [PersonaSize.regular]: 48,\n [PersonaSize.large]: 72,\n [PersonaSize.extraLarge]: 100,\n // New sizes\n [PersonaSize.size8]: 8,\n [PersonaSize.size10]: 10, // TODO: deprecated (not in the design specs)\n [PersonaSize.size16]: 16, // TODO: deprecated (not in the design specs)\n [PersonaSize.size24]: 24,\n [PersonaSize.size28]: 28, // TODO: deprecated (not in the design specs)\n /* eslint-enable deprecation/deprecation */\n [PersonaSize.size32]: 32,\n [PersonaSize.size40]: 40,\n [PersonaSize.size48]: 48,\n [PersonaSize.size56]: 56,\n [PersonaSize.size72]: 72,\n [PersonaSize.size100]: 100,\n [PersonaSize.size120]: 120,\n};\n\nexport const presenceBoolean = (presence: PersonaPresence) => ({\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","import * as React from 'react';\nimport { classNamesFunction } from '../../../Utilities';\nimport { Icon } from '../../../Icon';\nimport { PersonaPresence as PersonaPresenceEnum, PersonaSize } from '../Persona.types';\nimport { sizeBoolean } from '../PersonaConsts';\nimport { useMergedRefs } from '@fluentui/react-hooks';\nimport type { IPersonaPresenceProps, IPersonaPresenceStyleProps, IPersonaPresenceStyles } from '../Persona.types';\n\nconst coinSizeFontScaleFactor = 6;\nconst coinSizePresenceScaleFactor = 3;\nconst presenceMaxSize = 40;\nconst presenceFontMaxSize = 20;\n\nconst 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/**\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 const PersonaPresenceBase: React.FunctionComponent = React.forwardRef<\n HTMLDivElement,\n IPersonaPresenceProps\n>((props, forwardedRef) => {\n const {\n coinSize,\n isOutOfOffice,\n styles, // Use getStyles from props.\n presence,\n theme,\n presenceTitle,\n presenceColors,\n } = props;\n\n const rootRef = React.useRef(null);\n const mergedRootRef = useMergedRefs(forwardedRef, rootRef);\n\n const size = sizeBoolean(props.size as PersonaSize);\n\n // Render Presence Icon if Persona is above size 32.\n const renderIcon =\n !(size.isSize8 || size.isSize10 || size.isSize16 || size.isSize24 || size.isSize28 || size.isSize32) &&\n (coinSize ? coinSize > 32 : true);\n\n const presenceHeightWidth: string = coinSize\n ? coinSize / coinSizePresenceScaleFactor < presenceMaxSize\n ? coinSize / coinSizePresenceScaleFactor + 'px'\n : presenceMaxSize + 'px'\n : '';\n const presenceFontSize: string = coinSize\n ? coinSize / coinSizeFontScaleFactor < presenceFontMaxSize\n ? coinSize / coinSizeFontScaleFactor + 'px'\n : presenceFontMaxSize + 'px'\n : '';\n const coinSizeWithPresenceIconStyle = coinSize\n ? { fontSize: presenceFontSize, lineHeight: presenceHeightWidth }\n : undefined;\n const coinSizeWithPresenceStyle = coinSize ? { width: presenceHeightWidth, height: presenceHeightWidth } : undefined;\n\n // Use getStyles from props, or fall back to getStyles from styles file.\n const classNames = getClassNames(styles, {\n theme: theme!,\n presence,\n size: props.size,\n isOutOfOffice,\n presenceColors,\n });\n\n if (presence === PersonaPresenceEnum.none) {\n return null;\n }\n\n return (\n \n {renderIcon && (\n \n )}\n
\n );\n});\nPersonaPresenceBase.displayName = 'PersonaPresenceBase';\n\nfunction determineIcon(\n presence: PersonaPresenceEnum | undefined,\n isOutOfOffice: boolean | undefined,\n): string | undefined {\n if (!presence) {\n return undefined;\n }\n\n const oofIcon = 'SkypeArrow';\n\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\n return '';\n}\n","import { PersonaPresence, PersonaSize } from '../Persona.types';\nimport { HighContrastSelector, getGlobalClassNames, getHighContrastNoAdjustStyle } from '../../../Styling';\nimport { personaPresenceSize, presenceBoolean, sizeBoolean } from '../PersonaConsts';\nimport type { IPersonaPresenceStyleProps, IPersonaPresenceStyles } from '../Persona.types';\nimport type { IRawStyle } from '../../../Styling';\n\nconst GlobalClassNames = {\n presence: 'ms-Persona-presence',\n presenceIcon: 'ms-Persona-presenceIcon',\n};\n\nexport const getStyles = (props: IPersonaPresenceStyleProps): IPersonaPresenceStyles => {\n const { theme, presenceColors } = props;\n const { semanticColors, fonts } = theme;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n const size = sizeBoolean(props.size as PersonaSize);\n const presence = presenceBoolean(props.presence as PersonaPresence);\n\n // Presence colors\n const presenceColorAvailable = (presenceColors && presenceColors.available) || '#6BB700';\n const presenceColorAway = (presenceColors && presenceColors.away) || '#FFAA44';\n const presenceColorBusy = (presenceColors && presenceColors.busy) || '#C43148';\n const presenceColorDnd = (presenceColors && presenceColors.dnd) || '#C50F1F';\n const presenceColorOffline = (presenceColors && presenceColors.offline) || '#8A8886';\n const presenceColorOof = (presenceColors && presenceColors.oof) || '#B4009E';\n const presenceColorBackground = (presenceColors && presenceColors.background) || semanticColors.bodyBackground;\n\n const isOpenCirclePresence =\n presence.isOffline ||\n (props.isOutOfOffice && (presence.isAvailable || presence.isBusy || presence.isAway || presence.isDoNotDisturb));\n\n const borderSizeForSmallPersonas = '1px';\n const borderSizeForLargePersonas = '2px';\n\n const borderSize = size.isSize72 || size.isSize100 ? borderSizeForLargePersonas : borderSizeForSmallPersonas;\n\n return {\n presence: [\n classNames.presence,\n {\n position: 'absolute',\n height: personaPresenceSize.size12,\n width: personaPresenceSize.size12,\n borderRadius: '50%',\n top: 'auto',\n right: '-2px',\n bottom: '-2px',\n border: `2px solid ${presenceColorBackground}`,\n textAlign: 'center',\n boxSizing: 'content-box',\n backgroundClip: 'border-box',\n ...getHighContrastNoAdjustStyle(),\n\n selectors: {\n [HighContrastSelector]: {\n borderColor: 'Window',\n backgroundColor: 'WindowText',\n },\n },\n },\n\n (size.isSize8 || size.isSize10) && {\n right: 'auto',\n top: '7px',\n left: 0,\n border: 0,\n\n selectors: {\n [HighContrastSelector]: {\n top: '9px',\n border: '1px solid WindowText',\n },\n },\n },\n\n (size.isSize8 || size.isSize10 || size.isSize24 || size.isSize28 || size.isSize32) &&\n makeSizeStyle(personaPresenceSize.size8),\n\n (size.isSize40 || size.isSize48) && makeSizeStyle(personaPresenceSize.size12),\n\n size.isSize16 && {\n height: personaPresenceSize.size6,\n width: personaPresenceSize.size6,\n borderWidth: '1.5px',\n },\n\n size.isSize56 && makeSizeStyle(personaPresenceSize.size16),\n\n size.isSize72 && makeSizeStyle(personaPresenceSize.size20),\n\n size.isSize100 && makeSizeStyle(personaPresenceSize.size28),\n\n size.isSize120 && makeSizeStyle(personaPresenceSize.size32),\n\n presence.isAvailable && {\n backgroundColor: presenceColorAvailable,\n\n selectors: {\n [HighContrastSelector]: backgroundColor('Highlight'),\n },\n },\n\n presence.isAway && backgroundColor(presenceColorAway),\n\n presence.isBlocked && [\n {\n selectors: {\n // Only show :after at larger sizes\n ':after':\n 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 [HighContrastSelector]: {\n selectors: {\n ':after': {\n width: `calc(100% - 4px)`,\n left: '2px',\n backgroundColor: 'Window',\n },\n },\n },\n },\n },\n ],\n\n presence.isBusy && backgroundColor(presenceColorBusy),\n\n presence.isDoNotDisturb && backgroundColor(presenceColorDnd),\n\n presence.isOffline && backgroundColor(presenceColorOffline),\n\n (isOpenCirclePresence || presence.isBlocked) && [\n {\n backgroundColor: presenceColorBackground,\n\n selectors: {\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 [HighContrastSelector]: {\n backgroundColor: 'WindowText',\n\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 },\n },\n ],\n\n isOpenCirclePresence && presence.isAvailable && makeBeforeBorderStyle(borderSize, presenceColorAvailable),\n\n isOpenCirclePresence && presence.isBusy && makeBeforeBorderStyle(borderSize, presenceColorBusy),\n\n isOpenCirclePresence && presence.isAway && makeBeforeBorderStyle(borderSize, presenceColorOof),\n\n isOpenCirclePresence && presence.isDoNotDisturb && makeBeforeBorderStyle(borderSize, presenceColorDnd),\n\n isOpenCirclePresence && presence.isOffline && makeBeforeBorderStyle(borderSize, presenceColorOffline),\n\n isOpenCirclePresence &&\n presence.isOffline &&\n props.isOutOfOffice &&\n makeBeforeBorderStyle(borderSize, presenceColorOof),\n ],\n\n presenceIcon: [\n classNames.presenceIcon,\n {\n color: presenceColorBackground,\n fontSize: '6px', // exception case where we don't have an available theme.fonts variable to match it.\n lineHeight: personaPresenceSize.size12,\n verticalAlign: 'top',\n\n selectors: {\n [HighContrastSelector]: {\n color: 'Window',\n },\n },\n },\n\n size.isSize56 && {\n fontSize: '8px', // exception case where we don't have an available theme.fonts variable to match it.\n lineHeight: personaPresenceSize.size16,\n },\n\n size.isSize72 && {\n fontSize: fonts.small.fontSize,\n lineHeight: personaPresenceSize.size20,\n },\n\n size.isSize100 && {\n fontSize: fonts.medium.fontSize,\n lineHeight: personaPresenceSize.size28,\n },\n\n size.isSize120 && {\n fontSize: fonts.medium.fontSize,\n lineHeight: personaPresenceSize.size32,\n },\n\n presence.isAway && {\n position: 'relative',\n left: isOpenCirclePresence ? undefined : '1px',\n },\n\n isOpenCirclePresence && presence.isAvailable && makeOpenCircleIconStyle(presenceColorAvailable),\n\n isOpenCirclePresence && presence.isBusy && makeOpenCircleIconStyle(presenceColorBusy),\n\n isOpenCirclePresence && presence.isAway && makeOpenCircleIconStyle(presenceColorOof),\n\n isOpenCirclePresence && presence.isDoNotDisturb && makeOpenCircleIconStyle(presenceColorDnd),\n\n isOpenCirclePresence && presence.isOffline && makeOpenCircleIconStyle(presenceColorOffline),\n\n isOpenCirclePresence && presence.isOffline && props.isOutOfOffice && makeOpenCircleIconStyle(presenceColorOof),\n ],\n };\n};\n\nfunction makeOpenCircleIconStyle(color: string): IRawStyle {\n return {\n color,\n borderColor: color,\n };\n}\n\nfunction makeBeforeBorderStyle(borderSize: string, color: string): IRawStyle {\n return {\n selectors: {\n ':before': {\n border: `${borderSize} solid ${color}`,\n },\n },\n };\n}\n\nfunction makeSizeStyle(size: string): IRawStyle {\n return {\n height: size,\n width: size,\n };\n}\n\nfunction backgroundColor(color: string): IRawStyle {\n return { backgroundColor: color };\n}\n","import * as React from 'react';\nimport { styled } from '../../../Utilities';\nimport { PersonaPresenceBase } from './PersonaPresence.base';\nimport { getStyles } from './PersonaPresence.styles';\nimport type { IPersonaPresenceProps, IPersonaPresenceStyleProps, IPersonaPresenceStyles } from '../Persona.types';\n\n/**\n * PersonaPresence is used to render an individual's presence.\n */\nexport const PersonaPresence: React.FunctionComponent = styled<\n IPersonaPresenceProps,\n IPersonaPresenceStyleProps,\n IPersonaPresenceStyles\n>(PersonaPresenceBase, getStyles, undefined, { scope: 'PersonaPresence' });\n","import { PersonaInitialsColor } from './Persona.types';\nimport type { IPersonaProps } from './Persona.types';\n\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 */\nconst COLOR_SWATCHES_LOOKUP: PersonaInitialsColor[] = [\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];\n\nconst COLOR_SWATCHES_NUM_ENTRIES = COLOR_SWATCHES_LOOKUP.length;\n\nfunction getInitialsColorFromName(displayName: string | undefined): PersonaInitialsColor {\n let color = PersonaInitialsColor.blue;\n if (!displayName) {\n return color;\n }\n\n let hashCode = 0;\n for (let iLen: number = displayName.length - 1; iLen >= 0; iLen--) {\n const ch: number = displayName.charCodeAt(iLen);\n const shift: number = iLen % 8;\n // eslint-disable-next-line no-bitwise\n hashCode ^= (ch << shift) + (ch >> (8 - shift));\n }\n\n color = COLOR_SWATCHES_LOOKUP[hashCode % COLOR_SWATCHES_NUM_ENTRIES];\n\n return color;\n}\n\nfunction personaInitialsColorToHexCode(personaInitialsColor: PersonaInitialsColor): string {\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\n/** @deprecated Use `getPersonaInitialsColor` */\nexport function initialsColorPropToColorCode(props: IPersonaProps): string {\n return getPersonaInitialsColor(props);\n}\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: Pick): string {\n // eslint-disable-next-line deprecation/deprecation\n const { primaryText, text } = props;\n let { initialsColor } = props;\n let initialsColorCode: string;\n if (typeof initialsColor === 'string') {\n initialsColorCode = initialsColor;\n } else {\n initialsColor = initialsColor !== undefined ? initialsColor : getInitialsColorFromName(text || primaryText);\n initialsColorCode = personaInitialsColorToHexCode(initialsColor);\n }\n\n return initialsColorCode;\n}\n","import * as React from 'react';\nimport {\n classNamesFunction,\n divProperties,\n memoizeFunction,\n getInitials,\n getNativeProps,\n getRTL,\n getPropsWithDefaults,\n} from '../../../Utilities';\nimport { mergeStyles } from '../../../Styling';\nimport { PersonaPresence } from '../PersonaPresence/index';\nimport { Icon } from '../../../Icon';\nimport { Image, ImageFit, ImageLoadState } from '../../../Image';\nimport { PersonaInitialsColor, PersonaPresence as PersonaPresenceEnum, PersonaSize } from '../Persona.types';\nimport { getPersonaInitialsColor } from '../PersonaInitialsColor';\nimport { sizeToPixels } from '../PersonaConsts';\nimport { useWarnings } from '@fluentui/react-hooks';\nimport type {\n IPersonaCoinProps,\n IPersonaCoinStyleProps,\n IPersonaCoinStyles,\n IPersonaPresenceProps,\n} from '../Persona.types';\n\nconst getClassNames = classNamesFunction({\n // There can be many PersonaCoin rendered with different sizes.\n // Therefore setting a larger cache size.\n cacheSize: 100,\n});\n\nconst getInitialsStyles = memoizeFunction(\n (\n className: string,\n initialsColor: PersonaInitialsColor | string | undefined,\n initialsTextColor: string | undefined,\n text: string | undefined,\n primaryText: string | undefined,\n showUnknownPersonaCoin: boolean | undefined,\n ) =>\n mergeStyles(\n className,\n !showUnknownPersonaCoin && {\n backgroundColor: getPersonaInitialsColor({ text, initialsColor, primaryText }),\n color: initialsTextColor,\n },\n ),\n);\n\nconst DEFAULT_PROPS = {\n size: PersonaSize.size48,\n presence: PersonaPresenceEnum.none,\n imageAlt: '',\n};\n\nfunction useDebugWarnings(props: IPersonaCoinProps) {\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,\n deprecations: { primaryText: 'text' },\n });\n }\n}\n\nfunction useImageLoadState({ onPhotoLoadingStateChange, imageUrl }: IPersonaCoinProps) {\n const [imageLoadState, setImageLoadstate] = React.useState(ImageLoadState.notLoaded);\n\n React.useEffect(() => {\n setImageLoadstate(ImageLoadState.notLoaded);\n }, [imageUrl]);\n\n const onLoadingStateChange = (loadState: ImageLoadState) => {\n setImageLoadstate(loadState);\n\n onPhotoLoadingStateChange?.(loadState);\n };\n\n return [imageLoadState, onLoadingStateChange] as const;\n}\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 const PersonaCoinBase: React.FunctionComponent = React.forwardRef<\n HTMLDivElement,\n IPersonaCoinProps\n>((propsWithoutDefaults, forwardedRef) => {\n const props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n\n useDebugWarnings(props);\n\n const [imageLoadState, onLoadingStateChange] = useImageLoadState(props);\n\n const renderCoin = getCoinRenderer(onLoadingStateChange);\n\n const {\n className,\n coinProps,\n showUnknownPersonaCoin,\n coinSize,\n styles,\n imageUrl,\n initialsColor,\n initialsTextColor,\n isOutOfOffice,\n // eslint-disable-next-line deprecation/deprecation\n onRenderCoin = renderCoin,\n // eslint-disable-next-line deprecation/deprecation\n onRenderPersonaCoin = onRenderCoin,\n onRenderInitials = renderPersonaCoinInitials,\n presence,\n presenceTitle,\n presenceColors,\n // eslint-disable-next-line deprecation/deprecation\n primaryText,\n showInitialsUntilImageLoads,\n text,\n theme,\n size,\n } = props;\n\n const divProps = getNativeProps>(props, divProperties);\n const divCoinProps = getNativeProps>(coinProps || {}, divProperties);\n const coinSizeStyle = coinSize ? { width: coinSize, height: coinSize } : undefined;\n const hideImage = showUnknownPersonaCoin;\n\n const personaPresenceProps: IPersonaPresenceProps = {\n coinSize,\n isOutOfOffice,\n presence,\n presenceTitle,\n presenceColors,\n size,\n theme,\n };\n\n // Use getStyles from props, or fall back to getStyles from styles file.\n const classNames = getClassNames(styles, {\n theme: theme!,\n className: coinProps && coinProps.className ? coinProps.className : className,\n size,\n coinSize,\n showUnknownPersonaCoin,\n });\n\n const shouldRenderInitials = Boolean(\n imageLoadState !== ImageLoadState.loaded &&\n ((showInitialsUntilImageLoads && imageUrl) || !imageUrl || imageLoadState === ImageLoadState.error || hideImage),\n );\n\n return (\n
\n {\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 ? (\n
\n {shouldRenderInitials && (\n \n {onRenderInitials(props, renderPersonaCoinInitials)}\n
\n )}\n {!hideImage && onRenderPersonaCoin(props, renderCoin)}\n \n
\n ) : // Otherwise, render just PersonaPresence.\n props.presence ? (\n \n ) : (\n // Just render Contact Icon if there isn't a Presence prop.\n \n )\n }\n {props.children}\n \n );\n});\nPersonaCoinBase.displayName = 'PersonaCoinBase';\n\nconst getCoinRenderer =\n (onLoadingStateChange: (loadState: ImageLoadState) => void) =>\n ({\n coinSize,\n styles,\n imageUrl,\n imageAlt,\n imageShouldFadeIn,\n imageShouldStartVisible,\n theme,\n showUnknownPersonaCoin,\n size = DEFAULT_PROPS.size,\n }: IPersonaCoinProps): JSX.Element | null => {\n // Render the Image component only if an image URL is provided\n if (!imageUrl) {\n return null;\n }\n const classNames = getClassNames(styles, {\n theme: theme!,\n size,\n showUnknownPersonaCoin,\n });\n const dimension = coinSize || sizeToPixels[size];\n return (\n \n );\n };\n\nconst renderPersonaCoinInitials = ({\n imageInitials,\n allowPhoneInitials,\n showUnknownPersonaCoin,\n text,\n // eslint-disable-next-line deprecation/deprecation\n primaryText,\n theme,\n}: IPersonaCoinProps): JSX.Element => {\n if (showUnknownPersonaCoin) {\n return ;\n }\n\n const isRTL = getRTL(theme);\n\n imageInitials = imageInitials || getInitials(text || primaryText || '', isRTL, allowPhoneInitials);\n\n return imageInitials !== '' ? {imageInitials} : ;\n};\n","import { PersonaSize } from '../Persona.types';\nimport { HighContrastSelector, FontWeights, getGlobalClassNames, getHighContrastNoAdjustStyle } from '../../../Styling';\nimport { sizeBoolean, sizeToPixels } from '../PersonaConsts';\nimport type { IPersonaCoinStyleProps, IPersonaCoinStyles } from '../Persona.types';\n\nconst 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};\n\nexport const getStyles = (props: IPersonaCoinStyleProps): IPersonaCoinStyles => {\n const { className, theme, coinSize } = props;\n\n const { palette, fonts } = theme;\n\n const size = sizeBoolean(props.size as PersonaSize);\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n // Static colors used when displaying 'unknown persona' coin\n const unknownPersonaBackgroundColor = 'rgb(234, 234, 234)';\n const unknownPersonaFontColor = 'rgb(168, 0, 0)';\n\n const dimension = coinSize || (props.size && sizeToPixels[props.size]) || 48;\n\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\n size10WithoutPresenceIcon: {\n fontSize: fonts.xSmall.fontSize,\n position: 'absolute',\n top: '5px',\n right: 'auto',\n left: 0,\n },\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\n dimension <= 10 && {\n overflow: 'visible',\n background: 'transparent',\n height: 0,\n width: 0,\n },\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\n dimension <= 10 && {\n overflow: 'visible',\n background: 'transparent',\n height: 0,\n width: 0,\n },\n\n dimension > 10 && {\n height: dimension,\n width: dimension,\n },\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\n selectors: {\n [HighContrastSelector]: {\n border: '1px solid WindowText',\n ...getHighContrastNoAdjustStyle(),\n color: 'WindowText',\n boxSizing: 'border-box',\n backgroundColor: 'Window !important',\n },\n i: {\n fontWeight: FontWeights.semibold,\n },\n },\n },\n\n props.showUnknownPersonaCoin && {\n backgroundColor: unknownPersonaBackgroundColor,\n },\n\n dimension < 32 && {\n fontSize: fonts.xSmall.fontSize,\n },\n\n dimension >= 32 &&\n dimension < 40 && {\n fontSize: fonts.medium.fontSize,\n },\n\n dimension >= 40 &&\n dimension < 56 && {\n fontSize: fonts.mediumPlus.fontSize,\n },\n\n dimension >= 56 &&\n dimension < 72 && {\n fontSize: fonts.xLarge.fontSize,\n },\n\n dimension >= 72 &&\n dimension < 100 && {\n fontSize: fonts.xxLarge.fontSize,\n },\n\n dimension >= 100 && {\n fontSize: fonts.superLarge.fontSize,\n },\n ],\n };\n};\n","import * as React from 'react';\nimport { styled } from '../../../Utilities';\nimport { PersonaCoinBase } from './PersonaCoin.base';\nimport { getStyles } from './PersonaCoin.styles';\nimport type { IPersonaCoinProps, IPersonaCoinStyleProps, IPersonaCoinStyles } from '../Persona.types';\n\n/**\n * PersonaCoin is used to render an individual's avatar and presence.\n */\nexport const PersonaCoin: React.FunctionComponent = styled<\n IPersonaCoinProps,\n IPersonaCoinStyleProps,\n IPersonaCoinStyles\n>(PersonaCoinBase, getStyles, undefined, {\n scope: 'PersonaCoin',\n});\n","import * 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';\nimport type { IRenderFunction } from '../../Utilities';\nimport type { IPersonaProps, IPersonaStyleProps, IPersonaStyles, IPersonaCoinProps } from './Persona.types';\n\nconst getClassNames = classNamesFunction();\n\nconst DEFAULT_PROPS = {\n size: PersonaSize.size48,\n presence: PersonaPresenceEnum.none,\n imageAlt: '',\n showOverflowTooltip: true,\n};\n\nfunction useDebugWarnings(props: IPersonaProps) {\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,\n deprecations: { primaryText: 'text' },\n });\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 const PersonaBase: React.FunctionComponent = React.forwardRef(\n (propsWithoutDefaults, forwardedRef) => {\n const props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n\n useDebugWarnings(props);\n const rootRef = React.useRef(null);\n const mergedRootRef = useMergedRefs(forwardedRef, rootRef);\n\n /**\n * Deprecation helper for getting text.\n */\n const getText = (): string => {\n // eslint-disable-next-line deprecation/deprecation\n return props.text || props.primaryText || '';\n };\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 const renderElement = (\n elementClassNames: string,\n renderFunction: IRenderFunction | undefined,\n defaultRenderFunction: IRenderFunction | undefined,\n ): JSX.Element | undefined => {\n const content = renderFunction && renderFunction(props, defaultRenderFunction);\n return content ? (\n
\n {content}\n
\n ) : undefined;\n };\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 const onRenderText = (text: string | undefined, tooltip = true): IRenderFunction | undefined => {\n // return default render behavior for valid text or undefined\n return text\n ? tooltip\n ? (): JSX.Element => {\n // default onRender behavior\n return (\n \n {text}\n \n );\n }\n : () => <>{text}\n : undefined;\n };\n\n const onInternalRenderPersonaCoin = (providedCoinProps: IPersonaCoinProps): JSX.Element | null => {\n return ;\n };\n\n // wrapping default render behavior based on various props properties\n const onInternalRenderPrimaryText = onRenderText(getText(), props.showOverflowTooltip);\n const onInternalRenderSecondaryText = onRenderText(props.secondaryText, props.showOverflowTooltip);\n const onInternalRenderTertiaryText = onRenderText(props.tertiaryText, props.showOverflowTooltip);\n const onInternalRenderOptionalText = onRenderText(props.optionalText, props.showOverflowTooltip);\n\n const {\n hidePersonaDetails,\n onRenderOptionalText = onInternalRenderOptionalText,\n onRenderPrimaryText = onInternalRenderPrimaryText,\n onRenderSecondaryText = onInternalRenderSecondaryText,\n onRenderTertiaryText = onInternalRenderTertiaryText,\n onRenderPersonaCoin = onInternalRenderPersonaCoin,\n } = props;\n const size = props.size as PersonaSize;\n\n // These properties are to be explicitly passed into PersonaCoin because they are the only props directly used\n const {\n allowPhoneInitials,\n className,\n coinProps,\n showUnknownPersonaCoin,\n coinSize,\n styles,\n imageAlt,\n imageInitials,\n imageShouldFadeIn,\n imageShouldStartVisible,\n imageUrl,\n initialsColor,\n initialsTextColor,\n isOutOfOffice,\n onPhotoLoadingStateChange,\n // eslint-disable-next-line deprecation/deprecation\n onRenderCoin,\n onRenderInitials,\n presence,\n presenceTitle,\n presenceColors,\n showInitialsUntilImageLoads,\n showSecondaryText,\n theme,\n } = props;\n\n const personaCoinProps: IPersonaCoinProps = {\n allowPhoneInitials,\n showUnknownPersonaCoin,\n coinSize,\n imageAlt,\n imageInitials,\n imageShouldFadeIn,\n imageShouldStartVisible,\n imageUrl,\n initialsColor,\n initialsTextColor,\n onPhotoLoadingStateChange,\n onRenderCoin,\n onRenderInitials,\n presence,\n presenceTitle,\n showInitialsUntilImageLoads,\n size,\n text: getText(),\n isOutOfOffice,\n presenceColors,\n ...coinProps,\n };\n\n const classNames = getClassNames(styles, {\n theme: theme!,\n className,\n showSecondaryText,\n presence,\n size,\n });\n\n const divProps = getNativeProps>(props, divProperties);\n const personaDetails = (\n
\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
\n );\n return (\n \n {onRenderPersonaCoin(personaCoinProps, onRenderPersonaCoin)}\n {\n /* eslint-disable deprecation/deprecation */\n\n (!hidePersonaDetails ||\n size === PersonaSize.size8 ||\n size === PersonaSize.size10 ||\n size === PersonaSize.tiny) &&\n personaDetails\n /* eslint-enable deprecation/deprecation */\n }\n \n );\n },\n);\nPersonaBase.displayName = 'PersonaBase';\n","import { PersonaPresence, PersonaSize } from './Persona.types';\nimport { FontWeights, normalize, noWrap, getGlobalClassNames } from '../../Styling';\nimport { personaSize, presenceBoolean, sizeBoolean } from './PersonaConsts';\nimport type { IPersonaStyleProps, IPersonaStyles } from './Persona.types';\nimport type { IStyle } from '../../Styling';\n\nconst 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};\n\nexport const getStyles = (props: IPersonaStyleProps): IPersonaStyles => {\n const { className, showSecondaryText, theme } = props;\n\n const { semanticColors, fonts } = theme;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n const size = sizeBoolean(props.size as PersonaSize);\n const presence = presenceBoolean(props.presence as PersonaPresence);\n\n const showSecondaryTextDefaultHeight = '16px';\n\n const sharedTextStyles: IStyle = {\n color: semanticColors.bodySubtext,\n fontWeight: FontWeights.regular,\n fontSize: fonts.small.fontSize,\n };\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\n selectors: {\n '.contextualHost': {\n display: 'none',\n },\n },\n },\n\n size.isSize8 && [\n classNames.size8,\n {\n height: personaSize.size8,\n minWidth: personaSize.size8,\n },\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\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\n size.isSize24 && [\n classNames.size24,\n {\n height: personaSize.size24,\n minWidth: personaSize.size24,\n },\n ],\n\n size.isSize24 &&\n showSecondaryText && {\n height: '36px',\n },\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\n size.isSize28 &&\n showSecondaryText && {\n height: '32px',\n },\n\n size.isSize32 && [\n classNames.size32,\n {\n height: personaSize.size32,\n minWidth: personaSize.size32,\n },\n ],\n\n size.isSize40 && [\n classNames.size40,\n {\n height: personaSize.size40,\n minWidth: personaSize.size40,\n },\n ],\n\n size.isSize48 && classNames.size48,\n\n size.isSize56 && [\n classNames.size56,\n {\n height: personaSize.size56,\n minWidth: personaSize.size56,\n },\n ],\n\n size.isSize72 && [\n classNames.size72,\n {\n height: personaSize.size72,\n minWidth: personaSize.size72,\n },\n ],\n\n size.isSize100 && [\n classNames.size100,\n {\n height: personaSize.size100,\n minWidth: personaSize.size100,\n },\n ],\n\n size.isSize120 && [\n classNames.size120,\n {\n height: personaSize.size120,\n minWidth: personaSize.size120,\n },\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\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\n (size.isSize8 || size.isSize10) && {\n paddingLeft: 17, // increased padding because we don't render a coin at this size\n },\n\n (size.isSize24 || size.isSize28 || size.isSize32) && {\n padding: '0 8px',\n },\n\n (size.isSize40 || size.isSize48) && {\n padding: '0 12px',\n },\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\n showSecondaryText && {\n height: showSecondaryTextDefaultHeight,\n lineHeight: showSecondaryTextDefaultHeight,\n overflowX: 'hidden',\n },\n\n (size.isSize8 || size.isSize10) && {\n fontSize: fonts.small.fontSize,\n lineHeight: personaSize.size8,\n },\n\n size.isSize16 && {\n lineHeight: personaSize.size28,\n },\n\n (size.isSize24 || size.isSize28 || size.isSize32 || size.isSize40 || size.isSize48) &&\n showSecondaryText && {\n height: 18,\n },\n\n (size.isSize56 || size.isSize72 || size.isSize100 || size.isSize120) && {\n fontSize: fonts.xLarge.fontSize,\n },\n\n (size.isSize56 || size.isSize72 || size.isSize100 || size.isSize120) &&\n showSecondaryText && {\n height: 22,\n },\n ],\n\n secondaryText: [\n classNames.secondaryText,\n noWrap,\n sharedTextStyles,\n\n (size.isSize8 || size.isSize10 || size.isSize16 || size.isSize24 || size.isSize28 || size.isSize32) && {\n display: 'none',\n },\n\n showSecondaryText && {\n display: 'block',\n height: showSecondaryTextDefaultHeight,\n lineHeight: showSecondaryTextDefaultHeight,\n overflowX: 'hidden',\n },\n\n size.isSize24 &&\n showSecondaryText && {\n height: 18,\n },\n\n (size.isSize56 || size.isSize72 || size.isSize100 || size.isSize120) && {\n fontSize: fonts.medium.fontSize,\n },\n\n (size.isSize56 || size.isSize72 || size.isSize100 || size.isSize120) &&\n showSecondaryText && {\n height: 18,\n },\n ],\n\n tertiaryText: [\n classNames.tertiaryText,\n noWrap,\n sharedTextStyles,\n {\n display: 'none',\n fontSize: fonts.medium.fontSize,\n },\n\n (size.isSize72 || size.isSize100 || size.isSize120) && {\n display: 'block',\n },\n ],\n\n optionalText: [\n classNames.optionalText,\n noWrap,\n sharedTextStyles,\n {\n display: 'none',\n fontSize: fonts.medium.fontSize,\n },\n\n (size.isSize100 || size.isSize120) && {\n display: 'block',\n },\n ],\n\n textContent: [classNames.textContent, noWrap],\n };\n};\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { PersonaBase } from './Persona.base';\nimport { getStyles } from './Persona.styles';\nimport type { IPersonaProps, IPersonaStyleProps, IPersonaStyles } from './Persona.types';\n\n/**\n * Personas are used for rendering an individual's avatar, presence and details.\n * They are used within the PeoplePicker components.\n */\nexport const Persona: React.FunctionComponent = styled<\n IPersonaProps,\n IPersonaStyleProps,\n IPersonaStyles\n>(PersonaBase, getStyles, undefined, {\n scope: 'Persona',\n});\n","import * as React from 'react';\nimport {\n Async,\n getDocument,\n getNativeProps,\n initializeComponentRef,\n inputProperties,\n isIE11,\n KeyCodes,\n} from '../../Utilities';\nimport { WindowContext } from '@fluentui/react-window-provider';\nimport type { IAutofill, IAutofillProps } from './Autofill.types';\n\nexport interface IAutofillState {\n inputValue: string;\n isComposing: boolean;\n}\n\ninterface ICursorLocation {\n start: number;\n end: number;\n dir: 'forward' | 'backward' | 'none' | undefined;\n}\n\nconst SELECTION_FORWARD = 'forward';\nconst SELECTION_BACKWARD = 'backward';\n\n/**\n * {@docCategory Autofill}\n */\nexport class Autofill extends React.Component implements IAutofill {\n public static defaultProps = {\n enableAutofillOnKeyPress: [KeyCodes.down, KeyCodes.up] as KeyCodes[],\n };\n // need to check WindowContext to get the provided document\n public static contextType = WindowContext;\n\n private _inputElement = React.createRef();\n private _autoFillEnabled = true;\n private _async: Async;\n\n public static getDerivedStateFromProps(props: IAutofillProps, state: IAutofillState): IAutofillState | null {\n // eslint-disable-next-line deprecation/deprecation\n if (props.updateValueInWillReceiveProps) {\n // eslint-disable-next-line deprecation/deprecation\n const 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 { ...state, inputValue: updatedInputValue };\n }\n }\n return null;\n }\n\n constructor(props: IAutofillProps) {\n super(props);\n\n initializeComponentRef(this);\n this._async = new Async(this);\n\n this.state = {\n inputValue: props.defaultVisibleValue || '',\n isComposing: false,\n };\n }\n\n public get cursorLocation(): number | null {\n if (this._inputElement.current) {\n const inputElement = this._inputElement.current;\n if (inputElement.selectionDirection !== SELECTION_FORWARD) {\n return inputElement.selectionEnd;\n } else {\n return inputElement.selectionStart;\n }\n } else {\n return -1;\n }\n }\n\n public get isValueSelected(): boolean {\n return Boolean(this.inputElement && this.inputElement.selectionStart !== this.inputElement.selectionEnd);\n }\n\n public get value(): string {\n return this._getControlledValue() || this.state.inputValue || '';\n }\n\n public get selectionStart(): number | null {\n return this._inputElement.current ? this._inputElement.current.selectionStart : -1;\n }\n\n public get selectionEnd(): number | null {\n return this._inputElement.current ? this._inputElement.current.selectionEnd : -1;\n }\n\n public get inputElement(): HTMLInputElement | null {\n return this._inputElement.current;\n }\n\n public componentDidUpdate(_: any, _1: any, cursor: ICursorLocation | null) {\n const { suggestedDisplayValue, shouldSelectFullInputValueInComponentDidUpdate, preventValueSelection } = this.props;\n let differenceIndex = 0;\n\n if (preventValueSelection) {\n return;\n }\n\n const document = this.context?.window.document || getDocument(this._inputElement.current);\n const isFocused = this._inputElement.current && this._inputElement.current === document?.activeElement;\n\n if (\n isFocused &&\n this._autoFillEnabled &&\n this.value &&\n suggestedDisplayValue &&\n _doesTextStartWith(suggestedDisplayValue, this.value)\n ) {\n let shouldSelectFullRange = false;\n\n if (shouldSelectFullInputValueInComponentDidUpdate) {\n shouldSelectFullRange = shouldSelectFullInputValueInComponentDidUpdate();\n }\n\n if (shouldSelectFullRange) {\n this._inputElement.current!.setSelectionRange(0, suggestedDisplayValue.length, SELECTION_BACKWARD);\n } else {\n while (\n differenceIndex < this.value.length &&\n this.value[differenceIndex].toLocaleLowerCase() === suggestedDisplayValue[differenceIndex].toLocaleLowerCase()\n ) {\n differenceIndex++;\n }\n if (differenceIndex > 0) {\n this._inputElement.current!.setSelectionRange(\n differenceIndex,\n suggestedDisplayValue.length,\n 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\n public componentWillUnmount(): void {\n this._async.dispose();\n }\n\n public render(): JSX.Element {\n const nativeProps = getNativeProps>(this.props, inputProperties);\n const style = { ...this.props.style, fontFamily: 'inherit' };\n return (\n \n );\n }\n\n public focus() {\n this._inputElement.current && this._inputElement.current.focus();\n }\n\n public clear() {\n this._autoFillEnabled = true;\n this._updateValue('', false);\n this._inputElement.current && this._inputElement.current.setSelectionRange(0, 0);\n }\n\n public getSnapshotBeforeUpdate(): ICursorLocation | null {\n const inel = this._inputElement.current;\n\n if (inel && inel.selectionStart !== this.value.length) {\n return {\n start: inel.selectionStart ?? inel.value.length,\n end: inel.selectionEnd ?? inel.value.length,\n dir: (inel.selectionDirection as 'forward') || 'backward' || 'none',\n };\n }\n return null;\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 private _onCompositionStart = (ev: React.CompositionEvent) => {\n this.setState({ isComposing: true });\n this._autoFillEnabled = false;\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 private _onCompositionUpdate = () => {\n if (isIE11()) {\n this._updateValue(this._getCurrentInputValue(), true);\n }\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 private _onCompositionEnd = (ev: React.CompositionEvent) => {\n const inputValue = this._getCurrentInputValue();\n this._tryEnableAutofill(inputValue, this.value, false, true);\n this.setState({ isComposing: false });\n\n // Due to timing, this needs to be async, otherwise no text will be selected.\n this._async.setTimeout(() => {\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\n private _onClick = () => {\n if (this.value && this.value !== '' && this._autoFillEnabled) {\n this._autoFillEnabled = false;\n }\n };\n\n private _onKeyDown = (ev: React.KeyboardEvent) => {\n if (this.props.onKeyDown) {\n this.props.onKeyDown(ev);\n }\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\n if (!(ev.nativeEvent as any).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(prev => ({\n inputValue: this.props.suggestedDisplayValue || prev.inputValue,\n }));\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\n private _onInputChanged = (ev: React.FormEvent) => {\n const value: string = this._getCurrentInputValue(ev);\n\n if (!this.state.isComposing) {\n this._tryEnableAutofill(value, this.value, (ev.nativeEvent as any).isComposing);\n }\n\n // If it is not IE11 and currently composing, update the value\n if (!(isIE11() && this.state.isComposing)) {\n const nativeEventComposing = (ev.nativeEvent as any).isComposing;\n const isComposing = nativeEventComposing === undefined ? this.state.isComposing : nativeEventComposing;\n this._updateValue(value, isComposing);\n }\n };\n\n private _onChanged = (): void => {\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 private _getCurrentInputValue(ev?: React.FormEvent): string {\n if (ev && ev.target && (ev.target as HTMLInputElement).value) {\n return (ev.target as HTMLInputElement).value;\n } else if (this.inputElement && this.inputElement.value) {\n return this.inputElement.value;\n } else {\n return '';\n }\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 private _tryEnableAutofill(newValue: string, oldValue: string, isComposing?: boolean, isComposed?: boolean): void {\n if (\n !isComposing &&\n newValue &&\n this._inputElement.current &&\n this._inputElement.current.selectionStart === newValue.length &&\n !this._autoFillEnabled &&\n (newValue.length > oldValue.length || isComposed)\n ) {\n this._autoFillEnabled = true;\n }\n }\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 private _updateValue = (newValue: string, composing: boolean) => {\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\n // eslint-disable-next-line deprecation/deprecation\n const { onInputChange, onInputValueChange } = this.props;\n if (onInputChange) {\n newValue = onInputChange?.(newValue, composing) || '';\n }\n\n this.setState({ inputValue: newValue }, () => onInputValueChange?.(newValue, composing));\n };\n\n private _getDisplayValue(): string {\n if (this._autoFillEnabled) {\n return _getDisplayValue(this.value, this.props.suggestedDisplayValue);\n }\n\n return this.value;\n }\n\n private _getControlledValue(): string | undefined {\n const { value } = this.props;\n if (value === undefined || typeof value === 'string') {\n return value;\n }\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\n return value.toString();\n }\n}\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: string, suggestedDisplayValue?: string): string {\n let displayValue = inputValue;\n if (suggestedDisplayValue && inputValue && _doesTextStartWith(suggestedDisplayValue, displayValue)) {\n displayValue = suggestedDisplayValue;\n }\n return displayValue;\n}\n\nfunction _doesTextStartWith(text: string, startWith: string): boolean {\n if (!text || !startWith) {\n return false;\n }\n\n if (process.env.NODE_ENV !== 'production') {\n for (const val of [text, startWith]) {\n if (typeof val !== 'string') {\n throw new Error(\n `${\n Autofill.name\n // eslint-disable-next-line @fluentui/max-len\n } received non-string value \"${val}\" of type ${typeof val} from either input's value or suggestedDisplayValue`,\n );\n }\n }\n }\n\n return text.toLocaleLowerCase().indexOf(startWith.toLocaleLowerCase()) === 0;\n}\n","import * as React from 'react';\nimport { DelayedRender, classNamesFunction, getNativeProps, divProperties } from '../../Utilities';\nimport type { IAnnouncedProps, IAnnouncedStyles } from './Announced.types';\n\nconst getClassNames = classNamesFunction<{}, IAnnouncedStyles>();\n\n/**\n * {@docCategory Announced}\n */\nexport class AnnouncedBase extends React.Component {\n public static defaultProps: Partial = {\n 'aria-live': 'polite',\n };\n\n public render(): JSX.Element {\n const { message, styles, as: Root = 'div', className } = this.props;\n\n const classNames = getClassNames(styles, { className });\n\n return (\n \n \n
{message}
\n
\n
\n );\n }\n}\n","import { hiddenContentStyle } from '../../Styling';\nimport type { IStyleFunction } from '../../Utilities';\nimport type { IAnnouncedStyles, IAnnouncedStyleProps } from './Announced.types';\n\nexport const getStyles: IStyleFunction = props => {\n return {\n root: props.className,\n screenReaderText: hiddenContentStyle,\n };\n};\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { AnnouncedBase } from './Announced.base';\nimport { getStyles } from './Announced.styles';\nimport type { IAnnouncedProps, IAnnouncedStyles } from './Announced.types';\n\nexport const Announced: React.FunctionComponent = styled(\n AnnouncedBase,\n getStyles,\n undefined,\n { scope: 'Announced' },\n);\n","/******************************************************************************\nCopyright (c) Microsoft Corporation.\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\nPERFORMANCE OF THIS SOFTWARE.\n***************************************************************************** */\n/* global Reflect, Promise, SuppressedError, Symbol, Iterator */\n\nvar extendStatics = function(d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n};\n\nexport function __extends(d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n}\n\nexport var __assign = function() {\n __assign = Object.assign || function __assign(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n return t;\n }\n return __assign.apply(this, arguments);\n}\n\nexport function __rest(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}\n\nexport function __decorate(decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n}\n\nexport function __param(paramIndex, decorator) {\n return function (target, key) { decorator(target, key, paramIndex); }\n}\n\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\n function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\n var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\n var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\n var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\n var _, done = false;\n for (var i = decorators.length - 1; i >= 0; i--) {\n var context = {};\n for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\n for (var p in contextIn.access) context.access[p] = contextIn.access[p];\n context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\n var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\n if (kind === \"accessor\") {\n if (result === void 0) continue;\n if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\n if (_ = accept(result.get)) descriptor.get = _;\n if (_ = accept(result.set)) descriptor.set = _;\n if (_ = accept(result.init)) initializers.unshift(_);\n }\n else if (_ = accept(result)) {\n if (kind === \"field\") initializers.unshift(_);\n else descriptor[key] = _;\n }\n }\n if (target) Object.defineProperty(target, contextIn.name, descriptor);\n done = true;\n};\n\nexport function __runInitializers(thisArg, initializers, value) {\n var useValue = arguments.length > 2;\n for (var i = 0; i < initializers.length; i++) {\n value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\n }\n return useValue ? value : void 0;\n};\n\nexport function __propKey(x) {\n return typeof x === \"symbol\" ? x : \"\".concat(x);\n};\n\nexport function __setFunctionName(f, name, prefix) {\n if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\n return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\n};\n\nexport function __metadata(metadataKey, metadataValue) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\n}\n\nexport function __awaiter(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}\n\nexport function __generator(thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === \"function\" ? Iterator : Object).prototype);\n return g.next = verb(0), g[\"throw\"] = verb(1), g[\"return\"] = verb(2), typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (g && (g = 0, op[0] && (_ = 0)), _) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n}\n\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n});\n\nexport function __exportStar(m, o) {\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\n}\n\nexport function __values(o) {\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\n if (m) return m.call(o);\n if (o && typeof o.length === \"number\") return {\n next: function () {\n if (o && i >= o.length) o = void 0;\n return { value: o && o[i++], done: !o };\n }\n };\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\n}\n\nexport function __read(o, n) {\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\n if (!m) return o;\n var i = m.call(o), r, ar = [], e;\n try {\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\n }\n catch (error) { e = { error: error }; }\n finally {\n try {\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\n }\n finally { if (e) throw e.error; }\n }\n return ar;\n}\n\n/** @deprecated */\nexport function __spread() {\n for (var ar = [], i = 0; i < arguments.length; i++)\n ar = ar.concat(__read(arguments[i]));\n return ar;\n}\n\n/** @deprecated */\nexport function __spreadArrays() {\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\n r[k] = a[j];\n return r;\n}\n\nexport function __spreadArray(to, from, pack) {\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n if (ar || !(i in from)) {\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n ar[i] = from[i];\n }\n }\n return to.concat(ar || Array.prototype.slice.call(from));\n}\n\nexport function __await(v) {\n return this instanceof __await ? (this.v = v, this) : new __await(v);\n}\n\nexport function __asyncGenerator(thisArg, _arguments, generator) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\n return i = Object.create((typeof AsyncIterator === \"function\" ? AsyncIterator : Object).prototype), verb(\"next\"), verb(\"throw\"), verb(\"return\", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;\n function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }\n function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\n function fulfill(value) { resume(\"next\", value); }\n function reject(value) { resume(\"throw\", value); }\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\n}\n\nexport function __asyncDelegator(o) {\n var i, p;\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\n}\n\nexport function __asyncValues(o) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var m = o[Symbol.asyncIterator], i;\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\n}\n\nexport function __makeTemplateObject(cooked, raw) {\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\n return cooked;\n};\n\nvar __setModuleDefault = Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n};\n\nvar ownKeys = function(o) {\n ownKeys = Object.getOwnPropertyNames || function (o) {\n var ar = [];\n for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;\n return ar;\n };\n return ownKeys(o);\n};\n\nexport function __importStar(mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== \"default\") __createBinding(result, mod, k[i]);\n __setModuleDefault(result, mod);\n return result;\n}\n\nexport function __importDefault(mod) {\n return (mod && mod.__esModule) ? mod : { default: mod };\n}\n\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n}\n\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\n}\n\nexport function __classPrivateFieldIn(state, receiver) {\n if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\n return typeof state === \"function\" ? receiver === state : state.has(receiver);\n}\n\nexport function __addDisposableResource(env, value, async) {\n if (value !== null && value !== void 0) {\n if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\n var dispose, inner;\n if (async) {\n if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\n dispose = value[Symbol.asyncDispose];\n }\n if (dispose === void 0) {\n if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\n dispose = value[Symbol.dispose];\n if (async) inner = dispose;\n }\n if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\n if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };\n env.stack.push({ value: value, dispose: dispose, async: async });\n }\n else if (async) {\n env.stack.push({ async: true });\n }\n return value;\n}\n\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\n var e = new Error(message);\n return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\n};\n\nexport function __disposeResources(env) {\n function fail(e) {\n env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\n env.hasError = true;\n }\n var r, s = 0;\n function next() {\n while (r = env.stack.pop()) {\n try {\n if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);\n if (r.dispose) {\n var result = r.dispose.call(r.value);\n if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\n }\n else s |= 1;\n }\n catch (e) {\n fail(e);\n }\n }\n if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();\n if (env.hasError) throw env.error;\n }\n return next();\n}\n\nexport function __rewriteRelativeImportExtension(path, preserveJsx) {\n if (typeof path === \"string\" && /^\\.\\.?\\//.test(path)) {\n return path.replace(/\\.(tsx)$|((?:\\.d)?)((?:\\.[^./]+?)?)\\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {\n return tsx ? preserveJsx ? \".jsx\" : \".js\" : d && (!ext || !cm) ? m : (d + ext + \".\" + cm.toLowerCase() + \"js\");\n });\n }\n return path;\n}\n\nexport default {\n __extends,\n __assign,\n __rest,\n __decorate,\n __param,\n __esDecorate,\n __runInitializers,\n __propKey,\n __setFunctionName,\n __metadata,\n __awaiter,\n __generator,\n __createBinding,\n __exportStar,\n __values,\n __read,\n __spread,\n __spreadArrays,\n __spreadArray,\n __await,\n __asyncGenerator,\n __asyncDelegator,\n __asyncValues,\n __makeTemplateObject,\n __importStar,\n __importDefault,\n __classPrivateFieldGet,\n __classPrivateFieldSet,\n __classPrivateFieldIn,\n __addDisposableResource,\n __disposeResources,\n __rewriteRelativeImportExtension,\n};\n","import * as React from 'react';\nimport type { IRefObject, Point } from '@fluentui/utilities';\n\n/**\n * FocusZone component class interface.\n * {@docCategory FocusZone}\n */\nexport interface IFocusZone {\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 * @param bypassHiddenElements - If true, focus will be not be set on hidden elements.\n * @returns True if focus could be set to an active element, false if no operation was taken.\n */\n focus(forceIntoFirstElement?: boolean, bypassHiddenElements?: boolean): boolean;\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 focusLast(): boolean;\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 childElement - 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 focusElement(childElement?: HTMLElement, forceAlignment?: boolean): boolean;\n\n /**\n * Forces horizontal alignment in the context of vertical arrowing to use specific point as the reference, rather\n * than a center based on the last horizontal motion.\n * @param point - the new reference point.\n */\n setFocusAlignment(point: Point): void;\n}\n\n/**\n * FocusZone component props.\n * {@docCategory FocusZone}\n */\nexport interface IFocusZoneProps extends React.HTMLAttributes {\n /**\n * Optional callback to access the IFocusZone interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject;\n\n /**\n * Optional callback to access the root DOM element.\n * @deprecated Temporary solution which will be replaced with ref in the V8 release.\n */\n elementRef?: React.Ref;\n\n /**\n * Additional class name to provide on the root element, in addition to the ms-FocusZone class.\n */\n className?: string;\n\n /**\n * Defines which arrows to react to.\n * @defaultvalue FocusZoneDirection.bidirectional\n */\n direction?: FocusZoneDirection;\n\n /**\n * Optionally defines the initial tabbable element inside the FocusZone.\n * If a string is passed then it is treated as a selector for identifying the initial tabbable element.\n * If a function is passed then it uses the root element as a parameter to return the initial tabbable element.\n */\n defaultTabbableElement?: string | ((root: HTMLElement) => HTMLElement);\n\n /**\n * Optionally provide a selector for identifying the initial active element.\n * @deprecated Use `defaultTabbableElement` instead.\n */\n defaultActiveElement?: string;\n\n /**\n * Determines if a default tabbable element should be force focused on FocusZone mount.\n * @default false\n */\n shouldFocusOnMount?: boolean;\n\n /**\n * If set, the FocusZone will not be tabbable and keyboard navigation will be disabled.\n * This does not affect disabled attribute of any child.\n */\n disabled?: boolean;\n\n /**\n * Element type the root element will use. Default is \"div\".\n * @deprecated Use `as` instead.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n elementType?: any /* TODO should be `keyof React.ReactHTML`, tracking with https://github.com/Microsoft/TypeScript/issues/30050 */;\n\n /**\n * A component that should be used as the root element of the FocusZone component.\n */\n as?: React.ElementType;\n\n /**\n * If set, will cycle to the beginning of the targets once the user navigates to the\n * next target while at the end, and to the end when navigate to the previous at the beginning.\n */\n isCircularNavigation?: boolean;\n\n /**\n * If provided, this callback will be executed on keypresses to determine if the user\n * intends to navigate into the inner zone. Returning true will ask the first inner zone to\n * set focus.\n * @deprecated Use `shouldEnterInnerZone` instead.\n */\n isInnerZoneKeystroke?: (ev: React.KeyboardEvent) => boolean;\n\n /**\n * Callback function that will be executed on keypresses to determine if the user intends to navigate into\n * the inner (nested) zone. Returning true will ask the first inner zone to set focus.\n */\n shouldEnterInnerZone?: (ev: React.KeyboardEvent) => boolean;\n\n /**\n * Sets the aria-labelledby attribute.\n * @deprecated Directly use the `aria-labelledby` attribute instead\n */\n ariaLabelledBy?: string;\n\n /**\n * Sets the aria-describedby attribute.\n * @deprecated Directly use the `aria-describedby` attribute instead\n */\n ariaDescribedBy?: string;\n\n /**\n * Callback for when one of immediate children elements gets active by getting focused\n * or by having one of its respective children elements focused.\n */\n onActiveElementChanged?: (element?: HTMLElement, ev?: React.FocusEvent) => void;\n\n /**\n * @deprecated Div props provided to the FocusZone will be mixed into the root element.\n * Deprecated at v1.12.1.\n */\n rootProps?: React.HTMLAttributes;\n\n /**\n * Callback method for determining if focus should indeed be set on the given element.\n * @param element - The child element within the zone to focus.\n * @returns True if focus should be set to the given element, false to avoid setting focus.\n * @deprecated Use `shouldReceiveFocus` instead.\n */\n onBeforeFocus?: (childElement?: HTMLElement) => boolean;\n\n /**\n * Callback method for determining if focus should indeed be set on the given element.\n * @param element - The child element within the zone to focus.\n * @returns True if focus should be set to the given element, false to avoid setting focus.\n */\n shouldReceiveFocus?: (childElement?: HTMLElement) => boolean;\n\n /** Allows focus to park on root when focus is in the `FocusZone` at render time. */\n allowFocusRoot?: boolean;\n\n /**\n * Allows tab key to be handled to tab through a list of items in the focus zone,\n * an unfortunate side effect is that users will not be able to tab out of the focus zone\n * and have to hit escape or some other key.\n * @deprecated Use `handleTabKey` instead.\n *\n */\n allowTabKey?: boolean;\n\n /**\n * Allows tab key to be handled to tab through a list of items in the focus zone,\n * an unfortunate side effect is that users will not be able to tab out of the focus zone\n * and have to hit escape or some other key.\n */\n handleTabKey?: FocusZoneTabbableElements;\n\n /**\n * If true and FocusZone's root element (container) receives focus, the focus will land either on the\n * defaultTabbableElement (if set) or on the first tabbable element of this FocusZone.\n * Usually a case for nested focus zones, when the nested focus zone's container is a focusable element.\n */\n shouldFocusInnerElementWhenReceivedFocus?: boolean;\n\n /**\n * If true and TAB key is not handled by FocusZone, resets current active element to null value.\n * For example, when roving index is not desirable and focus should always reset to the default tabbable element.\n */\n shouldResetActiveElementWhenTabFromZone?: boolean;\n\n /**\n * Determines whether the FocusZone will walk up the DOM trying to invoke click callbacks on focusable elements on\n * Enter and Space keydowns to ensure accessibility for tags that don't guarantee this behavior.\n * @defaultvalue true\n */\n shouldRaiseClicks?: boolean;\n\n /**\n * Relates to `shouldRaiseClicks`.\n * Allows the click event raising for the \"Enter\" key to be set independently from `shouldRaiseClicks`.\n * Inherits the value of `shouldRaiseClicks` if not set explicitly.\n */\n shouldRaiseClicksOnEnter?: boolean;\n\n /**\n * Relates to `shouldRaiseClicks`.\n * Allows the click event raising for the \"Space\" key to be set independently from `shouldRaiseClicks`.\n * Inherits the value of `shouldRaiseClicks` if not set explicitly.\n */\n shouldRaiseClicksOnSpace?: boolean;\n\n /**\n * A callback method to determine if an input or textarea element should lose focus on arrow keys\n * @param inputElement - The input or textarea element which is to lose focus.\n * @returns True if input element should loose focus or false otherwise.\n */\n shouldInputLoseFocusOnArrowKey?: (inputElement: HTMLInputElement | HTMLTextAreaElement) => boolean;\n\n /**\n * Determines whether to disable the paging support for Page Up and Page Down keyboard scenarios.\n * @defaultvalue false\n */\n pagingSupportDisabled?: boolean;\n\n /**\n * Determines whether to check for data-no-horizontal-wrap or data-no-vertical-wrap attributes\n * when determining how to move focus\n * @defaultvalue false\n */\n checkForNoWrap?: boolean;\n\n /**\n * Whether the FocusZone should allow focus events to propagate past the FocusZone.\n * @deprecated Use `stopFocusPropagation` instead.\n */\n doNotAllowFocusEventToPropagate?: boolean;\n\n /**\n * Whether the FocusZone should allow focus events to propagate past the FocusZone.\n */\n stopFocusPropagation?: boolean;\n\n /**\n * Callback to notify creators that focus has been set on the FocusZone\n * @deprecated Use `onFocus` instead.\n */\n onFocusNotification?: () => void;\n\n /**\n * Callback called when \"focus\" event triggered in FocusZone.\n * @param event - React's original FocusEvent.\n */\n onFocus?: (event: React.FocusEvent) => void;\n\n /**\n * If true, FocusZone prevents the default behavior of Keyboard events when changing focus between elements.\n * @defaultvalue false\n */\n preventDefaultWhenHandled?: boolean;\n\n /**\n * If true, prevents the FocusZone from attempting to restore the focus to the inner element when the focus is on the\n * root element after componentDidUpdate.\n * @defaultvalue false\n */\n preventFocusRestoration?: boolean;\n}\n/**\n * {@docCategory FocusZone}\n */\nexport const FocusZoneTabbableElements = {\n /** Tabbing is not allowed */\n none: 0 as 0,\n\n /** All tabbing action is allowed */\n all: 1 as 1,\n\n /** Tabbing is allowed only on input elements */\n inputOnly: 2 as 2,\n};\n\n/**\n * {@docCategory FocusZone}\n */\nexport type FocusZoneTabbableElements = (typeof FocusZoneTabbableElements)[keyof typeof FocusZoneTabbableElements];\n\n/**\n * {@docCategory FocusZone}\n */\nexport enum FocusZoneDirection {\n /** Only react to up/down arrows. */\n vertical = 0,\n\n /** Only react to left/right arrows. */\n horizontal = 1,\n\n /** React to all arrows. */\n bidirectional = 2,\n\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 domOrder = 3,\n}\n","import * as React from 'react';\nimport { FocusZoneDirection, FocusZoneTabbableElements } from './FocusZone.types';\nimport {\n KeyCodes,\n css,\n elementContains,\n getDocument,\n getElementIndexPath,\n getFocusableByIndexPath,\n getId,\n getNativeProps,\n getNextElement,\n getParent,\n getPreviousElement,\n getRTL,\n htmlElementProperties,\n initializeComponentRef,\n isElementFocusSubZone,\n isElementFocusZone,\n isElementTabbable,\n shouldWrapFocus,\n warnDeprecations,\n portalContainsElement,\n findScrollableParent,\n createMergedRef,\n isElementVisibleAndNotHidden,\n MergeStylesShadowRootContext,\n} from '@fluentui/utilities';\nimport { mergeStyles } from '@fluentui/merge-styles';\nimport { getTheme } from '@fluentui/style-utilities';\nimport type { IFocusZone, IFocusZoneProps } from './FocusZone.types';\nimport type { Point } from '@fluentui/utilities';\nimport type { ITheme } from '@fluentui/style-utilities';\n\nconst IS_FOCUSABLE_ATTRIBUTE = 'data-is-focusable';\nconst IS_ENTER_DISABLED_ATTRIBUTE = 'data-disable-click-on-enter';\nconst FOCUSZONE_ID_ATTRIBUTE = 'data-focuszone-id';\nconst TABINDEX = 'tabindex';\nconst NO_VERTICAL_WRAP = 'data-no-vertical-wrap';\nconst NO_HORIZONTAL_WRAP = 'data-no-horizontal-wrap';\nconst LARGE_DISTANCE_FROM_CENTER = 999999999;\nconst LARGE_NEGATIVE_DISTANCE_FROM_CENTER = -999999999;\n\nlet focusZoneStyles: string;\n\nconst focusZoneClass: string = 'ms-FocusZone';\n\n/**\n * Raises a click on a target element based on a keyboard event.\n */\nfunction raiseClickFromKeyboardEvent(target: Element, ev?: React.KeyboardEvent): void {\n let event;\n if (typeof MouseEvent === 'function') {\n event = new MouseEvent('click', {\n ctrlKey: ev?.ctrlKey,\n metaKey: ev?.metaKey,\n shiftKey: ev?.shiftKey,\n altKey: ev?.altKey,\n bubbles: ev?.bubbles,\n cancelable: ev?.cancelable,\n });\n } else {\n // eslint-disable-next-line no-restricted-globals\n event = document.createEvent('MouseEvents');\n // eslint-disable-next-line deprecation/deprecation\n event.initMouseEvent(\n 'click',\n ev ? ev.bubbles : false,\n ev ? ev.cancelable : false,\n // eslint-disable-next-line no-restricted-globals\n 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,\n ev ? ev.altKey : false,\n ev ? ev.shiftKey : false,\n ev ? ev.metaKey : false,\n 0, // button\n null, // relatedTarget\n );\n }\n\n target.dispatchEvent(event);\n}\n\n// Helper function that will return a class for when the root is focused\nfunction getRootClass(): string {\n if (!focusZoneStyles) {\n focusZoneStyles = mergeStyles(\n {\n selectors: {\n ':focus': {\n outline: 'none',\n },\n },\n },\n focusZoneClass,\n );\n }\n return focusZoneStyles;\n}\n\nconst _allInstances: {\n [key: string]: FocusZone;\n} = {};\nconst _outerZones: Set = new Set();\n\nconst ALLOWED_INPUT_TYPES = ['text', 'number', 'password', 'email', 'tel', 'url', 'search', 'textarea'];\n\nconst ALLOW_VIRTUAL_ELEMENTS = false;\n\ninterface IFocusZonePropsWithTabster extends IFocusZoneProps {\n 'data-tabster': string;\n}\n\nexport class FocusZone extends React.Component implements IFocusZone {\n public static contextType = MergeStylesShadowRootContext;\n\n public static defaultProps: IFocusZoneProps = {\n isCircularNavigation: false,\n direction: FocusZoneDirection.bidirectional,\n shouldRaiseClicks: true,\n // Hardcoding uncontrolled flag for proper interop with FluentUI V9.\n 'data-tabster': '{\"uncontrolled\": {}}',\n } as IFocusZonePropsWithTabster;\n\n private _root: React.RefObject = React.createRef();\n private _mergedRef = createMergedRef();\n\n private _id: string;\n\n /** The most recently focused child element. */\n private _activeElement: HTMLElement | null;\n\n /**\n * The index path to the last focused child element.\n */\n private _lastIndexPath: number[] | undefined;\n\n /**\n * Flag to define when we've intentionally parked focus on the root element to temporarily\n * hold focus until items appear within the zone.\n */\n private _isParked: boolean;\n\n /** The child element with tabindex=0. */\n private _defaultFocusElement: HTMLElement | null;\n private _focusAlignment: Point;\n private _isInnerZone: boolean;\n private _parkedTabIndex: string | null | undefined;\n\n /** Used to allow moving to next focusable element even when we're focusing on a input element when pressing tab */\n private _processingTabKey: boolean;\n\n /** Provides granular control over `shouldRaiseClicks` and should be preferred over `props.shouldRaiseClicks`. */\n private _shouldRaiseClicksOnEnter: boolean;\n private _shouldRaiseClicksOnSpace: boolean;\n\n private _inShadowRoot: boolean;\n\n /** Used for testing purposes only. */\n public static getOuterZones(): number {\n return _outerZones.size;\n }\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 private static _onKeyDownCapture(ev: KeyboardEvent): void {\n // eslint-disable-next-line deprecation/deprecation, @fluentui/deprecated-keyboard-event-props\n if (ev.which === KeyCodes.tab) {\n _outerZones.forEach((zone: FocusZone) => zone._updateTabIndexes());\n }\n }\n\n constructor(props: IFocusZoneProps) {\n super(props);\n // Manage componentRef resolution.\n initializeComponentRef(this);\n\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\n this._id = getId('FocusZone');\n\n this._focusAlignment = {\n left: 0,\n top: 0,\n };\n\n this._processingTabKey = false;\n\n const shouldRaiseClicksFallback = props.shouldRaiseClicks ?? FocusZone.defaultProps.shouldRaiseClicks ?? true;\n this._shouldRaiseClicksOnEnter = props.shouldRaiseClicksOnEnter ?? shouldRaiseClicksFallback;\n this._shouldRaiseClicksOnSpace = props.shouldRaiseClicksOnSpace ?? shouldRaiseClicksFallback;\n }\n\n public componentDidMount(): void {\n const { current: root } = this._root;\n\n this._inShadowRoot = !!this.context?.shadowRoot;\n\n _allInstances[this._id] = this;\n\n if (root) {\n let parentElement = getParent(root, ALLOW_VIRTUAL_ELEMENTS);\n\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\n if (!this._isInnerZone) {\n _outerZones.add(this);\n\n this._root.current && this._root.current.addEventListener('keydown', FocusZone._onKeyDownCapture, true);\n }\n\n this._root.current && this._root.current.addEventListener('blur', this._onBlur, true);\n\n // Assign initial tab indexes so that we can set initial focus as appropriate.\n this._updateTabIndexes();\n\n if (this.props.defaultTabbableElement && typeof this.props.defaultTabbableElement === 'string') {\n this._activeElement = this._getDocument().querySelector(this.props.defaultTabbableElement) as HTMLElement;\n // eslint-disable-next-line deprecation/deprecation\n } else if (this.props.defaultActiveElement) {\n // eslint-disable-next-line deprecation/deprecation\n this._activeElement = this._getDocument().querySelector(this.props.defaultActiveElement) as HTMLElement;\n }\n\n if (this.props.shouldFocusOnMount) {\n this.focus();\n }\n }\n }\n\n public componentDidUpdate(): void {\n const { current: root } = this._root;\n const doc = this._getDocument();\n this._inShadowRoot = !!this.context?.shadowRoot;\n\n // If either _activeElement or _defaultFocusElement are no longer contained by _root,\n // reset those variables (and update tab indexes) to avoid memory leaks\n if (\n (this._activeElement && !elementContains(this._root.current, this._activeElement, ALLOW_VIRTUAL_ELEMENTS)) ||\n (this._defaultFocusElement &&\n !elementContains(this._root.current, this._defaultFocusElement, ALLOW_VIRTUAL_ELEMENTS))\n ) {\n this._activeElement = null;\n this._defaultFocusElement = null;\n this._updateTabIndexes();\n }\n\n if (\n !this.props.preventFocusRestoration &&\n doc &&\n this._lastIndexPath &&\n (doc.activeElement === doc.body || doc.activeElement === null || doc.activeElement === root)\n ) {\n // The element has been removed after the render, attempt to restore focus.\n const elementToFocus = getFocusableByIndexPath(root as HTMLElement, this._lastIndexPath);\n\n if (elementToFocus) {\n this._setActiveElement(elementToFocus, true);\n elementToFocus.focus();\n this._setParkedFocus(false);\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\n public componentWillUnmount(): void {\n delete _allInstances[this._id];\n\n if (!this._isInnerZone) {\n _outerZones.delete(this);\n\n this._root.current && this._root.current.removeEventListener('keydown', FocusZone._onKeyDownCapture, true);\n }\n\n if (this._root.current) {\n this._root.current.removeEventListener('blur', this._onBlur, true);\n }\n\n this._activeElement = null;\n this._defaultFocusElement = null;\n }\n\n public render(): React.ReactNode {\n // eslint-disable-next-line deprecation/deprecation\n const { as: tag, elementType, rootProps, ariaDescribedBy, ariaLabelledBy, className } = this.props;\n const divProps = getNativeProps(this.props, htmlElementProperties);\n\n const Tag = tag || elementType || 'div';\n\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\n // Only support RTL defined in global theme, not contextual theme/RTL.\n const theme: ITheme = getTheme();\n\n return (\n ) => this._onKeyDown(ev, theme)}\n onFocus={this._onFocus}\n onMouseDownCapture={this._onMouseDown}\n >\n {this.props.children}\n \n );\n }\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 * @param bypassHiddenElements - If true, focus will be not be set on hidden elements.\n * @returns True if focus could be set to an active element, false if no operation was taken.\n */\n public focus(forceIntoFirstElement: boolean = false, bypassHiddenElements: boolean = false): boolean {\n if (this._root.current) {\n if (\n !forceIntoFirstElement &&\n this._root.current.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'true' &&\n this._isInnerZone\n ) {\n const ownerZoneElement = this._getOwnerZone(this._root.current) as HTMLElement;\n\n if (ownerZoneElement !== this._root.current) {\n const ownerZone = _allInstances[ownerZoneElement.getAttribute(FOCUSZONE_ID_ATTRIBUTE) as string];\n\n return !!ownerZone && ownerZone.focusElement(this._root.current);\n }\n\n return false;\n } else if (\n !forceIntoFirstElement &&\n this._activeElement &&\n elementContains(this._root.current, this._activeElement) &&\n isElementTabbable(this._activeElement, undefined, this._inShadowRoot) &&\n (!bypassHiddenElements || isElementVisibleAndNotHidden(this._activeElement))\n ) {\n this._activeElement.focus();\n return true;\n } else {\n const firstChild = this._root.current.firstChild as HTMLElement;\n\n return this.focusElement(\n getNextElement(\n this._root.current,\n firstChild,\n true,\n undefined,\n undefined,\n undefined,\n undefined,\n undefined,\n bypassHiddenElements,\n ) as HTMLElement,\n );\n }\n }\n return false;\n }\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 public focusLast(): boolean {\n if (this._root.current) {\n const lastChild = this._root.current && (this._root.current.lastChild as HTMLElement | null);\n\n return this.focusElement(getPreviousElement(this._root.current, lastChild, true, true, true) as HTMLElement);\n }\n\n return false;\n }\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 public focusElement(element: HTMLElement, forceAlignment?: boolean): boolean {\n // eslint-disable-next-line deprecation/deprecation\n const { onBeforeFocus, shouldReceiveFocus } = this.props;\n\n if ((shouldReceiveFocus && !shouldReceiveFocus(element)) || (onBeforeFocus && !onBeforeFocus(element))) {\n return false;\n }\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\n return true;\n }\n\n return false;\n }\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 public setFocusAlignment(point: Point): void {\n this._focusAlignment = point;\n }\n\n public get defaultFocusElement() {\n return this._defaultFocusElement;\n }\n\n public get activeElement() {\n return this._activeElement;\n }\n\n private _evaluateFocusBeforeRender(): void {\n const { current: root } = this._root;\n\n const doc = this._getDocument();\n if (doc) {\n const focusedElement = doc.activeElement as HTMLElement;\n\n // Only update the index path if we are not parked on the root.\n if (focusedElement !== root) {\n const shouldRestoreFocus = elementContains(root, focusedElement, false);\n this._lastIndexPath = shouldRestoreFocus ? getElementIndexPath(root as HTMLElement, focusedElement) : undefined;\n }\n }\n }\n\n private _onFocus = (ev: React.FocusEvent): void => {\n if (this._portalContainsElement(ev.target as HTMLElement)) {\n // If the event target is inside a portal do not process the event.\n return;\n }\n\n const {\n onActiveElementChanged,\n // eslint-disable-next-line deprecation/deprecation\n doNotAllowFocusEventToPropagate,\n stopFocusPropagation,\n // eslint-disable-next-line deprecation/deprecation\n onFocusNotification,\n onFocus,\n shouldFocusInnerElementWhenReceivedFocus,\n defaultTabbableElement,\n } = this.props;\n const isImmediateDescendant = this._isImmediateDescendantOfZone(ev.target as HTMLElement);\n let newActiveElement: HTMLElement | null | undefined;\n\n if (isImmediateDescendant) {\n newActiveElement = ev.target as HTMLElement;\n } else {\n let parentElement = ev.target as HTMLElement;\n\n while (parentElement && parentElement !== this._root.current) {\n if (\n isElementTabbable(parentElement, undefined, this._inShadowRoot) &&\n this._isImmediateDescendantOfZone(parentElement)\n ) {\n newActiveElement = parentElement;\n break;\n }\n parentElement = getParent(parentElement, ALLOW_VIRTUAL_ELEMENTS) as HTMLElement;\n }\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 const maybeElementToFocus =\n defaultTabbableElement &&\n typeof defaultTabbableElement === 'function' &&\n this._root.current &&\n defaultTabbableElement(this._root.current);\n\n // try to focus defaultTabbable element\n if (maybeElementToFocus && isElementTabbable(maybeElementToFocus, undefined, this._inShadowRoot)) {\n newActiveElement = maybeElementToFocus;\n maybeElementToFocus.focus();\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\n const initialElementFocused = !this._activeElement;\n\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\n this._activeElement = newActiveElement;\n\n if (initialElementFocused) {\n this._updateTabIndexes();\n }\n }\n\n if (onActiveElementChanged) {\n onActiveElementChanged(this._activeElement as HTMLElement, ev);\n }\n\n if (stopFocusPropagation || doNotAllowFocusEventToPropagate) {\n ev.stopPropagation();\n }\n\n if (onFocus) {\n onFocus(ev);\n } else if (onFocusNotification) {\n onFocusNotification();\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 private _setParkedFocus(isParked: boolean): void {\n const { current: root } = this._root;\n\n if (root && this._isParked !== isParked) {\n this._isParked = isParked;\n\n if (isParked) {\n if (!this.props.allowFocusRoot) {\n this._parkedTabIndex = root.getAttribute('tabindex');\n root.setAttribute('tabindex', '-1');\n }\n root.focus();\n } else if (!this.props.allowFocusRoot) {\n if (this._parkedTabIndex) {\n root.setAttribute('tabindex', this._parkedTabIndex);\n this._parkedTabIndex = undefined;\n } else {\n root.removeAttribute('tabindex');\n }\n }\n }\n }\n\n private _onBlur = (): void => {\n this._setParkedFocus(false);\n };\n\n private _onMouseDown = (ev: React.MouseEvent): void => {\n if (this._portalContainsElement(ev.target as HTMLElement)) {\n // If the event target is inside a portal do not process the event.\n return;\n }\n\n const { disabled } = this.props;\n\n if (disabled) {\n return;\n }\n\n let target = ev.target as HTMLElement;\n const path = [];\n\n while (target && target !== this._root.current) {\n path.push(target);\n target = getParent(target, ALLOW_VIRTUAL_ELEMENTS) as HTMLElement;\n }\n\n while (path.length) {\n target = path.pop() as HTMLElement;\n\n if (target && isElementTabbable(target, undefined, this._inShadowRoot)) {\n this._setActiveElement(target, true);\n }\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 private _setActiveElement(element: HTMLElement, forceAlignment?: boolean): void {\n const previousActiveElement = this._activeElement;\n\n this._activeElement = element;\n\n if (previousActiveElement) {\n if (isElementFocusZone(previousActiveElement)) {\n this._updateTabIndexes(previousActiveElement);\n }\n\n previousActiveElement.tabIndex = -1;\n }\n\n if (this._activeElement) {\n if (!this._focusAlignment || forceAlignment) {\n this._setFocusAlignment(element, true, true);\n }\n\n this._activeElement.tabIndex = 0;\n }\n }\n\n private _preventDefaultWhenHandled(ev: React.KeyboardEvent): void {\n this.props.preventDefaultWhenHandled && ev.preventDefault();\n }\n\n /**\n * Handle the keystrokes.\n */\n private _onKeyDown = (ev: React.KeyboardEvent, theme: ITheme): boolean | undefined => {\n if (this._portalContainsElement(ev.target as HTMLElement)) {\n // If the event target is inside a portal do not process the event.\n return;\n }\n\n // eslint-disable-next-line deprecation/deprecation\n const { direction, disabled, isInnerZoneKeystroke, pagingSupportDisabled, shouldEnterInnerZone } = this.props;\n\n if (disabled) {\n return;\n }\n\n if (this.props.onKeyDown) {\n this.props.onKeyDown(ev);\n }\n\n // If the default has been prevented, do not process keyboard events.\n if (ev.isDefaultPrevented()) {\n return;\n }\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\n if (\n ((shouldEnterInnerZone && shouldEnterInnerZone(ev)) || (isInnerZoneKeystroke && isInnerZoneKeystroke(ev))) &&\n this._isImmediateDescendantOfZone(ev.target as HTMLElement)\n ) {\n // Try to focus\n const innerZone = this._getFirstInnerZone();\n\n if (innerZone) {\n if (!innerZone.focus(true)) {\n return;\n }\n } else if (isElementFocusSubZone(ev.target as HTMLElement)) {\n if (\n !this.focusElement(\n getNextElement(\n ev.target as HTMLElement,\n (ev.target as HTMLElement).firstChild as HTMLElement,\n true,\n ) as HTMLElement,\n )\n ) {\n return;\n }\n } else {\n return;\n }\n } else if (ev.altKey) {\n return;\n } else {\n // eslint-disable-next-line @fluentui/deprecated-keyboard-event-props, deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.space:\n if (this._shouldRaiseClicksOnSpace && this._tryInvokeClickForFocusable(ev.target as HTMLElement, ev)) {\n break;\n }\n return;\n\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\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\n case KeyCodes.up:\n if (direction !== FocusZoneDirection.horizontal) {\n this._preventDefaultWhenHandled(ev);\n if (this._moveFocusUp()) {\n break;\n }\n }\n return;\n\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\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 as HTMLElement))\n ) {\n let focusChanged = false;\n this._processingTabKey = true;\n if (\n direction === FocusZoneDirection.vertical ||\n !this._shouldWrapFocus(this._activeElement as HTMLElement, NO_HORIZONTAL_WRAP)\n ) {\n focusChanged = ev.shiftKey ? this._moveFocusUp() : this._moveFocusDown();\n } else {\n const 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 } else if (this.props.shouldResetActiveElementWhenTabFromZone) {\n this._activeElement = null;\n }\n }\n return;\n\n case KeyCodes.home:\n if (\n this._isContentEditableElement(ev.target as HTMLElement) ||\n (this._isElementInput(ev.target as HTMLElement) &&\n !this._shouldInputLoseFocus(ev.target as HTMLInputElement, false))\n ) {\n return false;\n }\n const firstChild = this._root.current && (this._root.current.firstChild as HTMLElement | null);\n if (\n this._root.current &&\n firstChild &&\n this.focusElement(getNextElement(this._root.current, firstChild, true) as HTMLElement)\n ) {\n break;\n }\n return;\n\n case KeyCodes.end:\n if (\n this._isContentEditableElement(ev.target as HTMLElement) ||\n (this._isElementInput(ev.target as HTMLElement) &&\n !this._shouldInputLoseFocus(ev.target as HTMLInputElement, true))\n ) {\n return false;\n }\n\n const lastChild = this._root.current && (this._root.current.lastChild as HTMLElement | null);\n if (\n this._root.current &&\n this.focusElement(getPreviousElement(this._root.current, lastChild, true, true, true) as HTMLElement)\n ) {\n break;\n }\n return;\n\n case KeyCodes.enter:\n if (this._shouldRaiseClicksOnEnter && this._tryInvokeClickForFocusable(ev.target as HTMLElement, ev)) {\n break;\n }\n return;\n\n default:\n return;\n }\n }\n\n ev.preventDefault();\n ev.stopPropagation();\n };\n\n /**\n * Walk up the dom try to find a focusable element.\n */\n private _tryInvokeClickForFocusable(targetElement: HTMLElement, ev?: React.KeyboardEvent): boolean {\n let target = targetElement;\n if (target === this._root.current) {\n return false;\n }\n\n do {\n if (\n target.tagName === 'BUTTON' ||\n target.tagName === 'A' ||\n target.tagName === 'INPUT' ||\n target.tagName === 'TEXTAREA' ||\n target.tagName === 'SUMMARY'\n ) {\n return false;\n }\n\n if (\n this._isImmediateDescendantOfZone(target) &&\n target.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'true' &&\n target.getAttribute(IS_ENTER_DISABLED_ATTRIBUTE) !== 'true'\n ) {\n raiseClickFromKeyboardEvent(target, ev);\n return true;\n }\n\n target = getParent(target, ALLOW_VIRTUAL_ELEMENTS) as HTMLElement;\n } while (target !== this._root.current);\n\n return false;\n }\n\n /**\n * Traverse to find first child zone.\n */\n private _getFirstInnerZone(rootElement?: HTMLElement | null): FocusZone | null {\n rootElement = rootElement || this._activeElement || this._root.current;\n\n if (!rootElement) {\n return null;\n }\n\n if (isElementFocusZone(rootElement)) {\n return _allInstances[rootElement.getAttribute(FOCUSZONE_ID_ATTRIBUTE) as string];\n }\n\n let child = rootElement.firstElementChild as HTMLElement | null;\n\n while (child) {\n if (isElementFocusZone(child)) {\n return _allInstances[child.getAttribute(FOCUSZONE_ID_ATTRIBUTE) as string];\n }\n const match = this._getFirstInnerZone(child);\n\n if (match) {\n return match;\n }\n\n child = child.nextElementSibling as HTMLElement | null;\n }\n\n return null;\n }\n\n private _moveFocus(\n isForward: boolean,\n // eslint-disable-next-line deprecation/deprecation\n getDistanceFromCenter: (activeRect: ClientRect, targetRect: ClientRect) => number,\n ev?: Event,\n useDefaultWrap: boolean = true,\n ): boolean {\n let element = this._activeElement;\n let candidateDistance = -1;\n let candidateElement: HTMLElement | undefined = undefined;\n let changedFocus = false;\n const isBidirectional = this.props.direction === FocusZoneDirection.bidirectional;\n\n if (!element || !this._root.current) {\n return false;\n }\n\n if (this._isElementInput(element)) {\n if (!this._shouldInputLoseFocus(element as HTMLInputElement, isForward)) {\n return false;\n }\n }\n\n const activeRect = isBidirectional ? element.getBoundingClientRect() : null;\n\n do {\n element = (\n isForward ? getNextElement(this._root.current, element) : getPreviousElement(this._root.current, element)\n ) as HTMLElement;\n\n if (isBidirectional) {\n if (element) {\n const targetRect = element.getBoundingClientRect();\n // eslint-disable-next-line deprecation/deprecation\n const elementDistance = getDistanceFromCenter(activeRect as ClientRect, targetRect);\n\n if (elementDistance === -1 && candidateDistance === -1) {\n candidateElement = element;\n break;\n }\n\n if (elementDistance > -1 && (candidateDistance === -1 || elementDistance < candidateDistance)) {\n candidateDistance = elementDistance;\n candidateElement = element;\n }\n\n if (candidateDistance >= 0 && elementDistance < 0) {\n break;\n }\n }\n } else {\n candidateElement = element;\n break;\n }\n } while (element);\n\n // Focus the closest candidate\n if (candidateElement && candidateElement !== this._activeElement) {\n changedFocus = true;\n this.focusElement(candidateElement);\n } else if (this.props.isCircularNavigation && useDefaultWrap) {\n if (isForward) {\n return this.focusElement(\n getNextElement(this._root.current, this._root.current.firstElementChild as HTMLElement, true) as HTMLElement,\n );\n } else {\n return this.focusElement(\n getPreviousElement(\n this._root.current,\n this._root.current.lastElementChild as HTMLElement,\n true,\n true,\n true,\n ) as HTMLElement,\n );\n }\n }\n\n return changedFocus;\n }\n\n private _moveFocusDown(): boolean {\n let targetTop = -1;\n // eslint-disable-next-line deprecation/deprecation\n const leftAlignment = this._focusAlignment.left || this._focusAlignment.x || 0;\n\n if (\n // eslint-disable-next-line deprecation/deprecation\n this._moveFocus(true, (activeRect: ClientRect, targetRect: ClientRect) => {\n let 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 const targetRectTop = Math.floor(targetRect.top);\n const activeRectBottom = Math.floor(activeRect.bottom);\n\n if (targetRectTop < activeRectBottom) {\n if (!this._shouldWrapFocus(this._activeElement as HTMLElement, NO_VERTICAL_WRAP)) {\n return LARGE_NEGATIVE_DISTANCE_FROM_CENTER;\n }\n\n return LARGE_DISTANCE_FROM_CENTER;\n }\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 } else {\n distance = Math.abs(targetRect.left + targetRect.width / 2 - leftAlignment);\n }\n }\n\n return distance;\n })\n ) {\n this._setFocusAlignment(this._activeElement as HTMLElement, false, true);\n return true;\n }\n\n return false;\n }\n\n private _moveFocusUp(): boolean {\n let targetTop = -1;\n // eslint-disable-next-line deprecation/deprecation\n const leftAlignment = this._focusAlignment.left || this._focusAlignment.x || 0;\n\n if (\n // eslint-disable-next-line deprecation/deprecation\n this._moveFocus(false, (activeRect: ClientRect, targetRect: ClientRect) => {\n let 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 const targetRectBottom = Math.floor(targetRect.bottom);\n const targetRectTop = Math.floor(targetRect.top);\n const activeRectTop = Math.floor(activeRect.top);\n\n if (targetRectBottom > activeRectTop) {\n if (!this._shouldWrapFocus(this._activeElement as HTMLElement, NO_VERTICAL_WRAP)) {\n return LARGE_NEGATIVE_DISTANCE_FROM_CENTER;\n }\n return LARGE_DISTANCE_FROM_CENTER;\n }\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 } else {\n distance = Math.abs(targetRect.left + targetRect.width / 2 - leftAlignment);\n }\n }\n\n return distance;\n })\n ) {\n this._setFocusAlignment(this._activeElement as HTMLElement, false, true);\n return true;\n }\n\n return false;\n }\n\n private _moveFocusLeft(theme: ITheme): boolean {\n const shouldWrap = this._shouldWrapFocus(this._activeElement as HTMLElement, NO_HORIZONTAL_WRAP);\n if (\n this._moveFocus(\n getRTL(theme),\n // eslint-disable-next-line deprecation/deprecation\n (activeRect: ClientRect, targetRect: ClientRect) => {\n let distance = -1;\n let topBottomComparison;\n\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 } else {\n topBottomComparison = parseFloat(targetRect.bottom.toFixed(3)) > parseFloat(activeRect.top.toFixed(3));\n }\n\n if (\n topBottomComparison &&\n targetRect.right <= activeRect.right &&\n this.props.direction !== FocusZoneDirection.vertical\n ) {\n distance = activeRect.right - targetRect.right;\n } else if (!shouldWrap) {\n distance = LARGE_NEGATIVE_DISTANCE_FROM_CENTER;\n }\n\n return distance;\n },\n undefined /*ev*/,\n shouldWrap,\n )\n ) {\n this._setFocusAlignment(this._activeElement as HTMLElement, true, false);\n return true;\n }\n\n return false;\n }\n\n private _moveFocusRight(theme: ITheme): boolean {\n const shouldWrap = this._shouldWrapFocus(this._activeElement as HTMLElement, NO_HORIZONTAL_WRAP);\n if (\n this._moveFocus(\n !getRTL(theme),\n // eslint-disable-next-line deprecation/deprecation\n (activeRect: ClientRect, targetRect: ClientRect) => {\n let distance = -1;\n let topBottomComparison;\n\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 } else {\n topBottomComparison = parseFloat(targetRect.top.toFixed(3)) < parseFloat(activeRect.bottom.toFixed(3));\n }\n\n if (\n topBottomComparison &&\n targetRect.left >= activeRect.left &&\n this.props.direction !== FocusZoneDirection.vertical\n ) {\n distance = targetRect.left - activeRect.left;\n } else if (!shouldWrap) {\n distance = LARGE_NEGATIVE_DISTANCE_FROM_CENTER;\n }\n\n return distance;\n },\n undefined /*ev*/,\n shouldWrap,\n )\n ) {\n this._setFocusAlignment(this._activeElement as HTMLElement, true, false);\n return true;\n }\n\n return false;\n }\n\n private _getHorizontalDistanceFromCenter = (\n isForward: boolean,\n // eslint-disable-next-line deprecation/deprecation\n activeRect: ClientRect,\n // eslint-disable-next-line deprecation/deprecation\n targetRect: ClientRect,\n ): number => {\n // eslint-disable-next-line deprecation/deprecation\n const 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 const targetRectTop = Math.floor(targetRect.top);\n const activeRectBottom = Math.floor(activeRect.bottom);\n const targetRectBottom = Math.floor(targetRect.bottom);\n const activeRectTop = Math.floor(activeRect.top);\n const isValidCandidateOnpagingDown = isForward && targetRectTop > activeRectBottom;\n const isValidCandidateOnpagingUp = !isForward && targetRectBottom < activeRectTop;\n\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\n if (!this._shouldWrapFocus(this._activeElement as HTMLElement, NO_VERTICAL_WRAP)) {\n return LARGE_NEGATIVE_DISTANCE_FROM_CENTER;\n }\n return LARGE_DISTANCE_FROM_CENTER;\n };\n\n private _moveFocusPaging(isForward: boolean, useDefaultWrap: boolean = true): boolean {\n let element = this._activeElement;\n if (!element || !this._root.current) {\n return false;\n }\n if (this._isElementInput(element)) {\n if (!this._shouldInputLoseFocus(element as HTMLInputElement, isForward)) {\n return false;\n }\n }\n const scrollableParent = findScrollableParent(element);\n if (!scrollableParent) {\n return false;\n }\n let candidateDistance = -1;\n let candidateElement = undefined;\n let targetTop = -1;\n let targetBottom = -1;\n const pagesize = (scrollableParent as HTMLElement).clientHeight;\n const activeRect = element.getBoundingClientRect();\n do {\n element = isForward\n ? getNextElement(this._root.current, element)\n : getPreviousElement(this._root.current, element);\n if (element) {\n const targetRect = element.getBoundingClientRect();\n const targetRectTop = Math.floor(targetRect.top);\n const activeRectBottom = Math.floor(activeRect.bottom);\n const targetRectBottom = Math.floor(targetRect.bottom);\n const activeRectTop = Math.floor(activeRect.top);\n const elementDistance = this._getHorizontalDistanceFromCenter(isForward, activeRect, targetRect);\n const isElementPassedPageSizeOnPagingDown = isForward && targetRectTop > activeRectBottom + pagesize;\n const isElementPassedPageSizeOnPagingUp = !isForward && targetRectBottom < activeRectTop - pagesize;\n\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 } else if (!isForward && targetRectBottom < targetBottom) {\n // for paging up\n targetBottom = targetRectBottom;\n candidateDistance = elementDistance;\n candidateElement = element;\n } else if (candidateDistance === -1 || elementDistance <= candidateDistance) {\n candidateDistance = elementDistance;\n candidateElement = element;\n }\n }\n }\n } while (element);\n\n let changedFocus = false;\n // Focus the closest candidate\n if (candidateElement && candidateElement !== this._activeElement) {\n changedFocus = true;\n this.focusElement(candidateElement);\n this._setFocusAlignment(candidateElement as HTMLElement, false, true);\n } else if (this.props.isCircularNavigation && useDefaultWrap) {\n if (isForward) {\n return this.focusElement(\n getNextElement(this._root.current, this._root.current.firstElementChild as HTMLElement, true) as HTMLElement,\n );\n }\n return this.focusElement(\n getPreviousElement(\n this._root.current,\n this._root.current.lastElementChild as HTMLElement,\n true,\n true,\n true,\n ) as HTMLElement,\n );\n }\n return changedFocus;\n }\n\n private _setFocusAlignment(element: HTMLElement, isHorizontal?: boolean, isVertical?: boolean): void {\n if (\n this.props.direction === FocusZoneDirection.bidirectional &&\n (!this._focusAlignment || isHorizontal || isVertical)\n ) {\n const rect = element.getBoundingClientRect();\n const left = rect.left + rect.width / 2;\n const top = rect.top + rect.height / 2;\n\n if (!this._focusAlignment) {\n this._focusAlignment = { left, top };\n }\n\n if (isHorizontal) {\n this._focusAlignment.left = left;\n }\n\n if (isVertical) {\n this._focusAlignment.top = top;\n }\n }\n }\n\n private _isImmediateDescendantOfZone(element?: HTMLElement): boolean {\n return this._getOwnerZone(element) === this._root.current;\n }\n\n private _getOwnerZone(element?: HTMLElement): HTMLElement | null {\n let parentElement = getParent(element as HTMLElement, ALLOW_VIRTUAL_ELEMENTS);\n\n while (parentElement && parentElement !== this._root.current && parentElement !== this._getDocument().body) {\n if (isElementFocusZone(parentElement)) {\n return parentElement;\n }\n\n parentElement = getParent(parentElement, ALLOW_VIRTUAL_ELEMENTS);\n }\n\n return parentElement;\n }\n\n private _updateTabIndexes(element?: HTMLElement): void {\n if (\n !this._activeElement &&\n this.props.defaultTabbableElement &&\n typeof this.props.defaultTabbableElement === 'function'\n ) {\n this._activeElement = this.props.defaultTabbableElement(this._root.current as HTMLElement);\n }\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\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, undefined, this._inShadowRoot)) {\n this._activeElement = null;\n }\n\n const childNodes = element && element.children;\n\n for (let childIndex = 0; childNodes && childIndex < childNodes.length; childIndex++) {\n const child = childNodes[childIndex] as HTMLElement;\n\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\n if (isElementTabbable(child, undefined, this._inShadowRoot)) {\n if (this.props.disabled) {\n child.setAttribute(TABINDEX, '-1');\n } else if (\n !this._isInnerZone &&\n ((!this._activeElement && !this._defaultFocusElement) || this._activeElement === child)\n ) {\n this._defaultFocusElement = child;\n if (child.getAttribute(TABINDEX) !== '0') {\n child.setAttribute(TABINDEX, '0');\n }\n } else if (child.getAttribute(TABINDEX) !== '-1') {\n child.setAttribute(TABINDEX, '-1');\n }\n } else if (child.tagName === 'svg' && child.getAttribute('focusable') !== 'false') {\n // Disgusting IE hack. Sad face.\n child.setAttribute('focusable', 'false');\n }\n } else if (child.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'true') {\n if (\n !this._isInnerZone &&\n ((!this._activeElement && !this._defaultFocusElement) || this._activeElement === child)\n ) {\n this._defaultFocusElement = child;\n if (child.getAttribute(TABINDEX) !== '0') {\n child.setAttribute(TABINDEX, '0');\n }\n } else if (child.getAttribute(TABINDEX) !== '-1') {\n child.setAttribute(TABINDEX, '-1');\n }\n }\n\n this._updateTabIndexes(child);\n }\n }\n\n private _isContentEditableElement(element: HTMLElement): boolean {\n return element && element.getAttribute('contenteditable') === 'true';\n }\n\n private _isElementInput(element: HTMLElement): boolean {\n if (\n element &&\n element.tagName &&\n (element.tagName.toLowerCase() === 'input' || element.tagName.toLowerCase() === 'textarea')\n ) {\n return true;\n }\n return false;\n }\n\n private _shouldInputLoseFocus(element: HTMLInputElement | HTMLTextAreaElement, isForward?: boolean): boolean {\n // If a tab was used, we want to focus on the next element.\n if (\n !this._processingTabKey &&\n element &&\n element.type &&\n ALLOWED_INPUT_TYPES.indexOf(element.type.toLowerCase()) > -1\n ) {\n const selectionStart = element.selectionStart;\n const selectionEnd = element.selectionEnd;\n const isRangeSelected = selectionStart !== selectionEnd;\n const inputValue = element.value;\n const isReadonly = element.readOnly;\n\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 (\n 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 ) {\n return false;\n }\n }\n\n return true;\n }\n\n private _shouldWrapFocus(\n element: HTMLElement,\n noWrapDataAttribute: 'data-no-vertical-wrap' | 'data-no-horizontal-wrap',\n ): boolean {\n return this.props.checkForNoWrap ? shouldWrapFocus(element, noWrapDataAttribute) : true;\n }\n\n /**\n * Returns true if the element is a descendant of the FocusZone through a React portal.\n */\n private _portalContainsElement(element: HTMLElement): boolean {\n return element && !!this._root.current && portalContainsElement(element, this._root.current);\n }\n\n private _getDocument(): Document {\n return getDocument(this._root.current)!;\n }\n}\n","import * as React from 'react';\nimport { useMergedRefs } from '@fluentui/react-hooks';\nimport { classNamesFunction, useFocusRects } from '@fluentui/utilities';\nimport type { ILink, ILinkProps, ILinkStyleProps, ILinkStyles } from './Link.types';\n\nconst getClassNames = classNamesFunction();\n\n/**\n * The useLink hook processes the Link component props and returns\n * state, slots and slotProps for consumption by the component.\n */\nexport const useLink = (props: ILinkProps, forwardedRef: React.Ref): any => {\n const { as, className, disabled, href, onClick, styles, theme, underline } = props;\n const rootRef = React.useRef(null);\n const mergedRootRefs: React.Ref = useMergedRefs(rootRef, forwardedRef);\n\n useComponentRef(props, rootRef);\n useFocusRects(rootRef);\n\n const classNames = getClassNames(styles!, {\n className,\n isButton: !href,\n isDisabled: disabled,\n isUnderlined: underline,\n theme: theme!,\n });\n\n const _onClick = (ev: React.MouseEvent) => {\n if (disabled) {\n ev.preventDefault();\n } else if (onClick) {\n onClick(ev);\n }\n };\n\n const rootType = as ? as : href ? 'a' : 'button';\n\n const state = {};\n const slots = { root: rootType };\n const slotProps = {\n root: {\n ...adjustPropsForRootType(rootType, props),\n 'aria-disabled': disabled,\n className: classNames.root,\n onClick: _onClick,\n ref: mergedRootRefs,\n },\n };\n\n return { state, slots, slotProps };\n};\n\nconst useComponentRef = (props: ILinkProps, link: React.RefObject) => {\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n focus() {\n if (link.current) {\n link.current.focus();\n }\n },\n }),\n [link],\n );\n};\n\nconst adjustPropsForRootType = (\n RootType: string | React.ComponentClass | React.FunctionComponent,\n props: ILinkProps & { getStyles?: any },\n): Partial => {\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 const { as, disabled, target, href, theme, getStyles, styles, componentRef, underline, ...restProps } = props;\n\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 {\n target,\n href: disabled ? undefined : href,\n ...restProps,\n };\n }\n\n // Add the type='button' prop for button elements\n if (RootType === 'button') {\n return {\n type: 'button',\n disabled,\n ...restProps,\n };\n }\n\n // Remove the target and href props for all other non anchor elements\n return { ...restProps, disabled };\n }\n\n // Retain all props except 'as' for ReactComponents\n return { target, href, disabled, ...restProps };\n};\n","import * as React from 'react';\nimport { useLink } from './useLink';\nimport type { ILinkProps } from './Link.types';\n\nexport const LinkBase: React.FunctionComponent = React.forwardRef((props, ref) => {\n const { slots, slotProps } = useLink(props, ref);\n\n return ;\n});\n\nLinkBase.displayName = 'LinkBase';\n","import { getGlobalClassNames, HighContrastSelector } from '@fluentui/style-utilities';\nimport type { ILinkStyleProps, ILinkStyles } from './Link.types';\nimport { IsFocusVisibleClassName } from '@fluentui/utilities';\n\nexport const GlobalClassNames = {\n root: 'ms-Link',\n};\n\nexport const getStyles = (props: ILinkStyleProps): ILinkStyles => {\n const { className, isButton, isDisabled, isUnderlined, theme } = props;\n const { semanticColors } = theme;\n\n // Tokens\n const linkColor = semanticColors.link;\n const linkInteractedColor = semanticColors.linkHovered;\n const linkDisabledColor = semanticColors.disabledText;\n const focusBorderColor = semanticColors.focusBorder;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\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\n selectors: {\n [`.${IsFocusVisibleClassName} &:focus, :host(.${IsFocusVisibleClassName}) &: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: {\n [HighContrastSelector]: {\n outline: '1px solid WindowText',\n },\n },\n },\n [HighContrastSelector]: {\n // For IE high contrast mode\n borderBottom: 'none',\n },\n },\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', // For Firefox high contrast mode\n selectors: {\n [HighContrastSelector]: {\n color: 'LinkText',\n forcedColorAdjust: 'none',\n },\n },\n },\n !isButton && {\n selectors: {\n [HighContrastSelector]: {\n // This is mainly for MessageBar, which sets MsHighContrastAdjust: none by default\n MsHighContrastAdjust: 'auto',\n forcedColorAdjust: 'auto',\n },\n },\n },\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 [HighContrastSelector]: {\n // We need to specify the color in High Contrast because of the case of Links rendering as buttons.\n color: 'GrayText',\n },\n },\n },\n ],\n !isDisabled && {\n selectors: {\n '&:active, &:hover, &:active:hover': {\n color: linkInteractedColor,\n textDecoration: 'underline',\n\n selectors: {\n [HighContrastSelector]: {\n color: 'LinkText',\n },\n },\n },\n '&:focus': {\n color: linkColor,\n\n selectors: {\n [HighContrastSelector]: {\n color: 'LinkText',\n },\n },\n },\n },\n },\n classNames.root,\n className,\n ],\n };\n};\n","import * as React from 'react';\nimport { styled } from '@fluentui/utilities';\nimport { LinkBase } from './Link.base';\nimport { getStyles } from './Link.styles';\nimport type { ILinkProps, ILinkStyleProps, ILinkStyles } from './Link.types';\n\nexport const Link: React.FunctionComponent = styled(\n LinkBase,\n getStyles,\n undefined,\n {\n scope: 'Link',\n },\n);\n","import * as React from 'react';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport type { IFocusZoneProps } from '../../FocusZone';\nimport type { IIconProps } from '../../Icon';\nimport type { ICalloutProps, ICalloutContentStyleProps } from '../../Callout';\nimport type { ITheme, IStyle } from '../../Styling';\nimport type { IButtonStyles } from '../../Button';\nimport type {\n IRefObject,\n IBaseProps,\n IRectangle,\n IRenderFunction,\n IStyleFunctionOrObject,\n IComponentAs,\n} from '../../Utilities';\nimport type { IWithResponsiveModeState } from '../../ResponsiveMode';\nimport type { IContextualMenuClassNames, IMenuItemClassNames } from './ContextualMenu.classNames';\nimport type { IVerticalDividerClassNames } from '../Divider/VerticalDivider.types';\nimport type {\n IContextualMenuItemProps,\n IContextualMenuRenderItem,\n IContextualMenuItemStyleProps,\n IContextualMenuItemRenderFunctions,\n} from './ContextualMenuItem.types';\nimport type { IKeytipProps } from '../../Keytip';\nimport type { Target } from '@fluentui/react-hooks';\nimport type { IPopupRestoreFocusParams } from '../../Popup';\nimport { IContextualMenuItemWrapperProps } from './ContextualMenuItemWrapper/ContextualMenuItemWrapper.types';\n\nexport { DirectionalHint } from '../../common/DirectionalHint';\n\n/**\n * {@docCategory ContextualMenu}\n */\nexport enum ContextualMenuItemType {\n Normal = 0,\n Divider = 1,\n Header = 2,\n Section = 3,\n}\n\n/**\n * {@docCategory ContextualMenu}\n */\nexport interface IContextualMenu {}\n\n/**\n * {@docCategory ContextualMenu}\n */\nexport interface IContextualMenuProps\n extends IBaseProps,\n React.RefAttributes,\n // eslint-disable-next-line deprecation/deprecation\n IWithResponsiveModeState {\n /**\n * Optional callback to access the IContextualMenu interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n * @deprecated ContextualMenu has no imperative methods, so componentRef no longer returns a ref\n */\n componentRef?: IRefObject;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject;\n\n /**\n * Theme provided by higher-order component.\n */\n theme?: ITheme;\n\n /**\n * Additional CSS class to apply to the ContextualMenu.\n */\n className?: string;\n\n /**\n * The target that the ContextualMenu should try to position itself based on.\n * It can be either an element, a query selector string resolving to a valid element,\n * or a MouseEvent. If a MouseEvent is given, the origin point of the event will be used.\n */\n target?: Target;\n\n /**\n * How the menu should be positioned\n * @defaultvalue DirectionalHint.bottomAutoEdge\n */\n directionalHint?: DirectionalHint;\n\n /**\n * How the menu should be positioned in RTL layouts.\n * If not specified, a mirror of `directionalHint` will be used.\n */\n directionalHintForRTL?: DirectionalHint;\n\n /**\n * The gap between the ContextualMenu and the target\n * @defaultvalue 0\n */\n gapSpace?: number;\n\n /**\n * The width of the beak.\n * @defaultvalue 16\n */\n beakWidth?: number;\n\n /**\n * If true the context menu will render as the same width as the target element\n * @defaultvalue false\n */\n useTargetWidth?: boolean;\n\n /**\n * If true the context menu will have a minimum width equal to the width of the target element\n * @defaultvalue false\n */\n useTargetAsMinWidth?: boolean;\n\n /**\n * The bounding rectangle (or callback that returns a rectangle) which the contextual menu can appear in.\n */\n bounds?: IRectangle | ((target?: Target, targetWindow?: Window) => IRectangle | undefined);\n\n /**\n * If true then the beak is visible. If false it will not be shown.\n */\n isBeakVisible?: boolean;\n\n /**\n * If true, the menu will be positioned to cover the target.\n * If false, it will be positioned next to the target.\n * @defaultvalue false\n */\n coverTarget?: boolean;\n\n /**\n * If true the positioning logic will prefer to flip edges rather than to nudge the rectangle to fit within bounds,\n * thus making sure the element aligns perfectly with target's alignment edge\n */\n alignTargetEdge?: boolean;\n\n /**\n * Menu items to display.\n */\n items: IContextualMenuItem[];\n\n /**\n * Used as `aria-labelledby` for the menu element inside the callout.\n */\n labelElementId?: string;\n\n /**\n * Whether to focus on the menu when mounted.\n * @defaultvalue true\n */\n shouldFocusOnMount?: boolean;\n\n /**\n * Whether to focus on the contextual menu container (as opposed to the first menu item).\n *\n * Avoid using as it breaks the default focus behaviour when using assistive technologies.\n */\n shouldFocusOnContainer?: boolean;\n\n /**\n * Callback when the ContextualMenu tries to close. If `dismissAll` is true then all\n * submenus will be dismissed.\n */\n onDismiss?: (ev?: Event | React.MouseEvent | React.KeyboardEvent, dismissAll?: boolean) => void;\n\n /**\n * Click handler which is invoked if `onClick` is not passed for individual contextual\n * menu item.\n * Returning true will dismiss the menu even if `ev.preventDefault()` was called.\n */\n onItemClick?: (\n ev?: React.MouseEvent | React.KeyboardEvent,\n item?: IContextualMenuItem,\n ) => boolean | void;\n\n /**\n * Whether this menu is a submenu of another menu.\n */\n isSubMenu?: boolean;\n\n /**\n * ID for the ContextualMenu's root element (inside the callout).\n * Should be used for `aria-owns` and other such uses, rather than direct reference for programmatic purposes.\n */\n id?: string;\n\n /**\n * Accessible label for the ContextualMenu's root element (inside the callout).\n */\n ariaLabel?: string;\n\n /**\n * If true do not render on a new layer. If false render on a new layer.\n * @defaultvalue false\n */\n doNotLayer?: boolean;\n\n /**\n * If true the position will not change sides in an attempt to fit the ContextualMenu within bounds.\n * It will still attempt to align it to whatever bounds are given.\n * @defaultvalue false\n */\n directionalHintFixed?: boolean;\n\n /**\n * Callback for when the menu has been opened.\n */\n onMenuOpened?: (contextualMenu?: IContextualMenuProps) => void;\n\n /**\n * Callback for when the menu is being closed (removing from the DOM).\n */\n onMenuDismissed?: (contextualMenu?: IContextualMenuProps) => void;\n\n /**\n * Additional custom props for the Callout.\n */\n calloutProps?: ICalloutProps;\n\n /**\n * Title to be displayed at the top of the menu, above the items.\n */\n title?: string;\n\n /**\n * Method to provide the classnames to style the contextual menu.\n * @deprecated Use `styles` instead to leverage mergeStyles API.\n */\n // eslint-disable-next-line deprecation/deprecation\n getMenuClassNames?: (theme: ITheme, className?: string) => IContextualMenuClassNames;\n\n /** Custom render function for a submenu. */\n onRenderSubMenu?: IRenderFunction;\n\n /**\n * Method to override the render of the list of menu items.\n */\n onRenderMenuList?: IRenderFunction;\n\n /**\n * Method to wrap menu items. Gives the ability to wrap a custom\n * tooltip to each menu item button.\n */\n onRenderContextualMenuItem?: IRenderFunction;\n\n /**\n * Delay (in milliseconds) to wait before expanding / dismissing a submenu on mouseEnter or mouseLeave\n */\n subMenuHoverDelay?: number;\n\n /**\n * Custom component to use for rendering individual menu items.\n * @defaultvalue ContextualMenuItem\n */\n contextualMenuItemAs?: IComponentAs;\n\n /**\n * Props to pass down to the FocusZone.\n * NOTE: the default FocusZoneDirection will be used unless a direction\n * is specified in the focusZoneProps (even if other focusZoneProps are defined)\n * @defaultvalue \\{ direction: FocusZoneDirection.vertical \\}\n */\n focusZoneProps?: IFocusZoneProps;\n\n /**\n * Custom component to use for rendering the focus zone (the root).\n * @defaultValue FocusZone\n */\n focusZoneAs?: IComponentAs;\n\n /**\n * If true, renders the ContextualMenu in a hidden state.\n * Use this flag, rather than rendering a ContextualMenu conditionally based on visibility,\n * to improve rendering performance when it becomes visible.\n * Note: When ContextualMenu is hidden its content will not be rendered. It will only render\n * once the ContextualMenu is visible.\n */\n hidden?: boolean;\n\n /**\n * If true, the menu will be updated even when `hidden=true`. Note that this will consume\n * resources to update even when nothing is being shown to the user. This might be helpful if\n * your updates are small and you want the menu to display quickly when `hidden` is set to false.\n */\n shouldUpdateWhenHidden?: boolean;\n\n /**\n * If true, the contextual menu will not be updated until focus enters the menu via other means.\n * This will only result in different behavior when `shouldFocusOnMount = false`.\n */\n delayUpdateFocusOnHover?: boolean;\n\n /**\n * Called when the component is unmounting, and focus needs to be restored. If this is provided,\n * focus will not be restored automatically, and you'll need to call `params.originalElement.focus()`.\n */\n onRestoreFocus?: (params: IPopupRestoreFocusParams) => void;\n}\n\n/**\n * {@docCategory ContextualMenu}\n */\nexport interface IContextualMenuItemRenderProps extends IContextualMenuItem {\n index: number;\n focusableElementIndex: number;\n totalItemCount: number;\n hasCheckmarks: boolean;\n hasIcons: boolean;\n}\n\n/**\n * {@docCategory ContextualMenu}\n */\nexport interface IContextualMenuListProps {\n items: IContextualMenuItem[];\n totalItemCount: number;\n hasCheckmarks: boolean;\n hasIcons: boolean;\n defaultMenuItemRenderer: (item: IContextualMenuItemRenderProps) => React.ReactNode;\n ariaLabel?: string;\n labelElementId?: string;\n role?: string;\n}\n\n/**\n * {@docCategory ContextualMenu}\n */\nexport interface IContextualMenuItem {\n /**\n * Optional callback to access the IContextualMenuRenderItem interface.\n * This will get passed down to ContextualMenuItem.\n */\n componentRef?: IRefObject;\n\n /**\n * Unique id to identify the item\n */\n key: string;\n\n /**\n * Text of the menu item.\n * If a standard hyphen (-) is passed in, then the item will be rendered as a divider.\n * If a dash must appear as text, use an emdash (—), figuredash (‒), or minus symbol (−) instead.\n */\n text?: string;\n\n /**\n * Secondary description for the menu item to display\n */\n secondaryText?: string;\n\n itemType?: ContextualMenuItemType;\n\n /**\n * Props for an icon to display next to the item.\n */\n iconProps?: IIconProps;\n\n /**\n * Custom render function for the menu item icon.\n * iconProps must be present on at least one item for onRenderIcon to be called.\n */\n onRenderIcon?: IRenderFunction;\n\n /**\n * Props for the Icon used for the chevron.\n */\n submenuIconProps?: IIconProps;\n\n /**\n * Whether the menu item is disabled\n * @defaultvalue false\n */\n disabled?: boolean;\n\n /**\n * If the menu item is a split button, this prop disables purely the primary action of the button.\n * @defaultvalue false\n */\n primaryDisabled?: boolean;\n\n /**\n * @deprecated Not used\n */\n shortCut?: string;\n\n /**\n * Whether or not this menu item can be checked\n * @defaultvalue false\n */\n canCheck?: boolean;\n\n /**\n * Whether or not this menu item is currently checked.\n * @defaultvalue false\n */\n checked?: boolean;\n\n /**\n * Whether or not this menu item is a splitButton.\n * @defaultvalue false\n */\n split?: boolean;\n\n /**\n * Any custom data the developer wishes to associate with the menu item.\n */\n data?: any;\n\n /**\n * Callback for when the menu item is invoked. If `ev.preventDefault()` is called in `onClick`,\n * the click will not close the menu.\n *\n * Only for ContextualMenu items, returning true will dismiss the menu even if `ev.preventDefault()`\n * was called (does not apply for button or CommandBar sub-menu items).\n */\n onClick?: (\n ev?: React.MouseEvent | React.KeyboardEvent,\n item?: IContextualMenuItem,\n ) => boolean | void;\n\n /**\n * Navigate to this URL when the menu item is clicked.\n */\n href?: string;\n\n /**\n * Target window when using `href`.\n */\n target?: string;\n\n /**\n * Link relation setting when using `href`.\n * If `target` is `_blank`, `rel` is defaulted to a value to prevent clickjacking.\n */\n rel?: string;\n\n /**\n * Properties to apply to a submenu to this item.\n *\n * The ContextualMenu will provide default values for `target`, `onDismiss`, `isSubMenu`,\n * `id`, `shouldFocusOnMount`, `directionalHint`, `className`, and `gapSpace`, all of which\n * can be overridden.\n */\n subMenuProps?: IContextualMenuProps;\n\n /**\n * Method to provide the classnames to style the individual items inside a menu.\n * @deprecated Use `styles` prop of `IContextualMenuItemProps` to leverage mergeStyles API.\n */\n getItemClassNames?: (\n theme: ITheme,\n disabled: boolean,\n expanded: boolean,\n checked: boolean,\n isAnchorLink: boolean,\n knownIcon: boolean,\n itemClassName?: string,\n dividerClassName?: string,\n iconClassName?: string,\n subMenuClassName?: string,\n primaryDisabled?: boolean,\n ) => // eslint-disable-next-line deprecation/deprecation\n IMenuItemClassNames;\n\n /**\n * Optional IContextualMenuItemProps overrides to customize behaviors such as item styling via `styles`.\n */\n itemProps?: Partial;\n\n /**\n * Method to provide the classnames to style the Vertical Divider of a split button inside a menu.\n * Default value is the `getSplitButtonVerticalDividerClassNames` func defined in `ContextualMenu.classnames.ts`.\n * @defaultvalue getSplitButtonVerticalDividerClassNames\n */\n // eslint-disable-next-line deprecation/deprecation\n getSplitButtonVerticalDividerClassNames?: (theme: ITheme) => IVerticalDividerClassNames;\n\n /**\n * Properties to apply to render this item as a section.\n * This prop is mutually exclusive with `subMenuProps`.\n */\n sectionProps?: IContextualMenuSection;\n\n /**\n * Additional CSS class to apply to the menu item.\n */\n className?: string;\n\n /**\n * Additional styles to apply to the menu item\n * @deprecated Use `styles` instead to leverage mergeStyles API.\n */\n style?: React.CSSProperties;\n\n /**\n * Custom accessible label for the element.\n * If no override is specified, the `aria-label` attribute will contain the item name.\n */\n ariaLabel?: string;\n\n /**\n * Title (tooltip) text displayed when hovering over an item.\n */\n title?: string;\n\n /**\n * Method to custom render this menu item.\n * For keyboard accessibility, the top-level rendered item should be a focusable element\n * (like an anchor or a button) or have the `data-is-focusable` property set to true.\n *\n * @param item - Item to render. Will typically be of type `IContextualMenuItem`.\n * (When rendering a command bar item, will be `ICommandBarItemProps`.)\n * @param dismissMenu - Function to dismiss the menu. Can be used to ensure that a custom menu\n * item click dismisses the menu. (Will be undefined if rendering a command bar item.)\n */\n onRender?: (item: any, dismissMenu: (ev?: any, dismissAll?: boolean) => void) => React.ReactNode;\n\n /**\n * An override for the child content of the contextual menu item.\n */\n contextualMenuItemAs?: IComponentAs;\n\n /**\n * An override for the entire component used to render the contextal menu item.\n */\n contextualMenuItemWrapperAs?: IComponentAs;\n\n /**\n * Method to customize sub-components rendering of this menu item.\n *\n * @param props - Props used to pass into render functions\n * @param defaultRenders - Default render functions that renders default sub-components\n */\n onRenderContent?: (\n props: IContextualMenuItemProps,\n defaultRenders: IContextualMenuItemRenderFunctions,\n ) => React.ReactNode;\n\n /**\n * A function to be executed on mouse down. This is executed before an `onClick` event and can\n * be used to interrupt native on click events as well. The click event should still handle\n * the commands. This should only be used in special cases when react and non-react are mixed.\n */\n onMouseDown?: (item: IContextualMenuItem, event: React.MouseEvent) => void;\n\n /**\n * Optional override for the menu button's role.\n * @default `menuitem` or `menuitemcheckbox`\n */\n role?: string;\n\n /**\n * When rendering a custom menu component that is passed in, the component might also be a list of\n * elements. We want to keep track of the correct index our menu is using based off of\n * the length of the custom list. It is up to the user to increment the count for their list.\n */\n customOnRenderListLength?: number;\n\n /**\n * Keytip for this contextual menu item\n */\n keytipProps?: IKeytipProps;\n\n /**\n * @deprecated Use subMenuProps.items instead.\n */\n items?: IContextualMenuItem[];\n\n /**\n * Any additional properties to use when custom rendering menu items.\n */\n [propertyName: string]: any;\n\n /**\n * Detailed description of the menu item for the benefit of screen readers.\n */\n ariaDescription?: string;\n\n /**\n * ID of the element that contains additional detailed descriptive information for screen readers\n */\n ariaDescribedBy?: string;\n\n /**\n * @deprecated No longer used. All contextual menu items are now focusable when disabled.\n */\n inactive?: boolean;\n\n /**\n * Text of the menu item.\n * @deprecated Use `text` instead.\n */\n name?: string;\n\n /**\n * Flag which indicates that, when the item is clicked, the 'target' for the click event should be\n * overridden to reflect the launch target from the root menu.\n * This avoids a situation where the 'target' of the event may wind up detached from the DOM\n * when the menu is dismissed in response to the click.\n */\n preferMenuTargetAsEventTarget?: boolean;\n}\n\n/**\n * {@docCategory ContextualMenu}\n */\nexport interface IContextualMenuSection extends React.ClassAttributes {\n /**\n * The items to include inside the section.\n */\n items: IContextualMenuItem[];\n\n /**\n * The optional section title.\n */\n title?: string | IContextualMenuItem;\n\n /**\n * If set to true, the section will display a divider at the top of the section.\n */\n topDivider?: boolean;\n\n /**\n * If set to true, the section will display a divider at the bottom of the section.\n */\n bottomDivider?: boolean;\n}\n\n/**\n * {@docCategory ContextualMenu}\n */\nexport interface IMenuItemStyles extends IButtonStyles {\n /**\n * Styles for a menu item that is an anchor link.\n */\n item?: IStyle;\n\n /**\n * Styles for the content inside the button/link of the menuItem.\n */\n linkContent?: IStyle;\n\n /**\n * Styles for a menu item that is an anchor link.\n */\n anchorLink?: IStyle;\n\n /**\n * Default icon color style for known icons.\n */\n iconColor?: IStyle;\n\n /**\n * Default style for checkmark icons.\n */\n checkmarkIcon?: IStyle;\n\n /**\n * Styles for the submenu icon of a menu item.\n */\n subMenuIcon?: IStyle;\n\n /**\n * Styles for a divider item of a ContextualMenu.\n */\n divider?: IStyle;\n}\n\n/**\n * {@docCategory ContextualMenu}\n */\nexport interface IContextualMenuStyleProps {\n theme: ITheme;\n\n className?: string;\n\n // Insert ContextualMenu style props below\n}\n\n/**\n * {@docCategory ContextualMenu}\n */\nexport interface IContextualMenuStyles {\n /**\n * Style override for the contextual menu title.\n */\n title: IStyle;\n\n /**\n * Style for the container which parents all menu items.\n */\n container: IStyle;\n\n /**\n * Base styles for the root element of all ContextualMenus.\n */\n root: IStyle;\n\n /**\n * Styles for the header item of a ContextualMenu\n */\n header: IStyle;\n\n /**\n * Styles for the list that contains all menuItems.\n */\n list: IStyle;\n\n /**\n * SubComponent styles.\n */\n subComponentStyles: IContextualMenuSubComponentStyles;\n}\n\n/**\n * {@docCategory ContextualMenu}\n */\nexport interface IContextualMenuSubComponentStyles {\n /** Styles for the callout that hosts the ContextualMenu options. */\n callout: IStyleFunctionOrObject;\n\n /** Styles for each menu item. */\n menuItem: IStyleFunctionOrObject;\n}\n","import type { IContextualMenuItem } from '../../index';\n\n/**\n * Determines the effective checked state of a menu item.\n *\n * @param item {IContextualMenuItem} to get the check state of.\n * @returns {true} if the item is checked.\n * @returns {false} if the item is unchecked.\n * @returns {null} if the item is not checkable.\n */\nexport function getIsChecked(item: IContextualMenuItem): boolean | null {\n if (item.canCheck) {\n return !!(item.isChecked || item.checked);\n }\n\n if (typeof item.isChecked === 'boolean') {\n return item.isChecked;\n }\n\n if (typeof item.checked === 'boolean') {\n return item.checked;\n }\n\n // Item is not checkable.\n return null;\n}\n\nexport function hasSubmenu(item: IContextualMenuItem): boolean {\n // eslint-disable-next-line deprecation/deprecation\n return !!(item.subMenuProps || item.items);\n}\n\nexport function isItemDisabled(item: IContextualMenuItem): boolean {\n return !!(item.isDisabled || item.disabled);\n}\n\nexport function getMenuItemAriaRole(item: IContextualMenuItem): string {\n const isChecked = getIsChecked(item);\n const canCheck: boolean = isChecked !== null;\n return canCheck ? 'menuitemcheckbox' : 'menuitem';\n}\n","import * as React from 'react';\nimport { hasSubmenu, getIsChecked } from '../../utilities/contextualMenu/index';\nimport { getRTL, initializeComponentRef } from '../../Utilities';\nimport { Icon } from '../../Icon';\nimport type { IContextualMenuItemProps, IContextualMenuItemRenderFunctions } from './ContextualMenuItem.types';\n\nconst defaultIconRenderer = (props: IContextualMenuItemProps) => {\n const { item, classNames } = props;\n const { iconProps } = item;\n return ;\n};\n\nconst renderItemIcon = (props: IContextualMenuItemProps) => {\n const { item, hasIcons } = props;\n if (!hasIcons) {\n return null;\n }\n\n if (item.onRenderIcon) {\n return item.onRenderIcon(props, defaultIconRenderer);\n }\n\n return defaultIconRenderer(props);\n};\n\nconst renderCheckMarkIcon = ({ onCheckmarkClick, item, classNames }: IContextualMenuItemProps) => {\n const isItemChecked = getIsChecked(item);\n if (onCheckmarkClick) {\n // Ensures that the item is passed as the first argument to the checkmark click callback.\n const onClick = (e: React.MouseEvent) => onCheckmarkClick(item, e);\n\n return (\n \n );\n }\n return null;\n};\n\nconst renderItemName = ({ item, classNames }: IContextualMenuItemProps) => {\n /* eslint-disable deprecation/deprecation */\n if (item.text || item.name) {\n return {item.text || item.name};\n }\n /* eslint-enable deprecation/deprecation */\n return null;\n};\n\nconst renderSecondaryText = ({ item, classNames }: IContextualMenuItemProps) => {\n if (item.secondaryText) {\n return {item.secondaryText};\n }\n return null;\n};\n\nconst renderSubMenuIcon = ({ item, classNames, theme }: IContextualMenuItemProps) => {\n if (hasSubmenu(item)) {\n return (\n \n );\n }\n return null;\n};\n\nexport class ContextualMenuItemBase extends React.Component {\n constructor(props: IContextualMenuItemProps) {\n super(props);\n\n initializeComponentRef(this);\n }\n\n public render() {\n const { item, classNames } = this.props;\n const renderContent = item.onRenderContent || this._renderLayout;\n\n return (\n
\n {renderContent(this.props, {\n renderCheckMarkIcon,\n renderItemIcon,\n renderItemName,\n renderSecondaryText,\n renderSubMenuIcon,\n })}\n
\n );\n }\n\n public openSubMenu = (): void => {\n const { item, openSubMenu, getSubmenuTarget } = this.props;\n if (getSubmenuTarget) {\n const submenuTarget = getSubmenuTarget();\n if (hasSubmenu(item) && openSubMenu && submenuTarget) {\n openSubMenu(item, submenuTarget);\n }\n }\n };\n\n public dismissSubMenu = (): void => {\n const { item, dismissSubMenu } = this.props;\n if (hasSubmenu(item) && dismissSubMenu) {\n dismissSubMenu();\n }\n };\n\n public dismissMenu = (dismissAll?: boolean): void => {\n const { dismissMenu } = this.props;\n if (dismissMenu) {\n dismissMenu(undefined /* ev */, dismissAll);\n }\n };\n\n private _renderLayout(props: IContextualMenuItemProps, defaultRenders: IContextualMenuItemRenderFunctions) {\n return (\n <>\n {defaultRenders.renderCheckMarkIcon(props)}\n {defaultRenders.renderItemIcon(props)}\n {defaultRenders.renderItemName(props)}\n {defaultRenders.renderSecondaryText(props)}\n {defaultRenders.renderSubMenuIcon(props)}\n \n );\n }\n}\n","import { memoizeFunction } from '../../Utilities';\nimport { mergeStyleSets } from '../../Styling';\nimport type { ITheme } from '../../Styling';\nimport type { IVerticalDividerClassNames } from './VerticalDivider.types';\n\n/**\n * @deprecated use getStyles exported from VerticalDivider.styles.ts\n */\nexport const getDividerClassNames = memoizeFunction(\n // eslint-disable-next-line deprecation/deprecation\n (theme: ITheme): IVerticalDividerClassNames => {\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);\n","import {\n concatStyleSets,\n getFocusStyle,\n HighContrastSelector,\n getScreenSelector,\n ScreenWidthMaxMedium,\n IconFontSizes,\n getHighContrastNoAdjustStyle,\n} from '../../Styling';\nimport { memoizeFunction } from '../../Utilities';\nimport type { ITheme } from '../../Styling';\nimport type { IMenuItemStyles } from './ContextualMenu.types';\n\nexport const CONTEXTUAL_MENU_ITEM_HEIGHT = 36;\n\nconst MediumScreenSelector = getScreenSelector(0, ScreenWidthMaxMedium);\n\nexport const getMenuItemStyles = memoizeFunction((theme: ITheme): IMenuItemStyles => {\n const { semanticColors, fonts, palette } = theme;\n const ContextualMenuItemBackgroundHoverColor = semanticColors.menuItemBackgroundHovered;\n const ContextualMenuItemTextHoverColor = semanticColors.menuItemTextHovered;\n const ContextualMenuItemBackgroundSelectedColor = semanticColors.menuItemBackgroundPressed;\n const ContextualMenuItemDividerColor = semanticColors.bodyDivider;\n\n const menuItemStyles: IMenuItemStyles = {\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', // inner elements have a margin of 4px (4 + 4 = 8px as on right side)\n textAlign: 'left',\n },\n ],\n rootDisabled: {\n color: semanticColors.disabledBodyText,\n cursor: 'default',\n pointerEvents: 'none',\n selectors: {\n [HighContrastSelector]: {\n // ensure disabled text looks different than enabled\n color: 'GrayText',\n opacity: 1,\n },\n },\n },\n rootHovered: {\n backgroundColor: ContextualMenuItemBackgroundHoverColor,\n color: ContextualMenuItemTextHoverColor,\n selectors: {\n '.ms-ContextualMenu-icon': {\n color: palette.themeDarkAlt,\n },\n '.ms-ContextualMenu-submenuIcon': {\n color: palette.neutralPrimary,\n },\n },\n },\n rootFocused: {\n backgroundColor: palette.white,\n },\n rootChecked: {\n selectors: {\n '.ms-ContextualMenu-checkmarkIcon': {\n color: palette.neutralPrimary,\n },\n },\n },\n rootPressed: {\n backgroundColor: ContextualMenuItemBackgroundSelectedColor,\n selectors: {\n '.ms-ContextualMenu-icon': {\n color: palette.themeDark,\n },\n '.ms-ContextualMenu-submenuIcon': {\n color: palette.neutralPrimary,\n },\n },\n },\n rootExpanded: {\n backgroundColor: ContextualMenuItemBackgroundSelectedColor,\n color: semanticColors.bodyTextChecked,\n selectors: {\n '.ms-ContextualMenu-submenuIcon': {\n [HighContrastSelector]: {\n // icons inside of anchor tags are not properly inheriting color in high contrast\n color: 'inherit',\n },\n },\n [HighContrastSelector]: {\n // allow change in background/text to be visible\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\n linkContent: {\n whiteSpace: 'nowrap',\n height: 'inherit',\n display: 'flex',\n alignItems: 'center',\n maxWidth: '100%',\n },\n anchorLink: {\n padding: '0px 8px 0 4px', // inner elements have a margin of 4px (4 + 4 = 8px as on right side)\n textRendering: 'auto',\n color: 'inherit',\n letterSpacing: 'normal',\n wordSpacing: 'normal',\n textTransform: 'none',\n textIndent: '0px',\n textShadow: 'none',\n textDecoration: 'none',\n boxSizing: 'border-box',\n },\n label: {\n margin: '0 4px',\n verticalAlign: 'middle',\n display: 'inline-block',\n flexGrow: '1',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n },\n secondaryText: {\n color: theme.palette.neutralSecondary,\n paddingLeft: '20px',\n textAlign: 'right',\n },\n icon: {\n display: 'inline-block',\n minHeight: '1px',\n maxHeight: CONTEXTUAL_MENU_ITEM_HEIGHT,\n fontSize: IconFontSizes.medium,\n width: IconFontSizes.medium,\n margin: '0 4px',\n verticalAlign: 'middle',\n flexShrink: '0',\n selectors: {\n [MediumScreenSelector]: {\n fontSize: IconFontSizes.large,\n width: IconFontSizes.large,\n },\n },\n },\n iconColor: {\n color: semanticColors.menuIcon,\n },\n iconDisabled: {\n color: semanticColors.disabledBodyText,\n },\n checkmarkIcon: {\n color: semanticColors.bodySubtext,\n },\n subMenuIcon: {\n height: CONTEXTUAL_MENU_ITEM_HEIGHT,\n lineHeight: CONTEXTUAL_MENU_ITEM_HEIGHT,\n color: palette.neutralSecondary,\n textAlign: 'center',\n display: 'inline-block',\n verticalAlign: 'middle',\n flexShrink: '0',\n fontSize: IconFontSizes.small, // 12px\n selectors: {\n ':hover': {\n color: palette.neutralPrimary,\n },\n ':active': {\n color: palette.neutralPrimary,\n },\n [MediumScreenSelector]: {\n fontSize: IconFontSizes.medium, // 16px\n },\n },\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\n return concatStyleSets(menuItemStyles);\n});\n","import { getDividerClassNames } from '../Divider/VerticalDivider.classNames';\nimport { getMenuItemStyles } from './ContextualMenu.cnstyles';\nimport {\n mergeStyleSets,\n getGlobalClassNames,\n getScreenSelector,\n ScreenWidthMaxMedium,\n hiddenContentStyle,\n} from '../../Styling';\nimport { memoizeFunction, IsFocusVisibleClassName } from '../../Utilities';\nimport type { ITheme } from '../../Styling';\nimport type { IVerticalDividerClassNames } from '../Divider/VerticalDivider.types';\nimport type { IContextualMenuItemStyles, IContextualMenuItemStyleProps } from './ContextualMenuItem.types';\nimport type { IContextualMenuSubComponentStyles } from './ContextualMenu.types';\n\n/**\n * @deprecated Deprecated in favor of mergeStyles API.\n */\nexport interface IContextualMenuClassNames {\n container?: string;\n root?: string;\n list?: string;\n header?: string;\n title?: string;\n subComponentStyles?: IContextualMenuSubComponentStyles;\n}\n\n/**\n * @deprecated Deprecated in favor of mergeStyles API.\n */\nexport interface IMenuItemClassNames {\n item?: string;\n divider?: string;\n root?: string;\n linkContent?: string;\n icon?: string;\n checkmarkIcon?: string;\n subMenuIcon?: string;\n label?: string;\n secondaryText?: string;\n splitContainer?: string;\n splitPrimary?: string;\n splitMenu?: string;\n linkContentMenu?: string;\n screenReaderText?: string;\n}\n\nconst CONTEXTUAL_SPLIT_MENU_MINWIDTH = '28px';\n\nconst MediumScreenSelector = getScreenSelector(0, ScreenWidthMaxMedium);\n\nexport const getSplitButtonVerticalDividerClassNames = memoizeFunction(\n /* eslint-disable deprecation/deprecation */\n (theme: ITheme): IVerticalDividerClassNames => {\n return mergeStyleSets(getDividerClassNames(theme), {\n /* eslint-enable deprecation/deprecation */\n wrapper: {\n position: 'absolute',\n right: 28, // width of the splitMenu based on the padding plus icon fontSize\n selectors: {\n [MediumScreenSelector]: {\n right: 32, // fontSize of the icon increased from 12px to 16px\n },\n },\n },\n divider: {\n height: 16,\n width: 1,\n },\n });\n },\n);\n\nconst 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/**\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 const getItemClassNames = memoizeFunction(\n (\n theme: ITheme,\n disabled: boolean,\n expanded: boolean,\n checked: boolean,\n isAnchorLink: boolean,\n knownIcon: boolean,\n itemClassName?: string,\n dividerClassName?: string,\n iconClassName?: string,\n subMenuClassName?: string,\n primaryDisabled?: boolean,\n className?: string,\n ): IContextualMenuItemStyles => {\n const styles = getMenuItemStyles(theme);\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\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: {\n ':hover': styles.rootHovered,\n ':active': styles.rootPressed,\n // eslint-disable-next-line @fluentui/max-len\n [`.${IsFocusVisibleClassName} &:focus, .${IsFocusVisibleClassName} &:focus:hover, :host(.${IsFocusVisibleClassName}) &:focus, :host(.${IsFocusVisibleClassName}) &:focus:hover`]:\n styles.rootFocused,\n [`.${IsFocusVisibleClassName} &:hover, :host(.${IsFocusVisibleClassName}) &:hover`]: {\n background: 'inherit;',\n },\n },\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: {\n ':hover': styles.rootHovered,\n // when hovering over the splitPrimary also affect the splitMenu\n [`:hover ~ .${classNames.splitMenu}`]: styles.rootHovered,\n ':active': styles.rootPressed,\n // eslint-disable-next-line @fluentui/max-len\n [`.${IsFocusVisibleClassName} &:focus, .${IsFocusVisibleClassName} &:focus:hover, :host(.${IsFocusVisibleClassName}) &:focus, :host(.${IsFocusVisibleClassName}) &:focus:hover`]:\n styles.rootFocused,\n [`.${IsFocusVisibleClassName} &:hover, :host(.${IsFocusVisibleClassName}) &:hover`]: {\n background: 'inherit;',\n },\n },\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: {\n ':hover': styles.rootHovered,\n ':active': styles.rootPressed,\n // eslint-disable-next-line @fluentui/max-len\n [`.${IsFocusVisibleClassName} &:focus, .${IsFocusVisibleClassName} &:focus:hover, :host(.${IsFocusVisibleClassName}) &:focus, :host(.${IsFocusVisibleClassName}) &:focus:hover`]:\n styles.rootFocused,\n [`.${IsFocusVisibleClassName} &:hover, :host(.${IsFocusVisibleClassName}) &:hover`]: {\n background: 'inherit;',\n },\n },\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: {\n // eslint-disable-next-line @fluentui/max-len\n [`.${IsFocusVisibleClassName} &:focus, .${IsFocusVisibleClassName} &:focus:hover, :host(.${IsFocusVisibleClassName}) &:focus, :host(.${IsFocusVisibleClassName}) &:focus:hover`]:\n styles.rootFocused,\n },\n },\n ],\n ],\n screenReaderText: [\n classNames.screenReaderText,\n styles.screenReaderText,\n hiddenContentStyle,\n { visibility: 'hidden' },\n ],\n });\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 const getItemStyles = (props: IContextualMenuItemStyleProps): IContextualMenuItemStyles => {\n const {\n theme,\n disabled,\n expanded,\n checked,\n isAnchorLink,\n knownIcon,\n itemClassName,\n dividerClassName,\n iconClassName,\n subMenuClassName,\n primaryDisabled,\n className,\n } = props;\n\n // eslint-disable-next-line deprecation/deprecation\n return getItemClassNames(\n theme,\n disabled,\n expanded,\n checked,\n isAnchorLink,\n knownIcon,\n itemClassName,\n dividerClassName,\n iconClassName,\n subMenuClassName,\n primaryDisabled,\n className,\n );\n};\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { ContextualMenuItemBase } from './ContextualMenuItem.base';\nimport { getItemStyles } from './ContextualMenu.classNames';\nimport type {\n IContextualMenuItemProps,\n IContextualMenuItemStyleProps,\n IContextualMenuItemStyles,\n} from './ContextualMenuItem.types';\n\n/**\n * ContextualMenuItem description\n */\nexport const ContextualMenuItem: React.FunctionComponent = styled<\n IContextualMenuItemProps,\n IContextualMenuItemStyleProps,\n IContextualMenuItemStyles\n>(ContextualMenuItemBase, getItemStyles, undefined, { scope: 'ContextualMenuItem' });\n","import * as React from 'react';\nimport { initializeComponentRef, shallowCompare } from '../../../Utilities';\nimport type { IContextualMenuItemWrapperProps } from './ContextualMenuItemWrapper.types';\n\nexport class ContextualMenuItemWrapper extends React.Component {\n constructor(props: IContextualMenuItemWrapperProps) {\n super(props);\n initializeComponentRef(this);\n }\n\n public shouldComponentUpdate(newProps: IContextualMenuItemWrapperProps): boolean {\n return !shallowCompare(newProps, this.props);\n }\n\n protected _onItemMouseEnter = (ev: React.MouseEvent): void => {\n const { item, onItemMouseEnter } = this.props;\n if (onItemMouseEnter) {\n onItemMouseEnter(item, ev, ev.currentTarget as HTMLElement);\n }\n };\n\n protected _onItemClick = (ev: React.MouseEvent): void => {\n const { item, onItemClickBase } = this.props;\n if (onItemClickBase) {\n onItemClickBase(item, ev, ev.currentTarget as HTMLElement);\n }\n };\n\n protected _onItemMouseLeave = (ev: React.MouseEvent): void => {\n const { item, onItemMouseLeave } = this.props;\n if (onItemMouseLeave) {\n onItemMouseLeave(item, ev);\n }\n };\n\n protected _onItemKeyDown = (ev: React.KeyboardEvent): void => {\n const { item, onItemKeyDown } = this.props;\n if (onItemKeyDown) {\n onItemKeyDown(item, ev);\n }\n };\n\n protected _onItemMouseMove = (ev: React.MouseEvent): void => {\n const { item, onItemMouseMove } = this.props;\n if (onItemMouseMove) {\n onItemMouseMove(item, ev, ev.currentTarget as HTMLElement);\n }\n };\n\n protected _getSubmenuTarget = (): HTMLElement | undefined => {\n return undefined;\n };\n}\n","export const KTP_PREFIX = 'ktp';\nexport const KTP_SEPARATOR = '-';\nexport const KTP_FULL_PREFIX = KTP_PREFIX + KTP_SEPARATOR;\nexport const DATAKTP_TARGET = 'data-ktp-target';\nexport const DATAKTP_EXECUTE_TARGET = 'data-ktp-execute-target';\nexport const DATAKTP_ARIA_TARGET = 'data-ktp-aria-target';\nexport const KTP_LAYER_ID = 'ktp-layer-id';\nexport const KTP_ARIA_SEPARATOR = ', ';\n\n// Events\nexport namespace KeytipEvents {\n export const KEYTIP_ADDED = 'keytipAdded';\n export const KEYTIP_REMOVED = 'keytipRemoved';\n export const KEYTIP_UPDATED = 'keytipUpdated';\n export const PERSISTED_KEYTIP_ADDED = 'persistedKeytipAdded';\n export const PERSISTED_KEYTIP_REMOVED = 'persistedKeytipRemoved';\n export const PERSISTED_KEYTIP_EXECUTE = 'persistedKeytipExecute';\n export const ENTER_KEYTIP_MODE = 'enterKeytipMode';\n export const EXIT_KEYTIP_MODE = 'exitKeytipMode';\n}\n","import { EventGroup, getId } from '../../Utilities';\nimport { KeytipEvents } from '../../utilities/keytips/KeytipConstants';\nimport type { IKeytipProps } from '../../Keytip';\n\nexport interface IUniqueKeytip {\n uniqueID: string;\n keytip: IKeytipProps;\n}\n\n/**\n * This class is responsible for handling registering, updating, and unregistering of keytips\n */\nexport class KeytipManager {\n private static _instance: KeytipManager = new KeytipManager();\n\n public keytips: { [key: string]: IUniqueKeytip } = {};\n public persistedKeytips: { [key: string]: IUniqueKeytip } = {};\n public sequenceMapping: { [key: string]: IKeytipProps } = {};\n\n // This is (and should be) updated and kept in sync\n // with the inKeytipMode in KeytipLayer.\n public inKeytipMode = false;\n\n // Boolean that gets checked before entering keytip mode by the KeytipLayer\n // Used for an override in special cases (e.g. Disable entering keytip mode when a modal is shown)\n public shouldEnterKeytipMode = true;\n\n // Boolean to indicate whether to delay firing an event to update subscribers of\n // keytip data changed.\n public delayUpdatingKeytipChange = false;\n\n /**\n * Static function to get singleton KeytipManager instance\n *\n * @returns Singleton KeytipManager instance\n */\n public static getInstance(): KeytipManager {\n return this._instance;\n }\n\n /**\n * Initialization code to set set parameters to define\n * how the KeytipManager handles keytip data.\n *\n * @param delayUpdatingKeytipChange - T/F if we should delay notifiying keytip subscribers\n * of keytip changes\n */\n public init(delayUpdatingKeytipChange: boolean) {\n this.delayUpdatingKeytipChange = delayUpdatingKeytipChange;\n }\n\n /**\n * Registers a keytip\n *\n * @param keytipProps - Keytip to register\n * @param persisted - T/F if this keytip should be persisted, default is false\n * @returns Unique ID for this keytip\n */\n public register(keytipProps: IKeytipProps, persisted: boolean = false): string {\n let props: IKeytipProps = keytipProps;\n if (!persisted) {\n // Add the overflowSetSequence if necessary\n props = this.addParentOverflow(keytipProps);\n this.sequenceMapping[props.keySequences.toString()] = props;\n }\n // Create a unique keytip\n const uniqueKeytip: IUniqueKeytip = this._getUniqueKtp(props);\n // Add to dictionary\n persisted\n ? (this.persistedKeytips[uniqueKeytip.uniqueID] = uniqueKeytip)\n : (this.keytips[uniqueKeytip.uniqueID] = uniqueKeytip);\n\n // We only want to add something new if we are currently showing keytip mode\n if (this.inKeytipMode || !this.delayUpdatingKeytipChange) {\n const event = persisted ? KeytipEvents.PERSISTED_KEYTIP_ADDED : KeytipEvents.KEYTIP_ADDED;\n EventGroup.raise(this, event, {\n keytip: props,\n uniqueID: uniqueKeytip.uniqueID,\n });\n }\n\n return uniqueKeytip.uniqueID;\n }\n\n /**\n * Update a keytip\n *\n * @param keytipProps - Keytip to update\n * @param uniqueID - Unique ID of this keytip\n */\n public update(keytipProps: IKeytipProps, uniqueID: string): void {\n const newKeytipProps = this.addParentOverflow(keytipProps);\n const uniqueKeytip = this._getUniqueKtp(newKeytipProps, uniqueID);\n const oldKeyTip = this.keytips[uniqueID];\n if (oldKeyTip) {\n // Update everything except 'visible'\n uniqueKeytip.keytip.visible = oldKeyTip.keytip.visible;\n // Update keytip in this.keytips\n this.keytips[uniqueID] = uniqueKeytip;\n\n // Update the sequence to be up to date\n delete this.sequenceMapping[oldKeyTip.keytip.keySequences.toString()];\n this.sequenceMapping[uniqueKeytip.keytip.keySequences.toString()] = uniqueKeytip.keytip;\n\n // Raise event only if we are currently in keytip mode\n if (this.inKeytipMode || !this.delayUpdatingKeytipChange) {\n EventGroup.raise(this, KeytipEvents.KEYTIP_UPDATED, {\n keytip: uniqueKeytip.keytip,\n uniqueID: uniqueKeytip.uniqueID,\n });\n }\n }\n }\n\n /**\n * Unregisters a keytip\n *\n * @param keytipToRemove - IKeytipProps of the keytip to remove\n * @param uniqueID - Unique ID of this keytip\n * @param persisted - T/F if this keytip should be persisted, default is false\n */\n public unregister(keytipToRemove: IKeytipProps, uniqueID: string, persisted: boolean = false): void {\n persisted ? delete this.persistedKeytips[uniqueID] : delete this.keytips[uniqueID];\n !persisted && delete this.sequenceMapping[keytipToRemove.keySequences.toString()];\n\n const event = persisted ? KeytipEvents.PERSISTED_KEYTIP_REMOVED : KeytipEvents.KEYTIP_REMOVED;\n // Update keytips only if we're in keytip mode\n if (this.inKeytipMode || !this.delayUpdatingKeytipChange) {\n EventGroup.raise(this, event, {\n keytip: keytipToRemove,\n uniqueID,\n });\n }\n }\n\n /**\n * Manual call to enter keytip mode\n */\n public enterKeytipMode(): void {\n EventGroup.raise(this, KeytipEvents.ENTER_KEYTIP_MODE);\n }\n\n /**\n * Manual call to exit keytip mode\n */\n public exitKeytipMode(): void {\n EventGroup.raise(this, KeytipEvents.EXIT_KEYTIP_MODE);\n }\n\n /**\n * Gets all IKeytipProps from this.keytips\n *\n * @returns All keytips stored in the manager\n */\n public getKeytips(): IKeytipProps[] {\n return Object.keys(this.keytips).map(key => this.keytips[key].keytip);\n }\n\n /**\n * Adds the overflowSetSequence to the keytipProps if its parent keytip also has it\n *\n * @param keytipProps - Keytip props to add overflowSetSequence to if necessary\n * @returns - Modified keytip props, if needed to be modified\n */\n public addParentOverflow(keytipProps: IKeytipProps): IKeytipProps {\n const fullSequence = [...keytipProps.keySequences];\n fullSequence.pop();\n if (fullSequence.length !== 0) {\n const parentKeytip = this.sequenceMapping[fullSequence.toString()];\n if (parentKeytip && parentKeytip.overflowSetSequence) {\n return {\n ...keytipProps,\n overflowSetSequence: parentKeytip.overflowSetSequence,\n };\n }\n }\n return keytipProps;\n }\n\n /**\n * Public function to bind for overflow items that have a submenu\n */\n public menuExecute(overflowButtonSequences: string[], keytipSequences: string[]) {\n EventGroup.raise(this, KeytipEvents.PERSISTED_KEYTIP_EXECUTE, {\n overflowButtonSequences,\n keytipSequences,\n });\n }\n\n /**\n * Creates an IUniqueKeytip object\n *\n * @param keytipProps - IKeytipProps\n * @param uniqueID - Unique ID, will default to the next unique ID if not passed\n * @returns IUniqueKeytip object\n */\n private _getUniqueKtp(keytipProps: IKeytipProps, uniqueID: string = getId()): IUniqueKeytip {\n return { keytip: { ...keytipProps }, uniqueID };\n }\n}\n","import { KTP_SEPARATOR, KTP_PREFIX, DATAKTP_TARGET, DATAKTP_EXECUTE_TARGET, KTP_LAYER_ID } from './KeytipConstants';\nimport { addElementAtIndex } from '../../Utilities';\n\n/**\n * Converts a whole set of KeySequences into one keytip ID, which will be the ID for the last keytip sequence specified\n * keySequences should not include the initial keytip 'start' sequence.\n *\n * @param keySequences - Full path of IKeySequences for one keytip.\n * @returns String to use for the keytip ID.\n */\nexport function sequencesToID(keySequences: string[]): string {\n return keySequences.reduce((prevValue: string, keySequence: string): string => {\n return prevValue + KTP_SEPARATOR + keySequence.split('').join(KTP_SEPARATOR);\n }, KTP_PREFIX);\n}\n\n/**\n * Merges an overflow sequence with a key sequence.\n *\n * @param keySequences - Full sequence for one keytip.\n * @param overflowKeySequences - Full overflow keytip sequence.\n * @returns Sequence that will be used by the keytip when in the overflow.\n */\nexport function mergeOverflows(keySequences: string[], overflowKeySequences: string[]): string[] {\n const overflowSequenceLen = overflowKeySequences.length;\n const overflowSequence = [...overflowKeySequences].pop();\n const newKeySequences = [...keySequences];\n return addElementAtIndex(newKeySequences, overflowSequenceLen - 1, overflowSequence!);\n}\n\n/**\n * Constructs the data-ktp-target attribute selector from a full key sequence.\n *\n * @param keySequences - Full string[] for a Keytip.\n * @returns String selector to use to query for the keytip target.\n */\nexport function ktpTargetFromSequences(keySequences: string[]): string {\n return '[' + DATAKTP_TARGET + '=\"' + sequencesToID(keySequences) + '\"]';\n}\n\n/**\n * Constructs the data-ktp-execute-target attribute selector from a keytip ID.\n *\n * @param keytipId - ID of the Keytip.\n * @returns String selector to use to query for the keytip execute target.\n */\nexport function ktpTargetFromId(keytipId: string): string {\n return '[' + DATAKTP_EXECUTE_TARGET + '=\"' + keytipId + '\"]';\n}\n\n/**\n * Gets the aria-describedby value to put on the component with this keytip.\n *\n * @param keySequences - KeySequences of the keytip.\n * @returns The aria-describedby value to set on the component with this keytip.\n */\nexport function getAriaDescribedBy(keySequences: string[]): string {\n const describedby = ' ' + KTP_LAYER_ID;\n if (!keySequences.length) {\n // Return just the layer ID\n return describedby;\n }\n\n return describedby + ' ' + sequencesToID(keySequences);\n}\n","import * as React from 'react';\nimport { useConst, useIsomorphicLayoutEffect, usePrevious } from '@fluentui/react-hooks';\nimport { mergeAriaAttributeValues } from '../../Utilities';\nimport { KeytipManager, mergeOverflows, sequencesToID, getAriaDescribedBy } from '../../utilities/keytips/index';\nimport type { KeytipDataOptions } from './KeytipData.types';\nimport type { IKeytipProps } from '../../Keytip';\n\nexport interface IKeytipData {\n ariaDescribedBy: string | undefined;\n keytipId: string | undefined;\n}\n\n/**\n * Hook that creates attributes for components which are enabled with Keytip.\n */\nexport function useKeytipData(options: KeytipDataOptions): IKeytipData {\n const uniqueId = React.useRef();\n const keytipProps: IKeytipProps | undefined = options.keytipProps\n ? {\n disabled: options.disabled,\n ...options.keytipProps,\n }\n : undefined;\n\n const keytipManager = useConst(KeytipManager.getInstance());\n const prevOptions = usePrevious(options);\n\n // useLayoutEffect used to strictly emulate didUpdate/didMount behavior\n useIsomorphicLayoutEffect(() => {\n if (\n uniqueId.current &&\n keytipProps &&\n (prevOptions?.keytipProps !== options.keytipProps || prevOptions?.disabled !== options.disabled)\n ) {\n keytipManager.update(keytipProps, uniqueId.current);\n }\n });\n\n useIsomorphicLayoutEffect(() => {\n // Register Keytip in KeytipManager\n if (keytipProps) {\n uniqueId.current = keytipManager.register(keytipProps);\n }\n\n return () => {\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\n let nativeKeytipProps: IKeytipData = {\n ariaDescribedBy: options.ariaDescribedBy,\n keytipId: undefined,\n };\n\n if (keytipProps) {\n nativeKeytipProps = getKeytipData(keytipManager, keytipProps, options.ariaDescribedBy);\n }\n\n return nativeKeytipProps;\n}\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(\n keytipManager: KeytipManager,\n keytipProps: IKeytipProps,\n describedByPrepend?: string,\n): IKeytipData {\n // Add the parent overflow sequence if necessary\n const newKeytipProps = keytipManager.addParentOverflow(keytipProps);\n\n // Construct aria-describedby and data-ktp-id attributes\n const ariaDescribedBy = mergeAriaAttributeValues(\n describedByPrepend,\n getAriaDescribedBy(newKeytipProps.keySequences),\n )!;\n\n let keySequences = [...newKeytipProps.keySequences];\n if (newKeytipProps.overflowSetSequence) {\n keySequences = mergeOverflows(keySequences, newKeytipProps.overflowSetSequence);\n }\n const keytipId = sequencesToID(keySequences);\n\n return {\n ariaDescribedBy,\n keytipId,\n };\n}\n","import * as React from 'react';\nimport { DATAKTP_TARGET, DATAKTP_EXECUTE_TARGET } from '../../utilities/keytips/index';\nimport { useKeytipData } from './useKeytipData';\nimport type { IRenderComponent } from '../../Utilities';\nimport type { IKeytipDataProps } from './KeytipData.types';\n\n/**\n * A small element to help the target component correctly read out its aria-describedby for its Keytip\n * {@docCategory Keytips}\n */\nexport const KeytipData: React.FunctionComponent> = props => {\n const { children, ...keytipDataProps } = props;\n const { keytipId, ariaDescribedBy } = useKeytipData(keytipDataProps);\n\n return children({\n [DATAKTP_TARGET]: keytipId,\n [DATAKTP_EXECUTE_TARGET]: keytipId,\n 'aria-describedby': ariaDescribedBy,\n });\n};\n","import * as React from 'react';\nimport {\n anchorProperties,\n getNativeProps,\n memoizeFunction,\n getId,\n mergeAriaAttributeValues,\n IComponentAs,\n composeComponentAs,\n} from '../../../Utilities';\nimport { ContextualMenuItemWrapper } from './ContextualMenuItemWrapper';\nimport { KeytipData } from '../../../KeytipData';\nimport { isItemDisabled, hasSubmenu } from '../../../utilities/contextualMenu/index';\nimport { ContextualMenuItem } from '../ContextualMenuItem';\nimport type { IKeytipDataProps } from '../../../KeytipData';\nimport type { IKeytipProps } from '../../../Keytip';\nimport { IContextualMenuItemProps } from '../ContextualMenuItem.types';\n\nexport class ContextualMenuAnchor extends ContextualMenuItemWrapper {\n private _anchor = React.createRef();\n private _ariaDescriptionId: string;\n\n private _getMemoizedMenuButtonKeytipProps = memoizeFunction((keytipProps: IKeytipProps) => {\n return {\n ...keytipProps,\n hasMenu: true,\n };\n });\n\n public render() {\n const {\n item,\n classNames,\n index,\n focusableElementIndex,\n totalItemCount,\n hasCheckmarks,\n hasIcons,\n expandedMenuItemKey,\n onItemClick,\n openSubMenu,\n dismissSubMenu,\n dismissMenu,\n } = this.props;\n\n let ChildrenRenderer: IComponentAs = ContextualMenuItem;\n\n if (this.props.item.contextualMenuItemAs) {\n ChildrenRenderer = composeComponentAs(this.props.item.contextualMenuItemAs, ChildrenRenderer);\n }\n\n if (this.props.contextualMenuItemAs) {\n ChildrenRenderer = composeComponentAs(this.props.contextualMenuItemAs, ChildrenRenderer);\n }\n\n let 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\n const itemHasSubmenu = hasSubmenu(item);\n const nativeProps = getNativeProps>(item, anchorProperties);\n const disabled = isItemDisabled(item);\n const { itemProps, ariaDescription } = item;\n\n let { keytipProps } = item;\n if (keytipProps && itemHasSubmenu) {\n keytipProps = this._getMemoizedMenuButtonKeytipProps(keytipProps);\n }\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 const ariaDescribedByIds = mergeAriaAttributeValues(\n item.ariaDescribedBy,\n ariaDescription ? this._ariaDescriptionId : undefined,\n nativeProps['aria-describedby'],\n );\n\n const additionalItemProperties = {\n 'aria-describedby': ariaDescribedByIds,\n };\n\n return (\n
\n \n {(keytipAttributes: IKeytipDataProps): JSX.Element => (\n \n \n {this._renderAriaDescription(ariaDescription, classNames.screenReaderText)}\n \n )}\n \n
\n );\n }\n\n protected _getSubmenuTarget = (): HTMLElement | undefined => {\n return this._anchor.current ? this._anchor.current : undefined;\n };\n\n protected _onItemClick = (ev: React.MouseEvent): void => {\n const { item, onItemClick } = this.props;\n if (onItemClick) {\n onItemClick(item, ev);\n }\n };\n\n protected _renderAriaDescription = (ariaDescription?: string, className?: string) => {\n // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan\n return ariaDescription ? (\n \n {ariaDescription}\n \n ) : null;\n };\n}\n","import * as React from 'react';\nimport {\n buttonProperties,\n getNativeProps,\n memoizeFunction,\n getId,\n mergeAriaAttributeValues,\n IComponentAs,\n composeComponentAs,\n} from '../../../Utilities';\nimport { ContextualMenuItemWrapper } from './ContextualMenuItemWrapper';\nimport { KeytipData } from '../../../KeytipData';\nimport { getIsChecked, isItemDisabled, hasSubmenu, getMenuItemAriaRole } from '../../../utilities/contextualMenu/index';\nimport { ContextualMenuItem } from '../ContextualMenuItem';\nimport type { IKeytipDataProps } from '../../../KeytipData';\nimport type { IKeytipProps } from '../../../Keytip';\nimport { IContextualMenuItemProps } from '../ContextualMenuItem.types';\n\nexport class ContextualMenuButton extends ContextualMenuItemWrapper {\n private _btn = React.createRef();\n private _ariaDescriptionId: string;\n\n private _getMemoizedMenuButtonKeytipProps = memoizeFunction((keytipProps: IKeytipProps) => {\n return {\n ...keytipProps,\n hasMenu: true,\n };\n });\n\n public render() {\n const {\n item,\n classNames,\n index,\n focusableElementIndex,\n totalItemCount,\n hasCheckmarks,\n hasIcons,\n contextualMenuItemAs,\n expandedMenuItemKey,\n onItemMouseDown,\n onItemClick,\n openSubMenu,\n dismissSubMenu,\n dismissMenu,\n } = this.props;\n\n let ChildrenRenderer: IComponentAs = ContextualMenuItem;\n\n if (item.contextualMenuItemAs) {\n ChildrenRenderer = composeComponentAs(item.contextualMenuItemAs, ChildrenRenderer);\n }\n\n if (contextualMenuItemAs) {\n ChildrenRenderer = composeComponentAs(contextualMenuItemAs, ChildrenRenderer);\n }\n\n const isChecked: boolean | null | undefined = getIsChecked(item);\n const canCheck: boolean = isChecked !== null;\n const defaultRole = getMenuItemAriaRole(item);\n const itemHasSubmenu = hasSubmenu(item);\n const { itemProps, ariaLabel, ariaDescription } = item;\n\n const buttonNativeProperties = getNativeProps>(\n item,\n buttonProperties,\n );\n // Do not add the disabled attribute to the button so that it is focusable\n delete buttonNativeProperties.disabled;\n\n const itemRole = item.role || defaultRole;\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 const ariaDescribedByIds = mergeAriaAttributeValues(\n item.ariaDescribedBy,\n ariaDescription ? this._ariaDescriptionId : undefined,\n buttonNativeProperties['aria-describedby'],\n );\n\n const 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: (ev: React.MouseEvent) =>\n onItemMouseDown ? onItemMouseDown(item, ev) : undefined,\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':\n (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\n let { keytipProps } = item;\n if (keytipProps && itemHasSubmenu) {\n keytipProps = this._getMemoizedMenuButtonKeytipProps(keytipProps);\n }\n\n return (\n \n {(keytipAttributes: IKeytipDataProps): JSX.Element => (\n \n )}\n \n );\n }\n\n protected _renderAriaDescription = (ariaDescription?: string, className?: string) => {\n // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan\n return ariaDescription ? (\n \n {ariaDescription}\n \n ) : null;\n };\n\n protected _getSubmenuTarget = (): HTMLElement | undefined => {\n return this._btn.current ? this._btn.current : undefined;\n };\n}\n","import type { IVerticalDividerPropsStyles, IVerticalDividerStyles } from './VerticalDivider.types';\nimport type { IStyleFunction } from '../../Utilities';\n\nexport const getStyles: IStyleFunction = (\n props: IVerticalDividerPropsStyles,\n): IVerticalDividerStyles => {\n // eslint-disable-next-line deprecation/deprecation\n const { theme, getClassNames, className } = props;\n\n if (!theme) {\n throw new Error('Theme is undefined or null.');\n }\n\n if (getClassNames) {\n const names = getClassNames(theme);\n return {\n wrapper: [names.wrapper],\n divider: [names.divider],\n };\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","import * as React from 'react';\nimport { classNamesFunction } from '../../Utilities';\nimport type {\n IVerticalDividerProps,\n IVerticalDividerPropsStyles,\n IVerticalDividerStyles,\n} from './VerticalDivider.types';\n\nconst getClassNames = classNamesFunction();\n\nexport const VerticalDividerBase: React.FunctionComponent = React.forwardRef<\n HTMLDivElement,\n IVerticalDividerProps\n>((props, ref) => {\n // eslint-disable-next-line deprecation/deprecation\n const { styles, theme, getClassNames: deprecatedGetClassNames, className } = props;\n const classNames = getClassNames(styles, { theme, getClassNames: deprecatedGetClassNames, className });\n return (\n \n \n \n );\n});\nVerticalDividerBase.displayName = 'VerticalDividerBase';\n","import * as React from 'react';\nimport { getStyles } from './VerticalDivider.styles';\nimport { VerticalDividerBase } from './VerticalDivider.base';\nimport { styled } from '../../Utilities';\nimport type {\n IVerticalDividerProps,\n IVerticalDividerStyles,\n IVerticalDividerPropsStyles,\n} from './VerticalDivider.types';\n\nexport const VerticalDivider: React.FunctionComponent = styled<\n IVerticalDividerProps,\n IVerticalDividerPropsStyles,\n IVerticalDividerStyles\n>(VerticalDividerBase, getStyles, undefined, {\n scope: 'VerticalDivider',\n});\n","import * as React from 'react';\nimport {\n buttonProperties,\n getNativeProps,\n KeyCodes,\n mergeAriaAttributeValues,\n memoizeFunction,\n Async,\n EventGroup,\n getId,\n composeComponentAs,\n IComponentAs,\n} from '../../../Utilities';\nimport { ContextualMenuItem } from '../ContextualMenuItem';\nimport { getSplitButtonVerticalDividerClassNames } from '../ContextualMenu.classNames';\nimport { KeytipData } from '../../../KeytipData';\nimport { getIsChecked, getMenuItemAriaRole, hasSubmenu, isItemDisabled } from '../../../utilities/contextualMenu/index';\nimport { VerticalDivider } from '../../../Divider';\nimport { ContextualMenuItemWrapper } from './ContextualMenuItemWrapper';\nimport type { IContextualMenuItem } from '../ContextualMenu.types';\nimport type { IMenuItemClassNames } from '../ContextualMenu.classNames';\nimport type { IKeytipProps } from '../../../Keytip';\nimport type { IContextualMenuItemWrapperProps } from './ContextualMenuItemWrapper.types';\nimport { IContextualMenuItemProps } from '../ContextualMenuItem.types';\n\nexport interface IContextualMenuSplitButtonState {}\n\nconst TouchIdleDelay = 500; /* ms */\n\nexport class ContextualMenuSplitButton extends ContextualMenuItemWrapper {\n private _splitButton: HTMLDivElement;\n private _lastTouchTimeoutId: number | undefined;\n private _processingTouch: boolean;\n private _ariaDescriptionId: string;\n private _dismissLabelId: string;\n\n private _async: Async;\n private _events: EventGroup;\n\n private _getMemoizedMenuButtonKeytipProps = memoizeFunction((keytipProps: IKeytipProps) => {\n return {\n ...keytipProps,\n hasMenu: true,\n };\n });\n\n constructor(props: IContextualMenuItemWrapperProps) {\n super(props);\n\n this._async = new Async(this);\n this._events = new EventGroup(this);\n this._dismissLabelId = getId();\n }\n\n public componentDidMount() {\n if (this._splitButton && 'onpointerdown' in this._splitButton) {\n this._events.on(this._splitButton, 'pointerdown', this._onPointerDown, true);\n }\n }\n\n public componentWillUnmount(): void {\n this._async.dispose();\n this._events.dispose();\n }\n\n public render(): JSX.Element | null {\n const {\n item,\n classNames,\n index,\n focusableElementIndex,\n totalItemCount,\n hasCheckmarks,\n hasIcons,\n onItemMouseLeave,\n expandedMenuItemKey,\n } = this.props;\n\n const itemHasSubmenu = hasSubmenu(item);\n\n let { keytipProps } = item;\n if (keytipProps) {\n keytipProps = this._getMemoizedMenuButtonKeytipProps(keytipProps);\n }\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 const { ariaDescription } = item;\n if (ariaDescription) {\n this._ariaDescriptionId = getId();\n }\n\n const ariaChecked = getIsChecked(item) ?? undefined;\n\n return (\n \n {(keytipAttributes: any): JSX.Element => (\n (this._splitButton = splitButton)}\n role={getMenuItemAriaRole(item)}\n aria-label={item.ariaLabel}\n className={classNames.splitContainer}\n aria-disabled={isItemDisabled(item)}\n aria-expanded={itemHasSubmenu ? item.key === expandedMenuItemKey : undefined}\n aria-haspopup={true}\n aria-describedby={mergeAriaAttributeValues(\n item.ariaDescribedBy,\n ariaDescription ? this._ariaDescriptionId : undefined,\n keytipAttributes['aria-describedby'],\n )}\n aria-checked={ariaChecked}\n aria-posinset={focusableElementIndex + 1}\n aria-setsize={totalItemCount}\n onMouseEnter={this._onItemMouseEnterPrimary}\n onMouseLeave={\n onItemMouseLeave ? onItemMouseLeave.bind(this, { ...item, subMenuProps: null, items: null }) : undefined\n }\n onMouseMove={this._onItemMouseMovePrimary}\n onKeyDown={this._onItemKeyDown}\n onClick={this._executeItemClick}\n onTouchStart={this._onTouchStart}\n tabIndex={0}\n data-is-focusable={true}\n aria-roledescription={item['aria-roledescription']}\n >\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 )}\n \n );\n }\n\n protected _onItemKeyDown = (ev: React.KeyboardEvent): void => {\n const { item, onItemKeyDown } = this.props;\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n this._executeItemClick(ev);\n ev.preventDefault();\n ev.stopPropagation();\n } else if (onItemKeyDown) {\n onItemKeyDown(item, ev);\n }\n };\n\n protected _getSubmenuTarget = (): HTMLElement | undefined => {\n return this._splitButton;\n };\n\n protected _renderAriaDescription = (ariaDescription?: string, className?: string) => {\n // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan\n return ariaDescription ? (\n \n {ariaDescription}\n \n ) : null;\n };\n\n private _renderSplitPrimaryButton(\n item: IContextualMenuItem,\n // eslint-disable-next-line deprecation/deprecation\n classNames: IMenuItemClassNames,\n index: number,\n hasCheckmarks: boolean,\n hasIcons: boolean,\n ) {\n const { contextualMenuItemAs: ChildrenRenderer = ContextualMenuItem, onItemClick } = this.props;\n\n const itemProps: IContextualMenuItem = {\n key: item.key,\n disabled: isItemDisabled(item) || item.primaryDisabled,\n /* eslint-disable deprecation/deprecation */\n name: item.name,\n text: item.text || item.name,\n secondaryText: item.secondaryText,\n /* eslint-enable deprecation/deprecation */\n className: classNames.splitPrimary,\n canCheck: item.canCheck,\n isChecked: item.isChecked,\n checked: item.checked,\n iconProps: item.iconProps,\n id: this._dismissLabelId,\n onClick: item.onClick,\n onRenderIcon: item.onRenderIcon,\n data: item.data,\n 'data-is-focusable': false,\n };\n\n const { itemProps: itemComponentProps } = item;\n\n return (\n \n );\n }\n\n private _renderSplitDivider(item: IContextualMenuItem) {\n const getDividerClassNames =\n item.getSplitButtonVerticalDividerClassNames || getSplitButtonVerticalDividerClassNames;\n return ;\n }\n\n private _renderSplitIconButton(\n item: IContextualMenuItem,\n classNames: IMenuItemClassNames, // eslint-disable-line deprecation/deprecation\n index: number,\n keytipAttributes: any,\n ) {\n const { onItemMouseLeave, onItemMouseDown, openSubMenu, dismissSubMenu, dismissMenu } = this.props;\n\n let ChildrenRenderer: IComponentAs = ContextualMenuItem;\n\n if (this.props.item.contextualMenuItemAs) {\n ChildrenRenderer = composeComponentAs(this.props.item.contextualMenuItemAs, ChildrenRenderer);\n }\n\n if (this.props.contextualMenuItemAs) {\n ChildrenRenderer = composeComponentAs(this.props.contextualMenuItemAs, ChildrenRenderer);\n }\n\n const itemProps: IContextualMenuItem = {\n onClick: this._onIconItemClick,\n disabled: isItemDisabled(item),\n className: classNames.splitMenu,\n subMenuProps: item.subMenuProps,\n submenuIconProps: item.submenuIconProps,\n split: true,\n key: item.key,\n 'aria-labelledby': this._dismissLabelId,\n };\n\n const buttonProps = {\n ...getNativeProps>(itemProps, buttonProperties),\n ...{\n onMouseEnter: this._onItemMouseEnterIcon,\n onMouseLeave: onItemMouseLeave ? onItemMouseLeave.bind(this, item) : undefined,\n onMouseDown: (ev: React.MouseEvent) =>\n onItemMouseDown ? onItemMouseDown(item, ev) : undefined,\n onMouseMove: this._onItemMouseMoveIcon,\n 'data-is-focusable': false,\n 'data-ktp-execute-target': keytipAttributes['data-ktp-execute-target'],\n 'aria-haspopup': true,\n },\n };\n\n const { itemProps: itemComponentProps } = item;\n\n return (\n \n );\n }\n\n private _onItemMouseEnterPrimary = (ev: React.MouseEvent): void => {\n const { item, onItemMouseEnter } = this.props;\n if (onItemMouseEnter) {\n onItemMouseEnter({ ...item, subMenuProps: undefined, items: undefined }, ev, this._splitButton);\n }\n };\n\n private _onItemMouseEnterIcon = (ev: React.MouseEvent): void => {\n const { item, onItemMouseEnter } = this.props;\n if (onItemMouseEnter) {\n onItemMouseEnter(item, ev, this._splitButton);\n }\n };\n\n private _onItemMouseMovePrimary = (ev: React.MouseEvent): void => {\n const { item, onItemMouseMove } = this.props;\n if (onItemMouseMove) {\n onItemMouseMove({ ...item, subMenuProps: undefined, items: undefined }, ev, this._splitButton);\n }\n };\n\n private _onItemMouseMoveIcon = (ev: React.MouseEvent): void => {\n const { item, onItemMouseMove } = this.props;\n if (onItemMouseMove) {\n onItemMouseMove(item, ev, this._splitButton);\n }\n };\n\n private _onIconItemClick = (ev: React.MouseEvent): void => {\n const { item, onItemClickBase } = this.props;\n if (onItemClickBase) {\n onItemClickBase(item, ev, (this._splitButton ? this._splitButton : ev.currentTarget) as HTMLElement);\n }\n };\n\n private _executeItemClick = (ev: React.MouseEvent | React.KeyboardEvent): void => {\n const { item, executeItemClick, onItemClick } = this.props;\n\n if (item.disabled || item.isDisabled) {\n return;\n }\n\n if (this._processingTouch && !item.canCheck && onItemClick) {\n return onItemClick(item, ev);\n }\n\n if (executeItemClick) {\n executeItemClick(item, ev);\n }\n };\n\n private _onTouchStart = (ev: React.TouchEvent): void => {\n if (this._splitButton && !('onpointerdown' in this._splitButton)) {\n this._handleTouchAndPointerEvent(ev);\n }\n };\n\n private _onPointerDown = (ev: PointerEvent): void => {\n if (ev.pointerType === 'touch') {\n this._handleTouchAndPointerEvent(ev);\n ev.preventDefault();\n ev.stopImmediatePropagation();\n }\n };\n\n private _handleTouchAndPointerEvent(ev: React.TouchEvent | PointerEvent) {\n const { onTap } = this.props;\n\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(() => {\n this._processingTouch = false;\n this._lastTouchTimeoutId = undefined;\n }, TouchIdleDelay);\n }\n}\n","import * as React from 'react';\nimport { hoistMethods, unhoistMethods } from '../../Utilities';\n\nexport class BaseDecorator extends React.Component {\n protected _composedComponentInstance: React.Component;\n\n private _hoisted: string[];\n\n constructor(props: TProps) {\n super(props);\n this._updateComposedComponentRef = this._updateComposedComponentRef.bind(this);\n }\n\n /**\n * Updates the ref to the component composed by the decorator, which will also take care of hoisting\n * (and unhoisting as appropriate) methods from said component.\n *\n * Pass this method as the argument to the 'ref' property of the composed component.\n */\n protected _updateComposedComponentRef(composedComponentInstance: React.Component): void {\n this._composedComponentInstance = composedComponentInstance;\n if (composedComponentInstance) {\n this._hoisted = hoistMethods(this, composedComponentInstance);\n } else if (this._hoisted) {\n unhoistMethods(this, this._hoisted);\n }\n }\n}\n","import * as React from 'react';\nimport { BaseDecorator } from './BaseDecorator';\nimport { getWindow, hoistStatics, EventGroup } from '../../Utilities';\nimport { WindowContext } from '../../WindowProvider';\n\n/**\n * @deprecated Decorator usage is deprecated. Either call `getResponsiveMode` manually, or\n * use the `useResponsiveMode` hook within a function component.\n */\nexport interface IWithResponsiveModeState {\n responsiveMode?: ResponsiveMode;\n}\n\nexport enum ResponsiveMode {\n /** Width \\<= 479px */\n small = 0,\n /** Width \\> 479px and \\<= 639px */\n medium = 1,\n /** Width \\> 639px and \\<= 1023px */\n large = 2,\n /** Width \\> 1023px and \\<= 1365px */\n xLarge = 3,\n /** Width \\> 1365px and \\<= 1919px */\n xxLarge = 4,\n /** Width \\> 1919px */\n xxxLarge = 5,\n unknown = 999,\n}\n\nconst RESPONSIVE_MAX_CONSTRAINT = [479, 639, 1023, 1365, 1919, 99999999];\n\n/**\n * User specified mode to default to, useful for server side rendering scenarios.\n */\nlet _defaultMode: ResponsiveMode | undefined;\n\n/**\n * Tracking the last mode we successfully rendered, which allows us to\n * paint initial renders with the correct size.\n */\nlet _lastMode: ResponsiveMode | undefined;\n\n/**\n * Allows a server rendered scenario to provide a **default** responsive mode.\n * This WILL NOT trigger any updates to components that have already consumed the responsive mode!\n */\nexport function setResponsiveMode(responsiveMode: ResponsiveMode | undefined): void {\n _defaultMode = responsiveMode;\n}\n\n/**\n * Initializes the responsive mode to the current window size. This can be used to avoid\n * a re-render during first component mount since the window would otherwise not be measured\n * until after mounting.\n *\n * This WILL NOT trigger any updates to components that have already consumed the responsive mode!\n */\nexport function initializeResponsiveMode(element?: HTMLElement): void {\n const currentWindow = getWindow(element);\n\n if (currentWindow) {\n getResponsiveMode(currentWindow);\n }\n}\n\nexport function getInitialResponsiveMode(): ResponsiveMode {\n return _defaultMode ?? _lastMode ?? ResponsiveMode.large;\n}\n\n/**\n * @deprecated Decorator usage is deprecated. Either call `getResponsiveMode` manually, or\n * use the `useResponsiveMode` hook within a function component.\n */\nexport function withResponsiveMode(\n ComposedComponent: new (props: TProps, ...args: any[]) => React.Component,\n): any {\n // eslint-disable-next-line deprecation/deprecation\n const resultClass = class WithResponsiveMode extends BaseDecorator {\n public static contextType = WindowContext;\n public context: React.ContextType;\n\n private _events: EventGroup;\n\n constructor(props: TProps) {\n super(props);\n this._events = new EventGroup(this);\n this._updateComposedComponentRef = this._updateComposedComponentRef.bind(this);\n\n this.state = {\n responsiveMode: getInitialResponsiveMode(),\n };\n }\n\n public componentDidMount(): void {\n this._events.on(this.context.window, 'resize', this._onResize);\n this._onResize();\n }\n\n public componentWillUnmount(): void {\n this._events.dispose();\n }\n\n public render(): JSX.Element | null {\n const { responsiveMode } = this.state;\n\n return responsiveMode === ResponsiveMode.unknown ? null : (\n \n );\n }\n\n private _onResize = () => {\n const responsiveMode = getResponsiveMode(this.context.window);\n\n if (responsiveMode !== this.state.responsiveMode) {\n this.setState({\n responsiveMode,\n });\n }\n };\n };\n return hoistStatics(ComposedComponent, resultClass);\n}\n\nfunction getWidthOfCurrentWindow(currentWindow: Window): number {\n try {\n return currentWindow.document.documentElement.clientWidth;\n } catch (e) {\n return currentWindow.innerWidth;\n }\n}\n\n/**\n * Hook to get the current responsive mode (window size category).\n * @param currentWindow - Use this window when determining the responsive mode.\n */\nexport function getResponsiveMode(currentWindow: Window | undefined): ResponsiveMode {\n let responsiveMode = ResponsiveMode.small;\n\n if (currentWindow) {\n try {\n while (getWidthOfCurrentWindow(currentWindow) > RESPONSIVE_MAX_CONSTRAINT[responsiveMode]) {\n responsiveMode++;\n }\n } catch (e) {\n // Return a best effort result in cases where we're in the browser but it throws on getting innerWidth.\n responsiveMode = getInitialResponsiveMode();\n }\n\n // Tracking last mode just gives us a better default in future renders,\n // which avoids starting with the wrong value if we've measured once.\n _lastMode = responsiveMode;\n } else {\n if (_defaultMode !== undefined) {\n responsiveMode = _defaultMode;\n } else {\n throw new Error(\n 'Content was rendered in a server environment without providing a default responsive mode. ' +\n 'Call setResponsiveMode to define what the responsive mode is.',\n );\n }\n }\n\n return responsiveMode;\n}\n","import * as React from 'react';\nimport { getWindow } from '@fluentui/utilities';\nimport { useOnEvent } from '@fluentui/react-hooks';\nimport { ResponsiveMode, getResponsiveMode, getInitialResponsiveMode } from '../decorators/withResponsiveMode';\nimport { useWindow } from '../../WindowProvider';\n\n/**\n * Hook to get the current responsive mode (window size category).\n * @param elementRef - Use this element's parent window when determining the responsive mode.\n * @param overrideResponsiveMode - Override the responsive mode. If this param is present, it's always returned.\n */\nexport const useResponsiveMode = (\n elementRef: React.RefObject,\n overrideResponsiveMode?: ResponsiveMode,\n) => {\n const [lastResponsiveMode, setLastResponsiveMode] = React.useState(getInitialResponsiveMode());\n\n const onResize = React.useCallback(() => {\n const newResponsiveMode = getResponsiveMode(getWindow(elementRef.current));\n\n // Setting the same value should not cause a re-render.\n if (lastResponsiveMode !== newResponsiveMode) {\n setLastResponsiveMode(newResponsiveMode);\n }\n }, [elementRef, lastResponsiveMode]);\n\n const win = useWindow();\n useOnEvent(win, 'resize', onResize);\n\n // Call resize function initially on mount, or if the override changes from defined to undefined\n // (the effect will run on all override changes, but onResize will only be called if it changed to undefined)\n React.useEffect(() => {\n if (overrideResponsiveMode === undefined) {\n onResize();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- only meant to run on mount or when override changes\n }, [overrideResponsiveMode]);\n\n return overrideResponsiveMode ?? lastResponsiveMode;\n};\n","import * as React from 'react';\nimport type { MinimalMenuProps } from './types';\n\nexport const MenuContext = React.createContext({});\n\nexport const useMenuContext = () => {\n return React.useContext(MenuContext);\n};\n","import * as React from 'react';\nimport { ContextualMenuItemType } from './ContextualMenu.types';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '../../FocusZone';\nimport {\n divProperties,\n getNativeProps,\n shallowCompare,\n Async,\n assign,\n classNamesFunction,\n css,\n getFirstFocusable,\n getLastFocusable,\n getRTL,\n KeyCodes,\n shouldWrapFocus,\n isIOS,\n isMac,\n memoizeFunction,\n getPropsWithDefaults,\n getDocument,\n FocusRects,\n IComponentAs,\n composeComponentAs,\n} from '../../Utilities';\nimport { hasSubmenu, getIsChecked, isItemDisabled } from '../../utilities/contextualMenu/index';\nimport { Callout } from '../../Callout';\nimport { ContextualMenuItem } from './ContextualMenuItem';\nimport {\n ContextualMenuSplitButton,\n ContextualMenuButton,\n ContextualMenuAnchor,\n IContextualMenuItemWrapperProps,\n} from './ContextualMenuItemWrapper/index';\nimport { concatStyleSetsWithProps } from '../../Styling';\nimport { getItemStyles } from './ContextualMenu.classNames';\nimport {\n useTarget,\n usePrevious,\n useAsync,\n useWarnings,\n useId,\n Target,\n useIsomorphicLayoutEffect,\n} from '@fluentui/react-hooks';\nimport { useResponsiveMode, ResponsiveMode } from '../../ResponsiveMode';\nimport { MenuContext } from '../../utilities/MenuContext/index';\nimport type {\n IContextualMenuProps,\n IContextualMenuItem,\n IContextualMenuListProps,\n IContextualMenuStyleProps,\n IContextualMenuStyles,\n IContextualMenuItemRenderProps,\n} from './ContextualMenu.types';\nimport type { IFocusZoneProps } from '../../FocusZone';\nimport type { IMenuItemClassNames, IContextualMenuClassNames } from './ContextualMenu.classNames';\nimport type { IRenderFunction, IStyleFunctionOrObject } from '../../Utilities';\nimport type { ICalloutContentStyleProps, ICalloutContentStyles } from '../../Callout';\nimport type { IProcessedStyleSet } from '../../Styling';\nimport type {\n IContextualMenuItemProps,\n IContextualMenuItemStyleProps,\n IContextualMenuItemStyles,\n} from './ContextualMenuItem.types';\nimport type { IPopupRestoreFocusParams } from '../../Popup';\n\nconst getClassNames = classNamesFunction();\nconst getContextualMenuItemClassNames = classNamesFunction();\n\n// The default ContextualMenu properties have no items and beak, the default submenu direction is right and top.\nconst DEFAULT_PROPS: Partial = {\n items: [],\n shouldFocusOnMount: true,\n gapSpace: 0,\n directionalHint: DirectionalHint.bottomAutoEdge,\n beakWidth: 16,\n};\n\n/* return number of menu items, excluding headers and dividers */\nfunction getItemCount(items: IContextualMenuItem[]): number {\n let totalItemCount = 0;\n for (const item of items) {\n if (item.itemType !== ContextualMenuItemType.Divider && item.itemType !== ContextualMenuItemType.Header) {\n const itemCount = item.customOnRenderListLength ? item.customOnRenderListLength : 1;\n totalItemCount += itemCount;\n }\n }\n return totalItemCount;\n}\n\nexport function getSubmenuItems(\n item: IContextualMenuItem,\n options?: {\n target?: Target;\n },\n): IContextualMenuItem[] | undefined {\n const target = options?.target;\n\n // eslint-disable-next-line deprecation/deprecation\n const items = item.subMenuProps ? item.subMenuProps.items : item.items;\n\n if (items) {\n const overrideItems: typeof items = [];\n\n for (const subItem of items) {\n if (subItem.preferMenuTargetAsEventTarget) {\n // For sub-items which need an overridden target, intercept `onClick`\n const { onClick, ...contextItem } = subItem;\n\n overrideItems.push({\n ...contextItem,\n onClick: getOnClickWithOverrideTarget(onClick, target),\n });\n } else {\n overrideItems.push(subItem);\n }\n }\n\n return overrideItems;\n }\n}\n\n/**\n * Returns true if a list of menu items can contain a checkbox\n */\nexport function canAnyMenuItemsCheck(items: IContextualMenuItem[]): boolean {\n return items.some(item => {\n if (item.canCheck) {\n return true;\n }\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(submenuItem => submenuItem.canCheck === true)) {\n return true;\n }\n\n return false;\n });\n}\n\nconst NavigationIdleDelay = 250; /* ms */\n\nconst COMPONENT_NAME = 'ContextualMenu';\n\nconst _getMenuItemStylesFunction = memoizeFunction(\n (\n ...styles: (IStyleFunctionOrObject | undefined)[]\n ): IStyleFunctionOrObject => {\n return (styleProps: IContextualMenuItemStyleProps) =>\n concatStyleSetsWithProps(styleProps, getItemStyles, ...styles);\n },\n);\n\n//#region Custom hooks\nfunction useVisibility(props: IContextualMenuProps, targetWindow: Window | undefined) {\n const { hidden = false, onMenuDismissed, onMenuOpened } = props;\n const previousHidden = usePrevious(hidden);\n\n const onMenuOpenedRef = React.useRef(onMenuOpened);\n const onMenuClosedRef = React.useRef(onMenuDismissed);\n const propsRef = React.useRef(props);\n\n onMenuOpenedRef.current = onMenuOpened;\n onMenuClosedRef.current = onMenuDismissed;\n propsRef.current = props;\n\n React.useEffect(() => {\n // Don't issue dismissed callbacks on initial mount\n if (hidden && previousHidden === false) {\n onMenuClosedRef.current?.(propsRef.current);\n } else if (!hidden && previousHidden !== false) {\n onMenuOpenedRef.current?.(propsRef.current);\n }\n }, [hidden, previousHidden]);\n\n // Issue onDismissedCallback on unmount\n React.useEffect(() => () => onMenuClosedRef.current?.(propsRef.current), []);\n}\n\nfunction useSubMenuState(\n { hidden, items, theme, className, id, target: menuTarget }: IContextualMenuProps,\n dismiss: () => void,\n) {\n const [expandedMenuItemKey, setExpandedMenuItemKey] = React.useState();\n const [submenuTarget, setSubmenuTarget] = React.useState();\n /** True if the menu was expanded by mouse click OR hover (as opposed to by keyboard) */\n const [shouldFocusOnContainer, setShouldFocusOnContainer] = React.useState();\n const subMenuId = useId(COMPONENT_NAME, id);\n\n const closeSubMenu = React.useCallback(() => {\n setShouldFocusOnContainer(undefined);\n setExpandedMenuItemKey(undefined);\n setSubmenuTarget(undefined);\n }, []);\n\n const openSubMenu = React.useCallback(\n ({ key: submenuItemKey }: IContextualMenuItem, target: HTMLElement, focusContainer?: boolean) => {\n if (expandedMenuItemKey === submenuItemKey) {\n return;\n }\n\n target.focus();\n setShouldFocusOnContainer(focusContainer);\n setExpandedMenuItemKey(submenuItemKey);\n setSubmenuTarget(target);\n },\n [expandedMenuItemKey],\n );\n\n React.useEffect(() => {\n if (hidden) {\n closeSubMenu();\n }\n }, [hidden, closeSubMenu]);\n\n const onSubMenuDismiss = useOnSubmenuDismiss(dismiss, closeSubMenu);\n\n const getSubmenuProps = (): IContextualMenuProps | null => {\n const item = findItemByKeyFromItems(expandedMenuItemKey!, items);\n let submenuProps: IContextualMenuProps | null = null;\n\n if (item) {\n submenuProps = {\n items: getSubmenuItems(item, { target: menuTarget })!,\n target: submenuTarget,\n onDismiss: onSubMenuDismiss,\n isSubMenu: true,\n id: subMenuId,\n shouldFocusOnMount: true,\n shouldFocusOnContainer,\n directionalHint: getRTL(theme) ? DirectionalHint.leftTopEdge : DirectionalHint.rightTopEdge,\n className,\n gapSpace: 0,\n isBeakVisible: false,\n };\n\n if (item.subMenuProps) {\n assign(submenuProps, item.subMenuProps);\n }\n\n if (item.preferMenuTargetAsEventTarget) {\n const { onItemClick } = item;\n\n submenuProps.onItemClick = getOnClickWithOverrideTarget(onItemClick, menuTarget);\n }\n }\n return submenuProps;\n };\n\n return [expandedMenuItemKey, openSubMenu, getSubmenuProps, onSubMenuDismiss] as const;\n}\n\nfunction useShouldUpdateFocusOnMouseMove({ delayUpdateFocusOnHover, hidden }: IContextualMenuProps) {\n const shouldUpdateFocusOnMouseEvent = React.useRef(!delayUpdateFocusOnHover);\n const gotMouseMove = React.useRef(false);\n\n React.useEffect(() => {\n shouldUpdateFocusOnMouseEvent.current = !delayUpdateFocusOnHover;\n gotMouseMove.current = hidden ? false : !delayUpdateFocusOnHover && gotMouseMove.current;\n }, [delayUpdateFocusOnHover, hidden]);\n\n const onMenuFocusCapture = React.useCallback(() => {\n if (delayUpdateFocusOnHover) {\n shouldUpdateFocusOnMouseEvent.current = false;\n }\n }, [delayUpdateFocusOnHover]);\n\n return [shouldUpdateFocusOnMouseEvent, gotMouseMove, onMenuFocusCapture] as const;\n}\n\nfunction usePreviousActiveElement(\n { hidden, onRestoreFocus }: IContextualMenuProps,\n targetWindow: Window | undefined,\n hostElement: any,\n) {\n const previousActiveElement = React.useRef();\n\n const tryFocusPreviousActiveElement = React.useCallback(\n (options: IPopupRestoreFocusParams) => {\n if (onRestoreFocus) {\n onRestoreFocus(options);\n } else if (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 previousActiveElement.current?.focus?.();\n }\n },\n [onRestoreFocus],\n );\n\n useIsomorphicLayoutEffect(() => {\n if (!hidden) {\n const newElement = targetWindow?.document.activeElement as HTMLElement;\n if (!hostElement.current?.contains(newElement) && newElement.tagName !== 'BODY') {\n previousActiveElement.current = newElement;\n }\n } else if (previousActiveElement.current) {\n tryFocusPreviousActiveElement({\n originalElement: previousActiveElement.current,\n containsFocus: true,\n documentContainsFocus: getDocument()?.hasFocus() || false,\n });\n\n previousActiveElement.current = undefined;\n }\n }, [hidden, targetWindow?.document.activeElement, tryFocusPreviousActiveElement, hostElement]);\n\n return [tryFocusPreviousActiveElement] as const;\n}\n\nfunction useKeyHandlers(\n {\n theme,\n isSubMenu,\n focusZoneProps: { checkForNoWrap, direction: focusZoneDirection = FocusZoneDirection.vertical } = {},\n }: IContextualMenuProps,\n dismiss: (ev?: any, dismissAll?: boolean | undefined) => void | undefined,\n hostElement: React.RefObject,\n openSubMenu: (submenuItemKey: IContextualMenuItem, target: HTMLElement) => void,\n) {\n /** True if the most recent keydown event was for alt (option) or meta (command). */\n const lastKeyDownWasAltOrMeta = React.useRef();\n\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 const keyHandler = (\n ev: React.KeyboardEvent,\n shouldHandleKey: (ev: React.KeyboardEvent) => boolean,\n dismissAllMenus?: boolean,\n ): boolean => {\n let handled = false;\n\n if (shouldHandleKey(ev)) {\n dismiss(ev, dismissAllMenus);\n ev.preventDefault();\n ev.stopPropagation();\n handled = true;\n }\n\n return handled;\n };\n\n /**\n * Checks if the submenu should be closed\n */\n const shouldCloseSubMenu = (ev: React.KeyboardEvent): boolean => {\n const submenuCloseKey = getRTL(theme) ? KeyCodes.right : KeyCodes.left;\n\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which !== submenuCloseKey || !isSubMenu) {\n return false;\n }\n\n return !!(\n focusZoneDirection === FocusZoneDirection.vertical ||\n (checkForNoWrap && !shouldWrapFocus(ev.target as HTMLElement, 'data-no-horizontal-wrap'))\n );\n };\n\n const shouldHandleKeyDown = (ev: React.KeyboardEvent) => {\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 };\n\n const onKeyDown = (ev: React.KeyboardEvent): boolean => {\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\n // On Mac, pressing escape dismisses all levels of native context menus\n // eslint-disable-next-line deprecation/deprecation\n const dismissAllMenus = ev.which === KeyCodes.escape && (isMac() || isIOS());\n\n return keyHandler(ev, shouldHandleKeyDown, dismissAllMenus);\n };\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 const shouldHandleKeyUp = (ev: React.KeyboardEvent) => {\n const keyPressIsAltOrMetaAlone = lastKeyDownWasAltOrMeta.current && isAltOrMeta(ev);\n lastKeyDownWasAltOrMeta.current = false;\n return !!keyPressIsAltOrMetaAlone && !(isIOS() || isMac());\n };\n\n const onKeyUp = (ev: React.KeyboardEvent): boolean => {\n return keyHandler(ev, shouldHandleKeyUp, true /* dismissAllMenus */);\n };\n\n const onMenuKeyDown = (ev: React.KeyboardEvent) => {\n // Mark as handled if onKeyDown returns true (for handling collapse cases)\n // or if we are attempting to expand a submenu\n const handled = onKeyDown(ev);\n\n if (handled || !hostElement.current) {\n return;\n }\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 const hasModifier = !!(ev.altKey || ev.metaKey);\n // eslint-disable-next-line deprecation/deprecation\n const isUp = ev.which === KeyCodes.up;\n // eslint-disable-next-line deprecation/deprecation\n const isDown = ev.which === KeyCodes.down;\n if (!hasModifier && (isUp || isDown)) {\n const elementToFocus = isUp\n ? getLastFocusable(hostElement.current, hostElement.current.lastChild as HTMLElement, true)\n : getFirstFocusable(hostElement.current, hostElement.current.firstChild as HTMLElement, true);\n\n if (elementToFocus) {\n elementToFocus.focus();\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n };\n\n const onItemKeyDown = (item: any, ev: React.KeyboardEvent): void => {\n const openKey = getRTL(theme) ? KeyCodes.left : KeyCodes.right;\n\n if (\n !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 ) {\n openSubMenu(item, ev.currentTarget as HTMLElement);\n ev.preventDefault();\n }\n };\n\n return [onKeyDown, onKeyUp, onMenuKeyDown, onItemKeyDown] as const;\n}\n\nfunction useScrollHandler(asyncTracker: Async) {\n const isScrollIdle = React.useRef(true);\n const scrollIdleTimeoutId = React.useRef();\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 const onScroll = (): void => {\n if (!isScrollIdle.current && scrollIdleTimeoutId.current !== undefined) {\n asyncTracker.clearTimeout(scrollIdleTimeoutId.current);\n scrollIdleTimeoutId.current = undefined;\n } else {\n isScrollIdle.current = false;\n }\n\n scrollIdleTimeoutId.current = asyncTracker.setTimeout(() => {\n isScrollIdle.current = true;\n }, NavigationIdleDelay);\n };\n\n return [onScroll, isScrollIdle] as const;\n}\n\nfunction useOnSubmenuDismiss(dismiss: (ev?: any, dismissAll?: boolean) => void, closeSubMenu: () => void) {\n const isMountedRef = React.useRef(false);\n React.useEffect(() => {\n isMountedRef.current = true;\n return () => {\n isMountedRef.current = false;\n };\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 const onSubMenuDismiss = (ev?: any, dismissAll?: boolean): void => {\n if (dismissAll) {\n dismiss(ev, dismissAll);\n } else if (isMountedRef.current) {\n closeSubMenu();\n }\n };\n\n return onSubMenuDismiss;\n}\n\nfunction useSubmenuEnterTimer({ subMenuHoverDelay = NavigationIdleDelay }: IContextualMenuProps, asyncTracker: Async) {\n const enterTimerRef = React.useRef(undefined);\n\n const cancelSubMenuTimer = () => {\n if (enterTimerRef.current !== undefined) {\n asyncTracker.clearTimeout(enterTimerRef.current);\n enterTimerRef.current = undefined;\n }\n };\n\n const startSubmenuTimer = (onTimerExpired: () => void) => {\n enterTimerRef.current = asyncTracker.setTimeout(() => {\n onTimerExpired();\n cancelSubMenuTimer();\n }, subMenuHoverDelay);\n };\n\n return [cancelSubMenuTimer, startSubmenuTimer, enterTimerRef as React.RefObject] as const;\n}\n\nfunction useMouseHandlers(\n props: IContextualMenuProps,\n isScrollIdle: React.MutableRefObject,\n subMenuEntryTimer: React.RefObject,\n targetWindow: Window | undefined,\n shouldUpdateFocusOnMouseEvent: React.MutableRefObject,\n gotMouseMove: React.MutableRefObject,\n expandedMenuItemKey: string | undefined,\n hostElement: React.RefObject,\n startSubmenuTimer: (onTimerExpired: () => void) => void,\n cancelSubMenuTimer: () => void,\n openSubMenu: (submenuItemKey: IContextualMenuItem, target: HTMLElement, openedByMouseClick?: boolean) => void,\n onSubMenuDismiss: (ev?: any, dismissAll?: boolean) => void,\n dismiss: (ev?: any, dismissAll?: boolean) => void,\n) {\n const { target: menuTarget } = props;\n\n const onItemMouseEnterBase = (item: any, ev: React.MouseEvent, target?: HTMLElement): void => {\n if (shouldUpdateFocusOnMouseEvent.current) {\n gotMouseMove.current = true;\n }\n\n if (shouldIgnoreMouseEvent()) {\n return;\n }\n\n updateFocusOnMouseEvent(item, ev, target);\n };\n\n const onItemMouseMoveBase = (item: any, ev: React.MouseEvent, target: HTMLElement): void => {\n const targetElement = ev.currentTarget as HTMLElement;\n\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 } else {\n return;\n }\n\n if (\n !isScrollIdle.current ||\n subMenuEntryTimer.current !== undefined ||\n targetElement === (targetWindow?.document.activeElement as HTMLElement)\n ) {\n return;\n }\n\n updateFocusOnMouseEvent(item, ev, target);\n };\n\n const shouldIgnoreMouseEvent = (): boolean => {\n return !isScrollIdle.current || !gotMouseMove.current;\n };\n\n const onMouseItemLeave = (item: any, ev: React.MouseEvent): void => {\n if (shouldIgnoreMouseEvent()) {\n return;\n }\n\n cancelSubMenuTimer();\n\n if (expandedMenuItemKey !== undefined) {\n return;\n }\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 as any).setActive) {\n try {\n (hostElement.current as any).setActive();\n } catch (e) {\n /* no-op */\n }\n } else {\n hostElement.current?.focus();\n }\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 const updateFocusOnMouseEvent = (\n item: IContextualMenuItem,\n ev: React.MouseEvent,\n target?: HTMLElement,\n ) => {\n const targetElement = target ? target : (ev.currentTarget as HTMLElement);\n\n if (item.key === expandedMenuItemKey) {\n return;\n }\n\n cancelSubMenuTimer();\n\n // If the menu is not expanded we can update focus without any delay\n if (expandedMenuItemKey === undefined) {\n targetElement.focus();\n }\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(() => {\n targetElement.focus();\n openSubMenu(item, targetElement, true);\n });\n } else {\n startSubmenuTimer(() => {\n onSubMenuDismiss(ev);\n targetElement.focus();\n });\n }\n };\n\n const onItemClick = (\n item: IContextualMenuItem,\n ev: React.MouseEvent | React.KeyboardEvent,\n ): void => {\n onItemClickBase(item, ev, ev.currentTarget as HTMLElement);\n };\n\n const onItemClickBase = (\n item: IContextualMenuItem,\n ev: React.MouseEvent | React.KeyboardEvent,\n target: HTMLElement,\n ): void => {\n const items = getSubmenuItems(item, { target: menuTarget });\n\n // Cancel an async menu item hover timeout action from being taken and instead\n // just trigger the click event instead.\n cancelSubMenuTimer();\n\n if (!hasSubmenu(item) && (!items || !items.length)) {\n // This is an item without a menu. Click it.\n executeItemClick(item, ev);\n } else {\n if (item.key !== expandedMenuItemKey) {\n // This has a collapsed sub menu. Expand it.\n\n // focus on the container by default when the menu is opened with a click event\n // this differentiates from a keyboard interaction triggering the click event\n const shouldFocusOnContainer =\n typeof props.shouldFocusOnContainer === 'boolean'\n ? props.shouldFocusOnContainer\n : (ev.nativeEvent as PointerEvent).pointerType === 'mouse';\n openSubMenu(item, target, shouldFocusOnContainer);\n }\n }\n\n ev.stopPropagation();\n ev.preventDefault();\n };\n\n const onAnchorClick = (item: IContextualMenuItem, ev: React.MouseEvent) => {\n executeItemClick(item, ev);\n ev.stopPropagation();\n };\n\n const executeItemClick = (\n item: IContextualMenuItem,\n ev: React.MouseEvent | React.KeyboardEvent,\n ): void => {\n if (item.disabled || item.isDisabled) {\n return;\n }\n\n if (item.preferMenuTargetAsEventTarget) {\n overrideTarget(ev, menuTarget);\n }\n\n let shouldDismiss = false;\n if (item.onClick) {\n shouldDismiss = !!item.onClick(ev, item);\n } else if (props.onItemClick) {\n shouldDismiss = !!props.onItemClick(ev, item);\n }\n\n if (shouldDismiss || !ev.defaultPrevented) {\n dismiss(ev, true);\n }\n };\n\n return [\n onItemMouseEnterBase,\n onItemMouseMoveBase,\n onMouseItemLeave,\n onItemClick,\n onAnchorClick,\n executeItemClick,\n onItemClickBase,\n ] as const;\n}\n//#endregion\n\nexport const ContextualMenuBase: React.FunctionComponent = React.memo(\n React.forwardRef((propsWithoutDefaults, forwardedRef) => {\n const { ref, ...props } = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n const hostElement = React.useRef(null);\n const asyncTracker = useAsync();\n const menuId = useId(COMPONENT_NAME, props.id);\n\n useWarnings({\n name: COMPONENT_NAME,\n props,\n deprecations: {\n getMenuClassNames: 'styles',\n },\n });\n\n const dismiss = (ev?: any, dismissAll?: boolean) => props.onDismiss?.(ev, dismissAll);\n const [targetRef, targetWindow] = useTarget(props.target, hostElement);\n const [tryFocusPreviousActiveElement] = usePreviousActiveElement(props, targetWindow, hostElement);\n const [expandedMenuItemKey, openSubMenu, getSubmenuProps, onSubMenuDismiss] = useSubMenuState(props, dismiss);\n const [shouldUpdateFocusOnMouseEvent, gotMouseMove, onMenuFocusCapture] = useShouldUpdateFocusOnMouseMove(props);\n const [onScroll, isScrollIdle] = useScrollHandler(asyncTracker);\n const [cancelSubMenuTimer, startSubmenuTimer, subMenuEntryTimer] = useSubmenuEnterTimer(props, asyncTracker);\n\n const responsiveMode = useResponsiveMode(hostElement, props.responsiveMode);\n\n useVisibility(props, targetWindow);\n\n const [onKeyDown, onKeyUp, onMenuKeyDown, onItemKeyDown] = useKeyHandlers(props, dismiss, hostElement, openSubMenu);\n const [\n onItemMouseEnterBase,\n onItemMouseMoveBase,\n onMouseItemLeave,\n onItemClick,\n onAnchorClick,\n executeItemClick,\n onItemClickBase,\n ] = useMouseHandlers(\n props,\n isScrollIdle,\n subMenuEntryTimer,\n targetWindow,\n shouldUpdateFocusOnMouseEvent,\n gotMouseMove,\n expandedMenuItemKey,\n hostElement,\n startSubmenuTimer,\n cancelSubMenuTimer,\n openSubMenu,\n onSubMenuDismiss,\n dismiss,\n );\n\n //#region Render helpers\n\n const onDefaultRenderMenuList = (\n menuListProps: IContextualMenuListProps,\n // eslint-disable-next-line deprecation/deprecation\n menuClassNames: IProcessedStyleSet | IContextualMenuClassNames,\n defaultRender?: IRenderFunction,\n ): JSX.Element => {\n let indexCorrection = 0;\n const { items, totalItemCount, hasCheckmarks, hasIcons } = menuListProps;\n\n return (\n
    \n {items.map((item, index) => {\n const menuItem = renderMenuItem(\n item,\n index,\n indexCorrection,\n totalItemCount,\n hasCheckmarks,\n hasIcons,\n menuClassNames,\n );\n if (item.itemType !== ContextualMenuItemType.Divider && item.itemType !== ContextualMenuItemType.Header) {\n const indexIncrease = item.customOnRenderListLength ? item.customOnRenderListLength : 1;\n indexCorrection += indexIncrease;\n }\n return menuItem;\n })}\n
\n );\n };\n\n const renderFocusZone = (children: JSX.Element | null, adjustedFocusZoneProps: IFocusZoneProps): JSX.Element => {\n const { focusZoneAs: ChildrenRenderer = FocusZone } = props;\n return {children};\n };\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 const renderMenuItem = (\n item: IContextualMenuItem,\n index: number,\n focusableElementIndex: number,\n totalItemCount: number,\n hasCheckmarks: boolean,\n hasIcons: boolean,\n // eslint-disable-next-line deprecation/deprecation\n menuClassNames: IProcessedStyleSet | IContextualMenuClassNames,\n ): JSX.Element => {\n const renderedItems: React.ReactNode[] = [];\n const iconProps = item.iconProps || { iconName: 'None' };\n const {\n getItemClassNames, // eslint-disable-line deprecation/deprecation\n itemProps,\n } = item;\n const styles = itemProps ? itemProps.styles : undefined;\n\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 const dividerClassName = item.itemType === ContextualMenuItemType.Divider ? item.className : undefined;\n const subMenuIconClassName = item.submenuIconProps ? item.submenuIconProps.className : '';\n\n // eslint-disable-next-line deprecation/deprecation\n let itemClassNames: IMenuItemClassNames;\n\n // IContextualMenuItem#getItemClassNames for backwards compatibility\n // otherwise uses mergeStyles for class names.\n if (getItemClassNames) {\n itemClassNames = getItemClassNames(\n props.theme!,\n isItemDisabled(item),\n expandedMenuItemKey === item.key,\n !!getIsChecked(item),\n !!item.href,\n iconProps.iconName !== 'None',\n item.className,\n dividerClassName,\n iconProps.className,\n subMenuIconClassName,\n item.primaryDisabled,\n );\n } else {\n const itemStyleProps: IContextualMenuItemStyleProps = {\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,\n iconClassName: iconProps.className,\n subMenuClassName: subMenuIconClassName,\n primaryDisabled: item.primaryDisabled,\n };\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(\n _getMenuItemStylesFunction(menuClassNames.subComponentStyles?.menuItem, styles),\n itemStyleProps,\n );\n }\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 const 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 const defaultRenderNormalItem = () =>\n renderNormalItem(\n item,\n itemClassNames,\n index,\n focusableElementIndex,\n totalItemCount,\n hasCheckmarks,\n hasIcons,\n ) as JSX.Element;\n\n const menuItem = props.onRenderContextualMenuItem\n ? props.onRenderContextualMenuItem(item, defaultRenderNormalItem)\n : defaultRenderNormalItem();\n renderedItems.push(renderListItem(menuItem, item.key || index, itemClassNames, item.title));\n break;\n }\n\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 {renderedItems};\n };\n\n const defaultMenuItemRenderer = (\n item: IContextualMenuItemRenderProps,\n // eslint-disable-next-line deprecation/deprecation\n menuClassNames: IProcessedStyleSet | IContextualMenuClassNames,\n ): React.ReactNode => {\n const { index, focusableElementIndex, totalItemCount, hasCheckmarks, hasIcons } = item;\n return renderMenuItem(\n item,\n index,\n focusableElementIndex,\n totalItemCount,\n hasCheckmarks,\n hasIcons,\n menuClassNames,\n );\n };\n\n const renderSectionItem = (\n sectionItem: IContextualMenuItem,\n // eslint-disable-next-line deprecation/deprecation\n itemClassNames: IMenuItemClassNames,\n // eslint-disable-next-line deprecation/deprecation\n menuClassNames: IProcessedStyleSet | IContextualMenuClassNames,\n index: number,\n hasCheckmarks: boolean,\n hasIcons: boolean,\n ) => {\n const sectionProps = sectionItem.sectionProps;\n if (!sectionProps) {\n return;\n }\n\n let headerItem;\n let groupProps;\n if (sectionProps.title) {\n let headerContextualMenuItem: IContextualMenuItem | undefined = undefined;\n let 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 const id = menuId + sectionProps.title.replace(/\\s/g, '');\n headerContextualMenuItem = {\n key: `section-${sectionProps.title}-title`,\n itemType: ContextualMenuItemType.Header,\n text: sectionProps.title,\n id,\n };\n ariaLabelledby = id;\n } else {\n const id = sectionProps.title.id || menuId + sectionProps.title.key.replace(/\\s/g, '');\n headerContextualMenuItem = { ...sectionProps.title, id };\n ariaLabelledby = id;\n }\n\n if (headerContextualMenuItem) {\n groupProps = {\n role: 'group',\n 'aria-labelledby': ariaLabelledby,\n };\n headerItem = renderHeaderMenuItem(\n headerContextualMenuItem,\n itemClassNames,\n menuClassNames,\n index,\n hasCheckmarks,\n hasIcons,\n );\n }\n }\n\n if (sectionProps.items && sectionProps.items.length > 0) {\n let correctedIndex = 0;\n return (\n
  • \n
    \n
      \n {sectionProps.topDivider && renderSeparator(index, itemClassNames, true, true)}\n {headerItem && renderListItem(headerItem, sectionItem.key || index, itemClassNames, sectionItem.title)}\n {sectionProps.items.map((contextualMenuItem, itemsIndex) => {\n const menuItem = renderMenuItem(\n contextualMenuItem,\n itemsIndex,\n correctedIndex,\n getItemCount(sectionProps.items),\n hasCheckmarks,\n hasIcons,\n menuClassNames,\n );\n if (\n contextualMenuItem.itemType !== ContextualMenuItemType.Divider &&\n contextualMenuItem.itemType !== ContextualMenuItemType.Header\n ) {\n const indexIncrease = contextualMenuItem.customOnRenderListLength\n ? contextualMenuItem.customOnRenderListLength\n : 1;\n correctedIndex += indexIncrease;\n }\n return menuItem;\n })}\n {sectionProps.bottomDivider && renderSeparator(index, itemClassNames, false, true)}\n
    \n
    \n
  • \n );\n }\n };\n\n const renderListItem = (\n content: React.ReactNode,\n key: string | number,\n classNames: IMenuItemClassNames, // eslint-disable-line deprecation/deprecation\n title?: string,\n ) => {\n return (\n
  • \n {content}\n
  • \n );\n };\n\n const renderSeparator = (\n index: number,\n classNames: IMenuItemClassNames, // eslint-disable-line deprecation/deprecation\n top?: boolean,\n fromSection?: boolean,\n ): React.ReactNode => {\n if (fromSection || index > 0) {\n return (\n \n );\n }\n return null;\n };\n\n const renderNormalItem = (\n item: IContextualMenuItem,\n classNames: IMenuItemClassNames, // eslint-disable-line deprecation/deprecation\n index: number,\n focusableElementIndex: number,\n totalItemCount: number,\n hasCheckmarks: boolean,\n hasIcons: boolean,\n ): React.ReactNode => {\n if (item.onRender) {\n return item.onRender(\n { 'aria-posinset': focusableElementIndex + 1, 'aria-setsize': totalItemCount, ...item },\n dismiss,\n );\n }\n\n const { contextualMenuItemAs } = props;\n\n const commonProps = {\n item,\n classNames,\n index,\n focusableElementIndex,\n totalItemCount,\n hasCheckmarks,\n hasIcons,\n contextualMenuItemAs,\n onItemMouseEnter: onItemMouseEnterBase,\n onItemMouseLeave: onMouseItemLeave,\n onItemMouseMove: onItemMouseMoveBase,\n onItemMouseDown,\n executeItemClick,\n onItemKeyDown,\n expandedMenuItemKey,\n openSubMenu,\n dismissSubMenu: onSubMenuDismiss,\n dismissMenu: dismiss,\n } as const;\n\n if (item.href) {\n let ContextualMenuAnchorAs: IComponentAs = ContextualMenuAnchor;\n\n if (item.contextualMenuItemWrapperAs) {\n ContextualMenuAnchorAs = composeComponentAs(item.contextualMenuItemWrapperAs, ContextualMenuAnchorAs);\n }\n\n return ;\n }\n\n if (item.split && hasSubmenu(item)) {\n let ContextualMenuSplitButtonAs: IComponentAs = ContextualMenuSplitButton;\n\n if (item.contextualMenuItemWrapperAs) {\n ContextualMenuSplitButtonAs = composeComponentAs(\n item.contextualMenuItemWrapperAs,\n ContextualMenuSplitButtonAs,\n );\n }\n\n return (\n \n );\n }\n\n let ContextualMenuButtonAs: IComponentAs = ContextualMenuButton;\n\n if (item.contextualMenuItemWrapperAs) {\n ContextualMenuButtonAs = composeComponentAs(item.contextualMenuItemWrapperAs, ContextualMenuButtonAs);\n }\n\n return ;\n };\n\n const renderHeaderMenuItem = (\n item: IContextualMenuItem,\n // eslint-disable-next-line deprecation/deprecation\n itemClassNames: IMenuItemClassNames,\n // eslint-disable-next-line deprecation/deprecation\n menuClassNames: IProcessedStyleSet | IContextualMenuClassNames,\n index: number,\n hasCheckmarks: boolean,\n hasIcons: boolean,\n ): React.ReactNode => {\n let ChildrenRenderer: IComponentAs = ContextualMenuItem;\n\n if (item.contextualMenuItemAs) {\n ChildrenRenderer = composeComponentAs(item.contextualMenuItemAs, ChildrenRenderer);\n }\n\n if (props.contextualMenuItemAs) {\n ChildrenRenderer = composeComponentAs(props.contextualMenuItemAs, ChildrenRenderer);\n }\n\n const { itemProps, id } = item;\n const divHtmlProperties =\n itemProps && getNativeProps>(itemProps, divProperties);\n return (\n // eslint-disable-next-line deprecation/deprecation\n
    \n \n
    \n );\n };\n //#endregion\n\n //#region Main render\n let { isBeakVisible } = props;\n\n const {\n items,\n labelElementId,\n id,\n className,\n beakWidth,\n directionalHint,\n directionalHintForRTL,\n alignTargetEdge,\n gapSpace,\n coverTarget,\n ariaLabel,\n doNotLayer,\n target,\n bounds,\n useTargetWidth,\n useTargetAsMinWidth,\n directionalHintFixed,\n shouldFocusOnMount,\n shouldFocusOnContainer,\n title,\n styles,\n theme,\n calloutProps,\n onRenderSubMenu = onDefaultRenderSubMenu,\n onRenderMenuList = (\n menuListProps: IContextualMenuListProps,\n defaultRender?: IRenderFunction,\n ) => onDefaultRenderMenuList(menuListProps, classNames, defaultRender),\n focusZoneProps,\n // eslint-disable-next-line deprecation/deprecation\n getMenuClassNames,\n } = props;\n\n const classNames = getMenuClassNames\n ? getMenuClassNames(theme!, className)\n : getClassNames(styles, {\n theme: theme!,\n className,\n });\n\n const hasIcons = itemsHaveIcons(items);\n\n function itemsHaveIcons(contextualMenuItems: IContextualMenuItem[]): boolean {\n for (const item of contextualMenuItems) {\n if (item.iconProps) {\n return true;\n }\n\n if (\n item.itemType === ContextualMenuItemType.Section &&\n item.sectionProps &&\n itemsHaveIcons(item.sectionProps.items)\n ) {\n return true;\n }\n }\n\n return false;\n }\n\n const adjustedFocusZoneProps = {\n direction: FocusZoneDirection.vertical,\n handleTabKey: FocusZoneTabbableElements.all,\n isCircularNavigation: true,\n 'data-tabster': '{\"uncontrolled\": {}, \"focusable\": { \"excludeFromMover\": true }}',\n ...focusZoneProps,\n className: css(classNames.root, props.focusZoneProps?.className),\n };\n\n const hasCheckmarks = canAnyMenuItemsCheck(items);\n const submenuProps = expandedMenuItemKey && props.hidden !== true ? getSubmenuProps() : null;\n\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 let contextMenuStyle: React.CSSProperties;\n const targetAsHtmlElement = targetRef.current as HTMLElement;\n if ((useTargetWidth || useTargetAsMinWidth) && targetAsHtmlElement && targetAsHtmlElement.offsetWidth) {\n const targetBoundingRect = targetAsHtmlElement.getBoundingClientRect();\n const targetWidth = targetBoundingRect.width - 2; /* Accounts for 1px border */\n\n if (useTargetWidth) {\n contextMenuStyle = {\n width: targetWidth,\n };\n } else if (useTargetAsMinWidth) {\n contextMenuStyle = {\n minWidth: targetWidth,\n };\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 const totalItemCount = getItemCount(items);\n\n const calloutStyles = classNames.subComponentStyles\n ? (classNames.subComponentStyles.callout as IStyleFunctionOrObject<\n ICalloutContentStyleProps,\n ICalloutContentStyles\n >)\n : undefined;\n\n return (\n \n {menuContext => (\n \n );\n } else {\n return null;\n }\n //#endregion\n }),\n (prevProps, newProps) => {\n if (!newProps.shouldUpdateWhenHidden && prevProps.hidden && newProps.hidden) {\n // Do not update when hidden.\n return true;\n }\n\n return shallowCompare(prevProps, newProps);\n },\n);\nContextualMenuBase.displayName = 'ContextualMenuBase';\n\n/**\n * Returns true if the key for the event is alt (Mac option) or meta (Mac command).\n */\nfunction isAltOrMeta(ev: React.KeyboardEvent): boolean {\n // eslint-disable-next-line deprecation/deprecation\n return ev.which === KeyCodes.alt || ev.key === 'Meta';\n}\n\nfunction onItemMouseDown(item: IContextualMenuItem, ev: React.MouseEvent): void {\n item.onMouseDown?.(item, ev);\n}\n\nfunction onDefaultRenderSubMenu(\n subMenuProps: IContextualMenuProps,\n defaultRender?: IRenderFunction,\n): JSX.Element {\n throw Error(\n 'ContextualMenuBase: onRenderSubMenu callback is null or undefined. ' +\n 'Please ensure to set `onRenderSubMenu` property either manually or with `styled` helper.',\n );\n}\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: string, items: IContextualMenuItem[]): IContextualMenuItem | undefined {\n for (const item of items) {\n if (item.itemType === ContextualMenuItemType.Section && item.sectionProps) {\n const match = findItemByKeyFromItems(key, item.sectionProps.items);\n if (match) {\n return match;\n }\n } else if (item.key && item.key === key) {\n return item;\n }\n }\n}\n\nfunction getOnClickWithOverrideTarget(\n onClick:\n | ((\n ev?: React.MouseEvent | React.KeyboardEvent | undefined,\n item?: IContextualMenuItem | undefined,\n ) => boolean | void)\n | undefined,\n target: Target | undefined,\n) {\n return onClick\n ? (\n ev?: React.MouseEvent | React.KeyboardEvent | undefined,\n item?: IContextualMenuItem | undefined,\n ) => {\n overrideTarget(ev, target);\n\n return onClick(ev, item);\n }\n : onClick;\n}\n\nfunction overrideTarget(\n ev?: React.MouseEvent | React.KeyboardEvent | undefined,\n target?: Target,\n): void {\n if (ev && target) {\n ev.persist();\n\n if (target instanceof Event) {\n ev.target = target.target as HTMLElement;\n } else if (target instanceof Element) {\n ev.target = target;\n }\n }\n}\n","import { getGlobalClassNames, FontWeights } from '../../Styling';\nimport { CONTEXTUAL_MENU_ITEM_HEIGHT } from './ContextualMenu.cnstyles';\nimport type { IContextualMenuStyleProps, IContextualMenuStyles } from './ContextualMenu.types';\n\nconst 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};\n\nexport const getStyles = (props: IContextualMenuStyleProps): IContextualMenuStyles => {\n const { className, theme } = props;\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n const { fonts, semanticColors, effects } = theme;\n\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","import * as React from 'react';\nimport { styled, composeRenderFunction } from '../../Utilities';\nimport { ContextualMenuBase } from './ContextualMenu.base';\nimport { getStyles } from './ContextualMenu.styles';\nimport type { IContextualMenuProps, IContextualMenuStyleProps, IContextualMenuStyles } from './ContextualMenu.types';\n\nfunction onRenderSubMenu(subMenuProps: IContextualMenuProps) {\n return ;\n}\n\n// This is to prevent cyclic import with ContextualMenu.base.tsx.\nconst LocalContextualMenu: React.FunctionComponent = styled<\n IContextualMenuProps,\n IContextualMenuStyleProps,\n IContextualMenuStyles\n>(\n ContextualMenuBase,\n getStyles,\n (props: IContextualMenuProps) => ({\n onRenderSubMenu: props.onRenderSubMenu\n ? composeRenderFunction(props.onRenderSubMenu, onRenderSubMenu)\n : onRenderSubMenu,\n }),\n { scope: 'ContextualMenu' },\n);\n\n/**\n * ContextualMenu description\n */\nexport const ContextualMenu: React.FunctionComponent = LocalContextualMenu;\nContextualMenu.displayName = 'ContextualMenu';\n","import { memoizeFunction } from '../../Utilities';\nimport { getGlobalClassNames, mergeStyleSets } from '../../Styling';\nimport type { ITheme } from '../../Styling';\nimport type { IButtonStyles } from './Button.types';\n\nexport interface IButtonClassNames {\n root?: string;\n flexContainer?: string;\n textContainer?: string;\n icon?: string;\n label?: string;\n menuIcon?: string;\n description?: string;\n screenReaderText?: string;\n}\n\nexport const 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};\n\nexport const getBaseButtonClassNames = memoizeFunction(\n (\n theme: ITheme,\n styles: IButtonStyles,\n className: string,\n variantClassName: string,\n iconClassName: string | undefined,\n menuIconClassName: string | undefined,\n disabled: boolean,\n hasMenu: boolean,\n checked: boolean,\n expanded: boolean,\n isSplit: boolean | undefined,\n ): IButtonClassNames => {\n const classNames = getGlobalClassNames(ButtonGlobalClassNames, theme || {});\n\n const isExpanded = expanded && !isSplit;\n return mergeStyleSets(styles.__shadowConfig__, {\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 [`:hover .${classNames.msButtonIcon}`]: styles.iconExpandedHovered,\n // menuIcon falls back to rootExpandedHovered to support original behavior\n [`:hover .${classNames.msButtonMenuIcon}`]: styles.menuIconExpandedHovered || styles.rootExpandedHovered,\n ':hover': styles.rootExpandedHovered,\n },\n ],\n hasMenu && [ButtonGlobalClassNames.msButtonHasMenu, styles.rootHasMenu],\n disabled && ['is-disabled', styles.rootDisabled],\n !disabled &&\n !isExpanded &&\n !checked && {\n ':hover': styles.rootHovered,\n [`:hover .${classNames.msButtonLabel}`]: styles.labelHovered,\n [`:hover .${classNames.msButtonIcon}`]: styles.iconHovered,\n [`:hover .${classNames.msButtonDescription}`]: styles.descriptionHovered,\n [`:hover .${classNames.msButtonMenuIcon}`]: styles.menuIconHovered,\n ':focus': styles.rootFocused,\n ':active': styles.rootPressed,\n [`:active .${classNames.msButtonIcon}`]: styles.iconPressed,\n [`:active .${classNames.msButtonDescription}`]: styles.descriptionPressed,\n [`:active .${classNames.msButtonMenuIcon}`]: styles.menuIconPressed,\n },\n disabled && checked && [styles.rootCheckedDisabled],\n !disabled &&\n checked && {\n ':hover': styles.rootCheckedHovered,\n ':active': styles.rootCheckedPressed,\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 ':hover': styles.menuIconHovered,\n ':active': styles.menuIconPressed,\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);\n","import { memoizeFunction } from '../../../Utilities';\nimport { mergeStyles } from '../../../Styling';\nimport type { IButtonStyles } from '../Button.types';\n\nexport interface ISplitButtonClassNames {\n root?: string;\n icon?: string;\n splitButtonContainer?: string;\n flexContainer?: string;\n divider?: string;\n}\n\nexport const SplitButtonGlobalClassNames = {\n msSplitButtonDivider: 'ms-SplitButton-divider',\n};\n\nexport const getSplitButtonClassNames = memoizeFunction(\n (\n styles: IButtonStyles,\n disabled: boolean,\n expanded: boolean,\n checked: boolean,\n primaryDisabled?: boolean,\n ): ISplitButtonClassNames => {\n return {\n root: mergeStyles(\n styles.splitButtonMenuButton,\n expanded && [styles.splitButtonMenuButtonExpanded],\n disabled && [styles.splitButtonMenuButtonDisabled],\n checked && !disabled && [styles.splitButtonMenuButtonChecked],\n primaryDisabled &&\n !disabled && [\n {\n ':focus': styles.splitButtonMenuFocused,\n },\n ],\n ),\n\n splitButtonContainer: mergeStyles(\n styles.splitButtonContainer,\n !disabled &&\n checked && [\n styles.splitButtonContainerChecked,\n {\n ':hover': styles.splitButtonContainerCheckedHovered,\n },\n ],\n !disabled &&\n !checked && [\n {\n ':hover': styles.splitButtonContainerHovered,\n ':focus': styles.splitButtonContainerFocused,\n },\n ],\n disabled && styles.splitButtonContainerDisabled,\n ),\n\n icon: mergeStyles(\n styles.splitButtonMenuIcon,\n disabled && styles.splitButtonMenuIconDisabled,\n !disabled && primaryDisabled && styles.splitButtonMenuIcon,\n ),\n\n flexContainer: mergeStyles(styles.splitButtonFlexContainer),\n\n divider: mergeStyles(\n SplitButtonGlobalClassNames.msSplitButtonDivider,\n styles.splitButtonDivider,\n (primaryDisabled || disabled) && styles.splitButtonDividerDisabled,\n ),\n };\n },\n);\n","import * as React from 'react';\nimport {\n anchorProperties,\n assign,\n buttonProperties,\n createMergedRef,\n css,\n getId,\n getNativeProps,\n initializeComponentRef,\n memoizeFunction,\n mergeAriaAttributeValues,\n nullRender,\n portalContainsElement,\n setFocusVisibility,\n warnConditionallyRequiredProps,\n warnDeprecations,\n Async,\n EventGroup,\n FocusRects,\n FocusRectsContext,\n KeyCodes,\n} 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';\nimport type { IFocusRectsContext, IRenderFunction } from '../../Utilities';\nimport type { IContextualMenuProps } from '../../ContextualMenu';\nimport type { IButtonProps, IButton } from './Button.types';\nimport type { IButtonClassNames } from './BaseButton.classNames';\nimport type { ISplitButtonClassNames } from './SplitButton/SplitButton.classNames';\nimport type { IKeytipProps } from '../../Keytip';\nimport { composeComponentAs } from '../../Utilities';\n\n/**\n * {@docCategory Button}\n */\nexport interface IBaseButtonProps extends IButtonProps {\n baseClassName?: string;\n variantClassName?: string;\n}\n\n/**\n * {@docCategory Button}\n */\nexport interface IBaseButtonState {\n menuHidden: boolean;\n}\n\nconst TouchIdleDelay = 500; /* ms */\nconst COMPONENT_NAME = 'BaseButton';\n\n/**\n * {@docCategory Button}\n */\nexport class BaseButton extends React.Component implements IButton {\n private get _isSplitButton(): boolean {\n return !!this.props.menuProps && !!this.props.onClick && this.props.split === true;\n }\n\n public static defaultProps: Partial = {\n baseClassName: 'ms-Button',\n styles: {},\n split: false,\n };\n\n // needed to access registeredProviders when manually setting focus visibility\n public static contextType = FocusRectsContext;\n public context: IFocusRectsContext;\n\n private _async: Async;\n private _events: EventGroup;\n private _buttonElement = React.createRef();\n private _splitButtonContainer = React.createRef();\n private _mergedRef = createMergedRef();\n private _labelId: string;\n private _descriptionId: string;\n private _ariaDescriptionId: string;\n private _classNames: IButtonClassNames;\n private _processingTouch: boolean;\n private _lastTouchTimeoutId: number | undefined;\n private _renderedVisibleMenu: boolean = false;\n\n // These fields will be used to set corresponding props on the menu.\n private _menuShouldFocusOnContainer: boolean | undefined;\n private _menuShouldFocusOnMount: boolean | undefined;\n\n private _getMemoizedMenuButtonKeytipProps = memoizeFunction((keytipProps: IKeytipProps) => {\n return {\n ...keytipProps,\n hasMenu: true,\n };\n });\n\n constructor(props: IBaseButtonProps) {\n super(props);\n\n initializeComponentRef(this);\n this._async = new Async(this);\n this._events = new EventGroup(this);\n\n warnConditionallyRequiredProps(COMPONENT_NAME, props, ['menuProps', 'onClick'], 'split', this.props.split!);\n\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\n this.state = {\n menuHidden: true,\n };\n }\n\n public render(): JSX.Element {\n const {\n ariaDescription,\n ariaLabel,\n ariaHidden,\n className,\n disabled,\n allowDisabledFocus,\n primaryDisabled,\n // eslint-disable-next-line deprecation/deprecation\n secondaryText = this.props.description,\n href,\n iconProps,\n menuIconProps,\n styles,\n checked,\n variantClassName,\n theme,\n toggle,\n getClassNames,\n role,\n } = this.props;\n\n const { menuHidden } = this.state;\n\n // Button is disabled if the whole button (in case of splitButton is disabled) or if the primary action is disabled\n const isPrimaryButtonDisabled = disabled || primaryDisabled;\n\n this._classNames = getClassNames\n ? getClassNames(\n theme!,\n className!,\n variantClassName!,\n iconProps && iconProps.className,\n menuIconProps && menuIconProps.className,\n isPrimaryButtonDisabled!,\n checked!,\n !menuHidden,\n !!this.props.menuProps,\n this.props.split,\n !!allowDisabledFocus,\n )\n : getBaseButtonClassNames(\n theme!,\n styles!,\n className!,\n variantClassName!,\n iconProps && iconProps.className,\n menuIconProps && menuIconProps.className,\n isPrimaryButtonDisabled!,\n !!this.props.menuProps,\n checked!,\n !menuHidden,\n this.props.split,\n );\n\n const { _ariaDescriptionId, _labelId, _descriptionId } = this;\n // Anchor tag cannot be disabled hence in disabled state rendering\n // anchor button as normal button\n const renderAsAnchor: boolean = !isPrimaryButtonDisabled && !!href;\n const tag = renderAsAnchor ? 'a' : 'button';\n\n const nativeProps = getNativeProps(\n // eslint-disable-next-line deprecation/deprecation\n assign(renderAsAnchor ? {} : { type: 'button' }, this.props.rootProps, this.props),\n renderAsAnchor ? anchorProperties : buttonProperties,\n [\n 'disabled', // let disabled buttons be focused and styled as disabled.\n ],\n );\n\n // Check for ariaLabel passed in via Button props, and fall back to aria-label passed in via native props\n const resolvedAriaLabel = ariaLabel || (nativeProps as any)['aria-label'];\n\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 let ariaDescribedBy = undefined;\n if (ariaDescription) {\n ariaDescribedBy = _ariaDescriptionId;\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 } else if ((nativeProps as any)['aria-describedby']) {\n ariaDescribedBy = (nativeProps as any)['aria-describedby'];\n }\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 let ariaLabelledBy = undefined;\n if ((nativeProps as any)['aria-labelledby']) {\n ariaLabelledBy = (nativeProps as any)['aria-labelledby'];\n } else if (ariaDescribedBy && !resolvedAriaLabel) {\n ariaLabelledBy = this._hasText() ? _labelId : undefined;\n }\n\n const dataIsFocusable =\n (this.props as any)['data-is-focusable'] === false || (disabled && !allowDisabledFocus) || this._isSplitButton\n ? false\n : true;\n\n const 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 const checkedOrPressedValue = isCheckboxTypeRole ? !!checked : toggle === true ? !!checked : undefined;\n\n const buttonProps = assign(nativeProps, {\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 // 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 [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedOrPressedValue,\n });\n\n if (ariaHidden) {\n buttonProps['aria-hidden'] = true;\n }\n\n if (this._isSplitButton) {\n return this._onRenderSplitButtonContent(tag, buttonProps);\n } else if (this.props.menuProps) {\n const { id = `${this._labelId}-menu` } = this.props.menuProps;\n assign(buttonProps, {\n 'aria-expanded': !menuHidden,\n 'aria-controls': !menuHidden ? id : null,\n 'aria-haspopup': true,\n });\n }\n\n return this._onRenderContent(tag, buttonProps);\n }\n\n public componentDidMount() {\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\n public componentDidUpdate(prevProps: IBaseButtonProps, prevState: IBaseButtonState) {\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\n public componentWillUnmount(): void {\n this._async.dispose();\n this._events.dispose();\n }\n\n public focus(): void {\n if (this._isSplitButton && this._splitButtonContainer.current) {\n setFocusVisibility(true, undefined, this.context?.registeredProviders);\n this._splitButtonContainer.current.focus();\n } else if (this._buttonElement.current) {\n setFocusVisibility(true, undefined, this.context?.registeredProviders);\n this._buttonElement.current.focus();\n }\n }\n\n public dismissMenu(): void {\n this._dismissMenu();\n }\n\n public openMenu(shouldFocusOnContainer?: boolean, shouldFocusOnMount?: boolean): void {\n this._openMenu(shouldFocusOnContainer, shouldFocusOnMount);\n }\n\n private _onRenderContent(tag: any, buttonProps: IButtonProps): JSX.Element {\n const props = this.props;\n const Tag = tag;\n const {\n menuIconProps,\n menuProps,\n onRenderIcon = this._onRenderIcon,\n onRenderAriaDescription = this._onRenderAriaDescription,\n onRenderChildren = this._onRenderChildren,\n // eslint-disable-next-line deprecation/deprecation\n onRenderMenu = this._onRenderMenu,\n onRenderMenuIcon = this._onRenderMenuIcon,\n disabled,\n } = props;\n let { keytipProps } = props;\n if (keytipProps && menuProps) {\n keytipProps = this._getMemoizedMenuButtonKeytipProps(keytipProps);\n }\n\n const Button = (keytipAttributes?: any): JSX.Element => (\n \n \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(this._getMenuProps(menuProps), this._onRenderMenu)}\n \n \n );\n\n const Content = keytipProps ? (\n // If we're making a split button, we won't put the keytip here\n \n {(keytipAttributes: any): JSX.Element => Button(keytipAttributes)}\n \n ) : (\n Button()\n );\n\n if (menuProps && menuProps.doNotLayer) {\n return (\n <>\n {Content}\n {this._shouldRenderMenu() && onRenderMenu(this._getMenuProps(menuProps), this._onRenderMenu)}\n \n );\n }\n\n return (\n <>\n {Content}\n \n \n );\n }\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 private _shouldRenderMenu() {\n const { menuHidden } = this.state;\n // eslint-disable-next-line deprecation/deprecation\n const { persistMenu, renderPersistedMenuHiddenOnMount } = this.props;\n\n if (!menuHidden) {\n // Always should render a menu when it is expanded\n return true;\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\n return false;\n }\n\n private _onRenderIcon = (\n buttonProps?: IButtonProps,\n defaultRender?: IRenderFunction,\n ): JSX.Element | null => {\n const { iconProps } = this.props;\n\n if (iconProps && (iconProps.iconName !== undefined || iconProps.imageProps)) {\n const { className, imageProps, ...rest } = iconProps;\n\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 ;\n }\n if (iconProps.iconName) {\n return ;\n }\n if (imageProps) {\n return ;\n }\n }\n return null;\n };\n\n private _onRenderTextContents = (): JSX.Element | (JSX.Element | null)[] => {\n const {\n text,\n children,\n // eslint-disable-next-line deprecation/deprecation\n secondaryText = this.props.description,\n onRenderText = this._onRenderText,\n onRenderDescription = this._onRenderDescription,\n } = this.props;\n\n if (text || typeof children === 'string' || secondaryText) {\n return (\n \n {onRenderText(this.props, this._onRenderText)}\n {onRenderDescription(this.props, this._onRenderDescription)}\n \n );\n }\n return [onRenderText(this.props, this._onRenderText), onRenderDescription(this.props, this._onRenderDescription)];\n };\n\n private _onRenderText = (): JSX.Element | null => {\n let { text } = this.props;\n const { children } = this.props;\n\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\n if (this._hasText()) {\n return (\n \n {text}\n \n );\n }\n\n return null;\n };\n\n private _hasText(): boolean {\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\n private _onRenderChildren = (): JSX.Element | null => {\n const { children } = this.props;\n\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\n return children as any;\n };\n\n private _onRenderDescription = (props: IButtonProps) => {\n // eslint-disable-next-line deprecation/deprecation\n const { secondaryText = this.props.description } = props;\n\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 ? (\n \n {secondaryText}\n \n ) : null;\n };\n\n private _onRenderAriaDescription = () => {\n const { ariaDescription } = this.props;\n\n // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan,\n // otherwise it will be assigned to descriptionSpan.\n return ariaDescription ? (\n \n {ariaDescription}\n \n ) : null;\n };\n\n private _onRenderMenuIcon = (props: IButtonProps): JSX.Element | null => {\n const { menuIconProps } = this.props;\n\n return ;\n };\n\n private _getMenuProps(menuProps: IContextualMenuProps): IContextualMenuProps {\n const { persistMenu } = this.props;\n const { menuHidden } = this.state;\n\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 = { ...menuProps, labelElementId: this._labelId };\n }\n\n return {\n id: this._labelId + '-menu',\n directionalHint: DirectionalHint.bottomLeftEdge,\n ...menuProps,\n shouldFocusOnContainer: this._menuShouldFocusOnContainer,\n shouldFocusOnMount: this._menuShouldFocusOnMount,\n hidden: persistMenu ? menuHidden : undefined,\n className: css('ms-BaseButton-menuhost', menuProps.className),\n target: this._isSplitButton ? this._splitButtonContainer.current : this._buttonElement.current,\n onDismiss: this._onDismissMenu,\n };\n }\n\n private _onRenderMenu = (menuProps: IContextualMenuProps): JSX.Element => {\n const MenuType = this.props.menuAs ? composeComponentAs(this.props.menuAs, ContextualMenu) : ContextualMenu;\n\n return ;\n };\n\n private _onDismissMenu: IContextualMenuProps['onDismiss'] = ev => {\n const { menuProps } = this.props;\n\n if (menuProps && menuProps.onDismiss) {\n menuProps.onDismiss(ev);\n }\n if (!ev || !ev.defaultPrevented) {\n this._dismissMenu();\n }\n };\n\n private _dismissMenu = (): void => {\n this._menuShouldFocusOnMount = undefined;\n this._menuShouldFocusOnContainer = undefined;\n this.setState({ menuHidden: true });\n };\n\n private _openMenu = (shouldFocusOnContainer?: boolean, shouldFocusOnMount: boolean = true): void => {\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\n private _onToggleMenu = (shouldFocusOnContainer: boolean): void => {\n let shouldFocusOnMount = true;\n if (this.props.menuProps && this.props.menuProps.shouldFocusOnMount === false) {\n shouldFocusOnMount = false;\n }\n\n this.state.menuHidden ? this._openMenu(shouldFocusOnContainer, shouldFocusOnMount) : this._dismissMenu();\n };\n\n private _onRenderSplitButtonContent(tag: any, buttonProps: IButtonProps): JSX.Element {\n const {\n styles = {},\n disabled,\n allowDisabledFocus,\n checked,\n getSplitButtonClassNames,\n primaryDisabled,\n menuProps,\n toggle,\n role,\n primaryActionButtonProps,\n } = this.props;\n let { keytipProps } = this.props;\n const { menuHidden } = this.state;\n\n const classNames = getSplitButtonClassNames\n ? getSplitButtonClassNames(!!disabled, !menuHidden, !!checked, !!allowDisabledFocus)\n : styles && getBaseSplitButtonClassNames(styles!, !!disabled, !menuHidden, !!checked, !!primaryDisabled);\n\n assign(buttonProps, {\n onClick: undefined,\n onPointerDown: undefined,\n onPointerUp: undefined,\n tabIndex: -1,\n 'data-is-focusable': false,\n });\n\n if (keytipProps && menuProps) {\n keytipProps = this._getMemoizedMenuButtonKeytipProps(keytipProps);\n }\n\n const containerProps = getNativeProps>(buttonProps, [], ['disabled']);\n\n // Add additional props to apply on primary action button\n if (primaryActionButtonProps) {\n assign(buttonProps, primaryActionButtonProps);\n }\n\n const SplitButton = (keytipAttributes?: any): JSX.Element => (\n \n \n {this._onRenderContent(tag, buttonProps)}\n {this._onRenderSplitButtonMenuButton(classNames, keytipAttributes)}\n {this._onRenderSplitButtonDivider(classNames)}\n \n \n );\n\n return keytipProps ? (\n \n {(keytipAttributes: any): JSX.Element => SplitButton(keytipAttributes)}\n \n ) : (\n SplitButton()\n );\n }\n\n private _onSplitContainerFocusCapture = (ev: React.FocusEvent) => {\n const container = this._splitButtonContainer.current;\n\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\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\n private _onSplitButtonPrimaryClick = (ev: React.MouseEvent) => {\n if (!this.state.menuHidden) {\n this._dismissMenu();\n }\n\n // toggle split buttons need two separate targets, even for touch\n const singleTouchTarget = this._processingTouch && !this.props.toggle;\n\n if (!singleTouchTarget && this.props.onClick) {\n this.props.onClick(ev);\n } else if (singleTouchTarget) {\n this._onMenuClick(ev);\n }\n };\n\n private _onRenderSplitButtonDivider(classNames: ISplitButtonClassNames | undefined): JSX.Element | null {\n if (classNames && classNames.divider) {\n const onClick = (ev: React.MouseEvent) => {\n ev.stopPropagation();\n };\n return ;\n }\n return null;\n }\n\n private _onRenderSplitButtonMenuButton(\n classNames: ISplitButtonClassNames | undefined,\n keytipAttributes: any,\n ): JSX.Element {\n const { allowDisabledFocus, checked, disabled, splitButtonMenuProps, splitButtonAriaLabel, primaryDisabled } =\n this.props;\n const { menuHidden } = this.state;\n let menuIconProps = this.props.menuIconProps;\n\n if (menuIconProps === undefined) {\n menuIconProps = {\n iconName: 'ChevronDown',\n };\n }\n\n const splitButtonProps = {\n ...splitButtonMenuProps,\n styles: classNames,\n checked,\n disabled,\n allowDisabledFocus,\n onClick: this._onMenuClick,\n menuProps: undefined,\n iconProps: { ...menuIconProps, className: this._classNames.menuIcon },\n ariaLabel: splitButtonAriaLabel,\n 'aria-haspopup': true,\n 'aria-expanded': !menuHidden,\n 'data-is-focusable': false,\n };\n\n // Add data-ktp-execute-target to the split button if the keytip is defined\n return (\n \n );\n }\n\n private _onKeyDown = (ev: React.KeyboardEvent) => {\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 } else if (!this.props.disabled) {\n if (this.props.menuProps) {\n this._onMenuKeyDown(ev);\n } else if (this.props.onKeyDown !== undefined) {\n this.props.onKeyDown(ev); // not cancelling event because it's not disabled\n }\n }\n };\n\n private _onKeyUp = (\n ev: React.KeyboardEvent,\n ) => {\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\n private _onKeyPress = (\n ev: React.KeyboardEvent,\n ) => {\n // eslint-disable-next-line deprecation/deprecation\n if (!this.props.disabled && this.props.onKeyPress !== undefined) {\n // eslint-disable-next-line deprecation/deprecation\n this.props.onKeyPress(ev); // not cancelling event because it's not disabled\n }\n };\n\n private _onMouseUp = (\n ev: React.MouseEvent,\n ) => {\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\n private _onMouseDown = (\n ev: React.MouseEvent,\n ) => {\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\n private _onClick = (\n ev: React.MouseEvent,\n ) => {\n if (!this.props.disabled) {\n if (this.props.menuProps) {\n this._onMenuClick(ev);\n } else if (this.props.onClick !== undefined) {\n this.props.onClick(ev); // not cancelling event because it's not disabled\n }\n }\n };\n\n private _onSplitButtonContainerKeyDown = (ev: React.KeyboardEvent) => {\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 } else {\n this._onMenuKeyDown(ev);\n }\n };\n\n private _onMenuKeyDown = (ev: React.KeyboardEvent) => {\n if (this.props.disabled) {\n return;\n }\n\n if (this.props.onKeyDown) {\n this.props.onKeyDown(ev);\n }\n\n // eslint-disable-next-line deprecation/deprecation\n const isUp = ev.which === KeyCodes.up;\n // eslint-disable-next-line deprecation/deprecation\n const isDown = ev.which === KeyCodes.down;\n\n if (!ev.defaultPrevented && this._isValidMenuOpenKey(ev)) {\n const { onMenuClick } = this.props;\n if (onMenuClick) {\n onMenuClick(ev, this.props);\n }\n\n this._onToggleMenu(false);\n ev.preventDefault();\n ev.stopPropagation();\n }\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 as Element, this.context?.registeredProviders);\n }\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\n if (!this.state.menuHidden && this.props.menuProps) {\n const currentShouldFocusOnMount =\n 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\n private _onTouchStart: () => void = () => {\n if (\n this._isSplitButton &&\n this._splitButtonContainer.current &&\n !('onpointerdown' in this._splitButtonContainer.current)\n ) {\n this._handleTouchAndPointerEvent();\n }\n };\n\n private _onPointerDown(\n ev: PointerEvent &\n React.PointerEvent,\n ) {\n const { onPointerDown } = this.props;\n if (onPointerDown) {\n onPointerDown(ev);\n }\n\n if (ev.pointerType === 'touch') {\n this._handleTouchAndPointerEvent();\n\n ev.preventDefault();\n ev.stopImmediatePropagation();\n }\n }\n\n private _handleTouchAndPointerEvent() {\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\n this._lastTouchTimeoutId = this._async.setTimeout(() => {\n this._processingTouch = false;\n this._lastTouchTimeoutId = undefined;\n\n // Touch and pointer events don't focus the button naturally,\n // so adding an imperative focus call to guarantee this behavior.\n // Only focus the button if a splitbutton menu is not open\n if (this.state.menuHidden) {\n this.focus();\n }\n }, TouchIdleDelay);\n }\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 private _isValidMenuOpenKey(\n ev: React.KeyboardEvent,\n ): boolean {\n if (this.props.menuTriggerKeyCode) {\n // eslint-disable-next-line deprecation/deprecation\n return ev.which === this.props.menuTriggerKeyCode;\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\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\n private _onMenuClick = (\n ev: React.MouseEvent,\n ) => {\n const { onMenuClick, menuProps } = this.props;\n if (onMenuClick) {\n onMenuClick(ev, this.props);\n }\n\n // focus on the container by default when the menu is opened with a click event\n // this differentiates from a keyboard interaction triggering the click event\n const shouldFocusOnContainer =\n typeof menuProps?.shouldFocusOnContainer === 'boolean'\n ? menuProps.shouldFocusOnContainer\n : (ev.nativeEvent as PointerEvent).pointerType === 'mouse';\n\n if (!ev.defaultPrevented) {\n this._onToggleMenu(shouldFocusOnContainer);\n ev.preventDefault();\n ev.stopPropagation();\n }\n };\n}\n","import * as React from 'react';\nimport { BaseButton } from './BaseButton';\nimport { Button } from './Button';\nimport { KeyCodes } from '../../Utilities';\nimport type { IButtonClassNames } from './BaseButton.classNames';\nimport type { ISplitButtonClassNames } from './SplitButton/SplitButton.classNames';\nimport type { IRefObject, IRenderFunction, IComponentAs } from '../../Utilities';\nimport type { IContextualMenuProps } from '../../ContextualMenu';\nimport type { IIconProps } from '../../Icon';\nimport type { IShadowDomStyle, IStyle, ITheme } from '../../Styling';\nimport type { IKeytipProps } from '../../Keytip';\n\n/**\n * {@docCategory Button}\n */\nexport interface IButton {\n /**\n * Sets focus to the button.\n */\n focus: () => void;\n\n /**\n * If there is a menu associated with this button and it is visible, this will dismiss the menu\n */\n dismissMenu: () => void;\n\n /**\n * If there is a menu associated with this button and it is visible, this will open the menu.\n * Params are optional overrides to the ones defined in `menuProps` to apply to just this instance of\n * opening the menu.\n *\n * @param shouldFocusOnContainer - override to the ContextualMenu `shouldFocusOnContainer` prop.\n * BaseButton implementation defaults to `undefined`.\n * Avoid using `shouldFocusOnContainer` as it breaks the default focus behaviour when using\n * assistive technologies.\n * @param shouldFocusOnMount - override to the ContextualMenu `shouldFocusOnMount` prop.\n * BaseButton implementation defaults to `true`.\n */\n openMenu: (shouldFocusOnContainer?: boolean, shouldFocusOnMount?: boolean) => void;\n}\n\n/**\n * {@docCategory Button}\n */\n/* eslint-disable deprecation/deprecation */\nexport interface IButtonProps\n extends React.AllHTMLAttributes<\n HTMLAnchorElement | HTMLButtonElement | HTMLDivElement | BaseButton | Button | HTMLSpanElement\n > {\n /* eslint-enable deprecation/deprecation */\n /**\n * Optional callback to access the `IButton` interface. Use this instead of `ref` for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject;\n\n /**\n * Optional callback to access the root DOM element.\n * @deprecated Temporary solution which will be replaced with ref in the V8 release.\n */\n elementRef?: React.Ref;\n\n /**\n * If provided, this component will be rendered as an anchor.\n * @defaultvalue ElementType.anchor\n */\n href?: string;\n\n /**\n * Changes the visual presentation of the button to be emphasized.\n * @defaultvalue false\n */\n primary?: boolean;\n\n /**\n * Unique ID to identify the item. Typically a duplicate of key value.\n */\n uniqueId?: string | number;\n\n /**\n * Whether the button is disabled\n */\n disabled?: boolean;\n\n /**\n * Whether the button can have focus in disabled mode\n */\n allowDisabledFocus?: boolean;\n\n /**\n * If set to true and this is a split button (`split` is true), the split button's primary action is disabled.\n */\n primaryDisabled?: boolean;\n\n /**\n * Custom styling for individual elements within the button DOM.\n */\n styles?: IButtonStyles;\n\n /**\n * Theme provided by HOC.\n */\n theme?: ITheme;\n\n /**\n * Whether the button is checked. Should be used with the `toggle` attribute when creating a standalone on/off button.\n */\n checked?: boolean;\n\n /**\n * Whether button is a toggle button with distinct on and off states. This should be true for buttons that permanently\n * change state when a press event finishes, such as a volume mute button.\n */\n toggle?: boolean;\n\n /**\n * If provided, additional class name to provide on the root element.\n */\n className?: string;\n\n /**\n * The aria label of the button for the benefit of screen readers.\n */\n ariaLabel?: string;\n\n /**\n * Detailed description of the button for the benefit of screen readers.\n *\n * Besides the compound button, other button types will need more information provided to screen reader.\n */\n ariaDescription?: string;\n\n /**\n * If true, add an `aria-hidden` attribute instructing screen readers to ignore the element.\n */\n ariaHidden?: boolean;\n\n /**\n * Text to render button label. If text is supplied, it will override any string in button children.\n * Other children components will be passed through after the text.\n */\n text?: string;\n\n /**\n * The props for the icon shown in the button.\n */\n iconProps?: IIconProps;\n\n /**\n * Props for button menu. Providing this will default to showing the menu icon. See `menuIconProps` for overriding\n * how the default icon looks. Providing this in addition to `onClick` and setting the `split` property to `true`\n * will render a SplitButton.\n */\n menuProps?: IContextualMenuProps;\n\n /**\n * Callback that runs after Button's contextual menu was closed (removed from the DOM)\n */\n onAfterMenuDismiss?: () => void;\n\n /**\n * If set to true, and if `menuProps` and `onClick` are provided, the button will render as a SplitButton.\n * @default false\n */\n split?: boolean;\n\n /**\n * The props for the icon shown when providing a menu dropdown.\n */\n menuIconProps?: IIconProps;\n\n /**\n * Accessible label for the dropdown chevron button if this button is split.\n */\n splitButtonAriaLabel?: string;\n\n /**\n * Optional callback when menu is clicked.\n */\n onMenuClick?: (ev?: React.MouseEvent | React.KeyboardEvent, button?: IButtonProps) => void;\n\n /**\n * Custom render function for the icon\n */\n onRenderIcon?: IRenderFunction;\n\n /**\n * Custom render function for the label text.\n */\n onRenderText?: IRenderFunction;\n\n /**\n * Custom render function for the description text.\n */\n onRenderDescription?: IRenderFunction;\n\n /**\n * Custom render function for the aria description element.\n */\n onRenderAriaDescription?: IRenderFunction;\n\n /**\n * Custom render function for rendering the button children.\n */\n onRenderChildren?: IRenderFunction;\n\n /**\n * Custom render function for button menu icon\n */\n onRenderMenuIcon?: IRenderFunction;\n\n /**\n * @deprecated Deprecated at v6.3.2, to be removed at \\>= v7.0.0.\n * Use `menuAs` instead.\n */\n onRenderMenu?: IRenderFunction;\n\n /**\n * Render a custom menu in place of the normal one.\n */\n menuAs?: IComponentAs;\n\n /**\n * Description of the action this button takes.\n * Only used for compound buttons.\n */\n secondaryText?: string;\n\n /**\n * @defaultvalue ButtonType.default\n * @deprecated Deprecated at v1.2.3, to be removed at \\>= v2.0.0.\n * Use specific button component instead.\n */\n\n buttonType?: ButtonType;\n\n /**\n * @deprecated Deprecated at v0.56.2, to be removed at \\>= v1.0.0.\n * Use native props on the Button itself instead.\n * They will be mixed into the button/anchor element rendered by the component.\n */\n rootProps?: React.ButtonHTMLAttributes | React.AnchorHTMLAttributes;\n\n /**\n * @deprecated No longer used. Use `checked` if setting state.\n */\n toggled?: boolean;\n\n /**\n * Any custom data the developer wishes to associate with the button.\n */\n data?: any;\n\n /**\n * Method to provide the classnames to style a button.\n * The default value for this prop is the `getClassnames` func defined in `BaseButton.classnames.ts`.\n * @defaultvalue getBaseButtonClassNames\n */\n getClassNames?: (\n theme: ITheme,\n className: string,\n variantClassName: string,\n iconClassName: string | undefined,\n menuIconClassName: string | undefined,\n disabled: boolean,\n checked: boolean,\n expanded: boolean,\n hasMenu: boolean,\n isSplit: boolean | undefined,\n allowDisabledFocus: boolean,\n ) => IButtonClassNames;\n\n /**\n * Method to provide the classnames to style a button.\n * The default value for this prop is the `getClassnames` func defined in `BaseButton.classnames.ts`.\n * @defaultvalue getBaseSplitButtonClassNames\n */\n getSplitButtonClassNames?: (\n disabled: boolean,\n expanded: boolean,\n checked: boolean,\n allowDisabledFocus: boolean,\n ) => ISplitButtonClassNames;\n\n /**\n * Provides a custom KeyCode that can be used to open the button menu.\n * A value of `null` can be provided to disable opening the button menu with a key press.\n * @default KeyCodes.down\n */\n menuTriggerKeyCode?: KeyCodes | null;\n\n /**\n * Optional keytip for this button\n */\n keytipProps?: IKeytipProps;\n\n /**\n * Menu will not be created or destroyed when opened or closed, instead it\n * will be hidden. This will improve perf of the menu opening but could potentially\n * impact overall perf by having more elements in the dom. Should only be used\n * when menu perf is important.\n *\n * Note: This may increase the amount of time it takes for the button itself to mount.\n */\n persistMenu?: boolean;\n\n /**\n * If true, the persisted menu is rendered hidden when the button initially mounts.\n * Non-persisted menus will not be in the component tree unless they are being shown.\n *\n * Note: This increases the time the button will take to mount, but\n * can improve perceived menu open perf. when the user opens the menu.\n *\n * @defaultvalue `undefined`, equivalent to false\n *\n * @deprecated There is known bug in Edge when this prop is true where scrollbars\n * overlap with the content when a menu is first rendered hidden.\n * Please do not start using this. If you are already using this,\n * please make sure that you are doing so only in non-Edge browsers.\n * See: https://github.com/microsoft/fluentui/issues/9034\n */\n renderPersistedMenuHiddenOnMount?: boolean;\n\n /**\n * Experimental prop that get passed into the menuButton that's rendered as part of\n * split button. Anything passed in will likely need to have accompanying\n * style changes.\n */\n splitButtonMenuProps?: IButtonProps;\n\n /**\n * Style for the description text if applicable (for compound buttons).\n * @deprecated Use `secondaryText` instead.\n */\n description?: string;\n\n /**\n * yet unknown docs\n */\n defaultRender?: any;\n\n /**\n * Optional props to be applied only to the primary action button of SplitButton and not to the\n * overall SplitButton container\n */\n primaryActionButtonProps?: IButtonProps;\n}\n\n/**\n * {@docCategory Button}\n */\nexport enum ElementType {\n /** `button` element. */\n button = 0,\n /** `a` element. */\n anchor = 1,\n}\n\n/**\n * {@docCategory Button}\n */\nexport enum ButtonType {\n normal = 0,\n primary = 1,\n hero = 2,\n compound = 3,\n command = 4,\n icon = 5,\n default = 6,\n}\n\n/**\n * {@docCategory Button}\n */\nexport interface IButtonStyles extends IShadowDomStyle {\n /**\n * Style for the root element in the default enabled, non-toggled state.\n */\n root?: IStyle;\n\n /**\n * Style override for the root element in a checked state, layered on top of the root style.\n */\n rootChecked?: IStyle;\n\n /**\n * Style override for the root element in a disabled state, layered on top of the root style.\n */\n rootDisabled?: IStyle;\n\n /**\n * Style override applied to the root on hover in the default, enabled, non-toggled state.\n */\n rootHovered?: IStyle;\n\n /**\n * Style override applied to the root on focus in the default, enabled, non-toggled state.\n */\n rootFocused?: IStyle;\n\n /**\n * Style override applied to the root on pressed in the default, enabled, non-toggled state.\n */\n rootPressed?: IStyle;\n\n /**\n * Style override applied to the root on when menu is expanded in the default, enabled, non-toggled state.\n */\n rootExpanded?: IStyle;\n\n /**\n * Style override applied to the root on hover in a checked, enabled state\n */\n rootCheckedHovered?: IStyle;\n\n /**\n * Style override applied to the root on pressed in a checked, enabled state\n */\n rootCheckedPressed?: IStyle;\n\n /**\n * Style override applied to the root on hover in a checked, disabled state\n */\n rootCheckedDisabled?: IStyle;\n\n /**\n * Style override applied to the root on hover in a expanded state on hover\n */\n rootExpandedHovered?: IStyle;\n\n /**\n * Style override for the root element when it has a menu button, layered on top of the root style.\n */\n rootHasMenu?: IStyle;\n\n /**\n * Style for the flexbox container within the root element.\n */\n flexContainer?: IStyle;\n\n /**\n * Style for the text container within the flexbox container element (and contains the text and description).\n */\n textContainer?: IStyle;\n\n /**\n * Style for the icon on the near side of the label.\n */\n icon?: IStyle;\n\n /**\n * Style for the icon on the near side of the label on hover.\n */\n iconHovered?: IStyle;\n\n /**\n * Style for the icon on the near side of the label when pressed.\n */\n iconPressed?: IStyle;\n\n /**\n * Style for the icon on the near side of the label when expanded.\n */\n iconExpanded?: IStyle;\n\n /**\n * Style for the icon on the near side of the label when expanded and hovered.\n */\n iconExpandedHovered?: IStyle;\n\n /**\n * Style override for the icon when the button is disabled.\n */\n iconDisabled?: IStyle;\n\n /**\n * Style override for the icon when the button is checked.\n */\n iconChecked?: IStyle;\n\n /**\n * Style for the text content of the button.\n */\n label?: IStyle;\n\n /**\n * Style override for the text content when the button is hovered.\n */\n labelHovered?: IStyle;\n\n /**\n * Style override for the text content when the button is disabled.\n */\n labelDisabled?: IStyle;\n\n /**\n * Style override for the text content when the button is checked.\n */\n labelChecked?: IStyle;\n\n /**\n * Style for the menu chevron.\n */\n menuIcon?: IStyle;\n\n /**\n * Style for the menu chevron on hover.\n */\n menuIconHovered?: IStyle;\n\n /**\n * Style for the menu chevron when pressed.\n */\n menuIconPressed?: IStyle;\n\n /**\n * Style for the menu chevron when expanded.\n */\n menuIconExpanded?: IStyle;\n\n /**\n * Style for the menu chevron when expanded and hovered.\n */\n menuIconExpandedHovered?: IStyle;\n\n /**\n * Style override for the menu chevron when the button is disabled.\n */\n menuIconDisabled?: IStyle;\n\n /**\n * Style override for the menu chevron when the button is checked.\n */\n menuIconChecked?: IStyle;\n\n /**\n * Style for the description text if applicable (for compound buttons).\n */\n description?: IStyle;\n\n /**\n * Style for the description text if applicable (for compound buttons).\n */\n secondaryText?: IStyle;\n\n /**\n * Style override for the description text when the button is hovered.\n */\n descriptionHovered?: IStyle;\n\n /**\n * Style for the description text when the button is pressed.\n */\n descriptionPressed?: IStyle;\n\n /**\n * Style override for the description text when the button is disabled.\n */\n descriptionDisabled?: IStyle;\n\n /**\n * Style override for the description text when the button is checked.\n */\n descriptionChecked?: IStyle;\n\n /**\n * Style override for the screen reader text.\n */\n screenReaderText?: IStyle;\n\n /**\n * Style override for the container div around a SplitButton element\n */\n splitButtonContainer?: IStyle;\n\n /**\n * Style for container div around a SplitButton element when the button is hovered.\n */\n splitButtonContainerHovered?: IStyle;\n\n /**\n * Style for container div around a SplitButton element when the button is focused.\n */\n splitButtonContainerFocused?: IStyle;\n\n /**\n * Style for container div around a SplitButton element when the button is checked.\n */\n splitButtonContainerChecked?: IStyle;\n\n /**\n * Style for container div around a SplitButton element when the button is checked and hovered.\n */\n splitButtonContainerCheckedHovered?: IStyle;\n\n /**\n * Style override for the container div around a SplitButton element in a disabled state\n */\n splitButtonContainerDisabled?: IStyle;\n\n /**\n * Style override for the divider element that appears between the button and menu button\n * for a split button.\n */\n splitButtonDivider?: IStyle;\n\n /**\n * Style override for the divider element that appears between the button and menu button\n * for a split button in a disabled state.\n */\n splitButtonDividerDisabled?: IStyle;\n\n /**\n * Style override for the SplitButton menu button\n */\n splitButtonMenuButton?: IStyle;\n\n /**\n * Style override for the SplitButton menu button element in a disabled state.\n */\n splitButtonMenuButtonDisabled?: IStyle;\n\n /**\n * Style override for the SplitButton menu button element in a checked state\n */\n splitButtonMenuButtonChecked?: IStyle;\n\n /**\n * Style override for the SplitButton menu button element in an expanded state\n */\n splitButtonMenuButtonExpanded?: IStyle;\n\n /**\n * Style override for the SplitButton menu icon element\n */\n splitButtonMenuIcon?: IStyle;\n\n /**\n * Style override for the SplitButton menu icon element in a disabled state\n */\n splitButtonMenuIconDisabled?: IStyle;\n\n /**\n * Style override for the SplitButton FlexContainer.\n */\n splitButtonFlexContainer?: IStyle;\n\n /**\n * Style override for the SplitButton when only primaryButton is in a disabled state\n */\n splitButtonMenuFocused?: IStyle;\n}\n","import { memoizeFunction } from '../../Utilities';\nimport { HighContrastSelector, getFocusStyle, hiddenContentStyle } from '../../Styling';\nimport type { IButtonStyles } from './Button.types';\nimport type { ITheme, IRawStyle } from '../../Styling';\n\nconst noOutline: IRawStyle = {\n outline: 0,\n};\n\nconst iconStyle = (fontSize?: string | number): IRawStyle => {\n return {\n fontSize,\n margin: '0 4px',\n height: '16px',\n lineHeight: '16px',\n textAlign: 'center',\n flexShrink: 0,\n };\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 const getStyles = memoizeFunction((theme: ITheme): IButtonStyles => {\n const { semanticColors, effects, fonts } = theme;\n\n const border = semanticColors.buttonBorder;\n const disabledBackground = semanticColors.disabledBackground;\n const disabledText = semanticColors.disabledText;\n const buttonHighContrastFocus = {\n left: -2,\n top: -2,\n bottom: -2,\n right: -2,\n outlineColor: 'ButtonText',\n };\n\n return {\n root: [\n getFocusStyle(theme, { inset: 1, highContrastStyle: buttonHighContrastFocus, borderColor: 'transparent' }),\n theme.fonts.medium,\n {\n border: '1px solid ' + border,\n borderRadius: effects.roundedCorner2,\n boxSizing: 'border-box',\n cursor: 'pointer',\n display: 'inline-block',\n padding: '0 16px',\n textDecoration: 'none',\n textAlign: 'center',\n userSelect: 'none',\n\n // IE11 workaround for preventing shift of child elements of a button when active.\n ':active > span': {\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 ':hover': noOutline,\n ':focus': noOutline,\n },\n ],\n\n iconDisabled: {\n color: disabledText,\n [HighContrastSelector]: {\n color: 'GrayText',\n },\n },\n\n menuIconDisabled: {\n color: disabledText,\n [HighContrastSelector]: {\n color: 'GrayText',\n },\n },\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\n textContainer: {\n flexGrow: 1,\n display: 'block',\n },\n\n icon: iconStyle(fonts.mediumPlus.fontSize),\n\n menuIcon: iconStyle(fonts.small.fontSize),\n\n label: {\n margin: '0 4px',\n lineHeight: '100%',\n display: 'block',\n },\n\n screenReaderText: hiddenContentStyle,\n };\n});\n","import { HighContrastSelector, concatStyleSets, getFocusStyle, getHighContrastNoAdjustStyle } from '../../../Styling';\nimport { memoizeFunction } from '../../../Utilities';\nimport type { IButtonStyles } from '../Button.types';\nimport type { ITheme, IStyle } from '../../../Styling';\n\nexport const getStyles = memoizeFunction((theme: ITheme, customStyles?: IButtonStyles): IButtonStyles => {\n const { effects, palette, semanticColors } = theme;\n\n const buttonHighContrastFocus = {\n left: -2,\n top: -2,\n bottom: -2,\n right: -2,\n border: 'none',\n };\n\n const splitButtonDividerBaseStyles: IStyle = {\n position: 'absolute',\n width: 1,\n right: 31,\n top: 8,\n bottom: 8,\n };\n\n const splitButtonStyles: IButtonStyles = {\n splitButtonContainer: [\n getFocusStyle(theme, { highContrastStyle: buttonHighContrastFocus, inset: 2, pointerEvents: 'none' }),\n {\n display: 'inline-flex',\n '.ms-Button--default': {\n borderTopRightRadius: '0',\n borderBottomRightRadius: '0',\n borderRight: 'none',\n flexGrow: '1',\n },\n '.ms-Button--primary': {\n borderTopRightRadius: '0',\n borderBottomRightRadius: '0',\n border: 'none',\n flexGrow: '1',\n\n ':hover': {\n border: 'none',\n },\n ':active': {\n border: 'none',\n },\n\n [HighContrastSelector]: {\n color: 'WindowText',\n backgroundColor: 'Window',\n border: '1px solid WindowText',\n borderRightWidth: '0',\n ...getHighContrastNoAdjustStyle(),\n ':hover': {\n backgroundColor: 'Highlight',\n border: '1px solid Highlight',\n borderRightWidth: '0',\n color: 'HighlightText',\n },\n ':active': {\n border: '1px solid Highlight',\n },\n },\n },\n '.ms-Button--default + .ms-Button': {\n [HighContrastSelector]: {\n border: '1px solid WindowText',\n borderLeftWidth: '0',\n ':hover': {\n backgroundColor: 'HighlightText',\n borderColor: 'Highlight',\n color: 'Highlight',\n '.ms-Button-menuIcon': {\n backgroundColor: 'HighlightText',\n color: 'Highlight',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\n },\n '.ms-Button--default + .ms-Button[aria-expanded=\"true\"]': {\n [HighContrastSelector]: {\n backgroundColor: 'HighlightText',\n borderColor: 'Highlight',\n color: 'Highlight',\n '.ms-Button-menuIcon': {\n backgroundColor: 'HighlightText',\n color: 'Highlight',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\n '.ms-Button--primary + .ms-Button': {\n border: 'none',\n\n [HighContrastSelector]: {\n border: '1px solid WindowText',\n borderLeftWidth: '0',\n ':hover': {\n borderLeftWidth: '0',\n backgroundColor: 'Highlight',\n borderColor: 'Highlight',\n color: 'HighlightText',\n '.ms-Button-menuIcon': {\n ...getHighContrastNoAdjustStyle(),\n color: 'HighlightText',\n },\n },\n },\n },\n '.ms-Button--primary + .ms-Button[aria-expanded=\"true\"]': {\n backgroundColor: 'Highlight',\n borderColor: 'Highlight',\n color: 'HighlightText',\n ...getHighContrastNoAdjustStyle(),\n '.ms-Button-menuIcon': {\n color: 'HighlightText',\n },\n },\n '.ms-Button.is-disabled': {\n [HighContrastSelector]: {\n color: 'GrayText',\n borderColor: 'GrayText',\n backgroundColor: 'Window',\n },\n },\n },\n ],\n splitButtonContainerHovered: {\n '.ms-Button--default.is-disabled': {\n backgroundColor: semanticColors.buttonBackgroundDisabled,\n color: semanticColors.buttonTextDisabled,\n [HighContrastSelector]: {\n color: 'GrayText',\n borderColor: 'GrayText',\n backgroundColor: 'Window',\n },\n },\n '.ms-Button--primary.is-disabled': {\n backgroundColor: semanticColors.primaryButtonBackgroundDisabled,\n color: semanticColors.primaryButtonTextDisabled,\n [HighContrastSelector]: {\n color: 'GrayText',\n borderColor: 'GrayText',\n backgroundColor: 'Window',\n },\n },\n },\n splitButtonContainerChecked: {\n '.ms-Button--primary': {\n [HighContrastSelector]: {\n color: 'Window',\n backgroundColor: 'WindowText',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\n splitButtonContainerCheckedHovered: {\n '.ms-Button--primary': {\n [HighContrastSelector]: {\n color: 'Window',\n backgroundColor: 'WindowText',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\n splitButtonContainerFocused: {\n outline: 'none!important',\n },\n splitButtonMenuButton: {\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 [HighContrastSelector]: {\n '.ms-Button-menuIcon': {\n color: 'WindowText',\n },\n },\n },\n splitButtonDivider: {\n ...splitButtonDividerBaseStyles,\n\n [HighContrastSelector]: {\n backgroundColor: 'WindowText',\n },\n },\n splitButtonDividerDisabled: {\n ...splitButtonDividerBaseStyles,\n\n [HighContrastSelector]: {\n backgroundColor: 'GrayText',\n },\n },\n splitButtonMenuButtonDisabled: {\n pointerEvents: 'none',\n border: 'none',\n\n ':hover': {\n cursor: 'default',\n },\n\n '.ms-Button--primary': {\n [HighContrastSelector]: {\n color: 'GrayText',\n borderColor: 'GrayText',\n backgroundColor: 'Window',\n },\n },\n '.ms-Button-menuIcon': {\n [HighContrastSelector]: {\n color: 'GrayText',\n },\n },\n [HighContrastSelector]: {\n color: 'GrayText',\n border: '1px solid GrayText',\n backgroundColor: 'Window',\n },\n },\n\n splitButtonFlexContainer: {\n display: 'flex',\n height: '100%',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n alignItems: 'center',\n },\n\n splitButtonContainerDisabled: {\n outline: 'none',\n border: 'none',\n [HighContrastSelector]: {\n color: 'GrayText',\n borderColor: 'GrayText',\n backgroundColor: 'Window',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n splitButtonMenuFocused: {\n ...getFocusStyle(theme, { highContrastStyle: buttonHighContrastFocus, inset: 2 }),\n },\n };\n\n return concatStyleSets(splitButtonStyles, customStyles)!;\n});\n","import { HighContrastSelector, getHighContrastNoAdjustStyle } from '../../Styling';\nimport { IsFocusVisibleClassName } from '../../Utilities';\nimport type { IButtonStyles } from './Button.types';\nimport type { ITheme, IRawStyle } from '../../Styling';\n\nconst splitButtonDividerBaseStyles = (): IRawStyle => {\n return {\n position: 'absolute',\n width: 1,\n right: 31,\n top: 8,\n bottom: 8,\n };\n};\n\nexport function standardStyles(theme: ITheme): IButtonStyles {\n const { semanticColors: s, palette: p } = theme;\n\n const buttonBackground = s.buttonBackground;\n const buttonBackgroundPressed = s.buttonBackgroundPressed;\n const buttonBackgroundHovered = s.buttonBackgroundHovered;\n const buttonBackgroundDisabled = s.buttonBackgroundDisabled;\n\n const buttonText = s.buttonText;\n const buttonTextHovered = s.buttonTextHovered;\n const buttonTextDisabled = s.buttonTextDisabled;\n const buttonTextChecked = s.buttonTextChecked;\n const buttonTextCheckedHovered = s.buttonTextCheckedHovered;\n\n return {\n root: {\n backgroundColor: buttonBackground,\n color: buttonText,\n },\n\n rootHovered: {\n backgroundColor: buttonBackgroundHovered,\n color: buttonTextHovered,\n [HighContrastSelector]: {\n borderColor: 'Highlight',\n color: 'Highlight',\n },\n },\n\n rootPressed: {\n backgroundColor: buttonBackgroundPressed,\n color: buttonTextChecked,\n },\n\n rootExpanded: {\n backgroundColor: buttonBackgroundPressed,\n color: buttonTextChecked,\n },\n\n rootChecked: {\n backgroundColor: buttonBackgroundPressed,\n color: buttonTextChecked,\n },\n\n rootCheckedHovered: {\n backgroundColor: buttonBackgroundPressed,\n color: buttonTextCheckedHovered,\n },\n\n rootDisabled: {\n color: buttonTextDisabled,\n backgroundColor: buttonBackgroundDisabled,\n [HighContrastSelector]: {\n color: 'GrayText',\n borderColor: 'GrayText',\n backgroundColor: 'Window',\n },\n },\n\n // Split button styles\n splitButtonContainer: {\n [HighContrastSelector]: {\n border: 'none',\n },\n },\n\n splitButtonMenuButton: {\n color: p.white,\n backgroundColor: 'transparent',\n ':hover': {\n backgroundColor: p.neutralLight,\n [HighContrastSelector]: {\n color: 'Highlight',\n },\n },\n },\n\n splitButtonMenuButtonDisabled: {\n backgroundColor: s.buttonBackgroundDisabled,\n ':hover': {\n backgroundColor: s.buttonBackgroundDisabled,\n },\n },\n\n splitButtonDivider: {\n ...splitButtonDividerBaseStyles(),\n backgroundColor: p.neutralTertiaryAlt,\n [HighContrastSelector]: {\n backgroundColor: 'WindowText',\n },\n },\n\n splitButtonDividerDisabled: {\n backgroundColor: theme.palette.neutralTertiaryAlt,\n },\n\n splitButtonMenuButtonChecked: {\n backgroundColor: p.neutralQuaternaryAlt,\n ':hover': {\n backgroundColor: p.neutralQuaternaryAlt,\n },\n },\n\n splitButtonMenuButtonExpanded: {\n backgroundColor: p.neutralQuaternaryAlt,\n ':hover': {\n backgroundColor: p.neutralQuaternaryAlt,\n },\n },\n\n splitButtonMenuIcon: {\n color: s.buttonText,\n },\n\n splitButtonMenuIconDisabled: {\n color: s.buttonTextDisabled,\n },\n };\n}\n\nexport function primaryStyles(theme: ITheme): IButtonStyles {\n const { palette: p, semanticColors: s } = theme;\n\n return {\n root: {\n backgroundColor: s.primaryButtonBackground,\n border: `1px solid ${s.primaryButtonBackground}`,\n color: s.primaryButtonText,\n [HighContrastSelector]: {\n color: 'Window',\n backgroundColor: 'WindowText',\n borderColor: 'WindowText',\n ...getHighContrastNoAdjustStyle(),\n },\n [`.${IsFocusVisibleClassName} &:focus, :host(.${IsFocusVisibleClassName}) &:focus`]: {\n ':after': {\n border: `none`,\n outlineColor: p.white,\n },\n },\n },\n\n rootHovered: {\n backgroundColor: s.primaryButtonBackgroundHovered,\n border: `1px solid ${s.primaryButtonBackgroundHovered}`,\n color: s.primaryButtonTextHovered,\n [HighContrastSelector]: {\n color: 'Window',\n backgroundColor: 'Highlight',\n borderColor: 'Highlight',\n },\n },\n\n rootPressed: {\n backgroundColor: s.primaryButtonBackgroundPressed,\n border: `1px solid ${s.primaryButtonBackgroundPressed}`,\n color: s.primaryButtonTextPressed,\n [HighContrastSelector]: {\n color: 'Window',\n backgroundColor: 'WindowText',\n borderColor: 'WindowText',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n\n rootExpanded: {\n backgroundColor: s.primaryButtonBackgroundPressed,\n color: s.primaryButtonTextPressed,\n },\n\n rootChecked: {\n backgroundColor: s.primaryButtonBackgroundPressed,\n color: s.primaryButtonTextPressed,\n },\n\n rootCheckedHovered: {\n backgroundColor: s.primaryButtonBackgroundPressed,\n color: s.primaryButtonTextPressed,\n },\n\n rootDisabled: {\n color: s.primaryButtonTextDisabled,\n backgroundColor: s.primaryButtonBackgroundDisabled,\n [HighContrastSelector]: {\n color: 'GrayText',\n borderColor: 'GrayText',\n backgroundColor: 'Window',\n },\n },\n\n // Split button styles\n splitButtonContainer: {\n [HighContrastSelector]: {\n border: 'none',\n },\n },\n\n splitButtonDivider: {\n ...splitButtonDividerBaseStyles(),\n backgroundColor: p.white,\n [HighContrastSelector]: {\n backgroundColor: 'Window',\n },\n },\n\n splitButtonMenuButton: {\n backgroundColor: s.primaryButtonBackground,\n color: s.primaryButtonText,\n [HighContrastSelector]: {\n backgroundColor: 'Canvas',\n },\n ':hover': {\n backgroundColor: s.primaryButtonBackgroundHovered,\n [HighContrastSelector]: {\n color: 'Highlight',\n },\n },\n },\n\n splitButtonMenuButtonDisabled: {\n backgroundColor: s.primaryButtonBackgroundDisabled,\n ':hover': {\n backgroundColor: s.primaryButtonBackgroundDisabled,\n },\n },\n\n splitButtonMenuButtonChecked: {\n backgroundColor: s.primaryButtonBackgroundPressed,\n ':hover': {\n backgroundColor: s.primaryButtonBackgroundPressed,\n },\n },\n\n splitButtonMenuButtonExpanded: {\n backgroundColor: s.primaryButtonBackgroundPressed,\n ':hover': {\n backgroundColor: s.primaryButtonBackgroundPressed,\n },\n },\n\n splitButtonMenuIcon: {\n color: s.primaryButtonText,\n },\n\n splitButtonMenuIconDisabled: {\n color: p.neutralTertiary,\n\n [HighContrastSelector]: {\n color: 'GrayText',\n },\n },\n };\n}\n","import { concatStyleSets, FontWeights } from '../../../Styling';\nimport { memoizeFunction } from '../../../Utilities';\nimport { getStyles as getBaseButtonStyles } from '../BaseButton.styles';\nimport { getStyles as getSplitButtonStyles } from '../SplitButton/SplitButton.styles';\n\nimport { primaryStyles, standardStyles } from '../ButtonThemes';\nimport type { IButtonStyles } from '../Button.types';\nimport type { ITheme } from '../../../Styling';\n\nconst DEFAULT_BUTTON_MIN_HEIGHT = '32px';\nconst DEFAULT_BUTTON_MIN_WIDTH = '80px';\n\nexport const getStyles = memoizeFunction(\n (theme: ITheme, customStyles?: IButtonStyles, primary?: boolean): IButtonStyles => {\n const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme);\n const splitButtonStyles: IButtonStyles = getSplitButtonStyles(theme);\n const defaultButtonStyles: IButtonStyles = {\n root: {\n minWidth: DEFAULT_BUTTON_MIN_WIDTH,\n minHeight: DEFAULT_BUTTON_MIN_HEIGHT,\n },\n label: {\n fontWeight: FontWeights.semibold,\n },\n };\n\n return concatStyleSets(\n baseButtonStyles,\n defaultButtonStyles,\n primary ? primaryStyles(theme) : standardStyles(theme),\n splitButtonStyles,\n customStyles,\n )!;\n },\n);\n","import * as React from 'react';\nimport { BaseButton } from '../BaseButton';\nimport { customizable, nullRender } from '../../../Utilities';\nimport { getStyles } from './DefaultButton.styles';\nimport type { IButtonProps } from '../Button.types';\n\n/**\n * {@docCategory Button}\n */\n@customizable('DefaultButton', ['theme', 'styles'], true)\nexport class DefaultButton extends React.Component {\n public render(): JSX.Element {\n const { primary = false, styles, theme } = this.props;\n\n return (\n \n );\n }\n}\n","import { concatStyleSets, HighContrastSelector } from '../../../Styling';\nimport { memoizeFunction } from '../../../Utilities';\nimport { getStyles as getBaseButtonStyles } from '../BaseButton.styles';\nimport type { IButtonStyles } from '../Button.types';\nimport type { ITheme } from '../../../Styling';\n\nconst DEFAULT_BUTTON_HEIGHT = '40px';\nconst DEFAULT_PADDING = '0 4px';\n\nexport const getStyles = memoizeFunction((theme: ITheme, customStyles?: IButtonStyles): IButtonStyles => {\n const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme);\n const actionButtonStyles: IButtonStyles = {\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 [HighContrastSelector]: {\n borderColor: 'Window',\n },\n },\n\n rootHovered: {\n color: theme.palette.themePrimary,\n [HighContrastSelector]: {\n color: 'Highlight',\n },\n },\n\n iconHovered: {\n color: theme.palette.themePrimary,\n },\n\n rootPressed: {\n color: theme.palette.black,\n },\n\n rootExpanded: {\n color: theme.palette.themePrimary,\n },\n\n iconPressed: {\n color: theme.palette.themeDarker,\n },\n\n rootDisabled: {\n color: theme.palette.neutralTertiary,\n backgroundColor: 'transparent',\n borderColor: 'transparent',\n [HighContrastSelector]: {\n color: 'GrayText',\n },\n },\n\n rootChecked: {\n color: theme.palette.black,\n },\n\n iconChecked: {\n color: theme.palette.themeDarker,\n },\n\n flexContainer: {\n justifyContent: 'flex-start',\n },\n\n icon: {\n color: theme.palette.themeDarkAlt,\n },\n\n iconDisabled: {\n color: 'inherit',\n },\n\n menuIcon: {\n color: theme.palette.neutralSecondary,\n },\n\n textContainer: {\n flexGrow: 0,\n },\n };\n\n return concatStyleSets(baseButtonStyles, actionButtonStyles, customStyles)!;\n});\n","import * as React from 'react';\nimport { BaseButton } from '../BaseButton';\nimport { customizable, nullRender } from '../../../Utilities';\nimport { getStyles } from './ActionButton.styles';\nimport type { IButtonProps } from '../Button.types';\n\n/**\n * {@docCategory Button}\n */\n@customizable('ActionButton', ['theme', 'styles'], true)\nexport class ActionButton extends React.Component {\n public render(): JSX.Element {\n const { styles, theme } = this.props;\n\n return (\n \n );\n }\n}\n","import { 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';\nimport type { IButtonStyles } from '../Button.types';\nimport type { ITheme } from '../../../Styling';\n\nexport const getStyles = memoizeFunction(\n (theme: ITheme, customStyles?: IButtonStyles, primary?: boolean): IButtonStyles => {\n const { fonts, palette } = theme;\n\n const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme);\n const splitButtonStyles: IButtonStyles = getSplitButtonStyles(theme);\n const compoundButtonStyles: IButtonStyles = {\n root: {\n maxWidth: '280px',\n minHeight: '72px',\n height: 'auto',\n padding: '16px 12px',\n },\n\n flexContainer: {\n flexDirection: 'row',\n alignItems: 'flex-start',\n minWidth: '100%',\n margin: '',\n },\n\n textContainer: {\n textAlign: 'left',\n },\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\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\n const standardCompoundTheme: IButtonStyles = {\n description: {\n color: palette.neutralSecondary,\n },\n\n descriptionHovered: {\n color: palette.neutralDark,\n },\n\n descriptionPressed: {\n color: 'inherit',\n },\n\n descriptionChecked: {\n color: 'inherit',\n },\n\n descriptionDisabled: {\n color: 'inherit',\n },\n };\n\n const primaryCompoundTheme: IButtonStyles = {\n description: {\n color: palette.white,\n [HighContrastSelector]: {\n backgroundColor: 'WindowText',\n color: 'Window',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n\n descriptionHovered: {\n color: palette.white,\n [HighContrastSelector]: {\n backgroundColor: 'Highlight',\n color: 'Window',\n },\n },\n\n descriptionPressed: {\n color: 'inherit',\n\n [HighContrastSelector]: {\n color: 'Window',\n backgroundColor: 'WindowText',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n\n descriptionChecked: {\n color: 'inherit',\n\n [HighContrastSelector]: {\n color: 'Window',\n backgroundColor: 'WindowText',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n\n descriptionDisabled: {\n color: 'inherit',\n [HighContrastSelector]: {\n color: 'inherit',\n },\n },\n };\n\n return concatStyleSets(\n baseButtonStyles,\n compoundButtonStyles,\n primary ? primaryStyles(theme) : standardStyles(theme),\n primary ? primaryCompoundTheme : standardCompoundTheme,\n splitButtonStyles,\n customStyles,\n )!;\n },\n);\n","import * as React from 'react';\nimport { BaseButton } from '../BaseButton';\nimport { customizable } from '../../../Utilities';\nimport { getStyles } from './CompoundButton.styles';\nimport type { IButtonProps } from '../Button.types';\n\n/**\n * {@docCategory Button}\n */\n@customizable('CompoundButton', ['theme', 'styles'], true)\nexport class CompoundButton extends React.Component {\n public render(): JSX.Element {\n const { primary = false, styles, theme } = this.props;\n return (\n \n );\n }\n}\n","import { concatStyleSets, HighContrastSelector } from '../../../Styling';\nimport { memoizeFunction } from '../../../Utilities';\nimport { getStyles as getBaseButtonStyles } from '../BaseButton.styles';\nimport { getStyles as getSplitButtonStyles } from '../SplitButton/SplitButton.styles';\nimport type { IButtonStyles } from '../Button.types';\nimport type { ITheme } from '../../../Styling';\n\nexport const getStyles = memoizeFunction((theme: ITheme, customStyles?: IButtonStyles): IButtonStyles => {\n const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme);\n const splitButtonStyles: IButtonStyles = getSplitButtonStyles(theme);\n const { palette, semanticColors } = theme;\n const iconButtonStyles: IButtonStyles = {\n root: {\n padding: '0 4px',\n width: '32px',\n height: '32px',\n backgroundColor: 'transparent',\n border: 'none',\n color: semanticColors.link,\n },\n\n rootHovered: {\n color: palette.themeDarkAlt,\n backgroundColor: palette.neutralLighter,\n [HighContrastSelector]: {\n borderColor: 'Highlight',\n color: 'Highlight',\n },\n },\n\n rootHasMenu: {\n width: 'auto',\n },\n\n rootPressed: {\n color: palette.themeDark,\n backgroundColor: palette.neutralLight,\n },\n\n rootExpanded: {\n color: palette.themeDark,\n backgroundColor: palette.neutralLight,\n },\n\n rootChecked: {\n color: palette.themeDark,\n backgroundColor: palette.neutralLight,\n },\n\n rootCheckedHovered: {\n color: palette.themeDark,\n backgroundColor: palette.neutralQuaternaryAlt,\n },\n\n rootDisabled: {\n color: palette.neutralTertiaryAlt,\n },\n };\n\n return concatStyleSets(baseButtonStyles, iconButtonStyles, splitButtonStyles, customStyles)!;\n});\n","import * as React from 'react';\nimport { BaseButton } from '../BaseButton';\nimport { customizable, nullRender } from '../../../Utilities';\nimport { getStyles } from './IconButton.styles';\nimport type { IButtonProps } from '../Button.types';\n\n/**\n * {@docCategory Button}\n */\n@customizable('IconButton', ['theme', 'styles'], true)\nexport class IconButton extends React.Component {\n public render(): JSX.Element {\n const { styles, theme } = this.props;\n\n return (\n \n );\n }\n}\n","import * as React from 'react';\nimport { customizable, nullRender } from '../../../Utilities';\nimport { DefaultButton } from '../DefaultButton/DefaultButton';\nimport type { IButtonProps } from '../Button.types';\n\n/**\n * {@docCategory Button}\n */\n@customizable('PrimaryButton', ['theme', 'styles'], true)\nexport class PrimaryButton extends React.Component {\n public render(): JSX.Element {\n return ;\n }\n}\n","import * as React from 'react';\n\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';\nimport type { IButtonProps } from './Button.types';\n\n/**\n * This class is deprecated. Use the individual *Button components instead.\n * @deprecated Use the individual *Button components instead.\n * {@docCategory Button}\n */\nexport class Button extends React.Component {\n constructor(props: IButtonProps) {\n super(props);\n\n warn(\n `The Button component has been deprecated. Use specific variants instead. ` +\n `(PrimaryButton, DefaultButton, IconButton, ActionButton, etc.)`,\n );\n }\n\n public render(): JSX.Element {\n const props = this.props;\n\n // eslint-disable-next-line deprecation/deprecation\n switch (props.buttonType) {\n case ButtonType.command:\n return ;\n\n case ButtonType.compound:\n return ;\n\n case ButtonType.icon:\n return ;\n\n case ButtonType.primary:\n return ;\n\n default:\n return ;\n }\n }\n}\n","import { 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';\nimport type { IButtonStyles } from '../Button.types';\nimport type { ITheme } from '../../../Styling';\n\nexport const getStyles = memoizeFunction(\n (theme: ITheme, customStyles?: IButtonStyles, focusInset?: string, focusColor?: string): IButtonStyles => {\n const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme);\n const baseSplitButtonStyles: IButtonStyles = getSplitButtonStyles(theme);\n\n const { palette: p, semanticColors } = theme;\n\n const commandButtonHighContrastFocus = {\n left: 4,\n top: 4,\n bottom: 4,\n right: 4,\n border: 'none',\n };\n\n const commandButtonStyles: IButtonStyles = {\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 [HighContrastSelector]: {\n border: 'none',\n },\n },\n ],\n\n rootHovered: {\n backgroundColor: p.neutralLighter,\n color: p.neutralDark,\n [HighContrastSelector]: {\n color: 'Highlight',\n },\n [`.${ButtonGlobalClassNames.msButtonIcon}`]: {\n color: p.themeDarkAlt,\n },\n [`.${ButtonGlobalClassNames.msButtonMenuIcon}`]: {\n color: p.neutralPrimary,\n },\n },\n\n rootPressed: {\n backgroundColor: p.neutralLight,\n color: p.neutralDark,\n [`.${ButtonGlobalClassNames.msButtonIcon}`]: {\n color: p.themeDark,\n },\n [`.${ButtonGlobalClassNames.msButtonMenuIcon}`]: {\n color: p.neutralPrimary,\n },\n },\n\n rootChecked: {\n backgroundColor: p.neutralLight,\n color: p.neutralDark,\n [`.${ButtonGlobalClassNames.msButtonIcon}`]: {\n color: p.themeDark,\n },\n [`.${ButtonGlobalClassNames.msButtonMenuIcon}`]: {\n color: p.neutralPrimary,\n },\n },\n\n rootCheckedHovered: {\n backgroundColor: p.neutralQuaternaryAlt,\n [`.${ButtonGlobalClassNames.msButtonIcon}`]: {\n color: p.themeDark,\n },\n [`.${ButtonGlobalClassNames.msButtonMenuIcon}`]: {\n color: p.neutralPrimary,\n },\n },\n\n rootExpanded: {\n backgroundColor: p.neutralLight,\n color: p.neutralDark,\n [`.${ButtonGlobalClassNames.msButtonIcon}`]: {\n color: p.themeDark,\n },\n [`.${ButtonGlobalClassNames.msButtonMenuIcon}`]: {\n color: p.neutralPrimary,\n },\n },\n\n rootExpandedHovered: {\n backgroundColor: p.neutralQuaternaryAlt,\n },\n\n rootDisabled: {\n backgroundColor: p.white,\n [`.${ButtonGlobalClassNames.msButtonIcon}`]: {\n color: semanticColors.disabledBodySubtext,\n [HighContrastSelector]: {\n color: 'GrayText',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n [HighContrastSelector]: {\n color: 'GrayText',\n backgroundColor: 'Window',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n\n // Split button styles\n splitButtonContainer: {\n height: '100%',\n [HighContrastSelector]: {\n border: 'none',\n },\n },\n\n splitButtonDividerDisabled: {\n [HighContrastSelector]: {\n backgroundColor: 'Window',\n },\n },\n\n splitButtonDivider: {\n backgroundColor: p.neutralTertiaryAlt,\n },\n\n splitButtonMenuButton: {\n backgroundColor: p.white,\n border: 'none',\n borderTopRightRadius: '0',\n borderBottomRightRadius: '0',\n color: p.neutralSecondary,\n ':hover': {\n backgroundColor: p.neutralLighter,\n color: p.neutralDark,\n [HighContrastSelector]: {\n color: 'Highlight',\n },\n [`.${ButtonGlobalClassNames.msButtonIcon}`]: {\n color: p.neutralPrimary,\n },\n },\n ':active': {\n backgroundColor: p.neutralLight,\n [`.${ButtonGlobalClassNames.msButtonIcon}`]: {\n color: p.neutralPrimary,\n },\n },\n },\n\n splitButtonMenuButtonDisabled: {\n backgroundColor: p.white,\n [HighContrastSelector]: {\n color: 'GrayText',\n border: 'none',\n backgroundColor: 'Window',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n\n splitButtonMenuButtonChecked: {\n backgroundColor: p.neutralLight,\n color: p.neutralDark,\n ':hover': {\n backgroundColor: p.neutralQuaternaryAlt,\n },\n },\n\n splitButtonMenuButtonExpanded: {\n backgroundColor: p.neutralLight,\n color: p.black,\n ':hover': {\n backgroundColor: p.neutralQuaternaryAlt,\n },\n },\n\n splitButtonMenuIcon: {\n color: p.neutralPrimary,\n },\n\n splitButtonMenuIconDisabled: {\n color: p.neutralTertiary,\n },\n\n label: {\n fontWeight: 'normal', // theme.fontWeights.semibold,\n },\n\n icon: {\n color: p.themePrimary,\n },\n\n menuIcon: {\n color: p.neutralSecondary,\n },\n };\n\n return concatStyleSets(baseButtonStyles, baseSplitButtonStyles, commandButtonStyles, customStyles)!;\n },\n);\n","import * as React from 'react';\nimport { BaseButton } from '../BaseButton';\nimport { customizable, nullRender } from '../../../Utilities';\nimport { getStyles } from './CommandBarButton.styles';\nimport type { IButtonProps } from '../Button.types';\n\n/**\n * {@docCategory Button}\n */\n@customizable('CommandBarButton', ['theme', 'styles'], true)\nexport class CommandBarButton extends React.Component {\n public render(): JSX.Element {\n const { styles, theme } = this.props;\n\n return (\n \n );\n }\n}\n","import { ActionButton } from '../ActionButton/ActionButton';\n\n/**\n * {@docCategory Button}\n */\nexport const CommandButton = ActionButton;\n","import { concatStyleSets, getFocusStyle } from '../../../Styling';\nimport { memoizeFunction } from '../../../Utilities';\nimport type { IButtonStyles } from '../Button.types';\nimport type { ITheme } from '../../../Styling';\n\nexport const getStyles = memoizeFunction(\n (theme: ITheme, customStyles?: IButtonStyles): IButtonStyles =>\n concatStyleSets(\n {\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 },\n customStyles,\n ),\n);\n","import * as React from 'react';\nimport { DefaultButton } from '../DefaultButton/DefaultButton';\nimport { customizable, nullRender } from '../../../Utilities';\nimport { getStyles } from './MessageBarButton.styles';\nimport type { IButtonProps } from '../Button.types';\n\n/**\n * {@docCategory MessageBar}\n */\n@customizable('MessageBarButton', ['theme', 'styles'], true)\nexport class MessageBarButton extends React.Component {\n public render(): JSX.Element {\n const { styles, theme } = this.props;\n\n return ;\n }\n}\n","import * as React from 'react';\nimport type { IStyle, ITheme } from '../../Styling';\nimport type { IRefObject, IStyleFunctionOrObject } from '../../Utilities';\n\n/**\n * {@docCategory ResizeGroup}\n */\nexport enum ResizeGroupDirection {\n horizontal = 0,\n vertical = 1,\n}\n\n/**\n * {@docCategory ResizeGroup}\n */\nexport interface IResizeGroup {\n /**\n * Remeasures the available space.\n */\n remeasure(): void;\n}\n\n/**\n * {@docCategory ResizeGroup}\n */\nexport interface IResizeGroupProps extends React.HTMLAttributes, React.RefAttributes {\n /**\n * Optional callback to access the IResizeGroup interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules\n * @deprecated Removed to reduce bundle size. Please use `className` and add css rules to `className` instead.\n */\n styles?: IStyleFunctionOrObject;\n\n /**\n * Theme provided by HOC.\n */\n theme?: ITheme;\n\n /**\n * Additional css class to apply to the Component\n * @defaultvalue undefined\n */\n className?: string;\n\n /**\n * Direction of this resize group, vertical or horizontal\n * @defaultvalue ResizeGroupDirection.horizontal\n */\n direction?: ResizeGroupDirection;\n\n /**\n * Initial data to be passed to the `onRenderData` function. When there is no `onGrowData` provided, this data should\n * represent what should be passed to the render function when the parent container of the ResizeGroup is at its\n * maximum supported width. A `cacheKey` property may optionally be included as part of the data. Two data objects\n * with the same `cacheKey` will be assumed to take up the same width and will prevent measurements.\n * The type of `cacheKey` is a string.\n */\n data: any;\n\n /**\n * Function to render the data. Called when rendering the contents to the screen and when\n * rendering in a hidden div to measure the size of the contents.\n */\n onRenderData: (data: any) => JSX.Element;\n\n /**\n * Function to be performed on the data in order to reduce its width and make it fit into the given space.\n * If there are no more scaling steps to apply, it should return undefined to prevent\n * an infinite render loop.\n */\n onReduceData: (prevData: any) => any;\n\n /**\n * Function to be performed on the data in order to increase its width. It is called in scenarios where the\n * container has more room than the previous render and we may be able to fit more content. If there are no more\n * scaling operations to perform on teh data, it should return undefined to prevent an infinite render loop.\n */\n onGrowData?: (prevData: any) => any;\n\n /**\n * Function to be called every time data is rendered. It provides the data that was actually rendered.\n * A use case would be adding telemetry when a particular control is shown in an overflow well or\n * dropped as a result of onReduceData or to count the number of renders that an implementation of\n * onReduceData triggers.\n */\n dataDidRender?: (renderedData: any) => void;\n}\n\n/**\n * {@docCategory ResizeGroup}\n */\nexport interface IResizeGroupStyleProps {\n /**\n * Accept theme prop.\n */\n theme: ITheme;\n\n /**\n * Accept custom classNames\n */\n className?: string;\n}\n\n/**\n * {@docCategory ResizeGroup}\n */\nexport interface IResizeGroupStyles {\n /**\n * Style for the root element.\n */\n root: IStyle;\n}\n","import * as React from 'react';\nimport { Async, divProperties, getNativeProps } from '../../Utilities';\nimport { ResizeGroupDirection } from './ResizeGroup.types';\nimport { useConst, useMergedRefs, useAsync, useOnEvent, useWarnings } from '@fluentui/react-hooks';\nimport { useWindow } from '../../WindowProvider';\nimport type { IResizeGroupProps } from './ResizeGroup.types';\n\nconst RESIZE_DELAY = 16;\n\nexport interface IResizeGroupState {\n /**\n * Final data used to render proper sized component\n */\n renderedData?: any;\n\n /**\n * Data to render in a hidden div for measurement\n */\n dataToMeasure?: any;\n\n /**\n * Set to true when the content container might have new dimensions and should\n * be remeasured.\n */\n measureContainer?: boolean;\n\n /**\n * Are we resizing to accommodate having more or less available space?\n * The 'grow' direction is when the container may have more room than the last render,\n * such as when a window resize occurs. This means we will try to fit more content in the window.\n * The 'shrink' direction is when the contents don't fit in the container and we need\n * to find a transformation of the data that makes everything fit.\n */\n resizeDirection?: 'grow' | 'shrink';\n}\n\n/**\n * Returns a simple object is able to store measurements with a given key.\n */\nexport const getMeasurementCache = () => {\n const measurementsCache: { [key: string]: number } = {};\n\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: (data: any): number | undefined => {\n if (data && data.cacheKey && measurementsCache.hasOwnProperty(data.cacheKey)) {\n return measurementsCache[data.cacheKey];\n }\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: (data: any, measurement: number): void => {\n if (data.cacheKey) {\n measurementsCache[data.cacheKey] = measurement;\n }\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 const getNextResizeGroupStateProvider = (measurementCache = getMeasurementCache()) => {\n const _measurementCache = measurementCache;\n let _containerDimension: number | undefined;\n\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: any, getElementToMeasureDimension: () => number): number {\n const cachedDimension = _measurementCache.getCachedMeasurement(measuredData);\n if (cachedDimension !== undefined) {\n return cachedDimension;\n }\n\n const measuredDimension = getElementToMeasureDimension();\n _measurementCache.addMeasurementToCache(measuredData, measuredDimension);\n return measuredDimension;\n }\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(\n data: any,\n onReduceData: (prevData: any) => any,\n getElementToMeasureDimension: () => number,\n ): IResizeGroupState {\n let dataToMeasure = data;\n let measuredDimension: number | undefined = _getMeasuredDimension(data, getElementToMeasureDimension);\n\n while (measuredDimension > _containerDimension!) {\n const nextMeasuredData = onReduceData(dataToMeasure);\n\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\n measuredDimension = _measurementCache.getCachedMeasurement(nextMeasuredData);\n\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\n dataToMeasure = nextMeasuredData;\n }\n\n return {\n renderedData: dataToMeasure,\n resizeDirection: undefined,\n dataToMeasure: undefined,\n };\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(\n data: any,\n onGrowData: (prevData: any) => any,\n getElementToMeasureDimension: () => number,\n onReduceData: (prevData: any) => any,\n ): IResizeGroupState {\n let dataToMeasure = data;\n let measuredDimension: number | undefined = _getMeasuredDimension(data, getElementToMeasureDimension);\n\n while (measuredDimension < _containerDimension!) {\n const nextMeasuredData = onGrowData(dataToMeasure);\n\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\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\n dataToMeasure = nextMeasuredData;\n }\n\n // Once the loop is done, we should now shrink until the contents fit.\n return {\n resizeDirection: 'shrink',\n ..._shrinkContentsUntilTheyFit(dataToMeasure, onReduceData, getElementToMeasureDimension),\n };\n }\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(\n newDimension: number,\n fullDimensionData: any,\n renderedData: any,\n onGrowData?: (prevData: any) => any,\n ): IResizeGroupState {\n let nextState: IResizeGroupState;\n if (newDimension > _containerDimension!) {\n if (onGrowData) {\n nextState = {\n resizeDirection: 'grow',\n dataToMeasure: onGrowData(renderedData),\n };\n } else {\n nextState = {\n resizeDirection: 'shrink',\n dataToMeasure: fullDimensionData,\n };\n }\n } else {\n nextState = {\n resizeDirection: 'shrink',\n dataToMeasure: renderedData,\n };\n }\n _containerDimension = newDimension;\n return { ...nextState, measureContainer: false };\n }\n\n function getNextState(\n props: IResizeGroupProps,\n currentState: IResizeGroupState,\n getElementToMeasureDimension: () => number,\n newContainerDimension?: number,\n ): IResizeGroupState | undefined {\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\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 {\n ...currentState,\n ..._updateContainerDimension(newContainerDimension, props.data, currentState.renderedData, props.onGrowData),\n };\n }\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\n let nextState: IResizeGroupState = {\n ...currentState,\n measureContainer: false,\n };\n\n if (currentState.dataToMeasure) {\n if (currentState.resizeDirection === 'grow' && props.onGrowData) {\n nextState = {\n ...nextState,\n ..._growDataUntilItDoesNotFit(\n currentState.dataToMeasure,\n props.onGrowData,\n getElementToMeasureDimension,\n props.onReduceData,\n ),\n };\n } else {\n nextState = {\n ...nextState,\n ..._shrinkContentsUntilTheyFit(currentState.dataToMeasure, props.onReduceData, getElementToMeasureDimension),\n };\n }\n }\n\n return nextState;\n }\n\n /** Function that determines if we need to render content for measurement based on the measurement cache contents. */\n function shouldRenderDataForMeasurement(dataToMeasure: any | undefined): boolean {\n if (!dataToMeasure || _measurementCache.getCachedMeasurement(dataToMeasure) !== undefined) {\n return false;\n }\n\n return true;\n }\n\n function getInitialResizeGroupState(data: any): IResizeGroupState {\n return {\n dataToMeasure: { ...data },\n resizeDirection: 'grow',\n measureContainer: true,\n };\n }\n\n return {\n getNextState,\n shouldRenderDataForMeasurement,\n getInitialResizeGroupState,\n };\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 const MeasuredContext = React.createContext({ isMeasured: false });\n\n// Styles for the hidden div used for measurement\nconst hiddenDivStyles: React.CSSProperties = { position: 'fixed', visibility: 'hidden' };\nconst hiddenParentStyles: React.CSSProperties = { position: 'relative' };\nconst COMPONENT_NAME = 'ResizeGroup';\n\ntype ResizeDataAction = {\n type: 'resizeData' | keyof IResizeGroupState;\n value: IResizeGroupState[keyof IResizeGroupState] | IResizeGroupState;\n};\n\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: IResizeGroupState, action: ResizeDataAction): IResizeGroupState {\n switch (action.type) {\n case 'resizeData':\n return { ...action.value };\n case 'dataToMeasure':\n return { ...state, dataToMeasure: action.value, resizeDirection: 'grow', measureContainer: true };\n default:\n return { ...state, [action.type]: action.value };\n }\n}\n\nfunction useResizeState(\n props: IResizeGroupProps,\n nextResizeGroupStateProvider: ReturnType,\n rootRef: React.RefObject,\n) {\n const initialStateData = useConst(() => nextResizeGroupStateProvider.getInitialResizeGroupState(props.data));\n const [resizeData, dispatchResizeDataAction] = React.useReducer(resizeDataReducer, initialStateData);\n\n // Reset state when new data is provided\n React.useEffect(() => {\n dispatchResizeDataAction({\n type: 'dataToMeasure',\n value: props.data,\n });\n }, [props.data]);\n\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 const stateRef = React.useRef(initialStateData);\n stateRef.current = { ...resizeData };\n\n const updateResizeState = React.useCallback((nextState?: IResizeGroupState) => {\n if (nextState) {\n dispatchResizeDataAction({\n type: 'resizeData',\n value: nextState,\n });\n }\n }, []);\n\n const remeasure: () => void = React.useCallback(() => {\n if (rootRef.current) {\n dispatchResizeDataAction({\n type: 'measureContainer',\n value: true,\n });\n }\n }, [rootRef]);\n\n return [stateRef, updateResizeState, remeasure] as const;\n}\n\nfunction useResizingBehavior(props: IResizeGroupProps, rootRef: React.RefObject) {\n const nextResizeGroupStateProvider = useConst(getNextResizeGroupStateProvider);\n\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 const 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 const updateHiddenDiv = React.useRef(null);\n\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 const hasRenderedContent = React.useRef(false);\n\n const async: Async = useAsync();\n\n const [stateRef, updateResizeState, remeasure] = useResizeState(props, nextResizeGroupStateProvider, rootRef);\n\n React.useEffect(() => {\n if (stateRef.current.renderedData) {\n hasRenderedContent.current = true;\n props.dataDidRender?.(stateRef.current.renderedData);\n }\n });\n\n React.useEffect((): void => {\n async.requestAnimationFrame(() => {\n let containerDimension = undefined;\n if (stateRef.current.measureContainer && rootRef.current) {\n const boundingRect = rootRef.current.getBoundingClientRect();\n containerDimension =\n props.direction === ResizeGroupDirection.vertical ? boundingRect.height : boundingRect.width;\n }\n const nextState = nextResizeGroupStateProvider.getNextState(\n props,\n stateRef.current,\n () => {\n const refToMeasure = !hasRenderedContent.current ? initialHiddenDiv : updateHiddenDiv;\n if (!refToMeasure.current) {\n return 0;\n }\n const measuredBoundingRect = refToMeasure.current.getBoundingClientRect();\n return props.direction === ResizeGroupDirection.vertical\n ? measuredBoundingRect.height\n : measuredBoundingRect.width;\n },\n containerDimension,\n );\n\n updateResizeState(nextState);\n }, rootRef.current);\n });\n\n const win = useWindow();\n useOnEvent(win, 'resize', async.debounce(remeasure, RESIZE_DELAY, { leading: true }));\n\n const dataNeedsMeasuring = nextResizeGroupStateProvider.shouldRenderDataForMeasurement(\n stateRef.current.dataToMeasure,\n );\n\n const isInitialMeasure = !hasRenderedContent.current && dataNeedsMeasuring;\n\n return [\n stateRef.current.dataToMeasure,\n stateRef.current.renderedData,\n remeasure,\n initialHiddenDiv,\n updateHiddenDiv,\n dataNeedsMeasuring,\n isInitialMeasure,\n ] as const;\n}\n\nfunction useDebugWarnings(props: IResizeGroupProps) {\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,\n deprecations: { styles: 'className' },\n });\n }\n}\n\nconst measuredContextValue = { isMeasured: true };\n\nexport const ResizeGroupBase: React.FunctionComponent = React.forwardRef<\n HTMLDivElement,\n IResizeGroupProps\n>((props, forwardedRef) => {\n const rootRef = React.useRef(null);\n // The root div which is the container inside of which we are trying to fit content.\n const mergedRootRef = useMergedRefs(rootRef, forwardedRef);\n\n const [\n dataToMeasure,\n renderedData,\n remeasure,\n initialHiddenDiv,\n updateHiddenDiv,\n dataNeedsMeasuring,\n isInitialMeasure,\n ] = useResizingBehavior(props, rootRef);\n\n React.useImperativeHandle(props.componentRef, () => ({ remeasure }), [remeasure]);\n\n useDebugWarnings(props);\n\n const { className, onRenderData } = props;\n const divProps = getNativeProps>(props, divProperties, ['data']);\n\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 (\n
    \n
    \n {dataNeedsMeasuring && !isInitialMeasure && (\n
    \n \n {onRenderData(dataToMeasure)}\n \n
    \n )}\n\n \n {isInitialMeasure ? onRenderData(dataToMeasure) : renderedData && onRenderData(renderedData)}\n
    \n
    \n \n );\n});\nResizeGroupBase.displayName = 'ResizeGroupBase';\n","import * as React from 'react';\nimport { ResizeGroupBase } from './ResizeGroup.base';\nimport type { IResizeGroupProps } from './ResizeGroup.types';\n\nexport const ResizeGroup: React.FunctionComponent = ResizeGroupBase;\n","/**\n * The days of the week\n * {@docCategory DateTimeUtilities}\n */\nexport enum DayOfWeek {\n Sunday = 0,\n Monday = 1,\n Tuesday = 2,\n Wednesday = 3,\n Thursday = 4,\n Friday = 5,\n Saturday = 6,\n}\n\n/**\n * The months\n * {@docCategory DateTimeUtilities}\n */\nexport enum MonthOfYear {\n January = 0,\n February = 1,\n March = 2,\n April = 3,\n May = 4,\n June = 5,\n July = 6,\n August = 7,\n September = 8,\n October = 9,\n November = 10,\n December = 11,\n}\n\n/**\n * First week of the year settings types\n * {@docCategory DateTimeUtilities}\n */\nexport enum FirstWeekOfYear {\n FirstDay = 0,\n FirstFullWeek = 1,\n FirstFourDayWeek = 2,\n}\n\n/**\n * The supported date range types\n * {@docCategory DateTimeUtilities}\n */\nexport enum DateRangeType {\n Day = 0,\n Week = 1,\n Month = 2,\n WorkWeek = 3,\n}\n\nexport const DAYS_IN_WEEK = 7;\n","export const 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","import { DayOfWeek, MonthOfYear, FirstWeekOfYear, DateRangeType } from '../dateValues/dateValues';\nimport { TimeConstants } from '../dateValues/timeConstants';\n\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: Date, days: number): Date {\n const result = new Date(date.getTime());\n result.setDate(result.getDate() + days);\n return result;\n}\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: Date, weeks: number): Date {\n return addDays(date, weeks * TimeConstants.DaysInOneWeek);\n}\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: Date, months: number): Date {\n let result = new Date(date.getTime());\n const newMonth = result.getMonth() + months;\n result.setMonth(newMonth);\n\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 (\n result.getMonth() !==\n ((newMonth % TimeConstants.MonthInOneYear) + TimeConstants.MonthInOneYear) % TimeConstants.MonthInOneYear\n ) {\n result = addDays(result, -result.getDate());\n }\n return result;\n}\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: Date, years: number): Date {\n let result = new Date(date.getTime());\n result.setFullYear(date.getFullYear() + years);\n\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 (\n result.getMonth() !==\n ((date.getMonth() % TimeConstants.MonthInOneYear) + TimeConstants.MonthInOneYear) % TimeConstants.MonthInOneYear\n ) {\n result = addDays(result, -result.getDate());\n }\n return result;\n}\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: Date): Date {\n return new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0, 0);\n}\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: Date): Date {\n return new Date(date.getFullYear(), date.getMonth() + 1, 0, 0, 0, 0, 0);\n}\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: Date): Date {\n return new Date(date.getFullYear(), 0, 1, 0, 0, 0, 0);\n}\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: Date): Date {\n return new Date(date.getFullYear() + 1, 0, 0, 0, 0, 0, 0);\n}\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: Date, month: number): Date {\n return addMonths(date, month - date.getMonth());\n}\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: Date, date2: Date): boolean {\n if (!date1 && !date2) {\n return true;\n } else if (!date1 || !date2) {\n return false;\n } else {\n return (\n date1.getFullYear() === date2.getFullYear() &&\n date1.getMonth() === date2.getMonth() &&\n date1.getDate() === date2.getDate()\n );\n }\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: Date, date2: Date): number {\n return getDatePartHashValue(date1) - getDatePartHashValue(date2);\n}\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(\n date: Date,\n dateRangeType: DateRangeType,\n firstDayOfWeek: DayOfWeek,\n workWeekDays?: DayOfWeek[],\n daysToSelectInDayView: number = 1,\n): Date[] {\n const datesArray: Date[] = [];\n let startDate: Date;\n let endDate = null;\n\n if (!workWeekDays) {\n workWeekDays = [DayOfWeek.Monday, DayOfWeek.Tuesday, DayOfWeek.Wednesday, DayOfWeek.Thursday, DayOfWeek.Friday];\n }\n\n daysToSelectInDayView = Math.max(daysToSelectInDayView, 1);\n\n switch (dateRangeType) {\n case DateRangeType.Day:\n startDate = getDatePart(date);\n endDate = addDays(startDate, daysToSelectInDayView);\n break;\n\n case DateRangeType.Week:\n case DateRangeType.WorkWeek:\n startDate = getStartDateOfWeek(getDatePart(date), firstDayOfWeek);\n endDate = addDays(startDate, TimeConstants.DaysInOneWeek);\n break;\n\n case DateRangeType.Month:\n startDate = new Date(date.getFullYear(), date.getMonth(), 1);\n endDate = addMonths(startDate, 1);\n break;\n\n default:\n throw new Error('Unexpected object: ' + dateRangeType);\n }\n\n // Populate the dates array with the dates in range\n let nextDate = startDate;\n\n do {\n if (dateRangeType !== DateRangeType.WorkWeek) {\n // push all days not in work week view\n datesArray.push(nextDate);\n } else if (workWeekDays.indexOf(nextDate.getDay()) !== -1) {\n datesArray.push(nextDate);\n }\n nextDate = addDays(nextDate, 1);\n } while (!compareDates(nextDate, endDate));\n\n return datesArray;\n}\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: Date, dateRange: Date[]): boolean {\n for (const dateInRange of dateRange) {\n if (compareDates(date, dateInRange)) {\n return true;\n }\n }\n return false;\n}\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(\n weeksInMonth: number,\n firstDayOfWeek: DayOfWeek,\n firstWeekOfYear: FirstWeekOfYear,\n navigatedDate: Date,\n): number[] {\n const selectedYear = navigatedDate.getFullYear();\n const selectedMonth = navigatedDate.getMonth();\n let dayOfMonth = 1;\n const fistDayOfMonth = new Date(selectedYear, selectedMonth, dayOfMonth);\n const endOfFirstWeek =\n dayOfMonth +\n (firstDayOfWeek + TimeConstants.DaysInOneWeek - 1) -\n adjustWeekDay(firstDayOfWeek, fistDayOfMonth.getDay());\n let endOfWeekRange = new Date(selectedYear, selectedMonth, endOfFirstWeek);\n dayOfMonth = endOfWeekRange.getDate();\n\n const weeksArray = [];\n for (let 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/**\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: Date, firstDayOfWeek: DayOfWeek, firstWeekOfYear: FirstWeekOfYear): number {\n // First four-day week of the year - minumum days count\n const fourDayWeek = 4;\n\n switch (firstWeekOfYear) {\n case FirstWeekOfYear.FirstFullWeek:\n return getWeekOfYearFullDays(date, firstDayOfWeek, TimeConstants.DaysInOneWeek);\n\n case FirstWeekOfYear.FirstFourDayWeek:\n return getWeekOfYearFullDays(date, firstDayOfWeek, fourDayWeek);\n\n default:\n return getFirstDayWeekOfYear(date, firstDayOfWeek);\n }\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: Date, firstDayOfWeek: DayOfWeek): Date {\n let 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/**\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: Date, firstDayOfWeek: DayOfWeek): Date {\n const lastDayOfWeek = firstDayOfWeek - 1 >= 0 ? firstDayOfWeek - 1 : TimeConstants.DaysInOneWeek - 1;\n let 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/**\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: Date): Date {\n return new Date(date.getFullYear(), date.getMonth(), date.getDate());\n}\n\n/**\n * Helper function to assist in date comparisons\n */\nexport function getDatePartHashValue(date: Date): number {\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/**\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: Date, firstDayOfWeek: DayOfWeek, numberOfFullDays: number): number {\n const dayOfYear = getDayOfYear(date) - 1;\n let num = date.getDay() - (dayOfYear % TimeConstants.DaysInOneWeek);\n\n const lastDayOfPrevYear = new Date(date.getFullYear() - 1, MonthOfYear.December, 31);\n const daysInYear = getDayOfYear(lastDayOfPrevYear) - 1;\n\n let num2 = (firstDayOfWeek - num + 2 * TimeConstants.DaysInOneWeek) % TimeConstants.DaysInOneWeek;\n if (num2 !== 0 && num2 >= numberOfFullDays) {\n num2 -= TimeConstants.DaysInOneWeek;\n }\n\n let 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\n num3 = daysInYear - num2;\n }\n\n return Math.floor(num3 / TimeConstants.DaysInOneWeek + 1);\n}\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: Date, firstDayOfWeek: number): number {\n const num = getDayOfYear(date) - 1;\n const num2 = date.getDay() - (num % TimeConstants.DaysInOneWeek);\n const num3 = (num2 - firstDayOfWeek + 2 * TimeConstants.DaysInOneWeek) % TimeConstants.DaysInOneWeek;\n\n return Math.floor((num + num3) / TimeConstants.DaysInOneWeek + 1);\n}\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: DayOfWeek, dateWeekDay: DayOfWeek): number {\n return firstDayOfWeek !== DayOfWeek.Sunday && dateWeekDay < firstDayOfWeek\n ? dateWeekDay + TimeConstants.DaysInOneWeek\n : dateWeekDay;\n}\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: Date): number {\n const month = date.getMonth();\n const year = date.getFullYear();\n let daysUntilDate = 0;\n\n for (let i = 0; i < month; i++) {\n daysUntilDate += daysInMonth(i + 1, year);\n }\n\n daysUntilDate += date.getDate();\n\n return daysUntilDate;\n}\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: number, year: number): number {\n return new Date(year, month, 0).getDate();\n}\n","/******************************************************************************\nCopyright (c) Microsoft Corporation.\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\nPERFORMANCE OF THIS SOFTWARE.\n***************************************************************************** */\n/* global Reflect, Promise, SuppressedError, Symbol */\n\nvar extendStatics = function(d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n};\n\nexport function __extends(d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n}\n\nexport var __assign = function() {\n __assign = Object.assign || function __assign(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n return t;\n }\n return __assign.apply(this, arguments);\n}\n\nexport function __rest(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}\n\nexport function __decorate(decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n}\n\nexport function __param(paramIndex, decorator) {\n return function (target, key) { decorator(target, key, paramIndex); }\n}\n\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\n function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\n var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\n var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\n var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\n var _, done = false;\n for (var i = decorators.length - 1; i >= 0; i--) {\n var context = {};\n for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\n for (var p in contextIn.access) context.access[p] = contextIn.access[p];\n context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\n var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\n if (kind === \"accessor\") {\n if (result === void 0) continue;\n if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\n if (_ = accept(result.get)) descriptor.get = _;\n if (_ = accept(result.set)) descriptor.set = _;\n if (_ = accept(result.init)) initializers.unshift(_);\n }\n else if (_ = accept(result)) {\n if (kind === \"field\") initializers.unshift(_);\n else descriptor[key] = _;\n }\n }\n if (target) Object.defineProperty(target, contextIn.name, descriptor);\n done = true;\n};\n\nexport function __runInitializers(thisArg, initializers, value) {\n var useValue = arguments.length > 2;\n for (var i = 0; i < initializers.length; i++) {\n value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\n }\n return useValue ? value : void 0;\n};\n\nexport function __propKey(x) {\n return typeof x === \"symbol\" ? x : \"\".concat(x);\n};\n\nexport function __setFunctionName(f, name, prefix) {\n if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\n return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\n};\n\nexport function __metadata(metadataKey, metadataValue) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\n}\n\nexport function __awaiter(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}\n\nexport function __generator(thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (g && (g = 0, op[0] && (_ = 0)), _) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n}\n\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n});\n\nexport function __exportStar(m, o) {\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\n}\n\nexport function __values(o) {\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\n if (m) return m.call(o);\n if (o && typeof o.length === \"number\") return {\n next: function () {\n if (o && i >= o.length) o = void 0;\n return { value: o && o[i++], done: !o };\n }\n };\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\n}\n\nexport function __read(o, n) {\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\n if (!m) return o;\n var i = m.call(o), r, ar = [], e;\n try {\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\n }\n catch (error) { e = { error: error }; }\n finally {\n try {\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\n }\n finally { if (e) throw e.error; }\n }\n return ar;\n}\n\n/** @deprecated */\nexport function __spread() {\n for (var ar = [], i = 0; i < arguments.length; i++)\n ar = ar.concat(__read(arguments[i]));\n return ar;\n}\n\n/** @deprecated */\nexport function __spreadArrays() {\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\n r[k] = a[j];\n return r;\n}\n\nexport function __spreadArray(to, from, pack) {\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n if (ar || !(i in from)) {\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n ar[i] = from[i];\n }\n }\n return to.concat(ar || Array.prototype.slice.call(from));\n}\n\nexport function __await(v) {\n return this instanceof __await ? (this.v = v, this) : new __await(v);\n}\n\nexport function __asyncGenerator(thisArg, _arguments, generator) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;\n function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }\n function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\n function fulfill(value) { resume(\"next\", value); }\n function reject(value) { resume(\"throw\", value); }\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\n}\n\nexport function __asyncDelegator(o) {\n var i, p;\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\n}\n\nexport function __asyncValues(o) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var m = o[Symbol.asyncIterator], i;\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\n}\n\nexport function __makeTemplateObject(cooked, raw) {\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\n return cooked;\n};\n\nvar __setModuleDefault = Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n};\n\nexport function __importStar(mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n}\n\nexport function __importDefault(mod) {\n return (mod && mod.__esModule) ? mod : { default: mod };\n}\n\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n}\n\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\n}\n\nexport function __classPrivateFieldIn(state, receiver) {\n if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\n return typeof state === \"function\" ? receiver === state : state.has(receiver);\n}\n\nexport function __addDisposableResource(env, value, async) {\n if (value !== null && value !== void 0) {\n if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\n var dispose, inner;\n if (async) {\n if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\n dispose = value[Symbol.asyncDispose];\n }\n if (dispose === void 0) {\n if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\n dispose = value[Symbol.dispose];\n if (async) inner = dispose;\n }\n if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\n if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };\n env.stack.push({ value: value, dispose: dispose, async: async });\n }\n else if (async) {\n env.stack.push({ async: true });\n }\n return value;\n}\n\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\n var e = new Error(message);\n return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\n};\n\nexport function __disposeResources(env) {\n function fail(e) {\n env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\n env.hasError = true;\n }\n function next() {\n while (env.stack.length) {\n var rec = env.stack.pop();\n try {\n var result = rec.dispose && rec.dispose.call(rec.value);\n if (rec.async) return Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\n }\n catch (e) {\n fail(e);\n }\n }\n if (env.hasError) throw env.error;\n }\n return next();\n}\n\nexport default {\n __extends,\n __assign,\n __rest,\n __decorate,\n __param,\n __metadata,\n __awaiter,\n __generator,\n __createBinding,\n __exportStar,\n __values,\n __read,\n __spread,\n __spreadArrays,\n __spreadArray,\n __await,\n __asyncGenerator,\n __asyncDelegator,\n __asyncValues,\n __makeTemplateObject,\n __importStar,\n __importDefault,\n __classPrivateFieldGet,\n __classPrivateFieldSet,\n __classPrivateFieldIn,\n __addDisposableResource,\n __disposeResources,\n};\n","import { IDateGridStrings, IDateFormatting, ICalendarStrings } from './dateFormatting.types';\n\n/**\n * Format date to a day string representation\n * @param date - input date to format\n */\nexport const formatDay = (date: Date) => date.getDate().toString();\n\n/**\n * Format date to a month-day-year string\n * @param date - input date to format\n * @param strings - localized strings\n */\nexport const formatMonthDayYear = (date: Date, strings: IDateGridStrings) =>\n 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 const formatMonthYear = (date: Date, strings: IDateGridStrings) =>\n 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 const formatMonth = (date: Date, strings: IDateGridStrings) => strings.months[date.getMonth()];\n\n/**\n * Format date to a year string representation\n * @param date - input date to format\n */\nexport const formatYear = (date: Date) => date.getFullYear().toString();\n\nexport const DEFAULT_DATE_GRID_STRINGS: IDateGridStrings = {\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};\n\nexport const DEFAULT_DATE_FORMATTING: IDateFormatting = {\n formatDay,\n formatMonth,\n formatYear,\n formatMonthDayYear,\n formatMonthYear,\n};\n\nexport const DEFAULT_CALENDAR_STRINGS: ICalendarStrings = {\n ...DEFAULT_DATE_GRID_STRINGS,\n\n goToToday: 'Go to today',\n weekNumberFormatString: 'Week number {0}',\n prevMonthAriaLabel: 'Previous month',\n nextMonthAriaLabel: 'Next month',\n prevYearAriaLabel: 'Previous year',\n nextYearAriaLabel: 'Next year',\n prevYearRangeAriaLabel: 'Previous year range',\n nextYearRangeAriaLabel: 'Next year range',\n closeButtonAriaLabel: 'Close',\n selectedDateFormatString: 'Selected date {0}',\n todayDateFormatString: \"Today's date {0}\",\n monthPickerHeaderAriaLabel: '{0}, change year',\n yearPickerHeaderAriaLabel: '{0}, change month',\n dayMarkedAriaLabel: 'marked',\n};\n","import { IRestrictedDatesOptions } from './dateGrid.types';\nimport { compareDatePart } from '../dateMath/dateMath';\n\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 const isBeforeMinDate = (date: Date, options: IRestrictedDatesOptions): boolean => {\n const { minDate } = options;\n return minDate ? compareDatePart(minDate, date) >= 1 : false;\n};\n","import { IRestrictedDatesOptions } from './dateGrid.types';\nimport { compareDatePart } from '../dateMath/dateMath';\n\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 const isAfterMaxDate = (date: Date, options: IRestrictedDatesOptions): boolean => {\n const { maxDate } = options;\n return maxDate ? compareDatePart(date, maxDate) >= 1 : false;\n};\n","import { IRestrictedDatesOptions } from './dateGrid.types';\nimport { compareDates } from '../dateMath/dateMath';\nimport { isBeforeMinDate } from './isBeforeMinDate';\nimport { isAfterMaxDate } from './isAfterMaxDate';\n\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 const isRestrictedDate = (date: Date, options: IRestrictedDatesOptions): boolean => {\n const { restrictedDates, minDate, maxDate } = options;\n if (!restrictedDates && !minDate && !maxDate) {\n return false;\n }\n const inRestrictedDates = restrictedDates && restrictedDates.some((rd: Date) => compareDates(rd, date));\n return inRestrictedDates || isBeforeMinDate(date, options) || isAfterMaxDate(date, options);\n};\n","import { IAvailableDateOptions } from './dateGrid.types';\n\nimport { isRestrictedDate } from './isRestrictedDate';\n\nimport { isAfterMaxDate } from './isAfterMaxDate';\n\nimport { isBeforeMinDate } from './isBeforeMinDate';\nimport { compareDatePart, addDays } from '../dateMath/dateMath';\n\n/**\n * Returns closest available date given the restriction `options`, or undefined otherwise\n * @param options - list of search options\n */\nexport const findAvailableDate = (options: IAvailableDateOptions): Date | undefined => {\n const { targetDate, initialDate, direction, ...restrictedDateOptions } = options;\n let availableDate = targetDate;\n // if the target date is available, return it immediately\n if (!isRestrictedDate(targetDate, restrictedDateOptions)) {\n return targetDate;\n }\n\n while (\n compareDatePart(initialDate, availableDate) !== 0 &&\n isRestrictedDate(availableDate, restrictedDateOptions) &&\n !isAfterMaxDate(availableDate, restrictedDateOptions) &&\n !isBeforeMinDate(availableDate, restrictedDateOptions)\n ) {\n availableDate = addDays(availableDate, direction);\n }\n\n if (compareDatePart(initialDate, availableDate) !== 0 && !isRestrictedDate(availableDate, restrictedDateOptions)) {\n return availableDate;\n }\n\n return undefined;\n};\n","import { compareDatePart } from '../dateMath/dateMath';\n\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 const getBoundedDateRange = (dateRange: Date[], minDate?: Date, maxDate?: Date): Date[] => {\n let boundedDateRange = [...dateRange];\n if (minDate) {\n boundedDateRange = boundedDateRange.filter((date: Date) => compareDatePart(date, minDate as Date) >= 0);\n }\n if (maxDate) {\n boundedDateRange = boundedDateRange.filter((date: Date) => compareDatePart(date, maxDate as Date) <= 0);\n }\n return boundedDateRange;\n};\n","import { DayOfWeek } from '../dateValues/dateValues';\n\n/**\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 const isContiguous = (days: DayOfWeek[], isSingleWeek: boolean, firstDayOfWeek: DayOfWeek): boolean => {\n const daySet = new Set(days);\n let amountOfNoNeighbors = 0;\n for (const day of days) {\n const nextDay = (day + 1) % 7;\n if (!(daySet.has(nextDay) && (!isSingleWeek || firstDayOfWeek !== nextDay))) {\n amountOfNoNeighbors++;\n }\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","import { DateRangeType, DayOfWeek } 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 const getDateRangeTypeToUse = (\n dateRangeType: DateRangeType,\n workWeekDays: DayOfWeek[] | undefined,\n firstDayOfWeek: DayOfWeek,\n): DateRangeType => {\n if (workWeekDays && dateRangeType === DateRangeType.WorkWeek) {\n if (!isContiguous(workWeekDays, true, firstDayOfWeek) || workWeekDays.length === 0) {\n return DateRangeType.Week;\n }\n }\n\n return dateRangeType;\n};\n","import { addDays, compareDates, getDateRangeArray, isInDateRangeArray } from '../dateMath/dateMath';\nimport { DAYS_IN_WEEK } from '../dateValues/dateValues';\nimport { IDay, IDayGridOptions } from './dateGrid.types';\nimport { getDateRangeTypeToUse } from './getDateRangeTypeToUse';\nimport { getBoundedDateRange } from './getBoundedDateRange';\nimport { isRestrictedDate } from './isRestrictedDate';\n\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 const getDayGrid = (options: IDayGridOptions): IDay[][] => {\n const {\n selectedDate,\n dateRangeType,\n firstDayOfWeek,\n today,\n minDate,\n maxDate,\n weeksToShow,\n workWeekDays,\n daysToSelectInDayView,\n restrictedDates,\n markedDays,\n } = options;\n const restrictedDateOptions = { minDate, maxDate, restrictedDates };\n\n const todaysDate = today || new Date();\n\n const navigatedDate = options.navigatedDate ? options.navigatedDate : todaysDate;\n\n let 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 } else {\n date = new Date(navigatedDate.getFullYear(), navigatedDate.getMonth(), 1);\n }\n const weeks: IDay[][] = [];\n\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\n // add the transition week as last week of previous range\n date = addDays(date, -DAYS_IN_WEEK);\n\n // a flag to indicate whether all days of the week are outside the month\n let isAllDaysOfWeekOutOfMonth = false;\n\n // in work week view if the days aren't contiguous we use week view instead\n const selectedDateRangeType = getDateRangeTypeToUse(dateRangeType, workWeekDays, firstDayOfWeek);\n\n let selectedDates: Date[] = [];\n\n if (selectedDate) {\n selectedDates = getDateRangeArray(\n selectedDate,\n selectedDateRangeType,\n firstDayOfWeek,\n workWeekDays,\n daysToSelectInDayView,\n );\n selectedDates = getBoundedDateRange(selectedDates, minDate, maxDate);\n }\n\n let shouldGetWeeks = true;\n\n for (let weekIndex = 0; shouldGetWeeks; weekIndex++) {\n const week: IDay[] = [];\n\n isAllDaysOfWeekOutOfMonth = true;\n\n for (let dayIndex = 0; dayIndex < DAYS_IN_WEEK; dayIndex++) {\n const originalDate = new Date(date.getTime());\n const dayInfo: IDay = {\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?.some(markedDay => compareDates(originalDate, markedDay)) || false,\n };\n\n week.push(dayInfo);\n\n if (dayInfo.isInMonth) {\n isAllDaysOfWeekOutOfMonth = false;\n }\n\n date.setDate(date.getDate() + 1);\n }\n\n // We append the condition of the loop depending upon the showSixWeeksByDefault prop.\n shouldGetWeeks = weeksToShow ? weekIndex < weeksToShow + 1 : !isAllDaysOfWeekOutOfMonth || weekIndex === 0;\n\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\n return weeks;\n};\n","import { TimeConstants } from '../dateValues/timeConstants';\n\n/**\n * Returns a date offset from the given date by the specified number of minutes.\n * @param date - The origin date\n * @param minutes - The number of minutes to offset. 'minutes' can be negative.\n * @returns A new Date object offset from the origin date by the given number of minutes\n */\nexport const addMinutes = (date: Date, minutes: number): Date => {\n const result = new Date(date.getTime());\n result.setTime(result.getTime() + minutes * TimeConstants.MinutesInOneHour * TimeConstants.MillisecondsIn1Sec);\n return result;\n};\n\n/**\n * Rounds the date's minute up to the next available increment. For example, if `date` has time 1:21\n * and `increments` is 5, the resulting time will be 1:25.\n * @param date - Date to ceil minutes\n * @param increments - Time increments\n * @returns Date with ceiled minute\n */\nexport const ceilMinuteToIncrement = (date: Date, increments: number) => {\n const result = new Date(date.getTime());\n let minute = result.getMinutes();\n if (TimeConstants.MinutesInOneHour % increments) {\n result.setMinutes(0);\n } else {\n const times = TimeConstants.MinutesInOneHour / increments;\n for (let i = 1; i <= times; i++) {\n if (minute > increments * (i - 1) && minute <= increments * i) {\n minute = increments * i;\n break;\n }\n }\n result.setMinutes(minute);\n }\n return result;\n};\n\n/**\n * Returns a date object from the selected time.\n * @param useHour12 - If the time picker uses 12 or 24 hour formatting\n * @param dateStartAnchor - The baseline date to calculate the offset of the selected time\n * @param selectedTime - A string representing the user selected time\n * @returns A new date object offset from the baseDate using the selected time.\n */\nexport const getDateFromTimeSelection = (useHour12: boolean, dateStartAnchor: Date, selectedTime: string): Date => {\n const [, selectedHours, selectedMinutes, selectedSeconds, selectedAp] =\n TimeConstants.TimeFormatRegex.exec(selectedTime) || [];\n\n let hours = +selectedHours;\n const minutes = +selectedMinutes;\n const seconds = selectedSeconds ? +selectedSeconds : 0;\n\n if (useHour12 && selectedAp) {\n if (selectedAp.toLowerCase() === 'pm' && hours !== TimeConstants.OffsetTo24HourFormat) {\n hours += TimeConstants.OffsetTo24HourFormat;\n } else if (selectedAp.toLowerCase() === 'am' && hours === TimeConstants.OffsetTo24HourFormat) {\n hours -= TimeConstants.OffsetTo24HourFormat;\n }\n }\n\n let hoursOffset;\n if (\n dateStartAnchor.getHours() > hours ||\n (dateStartAnchor.getHours() === hours && dateStartAnchor.getMinutes() > minutes)\n ) {\n hoursOffset = TimeConstants.HoursInOneDay - dateStartAnchor.getHours() + hours;\n } else {\n hoursOffset = Math.abs(dateStartAnchor.getHours() - hours);\n }\n\n const offset =\n TimeConstants.MillisecondsIn1Sec * TimeConstants.MinutesInOneHour * hoursOffset * TimeConstants.SecondsInOneMinute +\n seconds * TimeConstants.MillisecondsIn1Sec;\n\n const date = new Date(dateStartAnchor.getTime() + offset);\n date.setMinutes(minutes);\n date.setSeconds(seconds);\n\n return date;\n};\n","/**\n * Format a date object to a localized time string using the browser's default locale\n * @param date - Input date to format\n * @param showSeconds - Whether to show seconds in the formatted string\n * @param useHour12 - Whether to use 12-hour time\n */\nexport const formatTimeString = (date: Date, showSeconds?: boolean, useHour12?: boolean): string => {\n let localeTimeString = date.toLocaleTimeString([], {\n hour: 'numeric',\n minute: '2-digit',\n second: showSeconds ? '2-digit' : undefined,\n hour12: useHour12,\n });\n\n if (!useHour12 && localeTimeString.slice(0, 2) === '24') {\n localeTimeString = '00' + localeTimeString.slice(2);\n }\n\n return localeTimeString;\n};\n","import * as React from 'react';\nimport { css, findIndex } from '@fluentui/utilities';\nimport { DAYS_IN_WEEK } from '@fluentui/date-time-utilities';\nimport type { ICalendarDayGridProps, ICalendarDayGridStyles } from './CalendarDayGrid.types';\nimport type { IProcessedStyleSet } from '@fluentui/style-utilities';\nimport type { IDayInfo } from './CalendarDayGrid.base';\n\nexport interface ICalendarDayMonthHeaderRowProps extends ICalendarDayGridProps {\n weeks: IDayInfo[][];\n classNames: IProcessedStyleSet;\n}\n\nexport const CalendarMonthHeaderRow: React.FunctionComponent = props => {\n const { showWeekNumbers, strings, firstDayOfWeek, allFocusable, weeksToShow, weeks, classNames } = props;\n const dayLabels = strings.shortDays.slice();\n const firstOfMonthIndex = findIndex(weeks![1], (day: IDayInfo) => 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 const firstOfMonthIndexOffset = (firstOfMonthIndex + firstDayOfWeek) % DAYS_IN_WEEK;\n dayLabels[firstOfMonthIndexOffset] = strings.shortMonths[weeks![1][firstOfMonthIndex].originalDate.getMonth()];\n }\n\n return (\n \n {showWeekNumbers && }\n {dayLabels.map((val: string, index: number) => {\n const i = (index + firstDayOfWeek) % DAYS_IN_WEEK;\n const label = strings.days[i];\n return (\n \n {dayLabels[i]}\n \n );\n })}\n \n );\n};\n","import * as React from 'react';\nimport { KeyCodes, css, getRTLSafeKeyCode } from '@fluentui/utilities';\nimport { addDays, addWeeks, compareDates, findAvailableDate, DateRangeType } from '@fluentui/date-time-utilities';\nimport type { IAvailableDateOptions } from '@fluentui/date-time-utilities';\nimport type { IDayInfo } from './CalendarDayGrid.base';\nimport type { ICalendarGridRowProps } from './CalendarGridRow';\n\nexport interface ICalendarGridDayCellProps extends ICalendarGridRowProps {\n day: IDayInfo;\n dayIndex: number;\n}\n\nexport const CalendarGridDayCell: React.FunctionComponent = props => {\n const {\n navigatedDate,\n dateTimeFormatter,\n allFocusable,\n strings,\n activeDescendantId,\n navigatedDayRef,\n calculateRoundedStyles,\n weeks,\n classNames,\n day,\n dayIndex,\n weekIndex,\n weekCorners,\n ariaHidden,\n customDayCellRef,\n dateRangeType,\n daysToSelectInDayView,\n onSelectDate,\n restrictedDates,\n minDate,\n maxDate,\n onNavigateDate,\n getDayInfosInRangeOfDay,\n getRefsFromDayInfos,\n } = props;\n const cornerStyle = weekCorners?.[weekIndex + '_' + dayIndex] ?? '';\n const isNavigatedDate = compareDates(navigatedDate, day.originalDate);\n\n const navigateMonthEdge = (ev: React.KeyboardEvent, date: Date): void => {\n let targetDate: Date | undefined = undefined;\n let direction = 1; // by default search forward\n\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 } else if (ev.which === KeyCodes.down) {\n targetDate = addWeeks(date, 1);\n // eslint-disable-next-line deprecation/deprecation\n } else if (ev.which === getRTLSafeKeyCode(KeyCodes.left)) {\n targetDate = addDays(date, -1);\n direction = -1;\n // eslint-disable-next-line deprecation/deprecation\n } else if (ev.which === getRTLSafeKeyCode(KeyCodes.right)) {\n targetDate = addDays(date, 1);\n }\n\n if (!targetDate) {\n // if we couldn't find a target date at all, do nothing\n return;\n }\n\n const findAvailableDateOptions: IAvailableDateOptions = {\n initialDate: date,\n targetDate,\n direction,\n restrictedDates,\n minDate,\n maxDate,\n };\n\n // target date is restricted, search in whatever direction until finding the next possible date,\n // stopping at boundaries\n let nextDate = findAvailableDate(findAvailableDateOptions);\n\n if (!nextDate) {\n // if no dates available in initial direction, try going backwards\n findAvailableDateOptions.direction = -direction;\n nextDate = findAvailableDate(findAvailableDateOptions);\n }\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 const isInCurrentView =\n weeks &&\n nextDate &&\n weeks.slice(1, weeks.length - 1).some((week: IDayInfo[]) => {\n return week.some((dayToCompare: IDayInfo) => {\n return compareDates(dayToCompare.originalDate, nextDate!);\n });\n });\n if (isInCurrentView) {\n return;\n }\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\n const onMouseOverDay = (ev: React.MouseEvent) => {\n const dayInfos = getDayInfosInRangeOfDay(day);\n const dayRefs = getRefsFromDayInfos(dayInfos);\n\n dayRefs.forEach((dayRef: HTMLElement, index: number) => {\n if (dayRef) {\n dayRef.classList.add('ms-CalendarDay-hoverStyle');\n if (\n !dayInfos[index].isSelected &&\n dateRangeType === DateRangeType.Day &&\n daysToSelectInDayView &&\n daysToSelectInDayView > 1\n ) {\n // remove the static classes first to overwrite them\n dayRef.classList.remove(\n classNames.bottomLeftCornerDate!,\n classNames.bottomRightCornerDate!,\n classNames.topLeftCornerDate!,\n classNames.topRightCornerDate!,\n );\n\n const classNamesToAdd = calculateRoundedStyles(\n classNames,\n false,\n false,\n index > 0,\n index < dayRefs.length - 1,\n ).trim();\n if (classNamesToAdd) {\n dayRef.classList.add(...classNamesToAdd.split(' '));\n }\n }\n }\n });\n };\n\n const onMouseDownDay = (ev: React.MouseEvent) => {\n const dayInfos = getDayInfosInRangeOfDay(day);\n const dayRefs = getRefsFromDayInfos(dayInfos);\n\n dayRefs.forEach((dayRef: HTMLElement) => {\n if (dayRef) {\n dayRef.classList.add('ms-CalendarDay-pressedStyle');\n }\n });\n };\n\n const onMouseUpDay = (ev: React.MouseEvent) => {\n const dayInfos = getDayInfosInRangeOfDay(day);\n const dayRefs = getRefsFromDayInfos(dayInfos);\n\n dayRefs.forEach((dayRef: HTMLElement) => {\n if (dayRef) {\n dayRef.classList.remove('ms-CalendarDay-pressedStyle');\n }\n });\n };\n\n const onMouseOutDay = (ev: React.MouseEvent) => {\n const dayInfos = getDayInfosInRangeOfDay(day);\n const dayRefs = getRefsFromDayInfos(dayInfos);\n\n dayRefs.forEach((dayRef: HTMLElement, index: number) => {\n if (dayRef) {\n dayRef.classList.remove('ms-CalendarDay-hoverStyle');\n dayRef.classList.remove('ms-CalendarDay-pressedStyle');\n if (\n !dayInfos[index].isSelected &&\n dateRangeType === DateRangeType.Day &&\n daysToSelectInDayView &&\n daysToSelectInDayView > 1\n ) {\n const classNamesToAdd = calculateRoundedStyles(\n classNames,\n false,\n false,\n index > 0,\n index < dayRefs.length - 1,\n ).trim();\n if (classNamesToAdd) {\n dayRef.classList.remove(...classNamesToAdd.split(' '));\n }\n }\n }\n });\n };\n\n const onDayKeyDown = (ev: React.KeyboardEvent): void => {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n onSelectDate?.(day.originalDate);\n } else {\n navigateMonthEdge(ev, day.originalDate);\n }\n };\n\n let ariaLabel =\n day.originalDate.getDate() +\n ', ' +\n strings.months[day.originalDate.getMonth()] +\n ', ' +\n day.originalDate.getFullYear();\n\n if (day.isMarked) {\n ariaLabel = ariaLabel + ', ' + strings.dayMarkedAriaLabel;\n }\n\n return (\n {\n customDayCellRef?.(element, day.originalDate, classNames);\n day.setRef(element);\n isNavigatedDate && (navigatedDayRef.current = element);\n }}\n aria-hidden={ariaHidden}\n aria-disabled={!ariaHidden && !day.isInBounds}\n onClick={day.isInBounds && !ariaHidden ? day.onSelected : undefined}\n onMouseOver={!ariaHidden ? onMouseOverDay : undefined}\n onMouseDown={!ariaHidden ? onMouseDownDay : undefined}\n onMouseUp={!ariaHidden ? onMouseUpDay : undefined}\n onMouseOut={!ariaHidden ? onMouseOutDay : undefined}\n onKeyDown={!ariaHidden ? onDayKeyDown : undefined}\n role=\"gridcell\"\n tabIndex={isNavigatedDate ? 0 : undefined}\n aria-current={day.isToday ? 'date' : undefined}\n aria-selected={day.isInBounds ? day.isSelected : undefined}\n data-is-focusable={!ariaHidden && (allFocusable || (day.isInBounds ? true : undefined))}\n >\n \n {dateTimeFormatter.formatDay(day.originalDate)}\n {day.isMarked &&
    }\n \n \n );\n};\n","import * as React from 'react';\nimport { format } from '@fluentui/utilities';\nimport { getWeekNumbersInMonth } from '@fluentui/date-time-utilities';\nimport { CalendarGridDayCell } from './CalendarGridDayCell';\nimport type { ICalendarDayGridProps, ICalendarDayGridStyles } from './CalendarDayGrid.types';\nimport type { IProcessedStyleSet } from '@fluentui/style-utilities';\nimport type { IDayInfo, IWeekCorners } from './CalendarDayGrid.base';\n\nexport interface ICalendarGridRowProps extends ICalendarDayGridProps {\n classNames: IProcessedStyleSet;\n weeks: IDayInfo[][];\n week: IDayInfo[];\n weekIndex: number;\n weekCorners?: IWeekCorners;\n ariaHidden?: boolean;\n rowClassName?: string;\n ariaRole?: string;\n navigatedDayRef: React.MutableRefObject;\n activeDescendantId: string;\n calculateRoundedStyles(\n classNames: IProcessedStyleSet,\n above: boolean,\n below: boolean,\n left: boolean,\n right: boolean,\n ): string;\n getDayInfosInRangeOfDay(dayToCompare: IDayInfo): IDayInfo[];\n getRefsFromDayInfos(dayInfosInRange: IDayInfo[]): (HTMLElement | null)[];\n}\n\nexport const CalendarGridRow: React.FunctionComponent = props => {\n const {\n classNames,\n week,\n weeks,\n weekIndex,\n rowClassName,\n ariaRole,\n showWeekNumbers,\n firstDayOfWeek,\n firstWeekOfYear,\n navigatedDate,\n strings,\n } = props;\n const weekNumbers = showWeekNumbers\n ? getWeekNumbersInMonth(weeks!.length, firstDayOfWeek, firstWeekOfYear, navigatedDate)\n : null;\n\n const titleString = weekNumbers\n ? strings.weekNumberFormatString && format(strings.weekNumberFormatString, weekNumbers[weekIndex])\n : '';\n\n return (\n \n {showWeekNumbers && weekNumbers && (\n \n {weekNumbers[weekIndex]}\n \n )}\n {week.map((day: IDayInfo, dayIndex: number) => (\n \n ))}\n \n );\n};\n","import * as React from 'react';\nimport { getRTL, classNamesFunction } from '@fluentui/utilities';\nimport { FocusZone } from '../../FocusZone';\nimport {\n getDateRangeArray,\n getDayGrid,\n getBoundedDateRange,\n isRestrictedDate,\n DAYS_IN_WEEK,\n compareDates,\n DateRangeType,\n DayOfWeek,\n} from '@fluentui/date-time-utilities';\nimport { usePrevious, useId } from '@fluentui/react-hooks';\nimport { CalendarMonthHeaderRow } from './CalendarMonthHeaderRow';\nimport { CalendarGridRow } from './CalendarGridRow';\nimport type { IDay } from '@fluentui/date-time-utilities';\nimport type {\n ICalendarDayGridProps,\n ICalendarDayGridStyleProps,\n ICalendarDayGridStyles,\n} from './CalendarDayGrid.types';\nimport type { IProcessedStyleSet } from '@fluentui/style-utilities';\n\nconst getClassNames = classNamesFunction();\n\nexport interface IWeekCorners {\n [key: string]: string;\n}\n\nexport interface IDayInfo extends IDay {\n onSelected: () => void;\n setRef(element: HTMLElement | null): void;\n}\n\nfunction useDayRefs() {\n const daysRef = React.useRef>({});\n\n const getSetRefCallback = (dayKey: string) => (element: HTMLElement | null) => {\n if (element === null) {\n delete daysRef.current[dayKey];\n } else {\n daysRef.current[dayKey] = element;\n }\n };\n\n return [daysRef, getSetRefCallback] as const;\n}\n\nfunction useWeeks(\n props: ICalendarDayGridProps,\n onSelectDate: (date: Date) => void,\n getSetRefCallback: (dayKey: string) => (element: HTMLElement | null) => void,\n): IDayInfo[][] {\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 const weeks = React.useMemo((): IDayInfo[][] => {\n const weeksGrid = getDayGrid(props);\n\n const firstVisibleDay = weeksGrid[1][0].originalDate;\n const lastVisibleDay = weeksGrid[weeksGrid.length - 1][6].originalDate;\n const markedDays = props.getMarkedDays?.(firstVisibleDay, lastVisibleDay) || [];\n\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 const returnValue: IDayInfo[][] = [];\n\n for (let weekIndex = 0; weekIndex < weeksGrid.length; weekIndex++) {\n const week: IDayInfo[] = [];\n for (let dayIndex = 0; dayIndex < DAYS_IN_WEEK; dayIndex++) {\n const day = weeksGrid[weekIndex][dayIndex];\n const dayInfo: IDayInfo = {\n onSelected: () => onSelectDate(day.originalDate),\n setRef: getSetRefCallback(day.key),\n ...day,\n isMarked: day.isMarked || markedDays?.some(markedDay => compareDates(day.originalDate, markedDay)),\n };\n\n week.push(dayInfo);\n }\n returnValue.push(week);\n }\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\n return weeks;\n}\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: IDayInfo[][]): boolean | undefined {\n const previousNavigatedDate = usePrevious(weeks[0][0].originalDate);\n\n if (!previousNavigatedDate || previousNavigatedDate.getTime() === weeks[0][0].originalDate.getTime()) {\n return undefined;\n } else if (previousNavigatedDate <= weeks[0][0].originalDate) {\n return false;\n } else {\n return true;\n }\n}\n\nfunction useWeekCornerStyles(props: ICalendarDayGridProps) {\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 const getWeekCornerStyles = (\n classNames: IProcessedStyleSet,\n initialWeeks: IDayInfo[][],\n ): IWeekCorners => {\n const weekCornersStyled: { [key: string]: string } = {};\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\n // cut off the animation transition weeks\n const weeks = initialWeeks.slice(1, initialWeeks.length - 1);\n\n // if there's an item above, lose both top corners. Item below, lose both bottom corners, etc.\n weeks.forEach((week: IDayInfo[], weekIndex: number) => {\n week.forEach((day: IDayInfo, dayIndex: number) => {\n const above =\n weeks[weekIndex - 1] &&\n weeks[weekIndex - 1][dayIndex] &&\n isInSameHoverRange(\n weeks[weekIndex - 1][dayIndex].originalDate,\n day.originalDate,\n weeks[weekIndex - 1][dayIndex].isSelected,\n day.isSelected,\n );\n const below =\n weeks[weekIndex + 1] &&\n weeks[weekIndex + 1][dayIndex] &&\n isInSameHoverRange(\n weeks[weekIndex + 1][dayIndex].originalDate,\n day.originalDate,\n weeks[weekIndex + 1][dayIndex].isSelected,\n day.isSelected,\n );\n const left =\n weeks[weekIndex][dayIndex - 1] &&\n isInSameHoverRange(\n weeks[weekIndex][dayIndex - 1].originalDate,\n day.originalDate,\n weeks[weekIndex][dayIndex - 1].isSelected,\n day.isSelected,\n );\n const right =\n weeks[weekIndex][dayIndex + 1] &&\n isInSameHoverRange(\n weeks[weekIndex][dayIndex + 1].originalDate,\n day.originalDate,\n weeks[weekIndex][dayIndex + 1].isSelected,\n day.isSelected,\n );\n\n const style = [];\n style.push(calculateRoundedStyles(classNames, above, below, left, right));\n style.push(calculateBorderStyles(classNames, above, below, left, right));\n\n weekCornersStyled[weekIndex + '_' + dayIndex] = style.join(' ');\n });\n });\n\n return weekCornersStyled;\n };\n\n const calculateRoundedStyles = (\n classNames: IProcessedStyleSet,\n above: boolean,\n below: boolean,\n left: boolean,\n right: boolean,\n ): string => {\n const style = [];\n const roundedTopLeft = !above && !left;\n const roundedTopRight = !above && !right;\n const roundedBottomLeft = !below && !left;\n const roundedBottomRight = !below && !right;\n\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\n return style.join(' ');\n };\n\n const calculateBorderStyles = (\n classNames: IProcessedStyleSet,\n above: boolean,\n below: boolean,\n left: boolean,\n right: boolean,\n ): string => {\n const style = [];\n\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\n return style.join(' ');\n };\n\n const isInSameHoverRange = (date1: Date, date2: Date, date1Selected: boolean, date2Selected: boolean): boolean => {\n const { dateRangeType, firstDayOfWeek, workWeekDays } = props;\n\n // The hover state looks weird with non-contiguous days in work week view. In work week, show week hover state\n const dateRangeHoverType = dateRangeType === DateRangeType.WorkWeek ? DateRangeType.Week : dateRangeType;\n\n // we do not pass daysToSelectInDayView because we handle setting those styles dyanamically in onMouseOver\n const dateRange = getDateRangeArray(date1, dateRangeHoverType, firstDayOfWeek, workWeekDays);\n\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 } 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\n // otherwise, both must be unselected, so check the dateRange\n return dateRange.filter((date: Date) => date.getTime() === date2.getTime()).length > 0;\n };\n\n return [getWeekCornerStyles, calculateRoundedStyles] as const;\n}\n\nexport const CalendarDayGridBase: React.FunctionComponent = props => {\n const navigatedDayRef = React.useRef(null) as React.MutableRefObject;\n\n const activeDescendantId = useId();\n\n const onSelectDate = (selectedDate: Date): void => {\n const { firstDayOfWeek, minDate, maxDate, workWeekDays, daysToSelectInDayView, restrictedDates } = props;\n const restrictedDatesOptions = { minDate, maxDate, restrictedDates };\n\n let dateRange = getDateRangeArray(selectedDate, dateRangeType, firstDayOfWeek, workWeekDays, daysToSelectInDayView);\n dateRange = getBoundedDateRange(dateRange, minDate, maxDate);\n\n dateRange = dateRange.filter((d: Date) => {\n return !isRestrictedDate(d, restrictedDatesOptions);\n });\n\n props.onSelectDate?.(selectedDate, dateRange);\n props.onNavigateDate?.(selectedDate, true);\n };\n\n const [daysRef, getSetRefCallback] = useDayRefs();\n\n const weeks = useWeeks(props, onSelectDate, getSetRefCallback);\n const animateBackwards = useAnimateBackwards(weeks);\n const [getWeekCornerStyles, calculateRoundedStyles] = useWeekCornerStyles(props);\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n focus() {\n navigatedDayRef.current?.focus?.();\n },\n }),\n [],\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 const getDayInfosInRangeOfDay = (dayToCompare: IDayInfo): IDayInfo[] => {\n // The hover state looks weird with non-contiguous days in work week view. In work week, show week hover state\n const dateRangeHoverType = getDateRangeTypeToUse(props.dateRangeType, props.workWeekDays);\n\n // gets all the dates for the given date range type that are in the same date range as the given day\n const dateRange = getDateRangeArray(\n dayToCompare.originalDate,\n dateRangeHoverType,\n props.firstDayOfWeek,\n props.workWeekDays,\n props.daysToSelectInDayView,\n ).map((date: Date) => date.getTime());\n\n // gets all the day refs for the given dates\n const dayInfosInRange = weeks.reduce((accumulatedValue: IDayInfo[], currentWeek: IDayInfo[]) => {\n return accumulatedValue.concat(\n currentWeek.filter((weekDay: IDayInfo) => dateRange.indexOf(weekDay.originalDate.getTime()) !== -1),\n );\n }, []);\n\n return dayInfosInRange;\n };\n\n const getRefsFromDayInfos = (dayInfosInRange: IDayInfo[]): (HTMLElement | null)[] => {\n let dayRefs: (HTMLElement | null)[] = [];\n dayRefs = dayInfosInRange.map((dayInfo: IDayInfo) => daysRef.current[dayInfo.key]);\n\n return dayRefs;\n };\n\n const {\n styles,\n theme,\n className,\n dateRangeType,\n showWeekNumbers,\n labelledBy,\n lightenDaysOutsideNavigatedMonth,\n animationDirection,\n } = props;\n\n const classNames = getClassNames(styles, {\n theme: theme!,\n className,\n dateRangeType,\n showWeekNumbers,\n lightenDaysOutsideNavigatedMonth:\n lightenDaysOutsideNavigatedMonth === undefined ? true : lightenDaysOutsideNavigatedMonth,\n animationDirection,\n animateBackwards,\n });\n\n // When the month is highlighted get the corner dates so that styles can be added to them\n const weekCorners: IWeekCorners = getWeekCornerStyles(classNames, weeks!);\n const partialWeekProps = {\n weeks,\n navigatedDayRef,\n calculateRoundedStyles,\n activeDescendantId,\n classNames,\n weekCorners,\n getDayInfosInRangeOfDay,\n getRefsFromDayInfos,\n } as const;\n\n return (\n \n \n \n \n \n {weeks!.slice(1, weeks!.length - 1).map((week: IDayInfo[], weekIndex: number) => (\n \n ))}\n \n \n \n \n );\n};\nCalendarDayGridBase.displayName = 'CalendarDayGridBase';\n\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: DateRangeType, workWeekDays: DayOfWeek[] | undefined): DateRangeType {\n if (workWeekDays && dateRangeType === DateRangeType.WorkWeek) {\n const sortedWWDays = workWeekDays.slice().sort();\n let isContiguous = true;\n for (let i = 1; i < sortedWWDays.length; i++) {\n if (sortedWWDays[i] !== sortedWWDays[i - 1] + 1) {\n isContiguous = false;\n break;\n }\n }\n\n if (!isContiguous || workWeekDays.length === 0) {\n return DateRangeType.Week;\n }\n }\n\n return dateRangeType;\n}\n","import * as React from 'react';\nimport { DayOfWeek, FirstWeekOfYear, DateRangeType } from '@fluentui/date-time-utilities';\nimport type { IRefObject, IBaseProps, IStyleFunctionOrObject } from '@fluentui/utilities';\nimport type { IStyle, ITheme } from '@fluentui/style-utilities';\nimport type { ICalendarDayProps } from './CalendarDay/CalendarDay.types';\nimport type { ICalendarMonthProps } from './CalendarMonth/CalendarMonth.types';\nimport type { ICalendarStrings, IDateFormatting } from '@fluentui/date-time-utilities';\n\n/**\n * {@docCategory Calendar}\n */\nexport interface ICalendar {\n /** Sets focus to the selected date. */\n focus: () => void;\n}\n\n/**\n * {@docCategory Calendar}\n */\nexport interface ICalendarProps extends IBaseProps, React.RefAttributes {\n /**\n * Optional callback to access the ICalendar interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject;\n\n /**\n * Customized styles for the calendar component\n */\n styles?: IStyleFunctionOrObject;\n\n /**\n * Customized props for the calendar day\n */\n calendarDayProps?: Partial;\n\n /**\n * Customized props for the calendar month\n */\n calendarMonthProps?: Partial;\n\n /**\n * Theme provided by High-Order Component.\n */\n theme?: ITheme;\n\n /**\n * Optional class name to add to the root element.\n */\n className?: string;\n\n /**\n * Callback for when a date is selected\n * @param date - The date the user selected\n * @param selectedDateRangeArray - The resultant list of dates that are selected based on the date range type set\n * for the component.\n */\n onSelectDate?: (date: Date, selectedDateRangeArray?: Date[]) => void;\n\n /**\n * Callback for when calendar is closed\n */\n onDismiss?: () => void;\n\n /**\n * ID for the calendar\n */\n id?: string;\n\n /**\n * Default value of the Calendar, if any\n */\n value?: Date;\n\n /**\n * Value of today. If unspecified, current time in client machine will be used.\n */\n today?: Date;\n\n /**\n * The date range type indicating how many days should be selected as the user\n * selects days\n * @defaultValue DateRangeType.Day\n */\n dateRangeType?: DateRangeType;\n\n /**\n * The first day of the week for your locale.\n * @defaultvalue DayOfWeek.Sunday\n */\n firstDayOfWeek?: DayOfWeek;\n\n /**\n * Defines when the first week of the year should start.\n * @defaultvalue FirstWeekOfYear.FirstDay\n */\n firstWeekOfYear?: FirstWeekOfYear;\n\n /**\n * Whether the month picker is shown beside the day picker or hidden.\n * @defaultvalue true\n */\n isMonthPickerVisible?: boolean;\n\n /**\n * Whether the day picker is shown beside the month picker or hidden.\n * @defaultvalue true\n */\n isDayPickerVisible?: boolean;\n\n /**\n * Show month picker on top of date picker when visible.\n * @defaultvalue false\n */\n showMonthPickerAsOverlay?: boolean;\n\n /**\n * Whether the \"Go to today\" link should be shown or not\n */\n showGoToToday?: boolean;\n\n /**\n * Whether the calendar should show the week number (weeks 1 to 53) before each week row\n * @defaultvalue false\n */\n showWeekNumbers?: boolean;\n\n /**\n * Localized strings to use in the Calendar\n */\n strings?: ICalendarStrings;\n\n /**\n * Custom navigation icons.\n */\n navigationIcons?: ICalendarNavigationIcons;\n\n /**\n * Apply additional formatting to dates, for example localized date formatting.\n */\n dateTimeFormatter?: IDateFormatting;\n\n /**\n * If set the Calendar will not allow navigation to or selection of a date earlier than this value.\n */\n minDate?: Date;\n\n /**\n * If set the Calendar will not allow navigation to or selection of a date later than this value.\n */\n maxDate?: Date;\n\n /**\n * If set the Calendar will not allow selection of dates in this array.\n */\n restrictedDates?: Date[];\n\n /**\n * Whether the calendar should show 6 weeks by default.\n * @defaultvalue false\n */\n showSixWeeksByDefault?: boolean;\n\n /**\n * The days that are selectable when `dateRangeType` is `WorkWeek`.\n * If `dateRangeType` is not `WorkWeek` this property does nothing.\n * @defaultvalue [Monday,Tuesday,Wednesday,Thursday,Friday]\n */\n workWeekDays?: DayOfWeek[];\n\n /**\n * Whether the month picker should highlight the current month\n * @defaultvalue false\n */\n highlightCurrentMonth?: boolean;\n\n /**\n * Whether the month picker should highlight the selected month\n * @defaultvalue false\n */\n highlightSelectedMonth?: boolean;\n\n /**\n * Whether the close button should be shown or not\n * @defaultvalue false\n */\n showCloseButton?: boolean;\n\n /**\n * Allows all dates and buttons to be focused, including disabled ones\n * @defaultvalue false\n */\n allFocusable?: boolean;\n}\n\n/**\n * {@docCategory Calendar}\n */\nexport interface ICalendarNavigationIcons {\n /**\n * FabricMDL2Icons name for the left navigation icon. Previous default: ChevronLeft.\n * @defaultvalue 'Up'\n */\n leftNavigation?: string;\n\n /**\n * FabricMDL2Icons name for the right navigation icon. Previous default: ChevronRight.\n * @defaultvalue 'Down'\n */\n rightNavigation?: string;\n\n /**\n * Close icon\n * @defaultvalue 'CalculatorMultiply'\n */\n closeIcon?: string;\n}\n\n/**\n * @deprecated Use `ICalendarNavigationIcons`\n */\nexport type ICalendarIconStrings = ICalendarNavigationIcons;\n\n/**\n * @deprecated Use `IDateFormatting`\n */\nexport type ICalendarFormatDateCallbacks = IDateFormatting;\n\n/**\n * {@docCategory Calendar}\n */\nexport interface ICalendarStyleProps {\n /**\n * Theme provided by higher-order component.\n */\n theme: ITheme;\n\n /**\n * Custom CSS class for the calendar.\n */\n className?: string;\n\n /**\n * Whether the month picker is visible\n */\n isMonthPickerVisible?: boolean;\n\n /**\n * Whether the day picker is visible\n */\n isDayPickerVisible?: boolean;\n\n /**\n * Whether only month picker is shown\n */\n monthPickerOnly?: boolean;\n\n /**\n * Whether the month picker is overlaid on the day picker\n */\n showMonthPickerAsOverlay?: boolean;\n\n /**\n * @deprecated Use `overlaidWithButton`\n */\n overlayedWithButton?: boolean;\n\n /**\n * Whether the month and day picker are overlaid and the 'go to today' button is shown\n */\n overlaidWithButton?: boolean;\n\n /**\n * Whether the go to today button is shown\n */\n showGoToToday?: boolean;\n\n /**\n * Whether the week numbers are shown\n */\n showWeekNumbers?: boolean;\n}\n\n/**\n * {@docCategory Calendar}\n */\nexport interface ICalendarStyles {\n /**\n * Style for the root element.\n */\n root: IStyle;\n\n divider: IStyle;\n\n goTodayButton: IStyle;\n\n monthPickerWrapper: IStyle;\n\n liveRegion: IStyle;\n}\n\n/**\n * {@docCategory Calendar}\n */\nexport enum AnimationDirection {\n /**\n * Grid will transition out and in horizontally\n */\n Horizontal,\n\n /**\n * Grid will transition out and in vertically\n */\n Vertical,\n}\n","import {\n FontSizes,\n FontWeights,\n getFocusStyle,\n getGlobalClassNames,\n AnimationStyles,\n keyframes,\n HighContrastSelector,\n getHighContrastNoAdjustStyle,\n} from '@fluentui/style-utilities';\nimport { DateRangeType } from '@fluentui/date-time-utilities';\nimport { AnimationDirection } from '../Calendar/Calendar.types';\nimport type { ICalendarDayGridStyleProps, ICalendarDayGridStyles } from './CalendarDayGrid.types';\nimport type { IRawStyle } from '@fluentui/style-utilities';\n\nconst GlobalClassNames = {\n hoverStyle: 'ms-CalendarDay-hoverStyle',\n pressedStyle: 'ms-CalendarDay-pressedStyle',\n dayIsTodayStyle: 'ms-CalendarDay-dayIsToday',\n daySelectedStyle: 'ms-CalendarDay-daySelected',\n};\n\nconst 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});\n\nexport const styles = (props: ICalendarDayGridStyleProps): ICalendarDayGridStyles => {\n const {\n theme,\n dateRangeType,\n showWeekNumbers,\n lightenDaysOutsideNavigatedMonth,\n animateBackwards,\n animationDirection,\n } = props;\n const { palette } = theme;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n let rowAnimationStyle: IRawStyle = {};\n if (animateBackwards !== undefined) {\n if (animationDirection === AnimationDirection.Horizontal) {\n rowAnimationStyle = animateBackwards ? AnimationStyles.slideRightIn20 : AnimationStyles.slideLeftIn20;\n } else {\n rowAnimationStyle = animateBackwards ? AnimationStyles.slideDownIn20 : AnimationStyles.slideUpIn20;\n }\n }\n\n let firstTransitionRowAnimationStyle: IRawStyle = {};\n let lastTransitionRowAnimationStyle: IRawStyle = {};\n if (animateBackwards !== undefined) {\n if (animationDirection !== AnimationDirection.Horizontal) {\n firstTransitionRowAnimationStyle = animateBackwards ? { animationName: '' } : AnimationStyles.slideUpOut20;\n lastTransitionRowAnimationStyle = animateBackwards ? AnimationStyles.slideDownOut20 : { animationName: '' };\n }\n }\n\n const disabledStyle = {\n selectors: {\n '&, &:disabled, & button': {\n color: palette.neutralTertiaryAlt,\n pointerEvents: 'none',\n },\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 getFocusStyle(theme, { inset: -3 }),\n {\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: {\n [HighContrastSelector]: {\n color: 'WindowText',\n backgroundColor: 'transparent',\n zIndex: 0,\n ...getHighContrastNoAdjustStyle(),\n },\n ['&.' + classNames.hoverStyle]: {\n backgroundColor: palette.neutralLighter,\n selectors: {\n [HighContrastSelector]: {\n zIndex: 3,\n backgroundColor: 'Window',\n outline: '1px solid Highlight',\n },\n },\n },\n ['&.' + classNames.pressedStyle]: {\n backgroundColor: palette.neutralLight,\n selectors: {\n [HighContrastSelector]: {\n borderColor: 'Highlight',\n color: 'Highlight',\n backgroundColor: 'Window',\n },\n },\n },\n ['&.' + classNames.pressedStyle + '.' + classNames.hoverStyle]: {\n selectors: {\n [HighContrastSelector]: {\n backgroundColor: 'Window',\n outline: '1px solid Highlight',\n },\n },\n },\n },\n },\n ],\n daySelected: [\n dateRangeType !== DateRangeType.Month && {\n backgroundColor: palette.neutralLight + '!important',\n selectors: {\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n },\n ['&:hover, &.' + classNames.hoverStyle + ', &.' + classNames.pressedStyle]: {\n backgroundColor: palette.neutralLight + '!important',\n [HighContrastSelector]: {\n color: 'HighlightText!important',\n background: 'Highlight!important',\n },\n },\n [HighContrastSelector]: {\n background: 'Highlight!important',\n color: 'HighlightText!important',\n borderColor: 'Highlight!important',\n ...getHighContrastNoAdjustStyle(),\n },\n },\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 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', // explicitly specify for IE11\n selectors: {\n span: {\n height: 'inherit',\n lineHeight: 'inherit',\n },\n },\n },\n dayIsToday: {\n backgroundColor: palette.themePrimary + '!important',\n borderRadius: '100%',\n color: palette.white + '!important',\n fontWeight: (FontWeights.semibold + '!important') as 'initial',\n selectors: {\n [HighContrastSelector]: {\n background: 'WindowText!important',\n color: 'Window!important',\n borderColor: 'WindowText!important',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\n firstTransitionWeek: {\n position: 'absolute',\n opacity: 0,\n width: 0,\n height: 0,\n overflow: 'hidden',\n ...firstTransitionRowAnimationStyle,\n animationName: firstTransitionRowAnimationStyle.animationName + ',' + transitionRowDisappearance,\n },\n lastTransitionWeek: {\n position: 'absolute',\n opacity: 0,\n width: 0,\n height: 0,\n overflow: 'hidden',\n marginTop: -28,\n ...lastTransitionRowAnimationStyle,\n animationName: lastTransitionRowAnimationStyle.animationName + ',' + transitionRowDisappearance,\n },\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: {\n ['.' + classNames.dayIsTodayStyle + ' &']: {\n backgroundColor: palette.white,\n selectors: {\n [HighContrastSelector]: {\n backgroundColor: 'Window',\n },\n },\n },\n ['.' + classNames.daySelectedStyle + ' &']: {\n selectors: {\n [HighContrastSelector]: {\n backgroundColor: 'HighlightText',\n },\n },\n },\n [HighContrastSelector]: {\n backgroundColor: 'WindowText',\n ...getHighContrastNoAdjustStyle(),\n },\n },\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 '&::before': {\n borderTop: `1px solid ${palette.neutralSecondary}`,\n },\n },\n datesBelow: {\n '&::before': {\n borderBottom: `1px solid ${palette.neutralSecondary}`,\n },\n },\n datesLeft: {\n '&::before': {\n borderLeft: `1px solid ${palette.neutralSecondary}`,\n },\n },\n datesRight: {\n '&::before': {\n borderRight: `1px solid ${palette.neutralSecondary}`,\n },\n },\n };\n};\n","import * as React from 'react';\nimport { CalendarDayGridBase } from './CalendarDayGrid.base';\nimport { styles } from './CalendarDayGrid.styles';\nimport { styled } from '../../Utilities';\nimport type { ICalendarDayGridProps } from './CalendarDayGrid.types';\n\nexport const CalendarDayGrid: React.FunctionComponent = styled(\n CalendarDayGridBase,\n styles,\n undefined,\n { scope: 'CalendarDayGrid' },\n);\n","import * 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';\nimport type { ICalendarDayProps, ICalendarDayStyleProps, ICalendarDayStyles } from './CalendarDay.types';\nimport type { IProcessedStyleSet } from '@fluentui/style-utilities';\nimport type { ICalendarDayGrid } from '../../CalendarDayGrid/CalendarDayGrid.types';\n\nconst getClassNames = classNamesFunction();\n\nexport const CalendarDayBase: React.FunctionComponent = props => {\n const dayGrid = React.useRef(null);\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n focus() {\n dayGrid.current?.focus?.();\n },\n }),\n [],\n );\n\n const {\n strings,\n navigatedDate,\n dateTimeFormatter,\n styles,\n theme,\n className,\n onHeaderSelect,\n showSixWeeksByDefault,\n minDate,\n maxDate,\n restrictedDates,\n onNavigateDate,\n showWeekNumbers,\n dateRangeType,\n animationDirection,\n } = props;\n const monthAndYearId = useId();\n\n const classNames = getClassNames(styles, {\n theme: theme!,\n className,\n headerIsClickable: !!onHeaderSelect,\n showWeekNumbers,\n animationDirection,\n });\n\n const monthAndYear = dateTimeFormatter.formatMonthYear(navigatedDate, strings);\n const HeaderButtonComponentType = onHeaderSelect ? 'button' : 'div';\n const headerAriaLabel = strings.yearPickerHeaderAriaLabel\n ? format(strings.yearPickerHeaderAriaLabel, monthAndYear)\n : monthAndYear;\n\n return (\n
    \n
    \n \n \n {monthAndYear}\n \n \n \n
    \n \n
    \n );\n};\nCalendarDayBase.displayName = 'CalendarDayBase';\n\ninterface ICalendarDayNavigationButtonsProps extends ICalendarDayProps {\n classNames: IProcessedStyleSet;\n}\n\nconst CalendarDayNavigationButtons = (props: ICalendarDayNavigationButtonsProps): JSX.Element => {\n const {\n minDate,\n maxDate,\n navigatedDate,\n allFocusable,\n strings,\n navigationIcons,\n showCloseButton,\n classNames,\n onNavigateDate,\n onDismiss,\n } = props;\n\n const onSelectNextMonth = (): void => {\n onNavigateDate(addMonths(navigatedDate, 1), false);\n };\n\n const onSelectPrevMonth = (): void => {\n onNavigateDate(addMonths(navigatedDate, -1), false);\n };\n const leftNavigationIcon = navigationIcons.leftNavigation;\n const rightNavigationIcon = navigationIcons.rightNavigation;\n const closeNavigationIcon = navigationIcons.closeIcon;\n\n // determine if previous/next months are in bounds\n const prevMonthInBounds = minDate ? compareDatePart(minDate, getMonthStart(navigatedDate)) < 0 : true;\n const nextMonthInBounds = maxDate ? compareDatePart(getMonthEnd(navigatedDate), maxDate) < 0 : true;\n\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 (\n
    \n \n \n \n \n \n \n {showCloseButton && (\n \n \n \n )}\n
    \n );\n};\nCalendarDayNavigationButtons.displayName = 'CalendarDayNavigationButtons';\n\nconst onButtonKeyDown =\n (callback?: () => void): ((ev: React.KeyboardEvent) => void) =>\n (ev: React.KeyboardEvent) => {\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.enter:\n callback?.();\n break;\n }\n };\n","import {\n normalize,\n FontSizes,\n FontWeights,\n getFocusStyle,\n AnimationStyles,\n HighContrastSelector,\n} from '@fluentui/style-utilities';\nimport type { ICalendarDayStyleProps, ICalendarDayStyles } from './CalendarDay.types';\n\nexport const styles = (props: ICalendarDayStyleProps): ICalendarDayStyles => {\n const { className, theme, headerIsClickable, showWeekNumbers } = props;\n const { palette } = theme;\n\n const disabledStyle = {\n selectors: {\n '&, &:disabled, & button': {\n color: palette.neutralTertiaryAlt,\n pointerEvents: 'none',\n },\n [HighContrastSelector]: {\n color: 'GrayText',\n forcedColorAdjust: 'none',\n },\n },\n };\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 {\n ...AnimationStyles.fadeIn200,\n alignItems: 'center',\n fontSize: FontSizes.medium,\n fontFamily: 'inherit',\n color: palette.neutralPrimary,\n display: 'inline-block',\n flexGrow: 1,\n fontWeight: FontWeights.semibold,\n padding: '0 4px 0 10px',\n border: 'none',\n backgroundColor: 'transparent',\n borderRadius: 2,\n lineHeight: 28,\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textAlign: 'left',\n textOverflow: 'ellipsis',\n },\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', // explicitly specify for IE11\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,\n };\n};\n","import * as React from 'react';\nimport { CalendarDayBase } from './CalendarDay.base';\nimport { styles } from './CalendarDay.styles';\nimport { styled } from '../../../Utilities';\nimport type { ICalendarDayProps } from './CalendarDay.types';\n\nexport const CalendarDay: React.FunctionComponent = styled(CalendarDayBase, styles, undefined, {\n scope: 'CalendarDay',\n});\n","import {\n normalize,\n FontSizes,\n FontWeights,\n getFocusStyle,\n AnimationStyles,\n HighContrastSelector,\n getHighContrastNoAdjustStyle,\n} from '@fluentui/style-utilities';\nimport { AnimationDirection } from '../Calendar.types';\nimport type { ICalendarPickerStyleProps, ICalendarPickerStyles } from './CalendarPicker.types';\nimport type { IRawStyle } from '@fluentui/style-utilities';\n\nexport const getStyles = (props: ICalendarPickerStyleProps): ICalendarPickerStyles => {\n const {\n className,\n theme,\n hasHeaderClickCallback,\n highlightCurrent,\n highlightSelected,\n animateBackwards,\n animationDirection,\n } = props;\n const { palette } = theme;\n\n let animationStyle: IRawStyle = {};\n if (animateBackwards !== undefined) {\n if (animationDirection === AnimationDirection.Horizontal) {\n animationStyle = animateBackwards ? AnimationStyles.slideRightIn20 : AnimationStyles.slideLeftIn20;\n } else {\n animationStyle = animateBackwards ? AnimationStyles.slideDownIn20 : AnimationStyles.slideUpIn20;\n }\n }\n\n const headerAnimationStyle: IRawStyle = animateBackwards !== undefined ? AnimationStyles.fadeIn200 : {};\n\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 {\n ...headerAnimationStyle,\n fontSize: FontSizes.medium,\n fontWeight: FontWeights.semibold,\n fontFamily: 'inherit',\n textAlign: 'left',\n color: 'inherit',\n backgroundColor: 'transparent',\n flexGrow: 1,\n padding: '0 4px 0 10px',\n border: 'none',\n overflow: 'visible', // explicitly specify for IE11\n },\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', // explicitly specify for IE11\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: {\n ...animationStyle,\n marginBottom: 16,\n selectors: {\n '&:nth-child(n + 3)': {\n marginBottom: 0,\n },\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', // explicitly specify for IE11\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: {\n [HighContrastSelector]: {\n background: 'Window',\n color: 'WindowText',\n outline: '1px solid Highlight',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\n '&:active': {\n backgroundColor: palette.themeLight,\n selectors: {\n [HighContrastSelector]: {\n background: 'Window',\n color: 'Highlight',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\n },\n },\n ],\n current: highlightCurrent\n ? {\n color: palette.white,\n backgroundColor: palette.themePrimary,\n selectors: {\n '& div': {\n fontWeight: FontWeights.semibold,\n },\n '&:hover': {\n backgroundColor: palette.themePrimary,\n selectors: {\n [HighContrastSelector]: {\n backgroundColor: 'WindowText',\n color: 'Window',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\n [HighContrastSelector]: {\n backgroundColor: 'WindowText',\n color: 'Window',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n }\n : {},\n selected: highlightSelected\n ? {\n color: palette.neutralPrimary,\n backgroundColor: palette.themeLight,\n fontWeight: FontWeights.semibold,\n selectors: {\n '& div': {\n fontWeight: FontWeights.semibold,\n },\n '&:hover, &:active': {\n backgroundColor: palette.themeLight,\n selectors: {\n [HighContrastSelector]: {\n color: 'Window',\n background: 'Highlight',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\n [HighContrastSelector]: {\n background: 'Highlight',\n color: 'Window',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n }\n : {},\n disabled: {\n selectors: {\n '&, &:disabled, & button': {\n color: palette.neutralTertiaryAlt,\n pointerEvents: 'none',\n },\n [HighContrastSelector]: {\n color: 'GrayText',\n forcedColorAdjust: 'none',\n },\n },\n },\n };\n};\n","import { getStyles as getPickerStyles } from '../CalendarPicker/CalendarPicker.styles';\nimport type { ICalendarMonthStyleProps, ICalendarMonthStyles } from './CalendarMonth.types';\n\nexport const getStyles = (props: ICalendarMonthStyleProps): ICalendarMonthStyles => {\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\n return getPickerStyles(props);\n};\n","import { getStyles as getPickerStyles } from '../CalendarPicker/CalendarPicker.styles';\nimport type { ICalendarYearStyleProps, ICalendarYearStyles } from './CalendarYear.types';\n\nexport const getStyles = (props: ICalendarYearStyleProps): ICalendarYearStyles => {\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\n return getPickerStyles(props);\n};\n","import { DEFAULT_CALENDAR_STRINGS } from '@fluentui/date-time-utilities';\nimport type { ICalendarNavigationIcons } from './Calendar.types';\nimport type { ICalendarStrings } from '@fluentui/date-time-utilities';\n\nexport const defaultCalendarStrings: ICalendarStrings = DEFAULT_CALENDAR_STRINGS;\n\n/**\n * @deprecated Use `defaultCalendarStrings`\n */\nexport const defaultDayPickerStrings = defaultCalendarStrings;\n\nexport const defaultCalendarNavigationIcons: ICalendarNavigationIcons = {\n leftNavigation: 'Up',\n rightNavigation: 'Down',\n closeIcon: 'CalculatorMultiply',\n};\n","import * 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';\nimport type {\n ICalendarYearStrings,\n ICalendarYearProps,\n ICalendarYearRange,\n ICalendarYearHeaderProps,\n ICalendarYearStyleProps,\n ICalendarYearStyles,\n} from './CalendarYear.types';\nimport type { IRefObject } from '../../../Utilities';\n\nconst getClassNames = classNamesFunction();\n\nconst CELL_COUNT = 12;\nconst CELLS_PER_ROW = 4;\n\nconst DefaultCalendarYearStrings: ICalendarYearStrings = {\n prevRangeAriaLabel: undefined,\n nextRangeAriaLabel: undefined,\n};\ninterface ICalendarYearGrid {\n focus(): void;\n}\n\ninterface ICalendarYearGridCellProps extends ICalendarYearProps {\n year: number;\n current?: boolean;\n selected?: boolean;\n disabled?: boolean;\n onSelectYear?: (year: number) => void;\n onRenderYear?: (year: number) => React.ReactNode;\n}\n\ninterface ICalendarYearGridProps extends ICalendarYearProps, ICalendarYearRange {\n selectedYear?: number;\n animateBackwards?: boolean;\n componentRef?: IRefObject;\n}\n\ninterface ICalendarYearGridCell {\n focus(): void;\n}\n\nconst CalendarYearGridCell: React.FunctionComponent = props => {\n const {\n styles,\n theme,\n className,\n highlightCurrentYear,\n highlightSelectedYear,\n year,\n selected,\n disabled,\n componentRef,\n onSelectYear,\n onRenderYear,\n } = props;\n\n const buttonRef = React.useRef(null);\n\n React.useImperativeHandle(\n componentRef,\n () => ({\n focus() {\n buttonRef.current?.focus?.();\n },\n }),\n [],\n );\n\n const onClick = () => {\n onSelectYear?.(year);\n };\n\n const onKeyDown = (ev: React.KeyboardEvent) => {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n onSelectYear?.(year);\n }\n };\n\n const classNames = getClassNames(styles, {\n theme: theme!,\n className,\n highlightCurrent: highlightCurrentYear,\n highlightSelected: highlightSelectedYear,\n });\n\n return (\n \n {onRenderYear?.(year) ?? year}\n \n );\n};\nCalendarYearGridCell.displayName = 'CalendarYearGridCell';\n\nconst CalendarYearGrid: React.FunctionComponent = props => {\n const {\n styles,\n theme,\n className,\n fromYear,\n toYear,\n animationDirection,\n animateBackwards,\n minYear,\n maxYear,\n onSelectYear,\n selectedYear,\n componentRef,\n } = props;\n\n const selectedCellRef = React.useRef(null);\n const currentCellRef = React.useRef(null);\n\n React.useImperativeHandle(\n componentRef,\n () => ({\n focus() {\n (selectedCellRef.current || currentCellRef.current)?.focus?.();\n },\n }),\n [],\n );\n\n const renderCell = (yearToRender: number): React.ReactNode => {\n const selected = yearToRender === selectedYear;\n const disabled =\n (minYear !== undefined && yearToRender < minYear) || (maxYear !== undefined && yearToRender > maxYear);\n const current = yearToRender === new Date().getFullYear();\n\n return (\n \n );\n };\n\n const classNames = getClassNames(styles, {\n theme: theme!,\n className,\n animateBackwards,\n animationDirection,\n });\n\n const onRenderYear = (value: number) => {\n return props.onRenderYear?.(value) ?? value;\n };\n\n const gridAriaLabel = `${onRenderYear(fromYear)} - ${onRenderYear(toYear)}`;\n\n let year = fromYear;\n const cells: React.ReactNode[][] = [];\n\n for (let i = 0; i < (toYear - fromYear + 1) / CELLS_PER_ROW; i++) {\n cells.push([]);\n for (let j = 0; j < CELLS_PER_ROW; j++) {\n cells[i].push(renderCell(year));\n year++;\n }\n }\n\n return (\n \n
    \n {cells.map((cellRow: React.ReactNode[], index: number) => {\n return (\n
    \n {...cellRow}\n
    \n );\n })}\n
    \n
    \n );\n};\nCalendarYearGrid.displayName = 'CalendarYearGrid';\n\nconst enum CalendarYearNavDirection {\n Previous,\n Next,\n}\n\ninterface ICalendarYearNavArrowProps extends ICalendarYearHeaderProps {\n direction: CalendarYearNavDirection;\n}\n\nconst CalendarYearNavArrow: React.FunctionComponent = props => {\n const {\n styles,\n theme,\n className,\n navigationIcons = defaultCalendarNavigationIcons,\n strings = DefaultCalendarYearStrings,\n direction,\n onSelectPrev,\n onSelectNext,\n fromYear,\n toYear,\n maxYear,\n minYear,\n } = props;\n\n const classNames = getClassNames(styles, {\n theme: theme!,\n className,\n });\n\n const ariaLabel =\n direction === CalendarYearNavDirection.Previous ? strings.prevRangeAriaLabel : strings.nextRangeAriaLabel;\n const newRangeOffset = direction === CalendarYearNavDirection.Previous ? -CELL_COUNT : CELL_COUNT;\n const newRange = { fromYear: fromYear + newRangeOffset, toYear: toYear + newRangeOffset };\n const ariaLabelString = ariaLabel ? (typeof ariaLabel === 'string' ? ariaLabel : ariaLabel(newRange)) : undefined;\n const disabled =\n direction === CalendarYearNavDirection.Previous\n ? minYear !== undefined && fromYear < minYear\n : maxYear !== undefined && props.fromYear + CELL_COUNT > maxYear;\n\n const onNavigate = () => {\n direction === CalendarYearNavDirection.Previous ? onSelectPrev?.() : onSelectNext?.();\n };\n\n const onKeyDown = (ev: React.KeyboardEvent) => {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n onNavigate();\n }\n };\n\n // can be condensed, but leaving verbose for clarity due to regressions\n const isLeftNavigation = getRTL()\n ? direction === CalendarYearNavDirection.Next\n : direction === CalendarYearNavDirection.Previous;\n\n return (\n \n \n \n );\n};\nCalendarYearNavArrow.displayName = 'CalendarYearNavArrow';\n\nconst CalendarYearNav: React.FunctionComponent = props => {\n const { styles, theme, className } = props;\n\n const classNames = getClassNames(styles, {\n theme: theme!,\n className,\n });\n\n return (\n
    \n \n \n
    \n );\n};\nCalendarYearNav.displayName = 'CalendarYearNav';\n\nconst CalendarYearTitle: React.FunctionComponent = props => {\n const {\n styles,\n theme,\n className,\n fromYear,\n toYear,\n strings = DefaultCalendarYearStrings,\n animateBackwards,\n animationDirection,\n } = props;\n\n const onHeaderSelect = () => {\n props.onHeaderSelect?.(true);\n };\n\n const onHeaderKeyDown = (ev: React.KeyboardEvent) => {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) {\n onHeaderSelect();\n }\n };\n\n const onRenderYear = (year: number) => {\n return props.onRenderYear?.(year) ?? year;\n };\n\n const classNames = getClassNames(styles, {\n theme: theme!,\n className,\n hasHeaderClickCallback: !!props.onHeaderSelect,\n animateBackwards,\n animationDirection,\n });\n\n if (props.onHeaderSelect) {\n const rangeAriaLabel = strings.rangeAriaLabel;\n const headerAriaLabelFormatString = strings.headerAriaLabelFormatString;\n const currentDateRange = rangeAriaLabel\n ? typeof rangeAriaLabel === 'string'\n ? rangeAriaLabel\n : rangeAriaLabel(props)\n : undefined;\n\n const ariaLabel = headerAriaLabelFormatString\n ? format(headerAriaLabelFormatString, currentDateRange)\n : currentDateRange;\n\n return (\n \n \n {onRenderYear(fromYear)} - {onRenderYear(toYear)}\n \n \n );\n }\n\n return (\n
    \n {onRenderYear(fromYear)} - {onRenderYear(toYear)}\n
    \n );\n};\nCalendarYearTitle.displayName = 'CalendarYearTitle';\n\nconst CalendarYearHeader: React.FunctionComponent = props => {\n const { styles, theme, className, animateBackwards, animationDirection, onRenderTitle } = props;\n\n const classNames = getClassNames(styles, {\n theme: theme!,\n className,\n hasHeaderClickCallback: !!props.onHeaderSelect,\n animateBackwards,\n animationDirection,\n });\n\n return (\n
    \n {onRenderTitle?.(props) ?? }\n \n
    \n );\n};\nCalendarYearHeader.displayName = 'CalendarYearHeader';\n\nfunction useAnimateBackwards({ selectedYear, navigatedYear }: ICalendarYearProps) {\n const rangeYear = selectedYear || navigatedYear || new Date().getFullYear();\n const fromYear = Math.floor(rangeYear / 10) * 10;\n\n const previousFromYear = usePrevious(fromYear);\n\n if (!previousFromYear || previousFromYear === fromYear) {\n return undefined;\n } else if (previousFromYear > fromYear) {\n return true;\n } else {\n return false;\n }\n}\n\nfunction useYearRangeState({ selectedYear, navigatedYear }: ICalendarYearProps) {\n const rangeYear = React.useMemo(() => {\n return selectedYear || navigatedYear || Math.floor(new Date().getFullYear() / 10) * 10;\n }, [navigatedYear, selectedYear]);\n\n const [fromYear, setFromYear] = React.useState(rangeYear);\n\n const onNavNext = () => {\n setFromYear(year => year + CELL_COUNT);\n };\n\n const onNavPrevious = () => {\n setFromYear(year => year - CELL_COUNT);\n };\n\n React.useEffect(() => {\n setFromYear(rangeYear);\n }, [rangeYear]);\n\n const toYear = fromYear + CELL_COUNT - 1;\n\n return [fromYear, toYear, onNavNext, onNavPrevious] as const;\n}\n\nexport const CalendarYearBase: React.FunctionComponent = props => {\n const animateBackwards = useAnimateBackwards(props);\n const [fromYear, toYear, onNavNext, onNavPrevious] = useYearRangeState(props);\n\n const gridRef = React.useRef(null);\n\n React.useImperativeHandle(props.componentRef, () => ({\n focus() {\n gridRef.current?.focus?.();\n },\n }));\n\n const { styles, theme, className } = props;\n\n const classNames = getClassNames(styles, {\n theme: theme!,\n className,\n });\n\n return (\n
    \n \n \n
    \n );\n};\nCalendarYearBase.displayName = 'CalendarYearBase';\n","import * as React from 'react';\nimport { getStyles } from './CalendarYear.styles';\nimport { styled } from '../../../Utilities';\nimport { CalendarYearBase } from './CalendarYear.base';\nimport type { ICalendarYearProps } from './CalendarYear.types';\n\nexport const CalendarYear: React.FunctionComponent = styled(\n CalendarYearBase,\n getStyles,\n undefined,\n { scope: 'CalendarYear' },\n);\n","import * as React from 'react';\nimport { FocusZone } from '../../../FocusZone';\nimport {\n addYears,\n setMonth,\n getYearStart,\n getYearEnd,\n getMonthStart,\n getMonthEnd,\n compareDatePart,\n DEFAULT_DATE_FORMATTING,\n} 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';\nimport type { ICalendarMonthProps, ICalendarMonthStyles, ICalendarMonthStyleProps } from './CalendarMonth.types';\nimport type { ICalendarYear, ICalendarYearRange } from '../CalendarYear/CalendarYear.types';\n\nconst MONTHS_PER_ROW = 4;\n\nconst getClassNames = classNamesFunction();\n\nconst DEFAULT_PROPS: Readonly> = {\n styles: getStyles,\n strings: undefined,\n navigationIcons: defaultCalendarNavigationIcons,\n dateTimeFormatter: DEFAULT_DATE_FORMATTING,\n yearPickerHidden: false,\n};\n\nfunction useAnimateBackwards({ navigatedDate }: ICalendarMonthProps) {\n const currentYear = navigatedDate.getFullYear();\n const previousYear = usePrevious(currentYear);\n\n if (previousYear === undefined || previousYear === currentYear) {\n return undefined;\n } else {\n return previousYear > currentYear;\n }\n}\n\nfunction useFocusLogic({ componentRef }: ICalendarMonthProps) {\n const navigatedMonthRef = React.useRef(null);\n const calendarYearRef = React.useRef(null);\n const focusOnUpdate = React.useRef(false);\n\n const focus = React.useCallback(() => {\n if (calendarYearRef.current) {\n calendarYearRef.current.focus();\n } else if (navigatedMonthRef.current) {\n navigatedMonthRef.current.focus();\n }\n }, []);\n\n React.useImperativeHandle(componentRef, () => ({ focus }), [focus]);\n\n React.useEffect(() => {\n if (focusOnUpdate.current) {\n focus();\n focusOnUpdate.current = false;\n }\n });\n\n const focusOnNextUpdate = () => {\n focusOnUpdate.current = true;\n };\n\n return [navigatedMonthRef, calendarYearRef, focusOnNextUpdate] as const;\n}\n\nexport const CalendarMonthBase: React.FunctionComponent = propsWithoutDefaults => {\n const props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n const [navigatedMonthRef, calendarYearRef, focusOnNextUpdate] = useFocusLogic(props);\n const [isYearPickerVisible, setIsYearPickerVisible] = React.useState(false);\n\n const animateBackwards = useAnimateBackwards(props);\n\n const {\n navigatedDate,\n selectedDate,\n strings,\n today = new Date(),\n navigationIcons,\n dateTimeFormatter,\n minDate,\n maxDate,\n theme,\n styles,\n className,\n allFocusable,\n highlightCurrentMonth,\n highlightSelectedMonth,\n animationDirection,\n yearPickerHidden,\n onNavigateDate,\n } = props;\n\n const selectMonthCallback = (newMonth: number): (() => void) => {\n return () => onSelectMonth(newMonth);\n };\n\n const onSelectNextYear = (): void => {\n onNavigateDate(addYears(navigatedDate, 1), false);\n };\n\n const onSelectPrevYear = (): void => {\n onNavigateDate(addYears(navigatedDate, -1), false);\n };\n\n const onSelectMonth = (newMonth: number): void => {\n // If header is clickable the calendars are overlayed, switch back to day picker when month is clicked\n props.onHeaderSelect?.();\n onNavigateDate(setMonth(navigatedDate, newMonth), true);\n };\n\n const onHeaderSelect = (): void => {\n if (!yearPickerHidden) {\n focusOnNextUpdate();\n setIsYearPickerVisible(true);\n } else {\n props.onHeaderSelect?.();\n }\n };\n\n const onSelectYear = (selectedYear: number) => {\n focusOnNextUpdate();\n const navYear = navigatedDate.getFullYear();\n if (navYear !== selectedYear) {\n let 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 } else if (minDate && newNavigationDate < minDate) {\n newNavigationDate = setMonth(newNavigationDate, minDate.getMonth());\n }\n onNavigateDate(newNavigationDate, true);\n }\n setIsYearPickerVisible(false);\n };\n\n const onYearPickerHeaderSelect = (focus: boolean): void => {\n focusOnNextUpdate();\n setIsYearPickerVisible(false);\n };\n\n // navigationIcons has a default value in defaultProps, but typescript doesn't recognize this\n const leftNavigationIcon = navigationIcons!.leftNavigation;\n const rightNavigationIcon = navigationIcons!.rightNavigation;\n const dateFormatter = dateTimeFormatter!;\n\n // determine if previous/next years are in bounds\n const isPrevYearInBounds = minDate ? compareDatePart(minDate, getYearStart(navigatedDate)) < 0 : true;\n const isNextYearInBounds = maxDate ? compareDatePart(getYearEnd(navigatedDate), maxDate) < 0 : true;\n\n const classNames = getClassNames(styles, {\n theme: theme!,\n className,\n hasHeaderClickCallback: !!props.onHeaderSelect || !yearPickerHidden,\n highlightCurrent: highlightCurrentMonth,\n highlightSelected: highlightSelectedMonth,\n animateBackwards,\n animationDirection,\n });\n\n if (isYearPickerVisible) {\n const [onRenderYear, yearStrings] = getYearStrings(props);\n // use navigated date for the year picker\n return (\n \n );\n }\n\n const rowIndexes = [];\n for (let i = 0; i < strings.shortMonths.length / MONTHS_PER_ROW; i++) {\n rowIndexes.push(i);\n }\n\n const yearString = dateFormatter.formatYear(navigatedDate);\n const headerAriaLabel = strings.monthPickerHeaderAriaLabel\n ? format(strings.monthPickerHeaderAriaLabel, yearString)\n : yearString;\n\n return (\n
    \n
    \n \n \n {yearString}\n \n \n
    \n \n \n \n \n \n \n
    \n
    \n \n
    \n {rowIndexes.map((rowNum: number) => {\n const monthsForRow = strings.shortMonths.slice(rowNum * MONTHS_PER_ROW, (rowNum + 1) * MONTHS_PER_ROW);\n return (\n
    \n {monthsForRow.map((month: string, index: number) => {\n const monthIndex = rowNum * MONTHS_PER_ROW + index;\n const indexedMonth = setMonth(navigatedDate, monthIndex);\n const isNavigatedMonth = navigatedDate.getMonth() === monthIndex;\n const isSelectedMonth = selectedDate.getMonth() === monthIndex;\n const isSelectedYear = selectedDate.getFullYear() === navigatedDate.getFullYear();\n const isInBounds =\n (minDate ? compareDatePart(minDate, getMonthEnd(indexedMonth)) < 1 : true) &&\n (maxDate ? compareDatePart(getMonthStart(indexedMonth), maxDate) < 1 : true);\n\n return (\n \n {month}\n \n );\n })}\n
    \n );\n })}\n
    \n
    \n
    \n );\n};\nCalendarMonthBase.displayName = 'CalendarMonthBase';\n\nfunction getYearStrings({ strings, navigatedDate, dateTimeFormatter }: ICalendarMonthProps) {\n const yearToString = (year: number) => {\n if (dateTimeFormatter) {\n // create a date based on the current nav date\n const yearFormattingDate = new Date(navigatedDate.getTime());\n yearFormattingDate.setFullYear(year);\n return dateTimeFormatter.formatYear(yearFormattingDate);\n }\n return String(year);\n };\n\n const yearRangeToString = (yearRange: ICalendarYearRange) => {\n return `${yearToString(yearRange.fromYear)} - ${yearToString(yearRange.toYear)}`;\n };\n\n const yearRangeToNextDecadeLabel = (yearRange: ICalendarYearRange) => {\n return strings.nextYearRangeAriaLabel ? `${strings.nextYearRangeAriaLabel} ${yearRangeToString(yearRange)}` : '';\n };\n\n const yearRangeToPrevDecadeLabel = (yearRange: ICalendarYearRange) => {\n return strings.prevYearRangeAriaLabel ? `${strings.prevYearRangeAriaLabel} ${yearRangeToString(yearRange)}` : '';\n };\n\n return [\n yearToString,\n {\n rangeAriaLabel: yearRangeToString,\n prevRangeAriaLabel: yearRangeToPrevDecadeLabel,\n nextRangeAriaLabel: yearRangeToNextDecadeLabel,\n headerAriaLabelFormatString: strings.yearPickerHeaderAriaLabel,\n } as const,\n ] as const;\n}\n\nfunction isCurrentMonth(month: number, year: number, today: Date): boolean {\n return today.getFullYear() === year && today.getMonth() === month;\n}\n\nfunction onButtonKeyDown(callback: () => void): (ev: React.KeyboardEvent) => void {\n return (ev: React.KeyboardEvent) => {\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.enter:\n callback();\n break;\n }\n };\n}\n","import * as React from 'react';\nimport { CalendarMonthBase } from './CalendarMonth.base';\nimport { getStyles } from './CalendarMonth.styles';\nimport { styled } from '../../../Utilities';\nimport type { ICalendarMonthProps } from './CalendarMonth.types';\n\nexport const CalendarMonth: React.FunctionComponent = styled(\n CalendarMonthBase,\n getStyles,\n undefined,\n { scope: 'CalendarMonth' },\n);\n","import * as React from 'react';\nimport {\n DayOfWeek,\n FirstWeekOfYear,\n DateRangeType,\n addMonths,\n addYears,\n DEFAULT_CALENDAR_STRINGS,\n DEFAULT_DATE_FORMATTING,\n} from '@fluentui/date-time-utilities';\nimport { CalendarDay } from './CalendarDay/CalendarDay';\nimport { CalendarMonth } from './CalendarMonth/CalendarMonth';\nimport {\n css,\n KeyCodes,\n classNamesFunction,\n focusAsync,\n format,\n FocusRects,\n getPropsWithDefaults,\n getWindow,\n} from '@fluentui/utilities';\nimport { useControllableValue } from '@fluentui/react-hooks';\nimport { defaultCalendarNavigationIcons } from './defaults';\nimport type { ICalendarProps, ICalendarStyleProps, ICalendarStyles } from './Calendar.types';\nimport type { ICalendarDay } from './CalendarDay/CalendarDay.types';\nimport type { ICalendarMonth } from './CalendarMonth/CalendarMonth.types';\n\nconst MIN_SIZE_FORCE_OVERLAY = 440;\n\nconst getClassNames = classNamesFunction();\n\nconst defaultWorkWeekDays: DayOfWeek[] = [\n DayOfWeek.Monday,\n DayOfWeek.Tuesday,\n DayOfWeek.Wednesday,\n DayOfWeek.Thursday,\n DayOfWeek.Friday,\n];\n\nconst DEFAULT_PROPS: Partial = {\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};\n\nfunction useDateState(props: ICalendarProps) {\n const { value, today: todayProp, onSelectDate } = props;\n\n const today = React.useMemo(() => {\n if (todayProp === undefined) {\n return new Date();\n }\n return todayProp;\n }, [todayProp]);\n\n /** The currently selected date in the calendar */\n const [selectedDate = today, setSelectedDate] = useControllableValue(value, today);\n\n /** The currently focused date in the day picker, but not necessarily selected */\n const [navigatedDay = today, setNavigatedDay] = React.useState(value);\n\n /** The currently focused date in the month picker, but not necessarily selected */\n const [navigatedMonth = today, setNavigatedMonth] = React.useState(value);\n\n /** If using a controlled value, when that value changes, navigate to that date */\n const [lastSelectedDate = today, setLastSelectedDate] = React.useState(value);\n if (value && lastSelectedDate.valueOf() !== value.valueOf()) {\n setNavigatedDay(value);\n setNavigatedMonth(value);\n setLastSelectedDate(value);\n }\n\n const navigateMonth = (date: Date) => {\n setNavigatedMonth(date);\n };\n\n const navigateDay = (date: Date) => {\n setNavigatedMonth(date);\n setNavigatedDay(date);\n };\n\n const onDateSelected = (date: Date, selectedDateRangeArray?: Date[]) => {\n setNavigatedMonth(date);\n setNavigatedDay(date);\n setSelectedDate(date);\n onSelectDate?.(date, selectedDateRangeArray);\n };\n\n return [selectedDate, navigatedDay, navigatedMonth, onDateSelected, navigateDay, navigateMonth] as const;\n}\n\nfunction useVisibilityState(props: ICalendarProps) {\n /** State used to show/hide month picker */\n const [isMonthPickerVisible = true, setIsMonthPickerVisible] = useControllableValue(\n getShowMonthPickerAsOverlay(props) ? undefined : props.isMonthPickerVisible,\n false,\n );\n /** State used to show/hide day picker */\n const [isDayPickerVisible = true, setIsDayPickerVisible] = useControllableValue(\n getShowMonthPickerAsOverlay(props) ? undefined : props.isDayPickerVisible,\n true,\n );\n\n const toggleDayMonthPickerVisibility = () => {\n setIsMonthPickerVisible(!isMonthPickerVisible);\n setIsDayPickerVisible(!isDayPickerVisible);\n };\n\n return [isMonthPickerVisible, isDayPickerVisible, toggleDayMonthPickerVisibility] as const;\n}\n\nfunction useFocusLogic({ componentRef }: ICalendarProps, isDayPickerVisible: boolean, isMonthPickerVisible: boolean) {\n const dayPicker = React.useRef(null);\n const monthPicker = React.useRef(null);\n const focusOnUpdate = React.useRef(false);\n\n const focus = React.useCallback(() => {\n if (isDayPickerVisible && dayPicker.current) {\n focusAsync(dayPicker.current);\n } else if (isMonthPickerVisible && monthPicker.current) {\n focusAsync(monthPicker.current);\n }\n }, [isDayPickerVisible, isMonthPickerVisible]);\n\n React.useImperativeHandle(componentRef, () => ({ focus }), [focus]);\n\n React.useEffect(() => {\n if (focusOnUpdate.current) {\n focus();\n focusOnUpdate.current = false;\n }\n });\n\n const focusOnNextUpdate = () => {\n focusOnUpdate.current = true;\n };\n\n return [dayPicker, monthPicker, focusOnNextUpdate] as const;\n}\n\nexport const CalendarBase: React.FunctionComponent = React.forwardRef(\n (propsWithoutDefaults, forwardedRef) => {\n const props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n\n const [selectedDate, navigatedDay, navigatedMonth, onDateSelected, navigateDay, navigateMonth] =\n useDateState(props);\n const [isMonthPickerVisible, isDayPickerVisible, toggleDayMonthPickerVisibility] = useVisibilityState(props);\n const [dayPicker, monthPicker, focusOnNextUpdate] = useFocusLogic(props, isDayPickerVisible, isMonthPickerVisible);\n\n const renderGoToTodayButton = () => {\n let goTodayEnabled = showGoToToday;\n\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\n return (\n showGoToToday && (\n \n {strings!.goToToday}\n \n )\n );\n };\n\n const onNavigateDayDate = (date: Date, focusOnNavigatedDay: boolean): void => {\n navigateDay(date);\n if (focusOnNavigatedDay) {\n focusOnNextUpdate();\n }\n };\n\n const onNavigateMonthDate = (date: Date, focusOnNavigatedDay: boolean): void => {\n if (focusOnNavigatedDay) {\n focusOnNextUpdate();\n }\n\n if (!focusOnNavigatedDay) {\n navigateMonth(date);\n return;\n }\n\n if (monthPickerOnly) {\n onDateSelected(date);\n }\n\n navigateDay(date);\n };\n\n const onHeaderSelect = getShowMonthPickerAsOverlay(props)\n ? (): void => {\n toggleDayMonthPickerVisibility();\n\n focusOnNextUpdate();\n }\n : undefined;\n\n const onGotoToday = (): void => {\n navigateDay(today!);\n focusOnNextUpdate();\n };\n\n const onButtonKeyDown = (callback: () => void): ((ev: React.KeyboardEvent) => void) => {\n return (ev: React.KeyboardEvent) => {\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\n const onDatePickerPopupKeyDown = (ev: React.KeyboardEvent): void => {\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.enter:\n ev.preventDefault();\n break;\n\n case KeyCodes.backspace:\n ev.preventDefault();\n break;\n\n case KeyCodes.escape:\n props.onDismiss?.();\n break;\n\n case KeyCodes.pageUp:\n if (ev.ctrlKey) {\n // go to next year\n navigateDay(addYears(navigatedDay, 1));\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 } else {\n // go to previous month\n navigateDay(addMonths(navigatedDay, -1));\n }\n ev.preventDefault();\n break;\n default:\n break;\n }\n };\n const rootClass = 'ms-DatePicker';\n const {\n firstDayOfWeek,\n dateRangeType,\n strings,\n showGoToToday,\n highlightCurrentMonth,\n highlightSelectedMonth,\n navigationIcons,\n minDate,\n maxDate,\n restrictedDates,\n id,\n className,\n showCloseButton,\n allFocusable,\n styles,\n showWeekNumbers,\n theme,\n calendarDayProps,\n calendarMonthProps,\n dateTimeFormatter,\n today = new Date(),\n } = props;\n\n const showMonthPickerAsOverlay = getShowMonthPickerAsOverlay(props);\n\n const monthPickerOnly = !showMonthPickerAsOverlay && !isDayPickerVisible;\n const overlaidWithButton = showMonthPickerAsOverlay && showGoToToday;\n\n const classes = getClassNames(styles, {\n theme: theme!,\n className,\n isMonthPickerVisible,\n isDayPickerVisible,\n monthPickerOnly,\n showMonthPickerAsOverlay,\n overlaidWithButton,\n overlayedWithButton: overlaidWithButton,\n showGoToToday,\n showWeekNumbers,\n });\n\n let todayDateString: string = '';\n let selectedDateString: string = '';\n if (dateTimeFormatter && strings!.todayDateFormatString) {\n todayDateString = format(strings!.todayDateFormatString, dateTimeFormatter.formatMonthDayYear(today, strings!));\n }\n if (dateTimeFormatter && strings!.selectedDateFormatString) {\n const dateStringFormatter = monthPickerOnly\n ? dateTimeFormatter.formatMonthYear\n : dateTimeFormatter.formatMonthDayYear;\n selectedDateString = format(strings!.selectedDateFormatString, dateStringFormatter(selectedDate, strings!));\n }\n const selectionAndTodayString = selectedDateString + ', ' + todayDateString;\n\n return (\n \n
    \n {selectedDateString}\n
    \n {isDayPickerVisible && (\n \n )}\n {isDayPickerVisible && isMonthPickerVisible &&
    }\n {isMonthPickerVisible ? (\n
    \n \n {renderGoToTodayButton()}\n
    \n ) : (\n renderGoToTodayButton()\n )}\n \n
    \n );\n },\n);\nCalendarBase.displayName = 'CalendarBase';\n\nfunction getShowMonthPickerAsOverlay({ showMonthPickerAsOverlay, isDayPickerVisible }: ICalendarProps) {\n const win = getWindow();\n return showMonthPickerAsOverlay || (isDayPickerVisible && win && win.innerWidth <= MIN_SIZE_FORCE_OVERLAY);\n}\n","import { normalize, FontSizes, getFocusStyle, HighContrastSelector } from '@fluentui/style-utilities';\nimport type { ICalendarStyleProps, ICalendarStyles } from './Calendar.types';\n\nexport const styles = (props: ICalendarStyleProps): ICalendarStyles => {\n const { className, theme, isDayPickerVisible, isMonthPickerVisible, showWeekNumbers } = props;\n const { palette } = theme;\n\n let totalWidth = isDayPickerVisible && isMonthPickerVisible ? 440 : 220;\n if (showWeekNumbers && isDayPickerVisible) {\n totalWidth += 30;\n }\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', // explicitly specify for IE11\n selectors: {\n '& div': {\n fontSize: FontSizes.small,\n },\n '&:hover': {\n color: palette.themePrimary,\n backgroundColor: 'transparent',\n cursor: 'pointer',\n selectors: {\n [HighContrastSelector]: {\n outline: '1px solid Buttontext',\n borderRadius: '2px',\n },\n },\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","import * as React from 'react';\nimport { styled } from '@fluentui/utilities';\nimport { CalendarBase } from './Calendar.base';\nimport { styles } from './Calendar.styles';\nimport type { ICalendarProps } from './Calendar.types';\n\nexport const Calendar: React.FunctionComponent = styled(CalendarBase, styles, undefined, {\n scope: 'Calendar',\n});\n","import * as React from 'react';\nimport { Icon, FontIcon } from '../../Icon';\nimport { classNamesFunction } from '../../Utilities';\nimport type { ICheckProps, ICheckStyleProps, ICheckStyles } from './Check.types';\n\nconst getClassNames = classNamesFunction();\n\nexport const CheckBase: React.FunctionComponent = React.forwardRef(\n (props, ref) => {\n const { checked = false, className, theme, styles, useFastIcons = true } = props;\n\n const classNames = getClassNames(styles!, { theme: theme!, className, checked });\n const IconComponent = useFastIcons ? FontIcon : Icon;\n\n return (\n
    \n \n \n
    \n );\n },\n);\nCheckBase.displayName = 'CheckBase';\n","import { HighContrastSelector, getGlobalClassNames, IconFontSizes, getHighContrastNoAdjustStyle } from '../../Styling';\nimport { getRTL } from '../../Utilities';\nimport type { ICheckStyleProps, ICheckStyles } from './Check.types';\nimport type { IStyle } from '../../Styling';\n\nexport const 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};\n\nexport const getStyles = (props: ICheckStyleProps): ICheckStyles => {\n // eslint-disable-next-line deprecation/deprecation\n const { height = props.checkBoxHeight || '18px', checked, className, theme } = props;\n\n const { palette, semanticColors, fonts } = theme;\n const isRTL = getRTL(theme);\n\n const classNames = getGlobalClassNames(CheckGlobalClassNames, theme);\n\n const sharedCircleCheck: IStyle = {\n fontSize: height,\n position: 'absolute',\n left: 0,\n top: 0,\n width: height,\n 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\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,\n verticalAlign: 'top',\n position: 'relative',\n userSelect: 'none',\n\n selectors: {\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 [`.${classNames.checkHost}:hover &, .${classNames.checkHost}:focus &, &:hover, &:focus`]: {\n opacity: 1,\n },\n },\n },\n\n checked && [\n 'is-checked',\n {\n selectors: {\n ':before': {\n background: palette.themePrimary,\n opacity: 1,\n selectors: {\n [HighContrastSelector]: {\n background: 'Window',\n },\n },\n },\n },\n },\n ],\n className,\n ],\n\n circle: [\n classNames.circle,\n sharedCircleCheck,\n\n {\n color: palette.neutralSecondary,\n\n selectors: {\n [HighContrastSelector]: {\n color: 'WindowText',\n },\n },\n },\n\n checked && {\n color: palette.white,\n },\n ],\n\n check: [\n classNames.check,\n sharedCircleCheck,\n\n {\n opacity: 0,\n color: palette.neutralSecondary,\n fontSize: IconFontSizes.medium,\n left: isRTL ? '-0.5px' : '.5px', // for centering the check icon inside the circle.\n top: '-1px', // the check is slightly lower than center compared to the circle.\n\n selectors: {\n ':hover': {\n opacity: 1,\n },\n\n [HighContrastSelector]: {\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\n\n checked && {\n opacity: 1,\n color: palette.white,\n fontWeight: 900,\n\n selectors: {\n [HighContrastSelector]: {\n border: 'none',\n color: 'WindowText',\n },\n },\n },\n ],\n\n checkHost: classNames.checkHost,\n };\n};\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { CheckBase } from './Check.base';\nimport { getStyles } from './Check.styles';\nimport type { ICheckProps, ICheckStyleProps, ICheckStyles } from './Check.types';\n\nexport const Check: React.FunctionComponent = styled(\n CheckBase,\n getStyles,\n undefined,\n {\n scope: 'Check',\n },\n true,\n);\n","import * as React from 'react';\nimport { useControllableValue, useId, useMergedRefs, useWarnings } from '@fluentui/react-hooks';\nimport { useFocusRects, classNamesFunction } from '@fluentui/utilities';\nimport { Icon } from '../Icon/Icon';\nimport type { ICheckboxProps, ICheckboxStyleProps, ICheckboxStyles } from './Checkbox.types';\n\nconst getClassNames = classNamesFunction();\n\nexport const CheckboxBase: React.FunctionComponent = React.forwardRef(\n (props, forwardedRef) => {\n const {\n disabled,\n required,\n inputProps,\n name,\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy,\n ariaPositionInSet,\n ariaSetSize,\n title,\n checkmarkIconProps,\n styles,\n theme,\n className,\n boxSide = 'start',\n } = props;\n\n const id = useId('checkbox-', props.id);\n\n const rootRef = React.useRef(null);\n const mergedRootRefs: React.Ref = useMergedRefs(rootRef, forwardedRef);\n const inputRef = React.useRef(null);\n\n const [isChecked, setIsChecked] = useControllableValue(props.checked, props.defaultChecked, props.onChange);\n const [isIndeterminate, setIsIndeterminate] = useControllableValue(props.indeterminate, props.defaultIndeterminate);\n\n useFocusRects(rootRef);\n useDebugWarning(props);\n\n const classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n disabled,\n indeterminate: isIndeterminate,\n checked: isChecked,\n reversed: boxSide !== 'start',\n isUsingCustomLabelRender: !!props.onRenderLabel,\n });\n\n const onChange = React.useCallback(\n (event: React.ChangeEvent): void => {\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, event);\n setIsIndeterminate(false);\n } else {\n setIsChecked(!isChecked, event);\n }\n },\n [setIsChecked, setIsIndeterminate, isIndeterminate, isChecked],\n );\n\n const defaultLabelRenderer = React.useCallback(\n (checkboxProps?: ICheckboxProps): JSX.Element | null => {\n if (!checkboxProps) {\n return null;\n }\n return checkboxProps.label ? (\n \n {checkboxProps.label}\n \n ) : null;\n },\n [classNames.text],\n );\n\n const setNativeIndeterminate = React.useCallback(\n (indeterminate: boolean | undefined) => {\n if (!inputRef.current) {\n return;\n }\n\n const value = !!indeterminate;\n\n inputRef.current.indeterminate = value;\n setIsIndeterminate(value);\n },\n [setIsIndeterminate],\n );\n\n useComponentRef(props, isChecked, isIndeterminate, setNativeIndeterminate, inputRef);\n React.useEffect(() => setNativeIndeterminate(isIndeterminate), [setNativeIndeterminate, isIndeterminate]);\n\n const onRenderLabel = props.onRenderLabel || defaultLabelRenderer;\n\n const ariaChecked: React.InputHTMLAttributes['aria-checked'] = isIndeterminate\n ? 'mixed'\n : undefined;\n\n const mergedInputProps: React.InputHTMLAttributes = {\n className: classNames.input,\n type: 'checkbox' as React.InputHTMLAttributes['type'],\n ...inputProps,\n checked: !!isChecked,\n disabled,\n required,\n name,\n id,\n title,\n onChange,\n 'aria-disabled': disabled,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-posinset': ariaPositionInSet,\n 'aria-setsize': ariaSetSize,\n 'aria-checked': ariaChecked,\n };\n\n return (\n
    \n \n \n
    \n );\n },\n);\n\nCheckboxBase.displayName = 'CheckboxBase';\n\nfunction useDebugWarning(props: ICheckboxProps) {\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,\n mutuallyExclusive: {\n checked: 'defaultChecked',\n indeterminate: 'defaultIndeterminate',\n },\n });\n }\n}\n\nfunction useComponentRef(\n props: ICheckboxProps,\n isChecked: boolean | undefined,\n isIndeterminate: boolean | undefined,\n setIndeterminate: (indeterminate: boolean) => void,\n checkBoxRef: React.RefObject,\n) {\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n get checked() {\n return !!isChecked;\n },\n get indeterminate() {\n return !!isIndeterminate;\n },\n set indeterminate(indeterminate: boolean) {\n setIndeterminate(indeterminate);\n },\n focus() {\n if (checkBoxRef.current) {\n checkBoxRef.current.focus();\n }\n },\n }),\n [checkBoxRef, isChecked, isIndeterminate, setIndeterminate],\n );\n}\n","import { HighContrastSelector, getGlobalClassNames, getHighContrastNoAdjustStyle } from '@fluentui/style-utilities';\nimport { IsFocusVisibleClassName } from '@fluentui/utilities';\nimport type { ICheckboxStyleProps, ICheckboxStyles } from './Checkbox.types';\nimport type { IStyle } from '@fluentui/style-utilities';\n\nconst 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};\n\nconst MS_CHECKBOX_LABEL_SIZE = '20px';\nconst MS_CHECKBOX_TRANSITION_DURATION = '200ms';\nconst MS_CHECKBOX_TRANSITION_TIMING = 'cubic-bezier(.4, 0, .23, 1)';\n\nexport const getStyles = (props: ICheckboxStyleProps): ICheckboxStyles => {\n const { className, theme, reversed, checked, disabled, isUsingCustomLabelRender, indeterminate } = props;\n const { semanticColors, effects, palette, fonts } = theme;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n const checkmarkFontColor = semanticColors.inputForegroundChecked;\n // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.inputBorder\n const checkmarkFontColorHovered = palette.neutralSecondary;\n // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.smallInputBorder\n const checkboxBorderColor = palette.neutralPrimary;\n const checkboxBorderIndeterminateColor = semanticColors.inputBackgroundChecked;\n const checkboxBorderColorChecked = semanticColors.inputBackgroundChecked;\n const checkboxBorderColorDisabled = semanticColors.disabledBodySubtext;\n const checkboxBorderHoveredColor = semanticColors.inputBorderHovered;\n const checkboxBorderIndeterminateHoveredColor = semanticColors.inputBackgroundCheckedHovered;\n const checkboxBackgroundChecked = semanticColors.inputBackgroundChecked;\n // TODO: after updating the semanticColors slots mapping the following 2 tokens need to be\n // semanticColors.inputBackgroundCheckedHovered\n const checkboxBackgroundCheckedHovered = semanticColors.inputBackgroundCheckedHovered;\n const checkboxBorderColorCheckedHovered = semanticColors.inputBackgroundCheckedHovered;\n const checkboxHoveredTextColor = semanticColors.inputTextHovered;\n const checkboxBackgroundDisabledChecked = semanticColors.disabledBodySubtext;\n const checkboxTextColor = semanticColors.bodyText;\n const checkboxTextColorDisabled = semanticColors.disabledText;\n\n const indeterminateDotStyles: IStyle = [\n {\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 [HighContrastSelector]: {\n borderColor: 'WindowText',\n },\n },\n ];\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 && {\n [`:hover .${classNames.checkbox}`]: {\n borderColor: checkboxBorderHoveredColor,\n [HighContrastSelector]: {\n borderColor: 'Highlight',\n },\n },\n [`:focus .${classNames.checkbox}`]: { borderColor: checkboxBorderHoveredColor },\n [`:hover .${classNames.checkmark}`]: {\n color: checkmarkFontColorHovered,\n opacity: '1',\n [HighContrastSelector]: {\n color: 'Highlight',\n },\n },\n },\n checked &&\n !indeterminate && {\n [`:hover .${classNames.checkbox}`]: {\n background: checkboxBackgroundCheckedHovered,\n borderColor: checkboxBorderColorCheckedHovered,\n },\n [`:focus .${classNames.checkbox}`]: {\n background: checkboxBackgroundCheckedHovered,\n borderColor: checkboxBorderColorCheckedHovered,\n },\n [HighContrastSelector]: {\n [`:hover .${classNames.checkbox}`]: {\n background: 'Highlight',\n borderColor: 'Highlight',\n },\n [`:focus .${classNames.checkbox}`]: {\n background: 'Highlight',\n },\n [`:focus:hover .${classNames.checkbox}`]: {\n background: 'Highlight',\n },\n [`:focus:hover .${classNames.checkmark}`]: {\n color: 'Window',\n },\n [`:hover .${classNames.checkmark}`]: {\n color: 'Window',\n },\n },\n },\n indeterminate && {\n [`:hover .${classNames.checkbox}, :hover .${classNames.checkbox}:after`]: {\n borderColor: checkboxBorderIndeterminateHoveredColor,\n [HighContrastSelector]: {\n borderColor: 'WindowText',\n },\n },\n [`:focus .${classNames.checkbox}`]: {\n borderColor: checkboxBorderIndeterminateHoveredColor,\n },\n [`:hover .${classNames.checkmark}`]: {\n opacity: '0',\n },\n },\n {\n [`:hover .${classNames.text}, :focus .${classNames.text}`]: {\n color: checkboxHoveredTextColor,\n [HighContrastSelector]: {\n color: disabled ? 'GrayText' : 'WindowText',\n },\n },\n },\n ],\n className,\n ],\n input: {\n position: 'absolute',\n background: 'none',\n\n opacity: 0,\n // eslint-disable-next-line @fluentui/max-len\n [`.${IsFocusVisibleClassName} &:focus + label::before, :host(.${IsFocusVisibleClassName}) &:focus + label::before`]:\n {\n outline: '1px solid ' + theme.palette.neutralSecondary,\n outlineOffset: '2px',\n [HighContrastSelector]: {\n outline: '1px solid WindowText',\n },\n },\n },\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 {\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\n /* in case the icon is bigger than the box */\n overflow: 'hidden',\n ':after': indeterminate ? indeterminateDotStyles : null,\n [HighContrastSelector]: {\n borderColor: 'WindowText',\n ...getHighContrastNoAdjustStyle(),\n },\n },\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 && {\n background: checkboxBackgroundChecked,\n borderColor: checkboxBorderColorChecked,\n [HighContrastSelector]: {\n background: 'Highlight',\n borderColor: 'Highlight',\n },\n },\n disabled && {\n borderColor: checkboxBorderColorDisabled,\n [HighContrastSelector]: {\n borderColor: 'GrayText',\n },\n },\n checked &&\n disabled && {\n background: checkboxBackgroundDisabledChecked,\n borderColor: checkboxBorderColorDisabled,\n [HighContrastSelector]: {\n background: 'Window',\n },\n },\n ],\n checkmark: [\n classNames.checkmark,\n {\n opacity: checked && !indeterminate ? '1' : '0',\n color: checkmarkFontColor,\n [HighContrastSelector]: {\n color: disabled ? 'GrayText' : 'Window',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n ],\n text: [\n classNames.text,\n {\n color: disabled ? checkboxTextColorDisabled : checkboxTextColor,\n fontSize: fonts.medium.fontSize,\n lineHeight: '20px',\n [HighContrastSelector]: {\n color: disabled ? 'GrayText' : 'WindowText',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n !reversed\n ? {\n marginLeft: 4,\n }\n : {\n marginRight: 4,\n },\n ],\n };\n};\n","import * as React from 'react';\nimport { styled } from '@fluentui/utilities';\nimport { CheckboxBase } from './Checkbox.base';\nimport { getStyles } from './Checkbox.styles';\nimport type { ICheckboxProps, ICheckboxStyleProps, ICheckboxStyles } from './Checkbox.types';\n\nexport const Checkbox: React.FunctionComponent = styled<\n ICheckboxProps,\n ICheckboxStyleProps,\n ICheckboxStyles\n>(CheckboxBase, getStyles, undefined, { scope: 'Checkbox' });\n","import * as React from 'react';\nimport { divProperties, getNativeProps } from '../../Utilities';\nimport { classNamesFunction } from '../../Utilities';\nimport type { ILabelProps, ILabelStyleProps, ILabelStyles } from './Label.types';\n\nconst 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});\n\nexport class LabelBase extends React.Component {\n public render(): JSX.Element {\n const { as: RootType = 'label', children, className, disabled, styles, required, theme } = this.props;\n const classNames = getClassNames(styles, {\n className,\n disabled,\n required,\n theme: theme!,\n });\n return (\n \n {children}\n \n );\n }\n}\n","import { HighContrastSelector, FontWeights, getHighContrastNoAdjustStyle } from '../../Styling';\nimport type { ILabelStyleProps, ILabelStyles } from './Label.types';\n\nexport const getStyles = (props: ILabelStyleProps): ILabelStyles => {\n const { theme, className, disabled, required } = props;\n const { semanticColors } = theme;\n\n // Tokens\n const labelFontWeight = FontWeights.semibold;\n const labelColor = semanticColors.bodyText;\n const labelDisabledColor = semanticColors.disabledBodyText;\n const labelRequiredStarColor = semanticColors.errorText;\n\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: {\n [HighContrastSelector]: {\n color: 'GrayText',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\n required && {\n selectors: {\n '::after': {\n content: `' *'`,\n color: labelRequiredStarColor,\n paddingRight: 12,\n },\n },\n },\n className,\n ],\n };\n};\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { LabelBase } from './Label.base';\nimport { getStyles } from './Label.styles';\nimport type { ILabelProps, ILabelStyleProps, ILabelStyles } from './Label.types';\n\nexport const Label: React.FunctionComponent = styled(\n LabelBase,\n getStyles,\n undefined,\n {\n scope: 'Label',\n },\n);\n","import * as React from 'react';\nimport { Image } from '../../../Image';\nimport { Icon } from '../../../Icon';\nimport {\n classNamesFunction,\n getNativeProps,\n inputProperties,\n css,\n composeRenderFunction,\n getPropsWithDefaults,\n} from '../../../Utilities';\nimport type {\n IChoiceGroupOptionProps,\n IChoiceGroupOptionStyleProps,\n IChoiceGroupOptionStyles,\n} from './ChoiceGroupOption.types';\n\nconst getClassNames = classNamesFunction();\n\nconst LARGE_IMAGE_SIZE = 71;\n\nconst DEFAULT_PROPS: Partial = {\n // This ensures default imageSize value doesn't mutate. Mutation can cause style re-calcuation.\n imageSize: { width: 32, height: 32 },\n};\n\nexport const ChoiceGroupOptionBase: React.FunctionComponent = 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 const props = getPropsWithDefaults({ ...DEFAULT_PROPS, key: propsWithoutDefaults.itemKey }, propsWithoutDefaults);\n\n const {\n ariaLabel,\n focused,\n required,\n theme,\n iconProps,\n imageSrc,\n imageSize,\n disabled,\n checked,\n id,\n styles,\n name,\n ...rest\n } = props;\n\n const classNames = getClassNames(styles!, {\n theme: theme!,\n hasIcon: !!iconProps,\n hasImage: !!imageSrc,\n checked,\n disabled,\n imageIsLarge: !!imageSrc && (imageSize!.width > LARGE_IMAGE_SIZE || imageSize!.height > LARGE_IMAGE_SIZE),\n imageSize,\n focused,\n });\n\n const { className, ...nativeProps } = getNativeProps<{ className: string }>(rest, inputProperties);\n\n const defaultOnRenderLabel = (): JSX.Element => {\n return (\n \n {props.text}\n \n );\n };\n\n const defaultOnRenderField = (): JSX.Element => {\n const { imageAlt = '', selectedImageSrc } = props;\n\n const onRenderLabel = props.onRenderLabel\n ? composeRenderFunction(props.onRenderLabel, defaultOnRenderLabel)\n : defaultOnRenderLabel;\n\n const label = onRenderLabel({ ...props, key: props.itemKey });\n\n return (\n \n );\n };\n\n const { onRenderField = defaultOnRenderField } = props;\n\n const onChange = (evt: React.FormEvent): void => {\n props.onChange?.(evt, { ...props, key: props.itemKey });\n };\n\n const onBlur = (evt: React.FocusEvent) => {\n props.onBlur?.(evt);\n };\n\n const onFocus = (evt: React.FocusEvent) => {\n props.onFocus?.(evt, { ...props, key: props.itemKey });\n };\n\n return (\n
    \n
    \n \n {onRenderField({ ...props, key: props.itemKey }, defaultOnRenderField)}\n
    \n
    \n );\n};\nChoiceGroupOptionBase.displayName = 'ChoiceGroupOption';\n","import { HighContrastSelector, getGlobalClassNames, getHighContrastNoAdjustStyle } from '../../../Styling';\nimport { IsFocusVisibleClassName } from '../../../Utilities';\nimport type { IStyle } from '../../../Styling';\nimport type { IChoiceGroupOptionStyleProps, IChoiceGroupOptionStyles } from './ChoiceGroupOption.types';\n\nconst 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};\n\nconst labelWrapperLineHeight = 15;\nconst labelWrapperHeight = labelWrapperLineHeight * 2 + 2; // adding 2px height to ensure text doesn't get cutoff\nconst iconSize = 32;\nconst choiceFieldSize = 20;\nconst choiceFieldTransitionDuration = '200ms';\nconst choiceFieldTransitionTiming = 'cubic-bezier(.4, 0, .23, 1)';\nconst radioButtonSpacing = 3;\nconst radioButtonInnerSize = 5;\n\nfunction getChoiceGroupFocusStyle(focusBorderColor: string, hasIconOrImage?: boolean): IStyle {\n return [\n 'is-inFocus',\n {\n selectors: {\n [`.${IsFocusVisibleClassName} &, :host(.${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: {\n [HighContrastSelector]: {\n borderColor: 'WindowText',\n borderWidth: hasIconOrImage ? 1 : 2,\n },\n },\n },\n },\n },\n },\n },\n ];\n}\n\nfunction getImageWrapperStyle(isSelectedImageWrapper: boolean, className?: string, checked?: boolean): IStyle {\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}\n\nexport const getStyles = (props: IChoiceGroupOptionStyleProps): IChoiceGroupOptionStyles => {\n const { theme, hasIcon, hasImage, checked, disabled, imageIsLarge, focused, imageSize } = props;\n const { palette, semanticColors, fonts } = theme;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n // Tokens\n // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.smallInputBorder\n const circleBorderColor = palette.neutralPrimary;\n const circleHoveredBorderColor = semanticColors.inputBorderHovered;\n const circleCheckedBorderColor = semanticColors.inputBackgroundChecked;\n // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.inputBackgroundCheckedHovered\n const circleCheckedHoveredBorderColor = palette.themeDark;\n const circleDisabledBorderColor = semanticColors.disabledBodySubtext;\n const circleBackgroundColor = semanticColors.bodyBackground;\n const dotUncheckedHoveredColor = palette.neutralSecondary;\n const dotCheckedColor = semanticColors.inputBackgroundChecked;\n // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.inputBackgroundCheckedHovered\n const dotCheckedHoveredColor = palette.themeDark;\n const dotDisabledColor = semanticColors.disabledBodySubtext;\n // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.bodyTextChecked\n const labelHoverFocusColor = palette.neutralDark;\n const focusBorderColor = semanticColors.focusBorder;\n const iconOrImageChoiceBorderUncheckedHoveredColor = semanticColors.inputBorderHovered;\n // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.inputBackgroundCheckedHovered\n const iconOrImageChoiceBorderCheckedColor = semanticColors.inputBackgroundChecked;\n const iconOrImageChoiceBorderCheckedHoveredColor = palette.themeDark;\n const iconOrImageChoiceBackgroundColor = palette.neutralLighter;\n\n const 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\n const enabledFieldWithImageHoverOrFocusProperties = {\n borderColor: checked ? iconOrImageChoiceBorderCheckedHoveredColor : iconOrImageChoiceBorderUncheckedHoveredColor,\n selectors: {\n ':before': {\n opacity: 1,\n borderColor: checked ? circleCheckedHoveredBorderColor : circleHoveredBorderColor,\n },\n },\n };\n\n const circleAreaProperties: IStyle = [\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: {\n [HighContrastSelector]: {\n borderColor: 'GrayText',\n background: 'Window',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\n checked && {\n borderColor: disabled ? circleDisabledBorderColor : circleCheckedBorderColor,\n selectors: {\n [HighContrastSelector]: {\n borderColor: 'Highlight',\n background: 'Window',\n forcedColorAdjust: 'none',\n },\n },\n },\n (hasIcon || hasImage) && {\n top: radioButtonSpacing,\n right: radioButtonSpacing,\n left: 'auto', // To reset the value of 'left' to its default value, so that 'right' works\n opacity: checked ? 1 : 0,\n },\n ];\n\n const dotAreaProperties: IStyle = [\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: {\n [HighContrastSelector]: {\n borderColor: 'Highlight',\n forcedColorAdjust: 'none',\n },\n },\n },\n checked &&\n (hasIcon || hasImage) && {\n top: radioButtonSpacing + radioButtonInnerSize,\n right: radioButtonSpacing + radioButtonInnerSize,\n left: 'auto', // To reset the value of 'left' to its default value, so that 'right' works\n },\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\n // The circle\n ':before': circleAreaProperties,\n\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: {\n [HighContrastSelector]: {\n color: 'GrayText',\n ...getHighContrastNoAdjustStyle(),\n },\n },\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: {\n [HighContrastSelector]: {\n color: 'GrayText',\n opacity: 1,\n },\n },\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","import * as React from 'react';\nimport { styled } from '../../../Utilities';\nimport { ChoiceGroupOptionBase } from './ChoiceGroupOption.base';\nimport { getStyles } from './ChoiceGroupOption.styles';\nimport type {\n IChoiceGroupOptionProps,\n IChoiceGroupOptionStyleProps,\n IChoiceGroupOptionStyles,\n} from './ChoiceGroupOption.types';\n\nexport const ChoiceGroupOption: React.FunctionComponent = styled<\n IChoiceGroupOptionProps,\n IChoiceGroupOptionStyleProps,\n IChoiceGroupOptionStyles\n>(ChoiceGroupOptionBase, getStyles, undefined, { scope: 'ChoiceGroupOption' });\n","import * as React from 'react';\nimport { Label } from '../../Label';\nimport {\n classNamesFunction,\n find,\n FocusRectsContext,\n getNativeProps,\n divProperties,\n setFocusVisibility,\n useFocusRects,\n} from '../../Utilities';\nimport { ChoiceGroupOption } from './ChoiceGroupOption/index';\nimport { useId, useControllableValue, useMergedRefs, useWarnings } from '@fluentui/react-hooks';\nimport type { IRefObject } from '../../Utilities';\nimport type {\n IChoiceGroupOption,\n IChoiceGroupProps,\n IChoiceGroupStyleProps,\n IChoiceGroupStyles,\n IChoiceGroup,\n} from './ChoiceGroup.types';\nimport type { IChoiceGroupOptionProps } from './ChoiceGroupOption/ChoiceGroupOption.types';\nimport { useDocumentEx } from '../../utilities/dom';\n\nconst getClassNames = classNamesFunction();\n\nconst getOptionId = (option: IChoiceGroupOption, id: string): string => {\n return `${id}-${option.key}`;\n};\n\nconst findOption = (options: IChoiceGroupOption[], key: IChoiceGroupProps['selectedKey']) => {\n return key === undefined ? undefined : find(options, value => value.key === key);\n};\n\nconst focusSelectedOption = (\n options: IChoiceGroupOption[],\n keyChecked: IChoiceGroupProps['selectedKey'],\n id: string,\n focusProviders?: React.RefObject[],\n doc?: Document,\n) => {\n const optionToFocus = findOption(options, keyChecked) || options.filter(option => !option.disabled)[0];\n const elementToFocus = optionToFocus && doc?.getElementById(getOptionId(optionToFocus, id));\n\n if (elementToFocus) {\n elementToFocus.focus();\n setFocusVisibility(true, elementToFocus as Element, focusProviders);\n }\n};\n\nconst focusFromFocusTrapZone = (evt: React.FocusEvent): boolean => {\n return evt.relatedTarget instanceof HTMLElement && evt.relatedTarget.dataset.isFocusTrapZoneBumper === 'true';\n};\n\nconst useComponentRef = (\n options: IChoiceGroupOption[],\n keyChecked: IChoiceGroupProps['selectedKey'],\n id: string,\n componentRef?: IRefObject,\n focusProviders?: React.RefObject[],\n) => {\n const doc = useDocumentEx();\n React.useImperativeHandle(\n componentRef,\n () => ({\n get checkedOption() {\n return findOption(options, keyChecked);\n },\n focus() {\n focusSelectedOption(options, keyChecked, id, focusProviders, doc);\n },\n }),\n [options, keyChecked, id, focusProviders, doc],\n );\n};\n\nconst COMPONENT_NAME = 'ChoiceGroup';\n\nexport const ChoiceGroupBase: React.FunctionComponent = React.forwardRef<\n HTMLDivElement,\n IChoiceGroupProps\n>((props, forwardedRef) => {\n const {\n className,\n theme,\n styles,\n options = [],\n label,\n required,\n disabled,\n name,\n defaultSelectedKey,\n componentRef,\n onChange,\n } = props;\n const id = useId('ChoiceGroup');\n const labelId = useId('ChoiceGroupLabel');\n\n const divProps = getNativeProps>(props, divProperties, [\n 'onChange',\n 'className',\n 'required',\n ]);\n\n const classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n optionsContainIconOrImage: options.some(option => !!(option.iconProps || option.imageSrc)),\n });\n\n const ariaLabelledBy = props.ariaLabelledBy || (label ? labelId : props['aria-labelledby']);\n\n const [keyChecked, setKeyChecked] = useControllableValue(props.selectedKey, defaultSelectedKey);\n const [keyFocused, setKeyFocused] = React.useState();\n\n const rootRef = React.useRef(null);\n const mergedRootRefs: React.Ref = useMergedRefs(rootRef, forwardedRef);\n\n const focusContext = React.useContext(FocusRectsContext);\n\n useDebugWarnings(props);\n useComponentRef(options, keyChecked, id, componentRef, focusContext?.registeredProviders);\n useFocusRects(rootRef);\n\n const onFocus = React.useCallback((ev?: React.FocusEvent, option?: IChoiceGroupOptionProps) => {\n if (option) {\n setKeyFocused(option.itemKey);\n option.onFocus?.(ev);\n }\n }, []);\n\n const onBlur = React.useCallback((ev: React.FocusEvent, option?: IChoiceGroupOptionProps) => {\n setKeyFocused(undefined);\n option?.onBlur?.(ev);\n }, []);\n\n const onOptionChange = React.useCallback(\n (evt?: React.FormEvent, option?: IChoiceGroupOptionProps) => {\n if (!option) {\n return;\n }\n setKeyChecked(option.itemKey);\n\n option.onChange?.(evt);\n onChange?.(evt, findOption(options, option.itemKey));\n },\n [onChange, options, setKeyChecked],\n );\n\n const onRadioFocus = React.useCallback(\n (evt: React.FocusEvent) => {\n // Handles scenarios like this bug: https://github.com/microsoft/fluentui/issues/20173\n if (focusFromFocusTrapZone(evt)) {\n focusSelectedOption(options, keyChecked, id, focusContext?.registeredProviders);\n }\n },\n [options, keyChecked, id, focusContext],\n );\n\n return (\n
    \n
    \n {label && (\n \n )}\n
    \n {options.map((option: IChoiceGroupOption) => {\n return (\n \n );\n })}\n
    \n
    \n
    \n );\n});\nChoiceGroupBase.displayName = COMPONENT_NAME;\n\nfunction useDebugWarnings(props: IChoiceGroupProps) {\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,\n mutuallyExclusive: {\n selectedKey: 'defaultSelectedKey',\n },\n });\n }\n}\n","import { getGlobalClassNames } from '../../Styling';\nimport type { IChoiceGroupStyleProps, IChoiceGroupStyles } from './ChoiceGroup.types';\n\nconst GlobalClassNames = {\n root: 'ms-ChoiceFieldGroup',\n flexContainer: 'ms-ChoiceFieldGroup-flexContainer',\n};\n\nexport const getStyles = (props: IChoiceGroupStyleProps): IChoiceGroupStyles => {\n const { className, optionsContainIconOrImage, theme } = props;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\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","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { ChoiceGroupBase } from './ChoiceGroup.base';\nimport { getStyles } from './ChoiceGroup.styles';\nimport type { IChoiceGroupProps, IChoiceGroupStyles, IChoiceGroupStyleProps } from './ChoiceGroup.types';\n\nexport const ChoiceGroup: React.FunctionComponent = styled<\n IChoiceGroupProps,\n IChoiceGroupStyleProps,\n IChoiceGroupStyles\n>(ChoiceGroupBase, getStyles, undefined, { scope: 'ChoiceGroup' });\n","export const MAX_COLOR_SATURATION = 100;\nexport const MAX_COLOR_HUE = 359;\nexport const MAX_COLOR_VALUE = 100;\nexport const MAX_COLOR_RGB = 255;\n/** @deprecated Use MAX_COLOR_RGB (255) or MAX_COLOR_ALPHA (100) */\nexport const MAX_COLOR_RGBA = MAX_COLOR_RGB;\nexport const MAX_COLOR_ALPHA = 100;\n\n/** Minimum length for a hexadecimal color string (not including the #) */\nexport const MIN_HEX_LENGTH = 3;\n/** Maximum length for a hexadecimal color string (not including the #) */\nexport const MAX_HEX_LENGTH = 6;\n/** Minimum length for a string of an RGBA color component */\nexport const MIN_RGBA_LENGTH = 1;\n/** Maximum length for a string of an RGBA color component */\nexport const MAX_RGBA_LENGTH = 3;\n\n/** Regular expression matching only valid hexadecimal chars */\nexport const HEX_REGEX = /^[\\da-f]{0,6}$/i;\n/** Regular expression matching only numbers */\nexport const RGBA_REGEX = /^\\d{0,3}$/;\n","import type { IHSV } from './interfaces';\n\n/** Converts HSL components to an HSV color. */\nexport function hsl2hsv(h: number, s: number, l: number): IHSV {\n s *= (l < 50 ? l : 100 - l) / 100;\n const v = l + s;\n\n return {\n h,\n s: v === 0 ? 0 : ((2 * s) / v) * 100,\n v,\n };\n}\n","import { MAX_COLOR_RGB } from './consts';\nimport type { IRGB } from './interfaces';\n\n/** Converts HSV components to an RGB color. Does not set the alpha value. */\nexport function hsv2rgb(h: number, s: number, v: number): IRGB {\n s = s / 100;\n v = v / 100;\n\n let rgb: number[] = [];\n\n const c = v * s;\n const hh = h / 60;\n const x = c * (1 - Math.abs((hh % 2) - 1));\n const m = v - c;\n\n switch (Math.floor(hh)) {\n case 0:\n rgb = [c, x, 0];\n break;\n\n case 1:\n rgb = [x, c, 0];\n break;\n\n case 2:\n rgb = [0, c, x];\n break;\n\n case 3:\n rgb = [0, x, c];\n break;\n\n case 4:\n rgb = [x, 0, c];\n break;\n\n case 5:\n rgb = [c, 0, x];\n break;\n }\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","import { hsl2hsv } from './hsl2hsv';\nimport { hsv2rgb } from './hsv2rgb';\nimport type { IRGB } from './interfaces';\n\n/** Converts HSL components to an RGB color. Does not set the alpha value. */\nexport function hsl2rgb(h: number, s: number, l: number): IRGB {\n const hsv = hsl2hsv(h, s, l);\n\n return hsv2rgb(hsv.h, hsv.s, hsv.v);\n}\n","import { getDocument } from '@fluentui/utilities';\nimport { MAX_COLOR_ALPHA } from './consts';\nimport { hsl2rgb } from './hsl2rgb';\nimport type { IRGB } from './interfaces';\n\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?: string, doc?: Document): IRGB | undefined {\n if (!color) {\n return undefined;\n }\n\n const theDoc = doc ?? getDocument()!;\n\n // Need to check the following valid color formats: RGB(A), HSL(A), hex, named color\n\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 const easyColor: IRGB | undefined = _rgba(color) || _hex6(color) || _hex3(color) || _hsla(color);\n if (easyColor) {\n return easyColor;\n }\n\n // if the above fails, do the more expensive catch-all\n return _browserCompute(color, theDoc);\n}\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: string, doc: Document): IRGB | undefined {\n if (typeof doc === 'undefined') {\n // don't throw an error when used server-side\n return undefined;\n }\n const elem = doc.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 doc.body.appendChild(elem);\n const eComputedStyle = doc.defaultView?.getComputedStyle(elem);\n const computedColor = eComputedStyle && eComputedStyle.backgroundColor;\n doc.body.removeChild(elem);\n // computedColor is always an RGB(A) string, except for invalid colors in IE/Edge which return 'transparent'\n\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\n return _rgba(computedColor);\n}\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?: string | null): IRGB | undefined {\n if (!str) {\n return undefined;\n }\n\n const match = str.match(/^rgb(a?)\\(([\\d., ]+)\\)$/);\n if (match) {\n const hasAlpha = !!match[1];\n const expectedPartCount = hasAlpha ? 4 : 3;\n const parts = match[2].split(/ *, */).map(Number);\n\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/**\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: string): IRGB | undefined {\n const match = str.match(/^hsl(a?)\\(([\\d., ]+)\\)$/);\n if (match) {\n const hasAlpha = !!match[1];\n const expectedPartCount = hasAlpha ? 4 : 3;\n const parts = match[2].split(/ *, */).map(Number);\n\n if (parts.length === expectedPartCount) {\n const 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/**\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: string): IRGB | undefined {\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/**\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: string): IRGB | undefined {\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","/** Clamp a value to ensure it falls within a given range. */\nexport function clamp(value: number, max: number, min = 0): number {\n return value < min ? min : value > max ? max : value;\n}\n","import { MAX_COLOR_RGB } from './consts';\nimport { clamp } from './clamp';\n\n/** Converts RGB components to a hex color string (without # prefix). */\nexport function rgb2hex(r: number, g: number, b: number): string {\n return [_rgbToPaddedHex(r), _rgbToPaddedHex(g), _rgbToPaddedHex(b)].join('');\n}\n\n/** Converts an RGB component to a 0-padded hex component of length 2. */\nfunction _rgbToPaddedHex(num: number): string {\n num = clamp(num, MAX_COLOR_RGB);\n const hex = num.toString(16);\n\n return hex.length === 1 ? '0' + hex : hex;\n}\n","import { MAX_COLOR_RGB } from './consts';\nimport type { IHSV } from './interfaces';\n\n/** Converts RGB components to an HSV color. */\nexport function rgb2hsv(r: number, g: number, b: number): IHSV {\n let h = NaN;\n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n const delta = max - min;\n\n // hue\n if (delta === 0) {\n h = 0;\n } else if (r === max) {\n h = ((g - b) / delta) % 6;\n } else if (g === max) {\n h = (b - r) / delta + 2;\n } else if (b === max) {\n h = (r - g) / delta + 4;\n }\n\n h = Math.round(h * 60);\n\n if (h < 0) {\n h += 360;\n }\n\n // saturation\n const s = Math.round((max === 0 ? 0 : delta / max) * 100);\n\n // value\n const v = Math.round((max / MAX_COLOR_RGB) * 100);\n\n return { h, s, v };\n}\n","import { MAX_COLOR_SATURATION, MAX_COLOR_VALUE } from './consts';\nimport type { IHSL } from './interfaces';\n\n/** Converts HSV components to an HSL color. */\nexport function hsv2hsl(h: number, s: number, v: number): IHSL {\n s /= MAX_COLOR_SATURATION;\n v /= MAX_COLOR_VALUE;\n\n let l = (2 - s) * v;\n let sl = s * v;\n sl /= l <= 1 ? l : 2 - l;\n sl = sl || 0;\n l /= 2;\n\n return { h, s: sl * 100, l: l * 100 };\n}\n","import { MAX_COLOR_ALPHA } from './consts';\n\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: number, g: number, b: number, a: number | undefined, hex: string): string {\n return a === MAX_COLOR_ALPHA || typeof a !== 'number' ? `#${hex}` : `rgba(${r}, ${g}, ${b}, ${a / MAX_COLOR_ALPHA})`;\n}\n","import { MAX_COLOR_ALPHA } from './consts';\nimport { rgb2hsv } from './rgb2hsv';\nimport { rgb2hex } from './rgb2hex';\nimport { _rgbaOrHexString } from './_rgbaOrHexString';\nimport type { IRGB, IColor } from './interfaces';\n\n/** Converts an RGBA color to a color object (alpha defaults to 100). */\nexport function getColorFromRGBA(rgba: IRGB): IColor {\n const { a = MAX_COLOR_ALPHA, b, g, r } = rgba;\n const { h, s, v } = rgb2hsv(r, g, b);\n const hex = rgb2hex(r, g, b);\n const str = _rgbaOrHexString(r, g, b, a, hex);\n const t = MAX_COLOR_ALPHA - a;\n\n return { a, b, g, h, hex, r, s, str, v, t };\n}\n","import { getDocument } from '@fluentui/utilities';\nimport { cssColor } from './cssColor';\nimport { getColorFromRGBA } from './getColorFromRGBA';\nimport type { IColor } from './interfaces';\n\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: string, doc?: Document): IColor | undefined {\n const theDoc = doc ?? getDocument()!;\n const color = cssColor(inputColor, theDoc);\n\n if (!color) {\n return;\n }\n\n return {\n ...getColorFromRGBA(color!),\n str: inputColor,\n };\n}\n","// 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';\nimport type { IHSV, IColor } from './interfaces';\n\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\n// Luminance multiplier constants for generating shades of a given color\nconst WhiteShadeTableBG = [0.027, 0.043, 0.082, 0.145, 0.184, 0.216, 0.349, 0.537]; // white bg\nconst BlackTintTableBG = [0.537, 0.45, 0.349, 0.216, 0.184, 0.145, 0.082, 0.043]; // black bg\nconst WhiteShadeTable = [0.537, 0.349, 0.216, 0.184, 0.145, 0.082, 0.043, 0.027]; // white fg\nconst BlackTintTable = [0.537, 0.45, 0.349, 0.216, 0.184, 0.145, 0.082, 0.043]; // black fg\nconst LumTintTable = [0.88, 0.77, 0.66, 0.55, 0.44, 0.33, 0.22, 0.11]; // light (strongen all)\nconst LumShadeTable = [0.11, 0.22, 0.33, 0.44, 0.55, 0.66, 0.77, 0.88]; // dark (soften all)\nconst ColorTintTable = [0.96, 0.84, 0.7, 0.4, 0.12]; // default soften\nconst ColorShadeTable = [0.1, 0.24, 0.44]; // default strongen\n\n// If the given shade's luminance is below/above these values, we'll swap to using the White/Black tables above\nconst LowLuminanceThreshold = 0.2;\nconst HighLuminanceThreshold = 0.8;\n\n/** Shades of a given color, from softest to strongest. */\nexport enum Shade {\n Unshaded = 0,\n Shade1 = 1,\n Shade2 = 2,\n Shade3 = 3,\n Shade4 = 4,\n Shade5 = 5,\n Shade6 = 6,\n Shade7 = 7,\n Shade8 = 8,\n // remember to update isValidShade()!\n}\n\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?: Shade): boolean {\n return typeof shade === 'number' && shade >= Shade.Unshaded && shade <= Shade.Shade8;\n}\n\nfunction _isBlack(color: IColor): boolean {\n return color.r === 0 && color.g === 0 && color.b === 0;\n}\n\nfunction _isWhite(color: IColor): boolean {\n return color.r === MAX_COLOR_RGB && color.g === MAX_COLOR_RGB && color.b === MAX_COLOR_RGB;\n}\n\nfunction _darken(hsv: IHSV, factor: number): IHSV {\n return {\n h: hsv.h,\n s: hsv.s,\n v: clamp(hsv.v - hsv.v * factor, 100, 0),\n };\n}\n\nfunction _lighten(hsv: IHSV, factor: number): IHSV {\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}\n\nexport function isDark(color: IColor): boolean {\n return hsv2hsl(color.h, color.s, color.v).l < 50;\n}\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: IColor, shade: Shade, isInverted: boolean = false): IColor | null {\n if (!color) {\n return null;\n }\n\n if (shade === Shade.Unshaded || !isValidShade(shade)) {\n return color;\n }\n\n const hsl = hsv2hsl(color.h, color.s, color.v);\n let hsv = { h: color.h, s: color.s, v: color.v };\n const tableIndex = shade - 1;\n let _soften = _lighten;\n let _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 } else if (_isBlack(color)) {\n // black\n hsv = _lighten(hsv, BlackTintTable[tableIndex]);\n } else if (hsl.l / 100 > HighLuminanceThreshold) {\n // light\n hsv = _strongen(hsv, LumShadeTable[tableIndex]);\n } else if (hsl.l / 100 < LowLuminanceThreshold) {\n // dark\n hsv = _soften(hsv, LumTintTable[tableIndex]);\n } else {\n // default\n if (tableIndex < ColorTintTable.length) {\n hsv = _soften(hsv, ColorTintTable[tableIndex]);\n } else {\n hsv = _strongen(hsv, ColorShadeTable[tableIndex - ColorTintTable.length]);\n }\n }\n\n return getColorFromRGBA(assign(hsv2rgb(hsv.h, hsv.s, hsv.v), { a: color.a }));\n}\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: IColor, shade: Shade, isInverted: boolean = false): IColor | null {\n if (!color) {\n return null;\n }\n\n if (shade === Shade.Unshaded || !isValidShade(shade)) {\n return color;\n }\n\n let hsv = { h: color.h, s: color.s, v: color.v };\n const tableIndex = shade - 1;\n if (!isInverted) {\n // lightish\n hsv = _darken(hsv, WhiteShadeTableBG[tableIndex]);\n } else {\n // default: if (hsl.l / 100 < .5) { // darkish\n hsv = _lighten(hsv, BlackTintTableBG[BlackTintTable.length - 1 - tableIndex]);\n }\n\n return getColorFromRGBA(assign(hsv2rgb(hsv.h, hsv.s, hsv.v), { a: color.a }));\n}\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: IColor, color2: IColor): number {\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\n /* calculate the intermediate value needed to calculating relative luminance */\n function _getThing(x: number): number {\n if (x <= 0.03928) {\n return x / 12.92;\n } else {\n return Math.pow((x + 0.055) / 1.055, 2.4);\n }\n }\n\n const r1 = _getThing(color1.r / MAX_COLOR_RGB);\n const g1 = _getThing(color1.g / MAX_COLOR_RGB);\n const b1 = _getThing(color1.b / MAX_COLOR_RGB);\n let L1 = 0.2126 * r1 + 0.7152 * g1 + 0.0722 * b1; // relative luminance of first color\n L1 += 0.05;\n\n const r2 = _getThing(color2.r / MAX_COLOR_RGB);\n const g2 = _getThing(color2.g / MAX_COLOR_RGB);\n const b2 = _getThing(color2.b / MAX_COLOR_RGB);\n let L2 = 0.2126 * r2 + 0.7152 * g2 + 0.0722 * b2; // relative luminance of second color\n L2 += 0.05;\n\n // return the lighter color divided by darker\n return L1 / L2 > 1 ? L1 / L2 : L2 / L1;\n}\n","import * as React from 'react';\nimport { Label } from '../../Label';\nimport { Icon } from '../../Icon';\nimport {\n Async,\n classNamesFunction,\n DelayedRender,\n getId,\n getNativeProps,\n getWindow,\n initializeComponentRef,\n inputProperties,\n isControlled,\n isIE11,\n textAreaProperties,\n warn,\n warnControlledUsage,\n warnMutuallyExclusive,\n} from '../../Utilities';\nimport type { IProcessedStyleSet } from '../../Styling';\nimport type { ILabelStyleProps, ILabelStyles } from '../../Label';\nimport type { IStyleFunctionOrObject } from '../../Utilities';\nimport type { ITextField, ITextFieldProps, ITextFieldStyleProps, ITextFieldStyles } from './TextField.types';\n\nconst getClassNames = classNamesFunction();\n\n/** @internal */\nexport interface ITextFieldState {\n /** The currently displayed value if uncontrolled. */\n uncontrolledValue: string | undefined;\n\n /** Is true when the control has focus. */\n isFocused?: boolean;\n\n /**\n * Dynamic error message returned by `onGetErrorMessage`.\n * Use `this._errorMessage` to get the actual current error message.\n */\n errorMessage: string | JSX.Element;\n\n /**\n * Whether this field has `type='password'` and `canRevealPassword=true`, and the password is\n * currently being revealed.\n */\n isRevealingPassword?: boolean;\n}\n\n/** @internal */\nexport interface ITextFieldSnapshot {\n /**\n * If set, the text field is changing between single- and multi-line, so we'll need to reset\n * selection/cursor after the change completes.\n */\n selection?: [number | null, number | null];\n}\n\nconst DEFAULT_STATE_VALUE = '';\nconst COMPONENT_NAME = 'TextField';\n\nconst REVEAL_ICON_NAME = 'RedEye';\nconst HIDE_ICON_NAME = 'Hide';\n\nexport class TextFieldBase\n extends React.Component\n implements ITextField\n{\n public static defaultProps: ITextFieldProps = {\n resizable: true,\n deferredValidationTime: 200,\n validateOnLoad: true,\n };\n\n /** Fallback ID if none is provided in props. Access proper value via `this._id`. */\n private _fallbackId: string;\n private _descriptionId: string;\n private _labelId: string;\n private _prefixId: string;\n private _suffixId: string;\n private _delayedValidate: (value: string | undefined) => void;\n private _lastValidation: number;\n private _latestValidateValue: string | undefined;\n private _hasWarnedNullValue: boolean | undefined;\n private _textElement = React.createRef();\n private _classNames: IProcessedStyleSet;\n private _async: Async;\n /** Most recent value from a change or input event, to help avoid processing events twice */\n private _lastChangeValue: string | undefined;\n\n public constructor(props: ITextFieldProps) {\n super(props);\n\n initializeComponentRef(this);\n this._async = new Async(this);\n\n if (process.env.NODE_ENV !== 'production') {\n warnMutuallyExclusive(COMPONENT_NAME, props, {\n errorMessage: 'onGetErrorMessage',\n });\n }\n\n this._fallbackId = getId(COMPONENT_NAME);\n this._descriptionId = getId(COMPONENT_NAME + 'Description');\n this._labelId = getId(COMPONENT_NAME + 'Label');\n this._prefixId = getId(COMPONENT_NAME + 'Prefix');\n this._suffixId = getId(COMPONENT_NAME + 'Suffix');\n\n this._warnControlledUsage();\n\n let { defaultValue = DEFAULT_STATE_VALUE } = props;\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\n this._delayedValidate = this._async.debounce(this._validate, this.props.deferredValidationTime);\n this._lastValidation = 0;\n }\n\n /**\n * Gets the current value of the text field.\n */\n public get value(): string | undefined {\n return _getValue(this.props, this.state);\n }\n\n public componentDidMount(): void {\n this._adjustInputHeight();\n\n if (this.props.validateOnLoad) {\n this._validate(this.value);\n }\n }\n\n public componentWillUnmount() {\n this._async.dispose();\n }\n\n public getSnapshotBeforeUpdate(prevProps: ITextFieldProps, prevState: ITextFieldState): ITextFieldSnapshot | null {\n return {\n selection: [this.selectionStart, this.selectionEnd],\n };\n }\n\n public componentDidUpdate(\n prevProps: ITextFieldProps,\n prevState: ITextFieldState,\n snapshot: ITextFieldSnapshot,\n ): void {\n const props = this.props;\n const { selection = [null, null] } = snapshot || {};\n const [start, end] = selection;\n\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\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\n const prevValue = _getValue(prevProps, prevState);\n const value = this.value;\n if (prevValue !== value) {\n // Handle controlled/uncontrolled warnings and status\n this._warnControlledUsage(prevProps);\n\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\n // Adjust height if needed based on new value\n this._adjustInputHeight();\n\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\n public render(): JSX.Element {\n const {\n borderless,\n className,\n disabled,\n invalid,\n iconProps,\n inputClassName,\n label,\n multiline,\n required,\n underlined,\n prefix,\n resizable,\n suffix,\n theme,\n styles,\n autoAdjustHeight,\n canRevealPassword,\n revealPasswordAriaLabel,\n type,\n onRenderPrefix = this._onRenderPrefix,\n onRenderSuffix = this._onRenderSuffix,\n onRenderLabel = this._onRenderLabel,\n onRenderDescription = this._onRenderDescription,\n } = this.props;\n const { isFocused, isRevealingPassword } = this.state;\n const errorMessage = this._errorMessage;\n const isInvalid = typeof invalid === 'boolean' ? invalid : !!errorMessage;\n\n const hasRevealButton = !!canRevealPassword && type === 'password' && _browserNeedsRevealButton();\n\n const classNames = (this._classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n disabled,\n focused: isFocused,\n required,\n multiline,\n hasLabel: !!label,\n hasErrorMessage: isInvalid,\n borderless,\n resizable,\n hasIcon: !!iconProps,\n underlined,\n inputClassName,\n autoAdjustHeight,\n hasRevealButton,\n }));\n\n return (\n // eslint-disable-next-line deprecation/deprecation\n
    \n
    \n {onRenderLabel(this.props, this._onRenderLabel)}\n
    \n {(prefix !== undefined || this.props.onRenderPrefix) && (\n
    \n {onRenderPrefix(this.props, this._onRenderPrefix)}\n
    \n )}\n {multiline ? this._renderTextArea() : this._renderInput()}\n {iconProps && }\n {hasRevealButton && (\n // Explicitly set type=\"button\" since the default button type within a form is \"submit\"\n \n \n \n \n \n )}\n {(suffix !== undefined || this.props.onRenderSuffix) && (\n
    \n {onRenderSuffix(this.props, this._onRenderSuffix)}\n
    \n )}\n
    \n
    \n {this._isDescriptionAvailable && (\n \n {onRenderDescription(this.props, this._onRenderDescription)}\n {errorMessage && (\n
    \n {this._renderErrorMessage()}\n
    \n )}\n
    \n )}\n
    \n );\n }\n\n /**\n * Sets focus on the text field\n */\n public focus() {\n if (this._textElement.current) {\n this._textElement.current.focus();\n }\n }\n\n /**\n * Blurs the text field.\n */\n public blur() {\n if (this._textElement.current) {\n this._textElement.current.blur();\n }\n }\n\n /**\n * Selects the text field\n */\n public select() {\n if (this._textElement.current) {\n this._textElement.current.select();\n }\n }\n\n /**\n * Sets the selection start of the text field to a specified value\n */\n public setSelectionStart(value: number): void {\n if (this._textElement.current) {\n this._textElement.current.selectionStart = value;\n }\n }\n\n /**\n * Sets the selection end of the text field to a specified value\n */\n public setSelectionEnd(value: number): void {\n if (this._textElement.current) {\n this._textElement.current.selectionEnd = value;\n }\n }\n\n /**\n * Gets the selection start of the text field\n */\n public get selectionStart(): number | null {\n return this._textElement.current ? this._textElement.current.selectionStart : -1;\n }\n\n /**\n * Gets the selection end of the text field\n */\n public get selectionEnd(): number | null {\n return this._textElement.current ? this._textElement.current.selectionEnd : -1;\n }\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 public setSelectionRange(start: number, end: number): void {\n if (this._textElement.current) {\n (this._textElement.current as HTMLInputElement).setSelectionRange(start, end);\n }\n }\n\n private _warnControlledUsage(prevProps?: ITextFieldProps): void {\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\n if (this.props.value === null && !this._hasWarnedNullValue) {\n this._hasWarnedNullValue = true;\n warn(\n `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 }\n\n /** Returns `props.id` if available, or a fallback if not. */\n private get _id(): string {\n return this.props.id || this._fallbackId;\n }\n\n private get _isControlled(): boolean {\n return isControlled(this.props, 'value');\n }\n\n private _onFocus = (ev: React.FocusEvent): void => {\n if (this.props.onFocus) {\n this.props.onFocus(ev);\n }\n\n this.setState({ isFocused: true }, () => {\n if (this.props.validateOnFocusIn) {\n this._validate(this.value);\n }\n });\n };\n\n private _onBlur = (ev: React.FocusEvent): void => {\n if (this.props.onBlur) {\n this.props.onBlur(ev);\n }\n\n this.setState({ isFocused: false }, () => {\n if (this.props.validateOnFocusOut) {\n this._validate(this.value);\n }\n });\n };\n\n private _onRenderLabel = (props: ITextFieldProps): JSX.Element | null => {\n const { label, required } = props;\n // IProcessedStyleSet definition requires casting for what Label expects as its styles prop\n const labelStyles = this._classNames.subComponentStyles\n ? (this._classNames.subComponentStyles.label as IStyleFunctionOrObject)\n : undefined;\n\n if (label) {\n return (\n \n );\n }\n return null;\n };\n\n private _onRenderDescription = (props: ITextFieldProps): JSX.Element | null => {\n if (props.description) {\n return {props.description};\n }\n return null;\n };\n\n private _onRenderPrefix(props: ITextFieldProps): JSX.Element {\n const { prefix } = props;\n return {prefix};\n }\n\n private _onRenderSuffix(props: ITextFieldProps): JSX.Element {\n const { suffix } = props;\n return {suffix};\n }\n\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 private get _errorMessage(): string | JSX.Element {\n const { errorMessage = this.state.errorMessage } = this.props;\n return errorMessage || '';\n }\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 private _renderErrorMessage(): JSX.Element | null {\n const errorMessage = this._errorMessage;\n\n return errorMessage ? (\n typeof errorMessage === 'string' ? (\n

    \n {errorMessage}\n

    \n ) : (\n
    \n {errorMessage}\n
    \n )\n ) : null;\n }\n\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 private get _isDescriptionAvailable(): boolean {\n const props = this.props;\n return !!(props.onRenderDescription || props.description || this._errorMessage);\n }\n\n private _renderTextArea(): React.ReactElement> {\n const { invalid = !!this._errorMessage } = this.props;\n const textAreaProps = getNativeProps>(\n this.props,\n textAreaProperties,\n ['defaultValue'],\n );\n const ariaLabelledBy = this.props['aria-labelledby'] || (this.props.label ? this._labelId : undefined);\n return (\n }\n value={this.value || ''}\n onInput={this._onInputChange}\n onChange={this._onInputChange}\n className={this._classNames.field}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={this._isDescriptionAvailable ? this._descriptionId : this.props['aria-describedby']}\n aria-invalid={invalid}\n aria-label={this.props.ariaLabel}\n readOnly={this.props.readOnly}\n onFocus={this._onFocus}\n onBlur={this._onBlur}\n />\n );\n }\n\n private _renderInput(): JSX.Element | null {\n const {\n ariaLabel,\n invalid = !!this._errorMessage,\n onRenderPrefix,\n onRenderSuffix,\n prefix,\n suffix,\n type = 'text',\n label,\n } = this.props;\n\n // build aria-labelledby list from label, prefix, and suffix\n const labelIds = [];\n label && labelIds.push(this._labelId);\n (prefix !== undefined || onRenderPrefix) && labelIds.push(this._prefixId);\n (suffix !== undefined || onRenderSuffix) && labelIds.push(this._suffixId);\n\n const inputProps: React.InputHTMLAttributes & React.RefAttributes = {\n type: this.state.isRevealingPassword ? 'text' : type,\n id: this._id,\n ...getNativeProps(this.props, inputProperties, ['defaultValue', 'type']),\n 'aria-labelledby': this.props['aria-labelledby'] || (labelIds.length > 0 ? labelIds.join(' ') : undefined),\n ref: this._textElement as React.RefObject,\n value: this.value || '',\n onInput: this._onInputChange,\n onChange: this._onInputChange,\n className: this._classNames.field,\n 'aria-label': ariaLabel,\n 'aria-describedby': this._isDescriptionAvailable ? this._descriptionId : this.props['aria-describedby'],\n 'aria-invalid': invalid,\n onFocus: this._onFocus,\n onBlur: this._onBlur,\n };\n\n const defaultRender = (updatedInputProps: React.InputHTMLAttributes) => {\n return ;\n };\n const onRenderInput = this.props.onRenderInput || defaultRender;\n return onRenderInput(inputProps, defaultRender);\n }\n\n private _onRevealButtonClick = (event: React.MouseEvent): void => {\n this.setState(prevState => ({ isRevealingPassword: !prevState.isRevealingPassword }));\n };\n\n private _onInputChange = (event: React.FormEvent): void => {\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\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\n const element = event.target as HTMLInputElement;\n const 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 const 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\n this.props.onChange?.(event, value);\n\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\n private _validate(value: string | undefined): void {\n // In case _validate is called again while validation promise is executing\n if (this._latestValidateValue === value && _shouldValidateAllChanges(this.props)) {\n return;\n }\n\n this._latestValidateValue = value;\n const onGetErrorMessage = this.props.onGetErrorMessage;\n const result = onGetErrorMessage && onGetErrorMessage(value || '');\n\n if (result !== undefined) {\n if (typeof result === 'string' || !('then' in result)) {\n this.setState({ errorMessage: result });\n this._notifyAfterValidate(value, result);\n } else {\n const currentValidation: number = ++this._lastValidation;\n\n result.then((errorMessage: string | JSX.Element) => {\n if (currentValidation === this._lastValidation) {\n this.setState({ errorMessage });\n }\n this._notifyAfterValidate(value, errorMessage);\n });\n }\n } else {\n this._notifyAfterValidate(value, '');\n }\n }\n\n private _notifyAfterValidate(value: string | undefined, errorMessage: string | JSX.Element): void {\n if (value === this.value && this.props.onNotifyValidationResult) {\n this.props.onNotifyValidationResult(errorMessage, value);\n }\n }\n\n private _adjustInputHeight(): void {\n if (this._textElement.current && this.props.autoAdjustHeight && this.props.multiline) {\n const scrollTop = this.props.scrollContainerRef?.current?.scrollTop;\n const textField = this._textElement.current;\n textField.style.height = '';\n textField.style.height = textField.scrollHeight + 'px';\n\n if (scrollTop) {\n // Safe to assert not null, otherwise we wouldn't have a scrollTop;\n this.props.scrollContainerRef!.current!.scrollTop = scrollTop;\n }\n }\n }\n}\n\n/** Get the value from the given state and props (converting from number to string if needed) */\nfunction _getValue(props: ITextFieldProps, state: ITextFieldState): string | undefined {\n const { value = state.uncontrolledValue } = props;\n if (typeof value === 'number') {\n // not allowed per typings, but happens anyway\n return String(value);\n }\n return value;\n}\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: ITextFieldProps): boolean {\n return !(props.validateOnFocusIn || props.validateOnFocusOut);\n}\n\n// Only calculate this once across all TextFields, since will stay the same\nlet __browserNeedsRevealButton: boolean | undefined;\n\nfunction _browserNeedsRevealButton() {\n if (typeof __browserNeedsRevealButton !== 'boolean') {\n const win = getWindow();\n\n if (win?.navigator) {\n // Edge, Chromium Edge\n const isEdge = /Edg/.test(win.navigator.userAgent || '');\n\n __browserNeedsRevealButton = !(isIE11() || isEdge);\n } else {\n __browserNeedsRevealButton = true;\n }\n }\n return __browserNeedsRevealButton;\n}\n","import {\n AnimationClassNames,\n getFocusStyle,\n getGlobalClassNames,\n getInputFocusStyle,\n HighContrastSelector,\n normalize,\n getPlaceholderStyles,\n IconFontSizes,\n getHighContrastNoAdjustStyle,\n} from '../../Styling';\nimport type { IStyle } from '../../Styling';\nimport type { ILabelStyles, ILabelStyleProps } from '../../Label';\nimport type { ITextFieldStyleProps, ITextFieldStyles } from './TextField.types';\nimport type { IStyleFunctionOrObject } from '@fluentui/utilities';\n\nconst 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\n multiline: 'ms-TextField--multiline',\n borderless: 'ms-TextField--borderless',\n underlined: 'ms-TextField--underlined',\n unresizable: 'ms-TextField--unresizable',\n\n required: 'is-required',\n disabled: 'is-disabled',\n active: 'is-active',\n};\n\nfunction getLabelStyles(props: ITextFieldStyleProps): IStyleFunctionOrObject {\n const { underlined, disabled, focused, theme } = props;\n const { palette, fonts } = theme;\n\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: {\n [HighContrastSelector]: {\n height: 31, // -1px to prevent jumpiness in HC with the increased border-width to 2px\n },\n },\n },\n ],\n });\n}\n\nexport function getStyles(props: ITextFieldStyleProps): ITextFieldStyles {\n const {\n theme,\n className,\n disabled,\n focused,\n required,\n multiline,\n hasLabel,\n borderless,\n underlined,\n hasIcon,\n resizable,\n hasErrorMessage,\n inputClassName,\n autoAdjustHeight,\n hasRevealButton,\n } = props;\n\n const { semanticColors, effects, fonts } = theme;\n\n const classNames = getGlobalClassNames(globalClassNames, theme);\n\n const fieldPrefixSuffix: IStyle = {\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: {\n [HighContrastSelector]: {\n background: 'Window',\n color: disabled ? 'GrayText' : 'WindowText',\n },\n },\n };\n\n // placeholder style constants\n const placeholderStyles: IStyle = [\n {\n color: semanticColors.inputPlaceholderText,\n opacity: 1,\n selectors: {\n [HighContrastSelector]: {\n color: 'GrayText',\n },\n },\n },\n ];\n\n const disabledPlaceholderStyles: IStyle = {\n color: semanticColors.disabledText,\n selectors: {\n [HighContrastSelector]: {\n color: 'GrayText',\n },\n },\n };\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\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: {\n [HighContrastSelector]: {\n borderColor: 'GrayText',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\n !disabled && {\n selectors: {\n ':hover': {\n borderBottomColor: !hasErrorMessage ? semanticColors.inputBorderHovered : semanticColors.errorText,\n selectors: {\n [HighContrastSelector]: {\n borderBottomColor: 'Highlight',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\n },\n },\n focused && [\n {\n position: 'relative',\n },\n getInputFocusStyle(\n !hasErrorMessage ? semanticColors.inputFocusBorderAlt : semanticColors.errorText,\n 0,\n 'borderBottom',\n ),\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\n !focused &&\n !disabled && {\n selectors: {\n ':hover': {\n borderColor: semanticColors.inputBorderHovered,\n selectors: {\n [HighContrastSelector]: {\n borderColor: 'Highlight',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\n },\n },\n\n focused &&\n !underlined &&\n getInputFocusStyle(\n !hasErrorMessage ? semanticColors.inputFocusBorderAlt : semanticColors.errorText,\n effects.roundedCorner2,\n ),\n disabled && {\n borderColor: semanticColors.disabledBackground,\n selectors: {\n [HighContrastSelector]: {\n borderColor: 'GrayText',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n\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\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: {\n ':before': {\n content: `'*'`,\n color: semanticColors.errorText,\n position: 'absolute',\n top: -5,\n right: -10,\n },\n [HighContrastSelector]: {\n selectors: {\n ':before': {\n color: 'WindowText',\n right: -14, // moving the * 4 pixel to right to alleviate border clipping in HC mode.\n },\n },\n },\n },\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: {\n '&:active, &:focus, &:hover': { outline: 0 },\n '::-ms-clear': {\n display: 'none',\n },\n [HighContrastSelector]: {\n background: 'Window',\n color: disabled ? 'GrayText' : 'WindowText',\n },\n },\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: {\n [HighContrastSelector]: {\n paddingLeft: 11,\n paddingRight: 11,\n },\n },\n },\n focused &&\n multiline &&\n !borderless && {\n selectors: {\n [HighContrastSelector]: {\n paddingTop: 4, // take into consideration the 2px increased border-width (not when borderless).\n },\n },\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: {\n [HighContrastSelector]: {\n borderColor: 'Highlight',\n color: 'Highlight',\n },\n },\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","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { TextFieldBase } from './TextField.base';\nimport { getStyles } from './TextField.styles';\nimport type { ITextFieldProps, ITextFieldStyles, ITextFieldStyleProps } from './TextField.types';\n\nexport const TextField: React.FunctionComponent = styled<\n ITextFieldProps,\n ITextFieldStyleProps,\n ITextFieldStyles\n>(TextFieldBase, getStyles, undefined, {\n scope: 'TextField',\n});\n\nexport type { ITextField } from './TextField.types';\n","import {\n FontWeights,\n concatStyleSets,\n getFocusStyle,\n HighContrastSelector,\n getPlaceholderStyles,\n hiddenContentStyle,\n getInputFocusStyle,\n getHighContrastNoAdjustStyle,\n} from '../../Styling';\nimport { memoizeFunction } from '../../Utilities';\nimport type { IRawStyle, ITheme, IStyle } from '../../Styling';\nimport type { IComboBoxOptionStyles, IComboBoxStyles } from './ComboBox.types';\nimport type { IButtonStyles } from '../../Button';\n\nconst ComboBoxHeight = 32;\nconst ComboBoxLineHeight = 30;\nconst ComboBoxCaretDownWidth = 32;\nconst ComboBoxOptionHeight = 36;\n\nconst getDisabledStyles = memoizeFunction((theme: ITheme): IRawStyle => {\n const { semanticColors } = theme;\n\n return {\n backgroundColor: semanticColors.disabledBackground,\n color: semanticColors.disabledText,\n cursor: 'default',\n selectors: {\n ':after': {\n borderColor: semanticColors.disabledBackground,\n },\n [HighContrastSelector]: {\n color: 'GrayText',\n selectors: {\n ':after': {\n borderColor: 'GrayText',\n },\n },\n },\n },\n };\n});\n\nconst listOptionHighContrastStyles: IRawStyle = {\n selectors: {\n [HighContrastSelector]: {\n backgroundColor: 'Highlight',\n borderColor: 'Highlight',\n color: 'HighlightText',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n};\n\nconst inputHighContrastStyles: IRawStyle = {\n selectors: {\n [HighContrastSelector]: {\n color: 'WindowText',\n backgroundColor: 'Window',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n};\n\nexport const getOptionStyles = memoizeFunction(\n (\n theme: ITheme,\n customStylesForAllOptions?: Partial,\n customOptionStylesForCurrentOption?: Partial,\n isPending?: boolean,\n isHidden?: boolean,\n isSelected?: boolean,\n ): Partial => {\n const { palette, semanticColors } = theme;\n\n const option = {\n textHoveredColor: semanticColors.menuItemTextHovered,\n textSelectedColor: palette.neutralDark,\n textDisabledColor: semanticColors.disabledText,\n backgroundHoveredColor: semanticColors.menuItemBackgroundHovered,\n backgroundPressedColor: semanticColors.menuItemBackgroundPressed,\n };\n\n const optionStyles: IComboBoxOptionStyles = {\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: {\n [HighContrastSelector]: {\n border: 'none',\n borderColor: 'Background',\n },\n ...(!isHidden && {\n '&.ms-Checkbox': {\n display: 'flex',\n alignItems: 'center',\n },\n }),\n '&.ms-Button--command:hover:active': {\n backgroundColor: option.backgroundPressedColor,\n },\n '.ms-Checkbox-label': {\n width: '100%',\n },\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\n return concatStyleSets(optionStyles, customStylesForAllOptions, customOptionStylesForCurrentOption);\n },\n);\n\nexport const getCaretDownButtonStyles = memoizeFunction(\n (theme: ITheme, customStyles?: Partial): IButtonStyles => {\n const { semanticColors, fonts } = theme;\n\n const caret = {\n buttonTextColor: semanticColors.bodySubtext,\n buttonTextHoveredCheckedColor: semanticColors.buttonTextChecked,\n buttonBackgroundHoveredColor: semanticColors.listItemBackgroundHovered,\n buttonBackgroundCheckedColor: semanticColors.listItemBackgroundChecked,\n buttonBackgroundCheckedHoveredColor: semanticColors.listItemBackgroundCheckedHovered,\n };\n\n const buttonHighContrastStyles: IStyle = {\n selectors: {\n [HighContrastSelector]: {\n backgroundColor: 'Highlight',\n borderColor: 'Highlight',\n color: 'HighlightText',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n };\n\n const styles: IButtonStyles = {\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: {\n [HighContrastSelector]: {\n backgroundColor: 'ButtonFace',\n borderColor: 'ButtonText',\n color: 'ButtonText',\n ...getHighContrastNoAdjustStyle(),\n },\n },\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 },\n);\n\nexport const getStyles = memoizeFunction(\n (theme: ITheme, customStyles?: Partial, comboBoxOptionWidth?: string): Partial => {\n const { semanticColors, fonts, effects } = theme;\n\n const 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\n const option = {\n headerTextColor: semanticColors.menuHeader,\n dividerBorderColor: semanticColors.bodyDivider,\n };\n\n // placeholder style variables\n const placeholderHighContrastStyles: IRawStyle = {\n selectors: {\n [HighContrastSelector]: {\n color: 'GrayText',\n },\n },\n };\n const placeholderStyles: IStyle = [\n {\n color: semanticColors.inputPlaceholderText,\n },\n placeholderHighContrastStyles,\n ];\n const placeholderStylesHovered: IStyle = [\n {\n color: semanticColors.inputTextHovered,\n },\n placeholderHighContrastStyles,\n ];\n const disabledPlaceholderStyles: IStyle = [\n {\n color: semanticColors.disabledText,\n },\n placeholderHighContrastStyles,\n ];\n\n const ComboBoxRootHighContrastFocused = {\n color: 'HighlightText',\n backgroundColor: 'Window',\n ...getHighContrastNoAdjustStyle(),\n selectors: {\n ':after': {\n borderColor: 'Highlight',\n },\n },\n };\n\n const focusBorderStyles: IStyle = getInputFocusStyle(root.borderPressedColor, effects.roundedCorner2, 'border', 0);\n\n const styles: IComboBoxStyles = {\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', // Border-box matches Dropdown and TextField\n selectors: {\n '.ms-Label': {\n display: 'inline-block',\n marginBottom: '8px',\n },\n '&.is-open': {\n selectors: {\n [HighContrastSelector]: ComboBoxRootHighContrastFocused,\n },\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\n rootHovered: {\n selectors: {\n ':after': {\n borderColor: root.borderHoveredColor,\n },\n '.ms-ComboBox-Input': [\n {\n color: semanticColors.inputTextHovered,\n },\n getPlaceholderStyles(placeholderStylesHovered),\n inputHighContrastStyles,\n ],\n [HighContrastSelector]: {\n color: 'HighlightText',\n backgroundColor: 'Window',\n ...getHighContrastNoAdjustStyle(),\n selectors: {\n ':after': {\n borderColor: 'Highlight',\n },\n },\n },\n },\n },\n\n rootPressed: [\n {\n position: 'relative',\n selectors: {\n [HighContrastSelector]: ComboBoxRootHighContrastFocused,\n },\n },\n ],\n\n rootFocused: [\n {\n selectors: {\n '.ms-ComboBox-Input': [\n {\n color: semanticColors.inputTextHovered,\n },\n inputHighContrastStyles,\n ],\n [HighContrastSelector]: ComboBoxRootHighContrastFocused,\n },\n },\n focusBorderStyles,\n ],\n\n rootDisabled: getDisabledStyles(theme),\n\n rootError: {\n selectors: {\n ':after': {\n borderColor: root.erroredColor,\n },\n ':hover:after': {\n borderColor: semanticColors.inputBorderHovered,\n },\n },\n },\n\n rootDisallowFreeForm: {},\n\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\n inputDisabled: [getDisabledStyles(theme), getPlaceholderStyles(disabledPlaceholderStyles)],\n errorMessage: [\n theme.fonts.small,\n {\n color: root.erroredColor,\n marginTop: '5px',\n },\n ],\n\n callout: {\n boxShadow: effects.elevation8,\n },\n\n optionsContainerWrapper: {\n width: comboBoxOptionWidth,\n },\n\n optionsContainer: {\n display: 'block',\n },\n screenReaderText: hiddenContentStyle,\n\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: {\n [HighContrastSelector]: {\n color: 'GrayText',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\n ],\n\n divider: {\n height: 1,\n backgroundColor: option.dividerBorderColor,\n },\n };\n\n return concatStyleSets(styles, customStyles);\n },\n);\n","import { memoizeFunction } from '../../Utilities';\nimport { mergeStyles } from '../../Styling';\nimport type { IComboBoxStyles, IComboBoxOptionStyles } from './ComboBox.types';\n\nexport interface IComboBoxClassNames {\n container: string;\n label: string;\n root: string;\n input: string;\n errorMessage: string;\n callout: string;\n optionsContainer: string;\n header: string;\n divider: string;\n optionsContainerWrapper: string;\n screenReaderText: string;\n}\n\nexport interface IComboBoxOptionClassNames {\n optionText: string;\n root: string;\n optionTextWrapper: string;\n}\n\nexport const getClassNames = memoizeFunction(\n (\n styles: Partial,\n className: string,\n isOpen: boolean,\n disabled: boolean,\n required: boolean,\n focused: boolean,\n allowFreeForm: boolean,\n hasErrorMessage: boolean,\n ): IComboBoxClassNames => {\n // const mergeStyles = mergeStylesShadow(styles.__shadowConfig__);\n\n return {\n container: mergeStyles(styles.__shadowConfig__, 'ms-ComboBox-container', className, styles.container),\n label: mergeStyles(styles.__shadowConfig__, styles.label, disabled && styles.labelDisabled),\n root: mergeStyles(\n styles.__shadowConfig__,\n 'ms-ComboBox',\n hasErrorMessage ? styles.rootError : isOpen && 'is-open',\n required && 'is-required',\n styles.root,\n !allowFreeForm && styles.rootDisallowFreeForm,\n hasErrorMessage && !focused ? styles.rootError : !disabled && focused && styles.rootFocused,\n !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 },\n disabled && ['is-disabled', styles.rootDisabled],\n ),\n input: mergeStyles(styles.__shadowConfig__, 'ms-ComboBox-Input', styles.input, disabled && styles.inputDisabled),\n errorMessage: mergeStyles(styles.__shadowConfig__, styles.errorMessage),\n callout: mergeStyles(styles.__shadowConfig__, 'ms-ComboBox-callout', styles.callout),\n optionsContainerWrapper: mergeStyles(\n styles.__shadowConfig__,\n 'ms-ComboBox-optionsContainerWrapper',\n styles.optionsContainerWrapper,\n ),\n optionsContainer: mergeStyles(styles.__shadowConfig__, 'ms-ComboBox-optionsContainer', styles.optionsContainer),\n header: mergeStyles(styles.__shadowConfig__, 'ms-ComboBox-header', styles.header),\n divider: mergeStyles(styles.__shadowConfig__, 'ms-ComboBox-divider', styles.divider),\n screenReaderText: mergeStyles(styles.__shadowConfig__, styles.screenReaderText),\n };\n },\n);\n\nexport const getComboBoxOptionClassNames = memoizeFunction(\n (styles: Partial): IComboBoxOptionClassNames => {\n return {\n optionText: mergeStyles(styles.__shadowConfig__, 'ms-ComboBox-optionText', styles.optionText),\n root: mergeStyles(styles.__shadowConfig__, '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.__shadowConfig__, styles.optionTextWrapper),\n };\n },\n);\n","import type { ISelectableOption } from '../../utilities/selectableOption/SelectableOption.types';\n\nexport function getAllSelectedOptions(options: ISelectableOption[], selectedIndices: number[]): ISelectableOption[] {\n const selectedOptions: ISelectableOption[] = [];\n for (const index of selectedIndices) {\n const option = options[index];\n\n if (option) {\n selectedOptions.push(option);\n }\n }\n\n return selectedOptions;\n}\n","export interface ISelectableOption {\n /**\n * Arbitrary string associated with this option.\n */\n key: string | number;\n\n /**\n * ID attribute associated with this option\n */\n id?: string;\n\n /**\n * Text to render for this option\n */\n text: string;\n\n /**\n * Title attribute (built in tooltip) for a given option.\n */\n title?: string;\n\n /**\n * Text to render for this option\n * Note: the SelectAll itemType is only supported on one option in multiselect components\n */\n itemType?: SelectableOptionMenuItemType;\n\n /**\n * Index for this option\n */\n index?: number;\n\n /**\n * The aria label for the dropdown option. If not present, the `text` will be used.\n */\n ariaLabel?: string;\n\n /** If option is selected. */\n selected?: boolean;\n\n /**\n * Whether the option is disabled\n * @defaultvalue false\n */\n disabled?: boolean;\n\n /**\n * Defines whether the option is hidden or not.\n * @defaultvalue false\n */\n hidden?: boolean;\n\n /**\n * Data available to custom onRender functions.\n */\n data?: T;\n}\n\nexport enum SelectableOptionMenuItemType {\n Normal = 0,\n Divider = 1,\n Header = 2,\n SelectAll = 3,\n}\n","import * as React from 'react';\nimport { Autofill } from '../../Autofill';\nimport {\n initializeComponentRef,\n css,\n customizable,\n divProperties,\n findElementRecursive,\n findIndex,\n focusAsync,\n getId,\n getNativeProps,\n isIOS,\n isMac,\n KeyCodes,\n shallowCompare,\n mergeAriaAttributeValues,\n warnMutuallyExclusive,\n Async,\n EventGroup,\n getPropsWithDefaults,\n} 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 { BaseButton, Button, CommandButton, IconButton } from '../../Button';\nimport { useMergedRefs } from '@fluentui/react-hooks';\nimport type { IAutofill } from '../../Autofill';\nimport type { IRenderFunction } from '../../Utilities';\nimport type { IComboBoxClassNames } from './ComboBox.classNames';\nimport type {\n IComboBoxOption,\n IComboBoxOptionStyles,\n IComboBoxProps,\n IOnRenderComboBoxLabelProps,\n IComboBox,\n} from './ComboBox.types';\nimport type { IButtonStyles } from '../../Button';\nimport type { ICalloutProps } from '../../Callout';\nimport { getChildren } from '@fluentui/utilities';\nimport { WindowContext } from '@fluentui/react-window-provider';\nimport { getDocumentEx } from '../../utilities/dom';\n\nexport interface IComboBoxState {\n /** The open state */\n isOpen?: boolean;\n\n /** The focused state of the combo box */\n focusState?: 'none' | 'focused' | 'focusing';\n\n /**\n * When taking input, this will store the index that the options input matches\n * (-1 if no input or match)\n */\n currentPendingValueValidIndex: number;\n\n /**\n * Stores the hovered over value in the dropdown\n * (used for styling the options without updating the input)\n */\n currentPendingValueValidIndexOnHover: number;\n\n /** When taking input, this will store the actual text that is being entered */\n currentPendingValue?: string;\n\n /**\n * The id of the current focused combo item, otherwise the id of the currently selected element,\n * null otherwise\n */\n ariaActiveDescendantValue?: string;\n}\n\nenum SearchDirection {\n backward = -1,\n none = 0,\n forward = 1,\n}\n\nenum HoverStatus {\n /** Used when the user was hovering and has since moused out of the menu items */\n clearAll = -2,\n /** Default \"normal\" state, when no hover has happened or a hover is in progress */\n default = -1,\n}\n\nconst ScrollIdleDelay = 250; /* ms */\nconst TouchIdleDelay = 500; /* ms */\n\n/**\n * This is used to clear any pending autocomplete text (used when autocomplete is true and\n * allowFreeform is false)\n */\nconst ReadOnlyPendingAutoCompleteTimeout = 1000; /* ms */\n\ninterface IComboBoxOptionWrapperProps extends IComboBoxOption {\n /** True if the option is currently selected */\n isSelected: boolean;\n\n /** True if the option is currently checked (multi-select) */\n isChecked: boolean;\n\n /** True if the option is currently indeterminate (multi-select select all option) */\n isIndeterminate: boolean;\n\n /**\n * A function that returns the children of the OptionWrapper. We pass this in as a function to ensure that\n * children methods don't get called unnecessarily if the component doesn't need to be updated. This leads\n * to a significant performance increase in ComboBoxes with many options and/or complex onRenderOption functions\n */\n render: () => JSX.Element;\n}\n\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 */\nconst ComboBoxOptionWrapper = React.memo(\n ({ render }: IComboBoxOptionWrapperProps) => render(),\n (\n { render: oldRender, ...oldProps }: IComboBoxOptionWrapperProps,\n { render: newRender, ...newProps }: IComboBoxOptionWrapperProps,\n ) =>\n // The render function will always be different, so we ignore that prop\n shallowCompare(oldProps, newProps),\n);\n\nconst COMPONENT_NAME = 'ComboBox';\nconst DEFAULT_PROPS: Partial = {\n options: [],\n allowFreeform: false,\n allowParentArrowNavigation: false,\n autoComplete: 'on',\n buttonIconProps: { iconName: 'ChevronDown' },\n};\n\nfunction useOptionsState({ options, defaultSelectedKey, selectedKey }: IComboBoxProps) {\n /** The currently selected indices */\n const [selectedIndices, setSelectedIndices] = React.useState(() =>\n getSelectedIndices(options, buildDefaultSelectedKeys(defaultSelectedKey, selectedKey)),\n );\n /** The options currently available for the callout */\n const [currentOptions, setCurrentOptions] = React.useState(options);\n /** This value is used for the autocomplete hint value */\n const [suggestedDisplayValue, setSuggestedDisplayValue] = React.useState();\n\n React.useEffect(() => {\n if (selectedKey !== undefined) {\n const selectedKeys: string[] | number[] = buildSelectedKeys(selectedKey);\n const indices: number[] = getSelectedIndices(options, selectedKeys);\n\n setSelectedIndices(indices);\n }\n setCurrentOptions(options);\n }, [options, selectedKey]);\n\n React.useEffect(() => {\n if (selectedKey === null) {\n setSuggestedDisplayValue(undefined);\n }\n }, [selectedKey]);\n\n return [\n selectedIndices,\n setSelectedIndices,\n currentOptions,\n setCurrentOptions,\n suggestedDisplayValue,\n setSuggestedDisplayValue,\n ] as const;\n}\n\nexport const ComboBox: React.FunctionComponent = React.forwardRef(\n (propsWithoutDefaults: IComboBoxProps, forwardedRef: React.Ref) => {\n const { ref, ...props } = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n const rootRef = React.useRef(null);\n\n const mergedRootRef = useMergedRefs(rootRef, forwardedRef);\n\n const [\n selectedIndices,\n setSelectedIndices,\n currentOptions,\n setCurrentOptions,\n suggestedDisplayValue,\n setSuggestedDisplayValue,\n ] = useOptionsState(props);\n\n return (\n \n );\n },\n);\nComboBox.displayName = COMPONENT_NAME;\n\ninterface IComboBoxInternalProps extends Omit {\n hoisted: {\n mergedRootRef: React.Ref;\n rootRef: React.RefObject;\n selectedIndices: number[];\n currentOptions: IComboBoxOption[];\n suggestedDisplayValue?: string;\n setSelectedIndices: React.Dispatch>;\n setCurrentOptions: React.Dispatch>;\n setSuggestedDisplayValue: React.Dispatch>;\n };\n}\n\n/**\n * Depth-first search to find the first descendant element where the match function returns true.\n * @param element - element to start searching at\n * @param match - the function that determines if the element is a match\n * @returns the matched element or null no match was found\n */\nfunction findFirstDescendant(element: HTMLElement, match: (element: HTMLElement) => boolean): HTMLElement | null {\n const children = getChildren(element);\n\n // For loop is used because forEach cannot be stopped.\n for (let index = 0; index < children.length; index++) {\n const child = children[index];\n if (match(child)) {\n return child;\n }\n const candidate = findFirstDescendant(child, match);\n if (candidate) {\n return candidate;\n }\n }\n return null;\n}\n\n@customizable('ComboBox', ['theme', 'styles'], true)\nclass ComboBoxInternal extends React.Component implements IComboBox {\n public static contextType = WindowContext;\n\n /** The input aspect of the combo box */\n private _autofill = React.createRef();\n\n /** The wrapping div of the input and button */\n private _comboBoxWrapper = React.createRef();\n\n /** The callout element */\n private _comboBoxMenu = React.createRef();\n\n /** The menu item element that is currently selected */\n private _selectedElement = React.createRef();\n\n /** The base id for the ComboBox */\n private _id: string;\n\n /**\n * After a character is inserted when autocomplete is true and allowFreeform is false,\n * remember the task that will clear the pending string of characters.\n */\n private _autoCompleteTimeout: number | undefined;\n\n /** Promise used when resolving the comboBox options */\n private _currentPromise: PromiseLike;\n\n /** The current visible value sent to the auto fill on render */\n private _currentVisibleValue: string | undefined;\n private _classNames: IComboBoxClassNames;\n private _isScrollIdle: boolean;\n private _hasPendingValue: boolean;\n private _scrollIdleTimeoutId: number | undefined;\n private _processingTouch: boolean;\n private _lastTouchTimeoutId: number | undefined;\n /** True if the most recent keydown event was for alt (option) or meta (command). */\n private _lastKeyDownWasAltOrMeta: boolean | undefined;\n\n /**\n * Determines if we should be setting focus back to the input when the menu closes.\n * The general rule of thumb is if the menu was launched via the keyboard focus should go back\n * to the input, if it was dropped via the mouse focus should not be forced back to the input.\n */\n private _focusInputAfterClose: boolean;\n\n /** Flag for when we get the first mouseMove */\n private _gotMouseMove: boolean;\n\n private _processingClearPendingInfo: boolean;\n\n private _async: Async;\n private _events: EventGroup;\n\n // props to prevent dismiss on scroll/resize immediately after opening\n private _overrideScrollDismiss = false;\n private _overrideScrollDimissTimeout: number;\n\n constructor(props: IComboBoxInternalProps) {\n super(props);\n\n initializeComponentRef(this);\n this._async = new Async(this);\n this._events = new EventGroup(this);\n\n warnMutuallyExclusive(COMPONENT_NAME, props, {\n defaultSelectedKey: 'selectedKey',\n text: 'defaultSelectedKey',\n selectedKey: 'value',\n dropdownWidth: 'useComboBoxAsMenuWidth',\n ariaLabel: 'label',\n });\n\n this._id = props.id || getId('ComboBox');\n\n this._isScrollIdle = true;\n this._processingTouch = false;\n this._gotMouseMove = false;\n this._processingClearPendingInfo = false;\n\n this.state = {\n isOpen: false,\n focusState: 'none',\n currentPendingValueValidIndex: -1,\n currentPendingValue: undefined,\n currentPendingValueValidIndexOnHover: HoverStatus.default,\n };\n }\n\n /**\n * All selected options\n */\n public get selectedOptions(): IComboBoxOption[] {\n const { currentOptions, selectedIndices } = this.props.hoisted;\n\n return getAllSelectedOptions(currentOptions, selectedIndices!);\n }\n\n public componentDidMount(): void {\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\n public componentDidUpdate(prevProps: IComboBoxInternalProps, prevState: IComboBoxState) {\n const {\n allowFreeform,\n allowFreeInput,\n text,\n onMenuOpen,\n onMenuDismissed,\n hoisted: { currentOptions, selectedIndices },\n } = this.props;\n const { currentPendingValue, currentPendingValueValidIndex, isOpen } = this.state;\n\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(() => this._scrollIntoView(), 0);\n }\n\n const doc = getDocumentEx(this.context);\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 (\n this._hasFocus() &&\n (isOpen ||\n (prevState.isOpen &&\n !isOpen &&\n this._focusInputAfterClose &&\n this._autofill.current &&\n doc?.activeElement !== this._autofill.current.inputElement))\n ) {\n this.focus(undefined /*shouldOpenOnFocus*/, true /*useFocusAsync*/);\n }\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 free input OR\n // the value changed\n // we need to set selection\n if (\n 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 && !allowFreeInput) ||\n text !== prevProps.text)))\n ) {\n this._onFocus();\n }\n\n this._notifyPendingValueChanged(prevState);\n\n if (isOpen && !prevState.isOpen) {\n // handle dismiss buffer after suggestions are opened\n this._overrideScrollDismiss = true;\n this._async.clearTimeout(this._overrideScrollDimissTimeout);\n this._overrideScrollDimissTimeout = this._async.setTimeout(() => {\n this._overrideScrollDismiss = false;\n }, 100);\n\n onMenuOpen?.();\n }\n\n if (!isOpen && prevState.isOpen && onMenuDismissed) {\n onMenuDismissed();\n }\n\n let newCurrentPendingValueValidIndex = currentPendingValueValidIndex;\n const options = currentOptions.map((item, index) => ({ ...item, index }));\n\n // If currentOptions differs from the previous currentOptions we need to update the currentPendingValueValidIndex\n // otherwise, it will be out of sync with the currentOptions. This can happen when the options are filtered.\n if (!shallowCompare(prevProps.hoisted.currentOptions, currentOptions) && currentPendingValue) {\n newCurrentPendingValueValidIndex =\n this.props.allowFreeform || this.props.allowFreeInput\n ? this._processInputChangeWithFreeform(currentPendingValue)\n : this._updateAutocompleteIndexWithoutFreeform(currentPendingValue);\n }\n\n let descendantText = undefined;\n\n if (isOpen && this._hasFocus() && newCurrentPendingValueValidIndex !== -1) {\n descendantText =\n options[newCurrentPendingValueValidIndex].id ?? this._id + '-list' + newCurrentPendingValueValidIndex;\n } else if (isOpen && selectedIndices.length) {\n descendantText = options[selectedIndices[0]]?.id ?? this._id + '-list' + selectedIndices[0];\n }\n\n if (descendantText !== this.state.ariaActiveDescendantValue) {\n this.setState({\n ariaActiveDescendantValue: descendantText,\n });\n }\n }\n\n public componentWillUnmount(): void {\n this._async.dispose();\n this._events.dispose();\n }\n\n // Primary Render\n public render(): JSX.Element {\n const id = this._id;\n const errorMessageId = id + '-error';\n const {\n className,\n disabled,\n required,\n errorMessage,\n onRenderContainer = this._onRenderContainer,\n onRenderLabel = this._onRenderLabel,\n onRenderList = this._onRenderList,\n onRenderItem = this._onRenderItem,\n onRenderOption = this._onRenderOptionContent,\n allowFreeform,\n styles: customStyles,\n theme,\n persistMenu,\n multiSelect,\n hoisted: { suggestedDisplayValue, selectedIndices, currentOptions },\n } = this.props;\n const { isOpen } = this.state;\n this._currentVisibleValue = this._getVisibleValue();\n\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 const multiselectAccessibleText = multiSelect\n ? this._getMultiselectDisplayString(selectedIndices, currentOptions, suggestedDisplayValue)\n : undefined;\n\n const divProps = getNativeProps>(this.props, divProperties, [\n 'onChange',\n 'value',\n 'aria-describedby',\n 'aria-labelledby',\n ]);\n\n const hasErrorMessage = errorMessage && errorMessage.length > 0 ? true : false;\n\n this._classNames = this.props.getClassNames\n ? this.props.getClassNames(\n theme!,\n !!isOpen,\n !!disabled,\n !!required,\n !!this._hasFocus(),\n !!allowFreeform,\n !!hasErrorMessage,\n className,\n )\n : getClassNames(\n getStyles(theme!, customStyles),\n className!,\n !!isOpen,\n !!disabled,\n !!required,\n !!this._hasFocus(),\n !!allowFreeform,\n !!hasErrorMessage,\n );\n\n const comboBoxWrapper = this._renderComboBoxWrapper(multiselectAccessibleText, errorMessageId);\n\n return (\n
    \n {onRenderLabel({ props: this.props, multiselectAccessibleText }, this._onRenderLabel)}\n {comboBoxWrapper}\n {(persistMenu || isOpen) &&\n onRenderContainer(\n {\n ...this.props,\n onRenderList,\n onRenderItem,\n onRenderOption,\n options: currentOptions.map((item, index) => ({ ...item, index })),\n onDismiss: this._onDismiss,\n },\n this._onRenderContainer,\n )}\n {hasErrorMessage && (\n
    \n {errorMessage}\n
    \n )}\n
    \n );\n }\n\n /**\n * {@inheritdoc}\n */\n public focus = (shouldOpenOnFocus?: boolean, useFocusAsync?: boolean): void => {\n if (this.props.disabled) {\n return;\n }\n\n if (this._autofill.current) {\n if (useFocusAsync) {\n focusAsync(this._autofill.current);\n } else {\n this._autofill.current.focus();\n }\n\n if (shouldOpenOnFocus) {\n this.setState({\n isOpen: true,\n });\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 /**\n * Close menu callout if it is open\n */\n public dismissMenu = (): void => {\n const { isOpen } = this.state;\n isOpen && this.setState({ isOpen: false });\n };\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 private _onUpdateValueInAutofillWillReceiveProps = (): string | null => {\n const comboBox = this._autofill.current;\n\n if (!comboBox) {\n return null;\n }\n\n if (comboBox.value === null || comboBox.value === undefined) {\n return null;\n }\n\n return normalizeToString(this._currentVisibleValue);\n };\n\n private _renderComboBoxWrapper = (\n multiselectAccessibleText: string | undefined,\n errorMessageId: string,\n ): JSX.Element => {\n const {\n label,\n disabled,\n ariaLabel,\n ariaDescribedBy = this.props['aria-describedby'],\n required,\n errorMessage,\n buttonIconProps,\n isButtonAriaHidden,\n title,\n placeholder: placeholderProp,\n tabIndex,\n autofill,\n iconButtonProps,\n hoisted: { suggestedDisplayValue },\n } = this.props;\n\n const { ariaActiveDescendantValue, isOpen } = this.state;\n\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 const placeholder =\n this._hasFocus() && this.props.multiSelect && multiselectAccessibleText\n ? multiselectAccessibleText\n : placeholderProp;\n\n const labelledBy = [this.props['aria-labelledby'], label && this._id + '-label'].join(' ').trim();\n const labelProps = {\n 'aria-labelledby': labelledBy ? labelledBy : undefined,\n 'aria-label': ariaLabel && !label ? ariaLabel : undefined,\n };\n\n return (\n \n \n \n
    \n );\n };\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 private _onShouldSelectFullInputValueInAutofillComponentDidUpdate = (): boolean => {\n return this._currentVisibleValue === this.props.hoisted.suggestedDisplayValue;\n };\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 private _getVisibleValue = (): string | undefined => {\n const {\n text,\n allowFreeform,\n allowFreeInput,\n autoComplete,\n hoisted: { suggestedDisplayValue, selectedIndices, currentOptions },\n } = this.props;\n const { currentPendingValueValidIndex, currentPendingValue, isOpen } = this.state;\n\n const currentPendingIndexValid = indexWithinBounds(currentOptions, currentPendingValueValidIndex);\n\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 (\n !(isOpen && currentPendingIndexValid) &&\n (text || text === '') &&\n (currentPendingValue === null || currentPendingValue === undefined)\n ) {\n return text;\n }\n\n if (this.props.multiSelect) {\n // Multi-select\n if (this._hasFocus()) {\n let index = -1;\n if (autoComplete === 'on' && currentPendingIndexValid) {\n index = currentPendingValueValidIndex;\n }\n return this._getPendingString(currentPendingValue, currentOptions, index);\n } else {\n return this._getMultiselectDisplayString(selectedIndices, currentOptions, suggestedDisplayValue);\n }\n } else {\n // Single-select\n let index: number = this._getFirstSelectedIndex();\n if (allowFreeform || allowFreeInput) {\n // If we are allowing freeform/free input 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\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 } 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 } else if (!this.state.isOpen && currentPendingValue) {\n return indexWithinBounds(currentOptions, index)\n ? currentPendingValue\n : normalizeToString(suggestedDisplayValue);\n } else {\n return indexWithinBounds(currentOptions, index)\n ? getPreviewText(currentOptions[index])\n : normalizeToString(suggestedDisplayValue);\n }\n }\n }\n };\n\n private _getPendingString(\n currentPendingValue: string | null | undefined,\n currentOptions: IComboBoxOption[],\n index: number,\n ) {\n return currentPendingValue !== null && currentPendingValue !== undefined\n ? currentPendingValue\n : indexWithinBounds(currentOptions, index)\n ? getPreviewText(currentOptions[index])\n : '';\n }\n\n /**\n * Returns a string that concatenates all of the selected values\n * for multiselect combo box.\n */\n private _getMultiselectDisplayString(\n selectedIndices: number[] | undefined,\n currentOptions: IComboBoxOption[],\n suggestedDisplayValue: string | undefined,\n ) {\n const displayValues = [];\n for (let idx = 0; selectedIndices && idx < selectedIndices.length; idx++) {\n const index: number = selectedIndices[idx];\n if (currentOptions[index].itemType !== SelectableOptionMenuItemType.SelectAll) {\n displayValues.push(\n indexWithinBounds(currentOptions, index)\n ? currentOptions[index].text\n : normalizeToString(suggestedDisplayValue),\n );\n }\n }\n const { multiSelectDelimiter = ', ' } = this.props;\n return displayValues.join(multiSelectDelimiter);\n }\n\n /**\n * Handler for typing changes on the input\n * @param updatedValue - the newly changed value\n */\n private _onInputChange = (updatedValue: string): void => {\n if (this.props.disabled) {\n this._handleInputWhenDisabled(null /* event */);\n return;\n }\n\n if (this.props.onInputValueChange) {\n this.props.onInputValueChange(updatedValue);\n }\n\n this.props.allowFreeform || this.props.allowFreeInput\n ? this._processInputChangeWithFreeform(updatedValue)\n : this._processInputChangeWithoutFreeform(updatedValue);\n };\n\n /**\n * Do not dismiss if the window resizes or scrolls within 100ms of opening\n * This prevents the Android issue where pickers immediately dismiss on open, because the keyboard appears\n * @param ev - the event triggering the dismiss check\n * @returns a boolean indicating whether the callout dismissal should be prevented\n */\n private _preventDismissOnScrollOrResize(ev: Event) {\n // default to passed-in preventDismiss\n const { calloutProps } = this.props;\n if (calloutProps?.preventDismissOnEvent) {\n return calloutProps.preventDismissOnEvent(ev);\n }\n\n if (this._overrideScrollDismiss && (ev.type === 'scroll' || ev.type === 'resize')) {\n return true;\n }\n\n return false;\n }\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 * @returns the index of the matched option, -1 if no match was found\n */\n private _processInputChangeWithFreeform(updatedValue: string): number {\n const { currentOptions } = this.props.hoisted;\n let newCurrentPendingValueValidIndex = -1;\n\n // if the new value is empty, see if we have an exact match and then set the pending info\n if (updatedValue === '') {\n const items = currentOptions\n .map((item, index) => ({ ...item, index }))\n .filter(option => isNormalOption(option) && !option.disabled && getPreviewText(option) === updatedValue);\n\n // if we found a match remember the index\n if (items.length === 1) {\n newCurrentPendingValueValidIndex = items[0].index;\n }\n\n this._setPendingInfo(updatedValue, newCurrentPendingValueValidIndex, updatedValue);\n return newCurrentPendingValueValidIndex;\n }\n\n // Remember the original value and then make the value lowercase for comparison\n const originalUpdatedValue: string = updatedValue;\n // Make the value lowercase for comparison if caseSensitive is false\n updatedValue = this._adjustForCaseSensitivity(updatedValue);\n\n let newSuggestedDisplayValue = '';\n\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 const items = currentOptions\n .map((item, index) => ({ ...item, index }))\n .filter(\n option =>\n isNormalOption(option) &&\n !option.disabled &&\n this._adjustForCaseSensitivity(getPreviewText(option)).indexOf(updatedValue) === 0,\n );\n if (items.length > 0) {\n // use ariaLabel as the value when the option is set\n const text: string = getPreviewText(items[0]);\n\n // If the user typed out the complete option text, we don't need any suggested display text anymore\n newSuggestedDisplayValue = this._adjustForCaseSensitivity(text) !== updatedValue ? text : '';\n\n // remember the index of the match we found\n newCurrentPendingValueValidIndex = items[0].index;\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 const items = currentOptions\n .map((item, index) => ({ ...item, index }))\n .filter(\n option =>\n isNormalOption(option) &&\n !option.disabled &&\n this._adjustForCaseSensitivity(getPreviewText(option)) === updatedValue,\n );\n\n // if we found a match remember the index\n if (items.length === 1) {\n newCurrentPendingValueValidIndex = items[0].index;\n }\n }\n\n // Set the updated state\n this._setPendingInfo(originalUpdatedValue, newCurrentPendingValueValidIndex, newSuggestedDisplayValue);\n return newCurrentPendingValueValidIndex;\n }\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 * @returns the index of the matched option\n */\n private _processInputChangeWithoutFreeform(updatedValue: string): number {\n const { currentPendingValue, currentPendingValueValidIndex } = this.state;\n\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\n const matchingIndex = this._updateAutocompleteIndexWithoutFreeform(updatedValue);\n\n // Schedule a timeout to clear the pending value after the timeout span\n this._autoCompleteTimeout = this._async.setTimeout(() => {\n this._autoCompleteTimeout = undefined;\n }, ReadOnlyPendingAutoCompleteTimeout);\n\n return matchingIndex;\n }\n }\n\n // If we get here, autoComplete is off.\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 const index = currentPendingValueValidIndex >= 0 ? currentPendingValueValidIndex : this._getFirstSelectedIndex();\n\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 return index;\n }\n\n private _updateAutocompleteIndexWithoutFreeform(updatedValue: string): number {\n const { currentOptions } = this.props.hoisted;\n const originalUpdatedValue: string = updatedValue;\n updatedValue = this._adjustForCaseSensitivity(updatedValue);\n\n // If autoComplete is on, attempt to find a match where the text of an option starts with the updated value\n const items = currentOptions\n .map((item, i) => ({ ...item, index: i }))\n\n .filter(\n option =>\n isNormalOption(option) &&\n !option.disabled &&\n this._adjustForCaseSensitivity(option.text).indexOf(updatedValue) === 0,\n );\n\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 return items[0].index;\n }\n\n return -1;\n }\n\n private _getFirstSelectedIndex(): number {\n const { selectedIndices } = this.props.hoisted;\n return selectedIndices?.length ? selectedIndices[0] : -1;\n }\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 private _getNextSelectableIndex(index: number, searchDirection: SearchDirection): number {\n const { currentOptions } = this.props.hoisted;\n\n let newIndex = index + searchDirection;\n\n newIndex = Math.max(0, Math.min(currentOptions.length - 1, newIndex));\n\n if (!indexWithinBounds(currentOptions, newIndex)) {\n return -1;\n }\n\n const option: IComboBoxOption = currentOptions[newIndex];\n\n if (!isSelectableOption(option) || option.hidden === true) {\n // Should we continue looking for an index to select?\n if (\n searchDirection !== SearchDirection.none &&\n ((newIndex > 0 && searchDirection < SearchDirection.none) ||\n (newIndex >= 0 && newIndex < currentOptions.length && searchDirection > SearchDirection.none))\n ) {\n newIndex = this._getNextSelectableIndex(newIndex, searchDirection);\n } else {\n // If we cannot perform a useful search just return the index we were given\n return index;\n }\n }\n\n // We have the next valid selectable index, return it\n return newIndex;\n }\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 private _setSelectedIndex(\n index: number,\n submitPendingValueEvent: React.SyntheticEvent,\n searchDirection: SearchDirection = SearchDirection.none,\n ): void {\n const {\n onChange,\n onPendingValueChanged,\n hoisted: { selectedIndices: initialIndices, currentOptions },\n } = this.props;\n\n // Clone currentOptions and selectedIndices so we don't mutate state\n let selectedIndices = initialIndices ? initialIndices.slice() : [];\n let changedOptions = currentOptions.slice();\n\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\n if (!indexWithinBounds(currentOptions, index)) {\n return;\n }\n\n // Are we at a new index? If so, update the state, otherwise\n // there is nothing to do\n if (\n this.props.multiSelect ||\n selectedIndices.length < 1 ||\n (selectedIndices.length === 1 && selectedIndices[0] !== index)\n ) {\n const option: IComboBoxOption = { ...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\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((currentOption, i) => {\n if (!currentOption.disabled && isSelectableOption(currentOption)) {\n selectedIndices.push(i);\n changedOptions[i] = { ...currentOption, selected: true };\n }\n });\n }\n // otherwise un-check all options\n else {\n changedOptions = currentOptions.map(currentOption => ({ ...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 } else if (!option.selected && selectedIndices.indexOf(index) >= 0) {\n selectedIndices = selectedIndices.filter((value: number) => value !== index);\n }\n changedOptions[index] = option;\n\n // If SelectAll exists and another option was toggled, update the SelectAll option's state\n const selectAllOption = changedOptions.filter(o => o.itemType === SelectableOptionMenuItemType.SelectAll)[0];\n if (selectAllOption) {\n const selectAllState = this._isSelectAllChecked(selectedIndices);\n const selectAllIndex = changedOptions.indexOf(selectAllOption);\n if (selectAllState) {\n selectedIndices.push(selectAllIndex);\n changedOptions[selectAllIndex] = { ...selectAllOption, selected: true };\n } else {\n selectedIndices = selectedIndices.filter((value: number) => value !== selectAllIndex);\n changedOptions[selectAllIndex] = { ...selectAllOption, selected: false };\n }\n }\n }\n } else {\n selectedIndices[0] = index;\n }\n\n submitPendingValueEvent.persist();\n\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 } else {\n this.props.hoisted.setSelectedIndices(selectedIndices);\n this.props.hoisted.setCurrentOptions(changedOptions);\n\n // If ComboBox value is changed, revert preview first\n if (this._hasPendingValue && onPendingValueChanged) {\n onPendingValueChanged();\n this._hasPendingValue = false;\n }\n }\n\n // Call onChange after state is updated\n if (onChange) {\n onChange(submitPendingValueEvent, option, index, getPreviewText(option));\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 /**\n * Focus (and select) the content of the input\n * and set the focused state\n */\n private _onFocus = (): void => {\n this._autofill.current?.inputElement?.select();\n\n if (!this._hasFocus()) {\n this.setState({ focusState: 'focusing' });\n }\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 private _onResolveOptions = (): void => {\n if (this.props.onResolveOptions) {\n // get the options\n const newOptions = this.props.onResolveOptions([...this.props.hoisted.currentOptions]);\n\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 } else if (newOptions && (newOptions as PromiseLike).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 this._currentPromise = newOptions;\n newOptions.then((newOptionsFromPromise: IComboBoxOption[]) => {\n if (newOptions === this._currentPromise) {\n this.props.hoisted.setCurrentOptions(newOptionsFromPromise);\n }\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 private _onBlur = (event: React.FocusEvent): void => {\n const doc = getDocumentEx(this.context);\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 let 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 = doc?.activeElement as Element;\n }\n\n if (relatedTarget) {\n const isBlurFromComboBoxTitle = this.props.hoisted.rootRef.current?.contains(relatedTarget as HTMLElement);\n const isBlurFromComboBoxMenu = this._comboBoxMenu.current?.contains(relatedTarget as HTMLElement);\n const isBlurFromComboBoxMenuAncestor =\n this._comboBoxMenu.current &&\n findElementRecursive(this._comboBoxMenu.current, (element: HTMLElement) => element === relatedTarget, doc);\n\n if (isBlurFromComboBoxTitle || isBlurFromComboBoxMenu || isBlurFromComboBoxMenuAncestor) {\n if (\n isBlurFromComboBoxMenuAncestor &&\n this._hasFocus() &&\n (!this.props.multiSelect || this.props.allowFreeform)\n ) {\n this._submitPendingValue(event);\n }\n event.preventDefault();\n event.stopPropagation();\n return;\n }\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\n /**\n * Submit a pending value if there is one\n */\n private _submitPendingValue(submitPendingValueEvent: React.SyntheticEvent): void {\n const { onChange, allowFreeform, autoComplete, multiSelect, hoisted } = this.props;\n const { currentOptions } = hoisted;\n const { currentPendingValue, currentPendingValueValidIndex, currentPendingValueValidIndexOnHover } = this.state;\n let { selectedIndices } = this.props.hoisted;\n\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\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\n return;\n }\n\n // Check to see if the user typed an exact match\n if (indexWithinBounds(currentOptions, currentPendingValueValidIndex)) {\n const pendingOptionText = this._adjustForCaseSensitivity(\n getPreviewText(currentOptions[currentPendingValueValidIndex]),\n );\n\n const autofill = this._autofill.current;\n\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 const adjustedCurrentPendingValue = this._adjustForCaseSensitivity(currentPendingValue);\n if (\n adjustedCurrentPendingValue === pendingOptionText ||\n (autoComplete &&\n pendingOptionText.indexOf(adjustedCurrentPendingValue) === 0 &&\n autofill?.isValueSelected &&\n currentPendingValue.length + (autofill.selectionEnd! - autofill.selectionStart!) ===\n pendingOptionText.length) ||\n (autofill?.inputElement?.value !== undefined &&\n this._adjustForCaseSensitivity(autofill.inputElement.value) === pendingOptionText)\n ) {\n this._setSelectedIndex(currentPendingValueValidIndex, submitPendingValueEvent);\n if (multiSelect && this.state.isOpen) {\n return;\n }\n this._clearPendingInfo();\n return;\n }\n }\n\n if (onChange) {\n if (onChange) {\n // trigger onChange to clear value\n onChange(submitPendingValueEvent, undefined, undefined, currentPendingValue);\n }\n } else {\n // If we are not controlled, create a new selected option\n const newOption: IComboBoxOption = {\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 const newOptions: IComboBoxOption[] = 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 } 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 } 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\n // Finally, clear the pending info\n this._clearPendingInfo();\n }\n\n // Render Callout container and pass in list\n private _onRenderContainer = (props: IComboBoxProps, defaultRender: IRenderFunction): JSX.Element => {\n const {\n onRenderList,\n calloutProps,\n dropdownWidth,\n dropdownMaxWidth,\n onRenderUpperContent = this._onRenderUpperContent,\n onRenderLowerContent = this._onRenderLowerContent,\n useComboBoxAsMenuWidth,\n persistMenu,\n shouldRestoreFocus = true,\n } = props;\n\n const { isOpen } = this.state;\n const id = this._id;\n\n const comboBoxMenuWidth =\n useComboBoxAsMenuWidth && this._comboBoxWrapper.current\n ? this._comboBoxWrapper.current.clientWidth + 2\n : undefined;\n\n return (\n
    \n );\n }\n\n public forceUpdate() {\n super.forceUpdate();\n this._forceListUpdates();\n }\n\n public toggleCollapseAll(allCollapsed: boolean): void {\n const { groups = [] } = this.state;\n const { groupProps } = this.props;\n const onToggleCollapseAll = groupProps && groupProps.onToggleCollapseAll;\n\n if (groups.length > 0) {\n if (onToggleCollapseAll) {\n onToggleCollapseAll(allCollapsed);\n }\n\n this._setGroupsCollapsedState(groups, allCollapsed);\n\n this._updateIsSomeGroupExpanded();\n\n this.forceUpdate();\n }\n }\n\n private _setGroupsCollapsedState(groups: IGroup[], isCollapsed: boolean): void {\n for (let groupIndex = 0; groupIndex < groups.length; groupIndex++) {\n groups[groupIndex].isCollapsed = isCollapsed;\n }\n }\n\n private _renderGroup = (group: IGroup | undefined, groupIndex: number): React.ReactNode => {\n const {\n dragDropEvents,\n dragDropHelper,\n eventsToRegister,\n groupProps,\n items,\n listProps,\n onRenderCell,\n selectionMode,\n selection,\n viewport,\n onShouldVirtualize,\n groups,\n compact,\n } = this.props;\n\n // override group header/footer props as needed\n const dividerProps = {\n onToggleSelectGroup: this._onToggleSelectGroup,\n onToggleCollapse: this._onToggleCollapse,\n onToggleSummarize: this._onToggleSummarize,\n };\n\n const headerProps: IGroupHeaderProps = { ...groupProps!.headerProps, ...dividerProps };\n const showAllProps: IGroupShowAllProps = { ...groupProps!.showAllProps, ...dividerProps };\n const footerProps: IGroupFooterProps = { ...groupProps!.footerProps, ...dividerProps };\n const groupNestingDepth = this._getGroupNestingDepth();\n\n if (!groupProps!.showEmptyGroups && group && group.count === 0) {\n return null;\n }\n\n const finalListProps: IListProps = {\n ...(listProps || {}),\n version: this.state.version,\n };\n\n return (\n \n );\n };\n\n private _returnOne(): number {\n return 1;\n }\n\n private _getDefaultGroupItemLimit = (group: IGroup): number => {\n return group.children && group.children.length > 0 ? group.children.length : group.count;\n };\n\n private _getGroupItemLimit = (group: IGroup): number => {\n const { groupProps } = this.props;\n const getGroupItemLimit =\n groupProps && groupProps.getGroupItemLimit ? groupProps.getGroupItemLimit : this._getDefaultGroupItemLimit;\n\n return getGroupItemLimit(group);\n };\n\n private _getGroupHeight = (group: IGroup): number => {\n const rowHeight = this.props.compact ? COMPACT_ROW_HEIGHT : ROW_HEIGHT;\n\n return rowHeight + (group.isCollapsed ? 0 : rowHeight * this._getGroupItemLimit(group));\n };\n\n private _getPageHeight: IListProps['getPageHeight'] = (itemIndex: number) => {\n const { groups } = this.state;\n const { getGroupHeight = this._getGroupHeight } = this.props;\n const pageGroup = groups && groups[itemIndex];\n\n if (pageGroup) {\n return getGroupHeight(pageGroup, itemIndex);\n } else {\n return 0;\n }\n };\n\n private _getGroupKey(group: IGroup | undefined, index: number): string {\n return 'group-' + (group && group.key ? group.key : String(index));\n }\n\n private _getGroupNestingDepth(): number {\n const { groups } = this.state;\n let level = 0;\n let groupsInLevel = groups;\n\n while (groupsInLevel && groupsInLevel.length > 0) {\n level++;\n groupsInLevel = groupsInLevel[0].children;\n }\n\n return level;\n }\n\n private _onToggleCollapse = (group: IGroup): void => {\n const { groupProps } = this.props;\n const onToggleCollapse = groupProps && groupProps.headerProps && groupProps.headerProps.onToggleCollapse;\n\n if (group) {\n if (onToggleCollapse) {\n onToggleCollapse(group);\n }\n\n group.isCollapsed = !group.isCollapsed;\n this._updateIsSomeGroupExpanded();\n this.forceUpdate();\n }\n };\n\n private _onToggleSelectGroup = (group: IGroup): void => {\n const { selection, selectionMode } = this.props;\n\n if (group && selection && selectionMode === SelectionMode.multiple) {\n selection.toggleRangeSelected(group.startIndex, group.count);\n }\n };\n\n private _isInnerZoneKeystroke = (ev: React.KeyboardEvent): boolean => {\n // eslint-disable-next-line deprecation/deprecation\n return ev.which === getRTLSafeKeyCode(KeyCodes.right);\n };\n\n private _forceListUpdates(groups?: IGroup[]): void {\n this.setState({\n version: {},\n });\n }\n\n private _onToggleSummarize = (group: IGroup): void => {\n const { groupProps } = this.props;\n const onToggleSummarize = groupProps && groupProps.showAllProps && groupProps.showAllProps.onToggleSummarize;\n\n if (onToggleSummarize) {\n onToggleSummarize(group);\n } else {\n if (group) {\n group.isShowingAll = !group.isShowingAll;\n }\n\n this.forceUpdate();\n }\n };\n\n private _getPageSpecification = (\n itemIndex: number,\n ): {\n key?: string;\n } => {\n const groups = this.state.groups;\n const pageGroup = groups && groups[itemIndex];\n return {\n key: pageGroup && pageGroup.key,\n };\n };\n\n private _computeIsSomeGroupExpanded(groups: IGroup[] | undefined): boolean {\n return !!(\n groups &&\n groups.some(group => (group.children ? this._computeIsSomeGroupExpanded(group.children) : !group.isCollapsed))\n );\n }\n\n private _updateIsSomeGroupExpanded(): void {\n const { groups } = this.state;\n const { onGroupExpandStateChanged } = this.props;\n\n const newIsSomeGroupExpanded = this._computeIsSomeGroupExpanded(groups);\n if (this._isSomeGroupExpanded !== newIsSomeGroupExpanded) {\n if (onGroupExpandStateChanged) {\n onGroupExpandStateChanged(newIsSomeGroupExpanded);\n }\n this._isSomeGroupExpanded = newIsSomeGroupExpanded;\n }\n }\n}\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { getStyles } from './GroupedList.styles';\nimport { GroupedListBase } from './GroupedList.base';\nimport type { IGroupedListProps, IGroupedListStyles, IGroupedListStyleProps } from './GroupedList.types';\n\nexport const GroupedList: React.FunctionComponent = styled<\n IGroupedListProps,\n IGroupedListStyleProps,\n IGroupedListStyles\n>(GroupedListBase, getStyles, undefined, {\n scope: 'GroupedList',\n});\n\nexport type { IGroupedListProps };\n","import type { IGroup } from '../../components/GroupedList/GroupedList.types';\n\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 const GetGroupCount = (groups: IGroup[] | undefined): number => {\n let total = 0;\n\n if (groups) {\n const remainingGroups = [...groups];\n let currentGroup: IGroup;\n\n while (remainingGroups && remainingGroups.length > 0) {\n ++total;\n\n currentGroup = remainingGroups.pop() as IGroup;\n\n if (currentGroup && currentGroup.children) {\n remainingGroups.push(...currentGroup.children);\n }\n }\n }\n\n return total;\n};\n","import * as React from 'react';\nimport { css, styled, classNamesFunction, composeRenderFunction, getNativeElementProps } from '../../Utilities';\nimport { Check } from '../../Check';\nimport { getDetailsRowCheckStyles } from './DetailsRowCheck.styles';\nimport { SelectionMode } from '../../Selection';\nimport type {\n IDetailsRowCheckProps,\n IDetailsCheckboxProps,\n IDetailsRowCheckStyleProps,\n IDetailsRowCheckStyles,\n} from './DetailsRowCheck.types';\nimport type { ITheme } from '../../Styling';\n\nconst getClassNames = classNamesFunction();\n\nconst DetailsRowCheckBase: React.FunctionComponent = props => {\n const {\n isVisible = false,\n canSelect = false,\n anySelected = false,\n selected = false,\n selectionMode,\n isHeader = false,\n className,\n checkClassName,\n styles,\n theme,\n compact,\n onRenderDetailsCheckbox,\n useFastIcons = true, // must be removed from buttonProps\n ...buttonProps\n } = props;\n const defaultCheckboxRender = useFastIcons ? _fastDefaultCheckboxRender : _defaultCheckboxRender;\n\n const onRenderCheckbox = onRenderDetailsCheckbox\n ? composeRenderFunction(onRenderDetailsCheckbox, defaultCheckboxRender)\n : defaultCheckboxRender;\n\n const classNames = getClassNames(styles, {\n theme: theme!,\n canSelect,\n selected,\n anySelected,\n className,\n isHeader,\n isVisible,\n compact,\n });\n\n const detailsCheckboxProps: IDetailsCheckboxProps = {\n checked: selected,\n theme,\n };\n\n const divProps = getNativeElementProps('div', buttonProps, ['aria-label', 'aria-labelledby', 'aria-describedby']);\n\n const checkRole = selectionMode === SelectionMode.single ? 'radio' : 'checkbox';\n\n return canSelect ? (\n \n {onRenderCheckbox(detailsCheckboxProps)}\n \n ) : (\n // eslint-disable-next-line deprecation/deprecation\n
    \n );\n};\n\nconst FastCheck = React.memo((props: { theme?: ITheme; checked?: boolean; className?: string }) => {\n return ;\n});\n\nfunction _defaultCheckboxRender(checkboxProps: IDetailsCheckboxProps) {\n return ;\n}\n\nfunction _fastDefaultCheckboxRender(checkboxProps: IDetailsCheckboxProps) {\n return ;\n}\n\nexport const DetailsRowCheck = styled(\n DetailsRowCheckBase,\n getDetailsRowCheckStyles,\n undefined,\n { scope: 'DetailsRowCheck' },\n true,\n);\n","import { EventGroup, getDocument } from '../../Utilities';\nimport type {\n IDragDropHelper,\n IDragDropTarget,\n IDragDropOptions,\n IDragDropEvent,\n IDragDropContext,\n} from './interfaces';\nimport type { ISelection } from '../../utilities/selection/interfaces';\n\nconst MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button\nconst MOUSEMOVE_PRIMARY_BUTTON = 1; // for mouse move event we are using ev.buttons property, 1 means left button\n\nexport interface IDragDropHelperParams {\n selection: ISelection;\n minimumPixelsForDrag?: number;\n}\n\nexport class DragDropHelper implements IDragDropHelper {\n private _dragEnterCounts: { [key: string]: number };\n private _isDragging: boolean;\n private _dragData: {\n eventTarget: EventTarget | null;\n clientX: number;\n clientY: number;\n dataTransfer?: DataTransfer;\n dropTarget?: IDragDropTarget;\n dragTarget?: IDragDropTarget;\n } | null;\n private _selection: ISelection;\n private _activeTargets: {\n [key: string]: {\n target: IDragDropTarget;\n dispose: () => void;\n };\n };\n private _events: EventGroup;\n private _lastId: number;\n private _initialized: boolean;\n\n constructor(params: IDragDropHelperParams) {\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\n public dispose(): void {\n if (this._events) {\n this._events.dispose();\n }\n }\n\n public subscribe(\n root: HTMLElement,\n events: EventGroup,\n dragDropOptions: IDragDropOptions,\n ): {\n key: string;\n dispose(): void;\n } {\n if (!this._initialized) {\n this._events = new EventGroup(this);\n\n const doc = getDocument();\n\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\n this._initialized = true;\n }\n\n const { key = `${++this._lastId}` } = dragDropOptions;\n\n const handlers: {\n callback: (context: IDragDropContext, event?: any) => void;\n eventName: string;\n }[] = [];\n\n let onDragStart: (event: DragEvent) => void;\n let onDragLeave: (event: DragEvent) => void;\n let onDragEnter: (event: DragEvent) => void;\n let onDragEnd: (event: DragEvent) => void;\n let onDrop: (event: DragEvent) => void;\n let onDragOver: (event: DragEvent) => void;\n let onMouseDown: (event: MouseEvent) => void;\n\n let isDraggable: boolean;\n let isDroppable: boolean;\n\n let activeTarget: {\n target: IDragDropTarget;\n dispose: () => void;\n };\n\n if (dragDropOptions && root) {\n const { eventMap, context, updateDropState } = dragDropOptions;\n\n const dragDropTarget: IDragDropTarget = {\n root,\n options: dragDropOptions,\n key,\n };\n\n isDraggable = this._isDraggable(dragDropTarget);\n isDroppable = this._isDroppable(dragDropTarget);\n\n if (isDraggable || isDroppable) {\n if (eventMap) {\n for (const event of eventMap) {\n const handler = {\n callback: event.callback.bind(null, context),\n eventName: event.eventName,\n };\n\n handlers.push(handler);\n\n this._events.on(root, handler.eventName, handler.callback);\n }\n }\n }\n\n if (isDroppable) {\n // If the target is droppable, wire up global event listeners to track drop-related events.\n onDragLeave = (event: DragEvent) => {\n if (!(event as IDragDropEvent).isHandled) {\n (event as IDragDropEvent).isHandled = true;\n this._dragEnterCounts[key]--;\n if (this._dragEnterCounts[key] === 0) {\n updateDropState(false /* isDropping */, event);\n }\n }\n };\n\n onDragEnter = (event: DragEvent) => {\n event.preventDefault(); // needed for IE\n if (!(event as IDragDropEvent).isHandled) {\n (event as IDragDropEvent).isHandled = true;\n this._dragEnterCounts[key]++;\n if (this._dragEnterCounts[key] === 1) {\n updateDropState(true /* isDropping */, event);\n }\n }\n };\n\n onDragEnd = (event: DragEvent) => {\n this._dragEnterCounts[key] = 0;\n updateDropState(false /* isDropping */, event);\n };\n\n onDrop = (event: DragEvent) => {\n this._dragEnterCounts[key] = 0;\n updateDropState(false /* isDropping */, event);\n\n if (dragDropOptions.onDrop) {\n dragDropOptions.onDrop(dragDropOptions.context.data, event);\n }\n };\n\n onDragOver = (event: DragEvent) => {\n event.preventDefault();\n if (dragDropOptions.onDragOver) {\n dragDropOptions.onDragOver(dragDropOptions.context.data, event);\n }\n };\n\n this._dragEnterCounts[key] = 0;\n\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\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\n // We need to add in data so that on Firefox we show the ghost element when dragging\n onDragStart = (event: DragEvent) => {\n const 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\n events.on(root, 'dragstart', onDragStart);\n events.on(root, 'mousedown', onMouseDown);\n events.on(root, 'dragend', onDragEnd);\n }\n\n activeTarget = {\n target: dragDropTarget,\n dispose: () => {\n if (this._activeTargets[key] === activeTarget) {\n delete this._activeTargets[key];\n }\n\n if (root) {\n for (const handler of handlers) {\n this._events.off(root, handler.eventName, handler.callback);\n }\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\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\n this._activeTargets[key] = activeTarget;\n }\n\n return {\n key,\n dispose: () => {\n if (activeTarget) {\n activeTarget.dispose();\n }\n },\n };\n }\n\n public unsubscribe(root: HTMLElement, key: string): void {\n const activeTarget = this._activeTargets[key];\n\n if (activeTarget) {\n activeTarget.dispose();\n }\n }\n\n private _onDragEnd(target: IDragDropTarget, event: DragEvent): void {\n const { options } = target;\n if (options.onDragEnd) {\n options.onDragEnd(options.context.data, event);\n }\n }\n\n /**\n * clear drag data when mouse up on body\n */\n private _onMouseUp(event: MouseEvent): void {\n this._isDragging = false;\n if (this._dragData) {\n for (const key of Object.keys(this._activeTargets)) {\n const activeTarget = this._activeTargets[key];\n\n if (activeTarget.target.root) {\n this._events.off(activeTarget.target.root, 'mousemove');\n this._events.off(activeTarget.target.root, 'mouseleave');\n }\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 /**\n * clear drag data when mouse up outside of the document\n */\n private _onDocumentMouseUp(event: MouseEvent): void {\n const doc = getDocument();\n\n if (doc && event.target === doc.documentElement) {\n this._onMouseUp(event);\n }\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 private _onMouseMove(target: IDragDropTarget, event: MouseEvent): void {\n const {\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 = MOUSEMOVE_PRIMARY_BUTTON,\n } = event;\n\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\n const { root, key } = target;\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\n if (this._dragData) {\n if (\n this._dragData.dropTarget &&\n this._dragData.dropTarget.key !== key &&\n !this._isChild(root, this._dragData.dropTarget.root)\n ) {\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 /**\n * when mouse leave a target while dragging some items, fire dragleave to the target\n */\n private _onMouseLeave(target: IDragDropTarget, event: MouseEvent): void {\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 /**\n * when mouse down on a draggable item, we start to track dragdata.\n */\n private _onMouseDown(target: IDragDropTarget, event: MouseEvent): void {\n if (event.button !== MOUSEDOWN_PRIMARY_BUTTON) {\n // Ignore anything except the primary button.\n return;\n }\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\n for (const key of Object.keys(this._activeTargets)) {\n const 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 } else {\n this._dragData = null;\n }\n }\n\n /**\n * determine whether the child target is a descendant of the parent\n */\n private _isChild(parentElement: HTMLElement, childElement: HTMLElement): boolean {\n while (childElement && childElement.parentElement) {\n if (childElement.parentElement === parentElement) {\n return true;\n }\n childElement = childElement.parentElement;\n }\n return false;\n }\n\n private _isDraggable(target: IDragDropTarget): boolean {\n const { options } = target;\n return !!(options.canDrag && options.canDrag(options.context.data));\n }\n\n private _isDroppable(target: IDragDropTarget): boolean {\n // TODO: take the drag item into consideration to prevent dragging an item into the same group\n const { options } = target;\n const dragContext =\n this._dragData && this._dragData.dragTarget ? this._dragData.dragTarget.options.context : undefined;\n return !!(options.canDrop && options.canDrop(options.context, dragContext));\n }\n}\n","import * 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';\nimport type { IProcessedStyleSet } from '../../Styling';\nimport type { IDisposable } from '../../Utilities';\nimport type { IDragDropOptions } from '../../DragDrop';\nimport type {\n IDetailsColumnStyleProps,\n IDetailsColumnProps,\n IDetailsColumnStyles,\n IDetailsColumnRenderTooltipProps,\n IDetailsColumnFilterIconProps,\n} from './DetailsColumn.types';\nimport { ITooltipHost } from '../Tooltip/TooltipHost.types';\n\nconst MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button\n\nconst getClassNames = classNamesFunction();\nconst TRANSITION_DURATION_DRAG = 200; // ms\nconst TRANSITION_DURATION_DROP = 1500; // ms\nconst CLASSNAME_ADD_INTERVAL = 20; // ms\n\nconst defaultOnRenderHeader =\n (classNames: IProcessedStyleSet) =>\n (props?: IDetailsColumnProps): JSX.Element | null => {\n if (!props) {\n return null;\n }\n\n if (props.column.isIconOnly) {\n return {props.column.name};\n }\n\n return <>{props.column.name};\n };\n\n/**\n * Component for rendering columns in a `DetailsList`.\n *\n * {@docCategory DetailsList}\n */\nexport class DetailsColumnBase extends React.Component {\n private _async: Async;\n private _events: EventGroup;\n private _root = React.createRef();\n private _dragDropSubscription?: IDisposable;\n private _classNames: IProcessedStyleSet;\n private _tooltipRef = React.createRef();\n\n constructor(props: IDetailsColumnProps) {\n super(props);\n initializeComponentRef(this);\n this._async = new Async(this);\n this._events = new EventGroup(this);\n }\n\n public render(): JSX.Element {\n const {\n column,\n parentId,\n isDraggable,\n styles,\n theme,\n cellStyleProps = DEFAULT_CELL_STYLE_PROPS,\n useFastIcons = true,\n } = this.props;\n const { onRenderColumnHeaderTooltip = this._onRenderColumnHeaderTooltip } = this.props;\n\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,\n transitionDurationDrag: TRANSITION_DURATION_DRAG,\n transitionDurationDrop: TRANSITION_DURATION_DROP,\n });\n\n const classNames = this._classNames;\n const IconComponent = useFastIcons ? FontIcon : Icon;\n\n const onRenderFilterIcon = column.onRenderFilterIcon\n ? composeRenderFunction(column.onRenderFilterIcon, this._onRenderFilterIcon(this._classNames))\n : this._onRenderFilterIcon(this._classNames);\n\n const onRenderHeader = column.onRenderHeader\n ? composeRenderFunction(column.onRenderHeader, defaultOnRenderHeader(this._classNames))\n : defaultOnRenderHeader(this._classNames);\n\n const hasInnerButton =\n column.columnActionsMode !== ColumnActionsMode.disabled &&\n (column.onColumnClick !== undefined || this.props.onColumnClick !== undefined);\n // use aria-describedby to point to the tooltip if the tooltip is not using the ariaLabel string\n const shouldAssociateTooltip = this.props.onRenderColumnHeaderTooltip\n ? !column.ariaLabel\n : this._hasAccessibleDescription();\n const accNameDescription = {\n 'aria-label': column.ariaLabel ? column.ariaLabel : column.isIconOnly ? column.name : undefined,\n 'aria-labelledby': column.ariaLabel || column.isIconOnly ? undefined : `${parentId}-${column.key}-name`,\n 'aria-describedby': shouldAssociateTooltip ? `${parentId}-${column.key}-tooltip` : undefined,\n };\n\n return (\n <>\n \n {isDraggable && (\n \n )}\n {onRenderColumnHeaderTooltip(\n {\n hostClassName: classNames.cellTooltip,\n id: `${parentId}-${column.key}-tooltip`,\n setAriaDescribedBy: false,\n column,\n componentRef: this._tooltipRef,\n content: column.columnActionsMode !== ColumnActionsMode.disabled ? column.ariaLabel : '',\n children: (\n \n \n {(column.iconName || column.iconClassName) && (\n \n )}\n\n {onRenderHeader(this.props)}\n \n\n {column.isFiltered && }\n\n {(column.isSorted || column.showSortIconWhenUnsorted) && (\n \n )}\n\n {column.isGrouped && }\n\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 \n ),\n },\n this._onRenderColumnHeaderTooltip,\n )}\n
    \n {!this.props.onRenderColumnHeaderTooltip ? this._renderAccessibleDescription() : null}\n \n );\n }\n\n public componentDidMount(): void {\n if (this.props.dragDropHelper && this.props.isDraggable) {\n this._addDragDropHandling();\n }\n\n const classNames = this._classNames;\n\n if (this.props.isDropped) {\n if (this._root.current) {\n this._root.current.classList.add(classNames.borderAfterDropping);\n\n this._async.setTimeout(() => {\n if (this._root.current) {\n this._root.current.classList.add(classNames.noBorderAfterDropping);\n }\n }, CLASSNAME_ADD_INTERVAL);\n }\n\n this._async.setTimeout(() => {\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\n public componentWillUnmount(): void {\n if (this._dragDropSubscription) {\n this._dragDropSubscription.dispose();\n delete this._dragDropSubscription;\n }\n this._async.dispose();\n this._events.dispose();\n }\n\n public componentDidUpdate(): void {\n if (!this._dragDropSubscription && this.props.dragDropHelper && this.props.isDraggable) {\n this._addDragDropHandling();\n }\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\n private _onRenderFilterIcon =\n (classNames: IProcessedStyleSet) =>\n (props: IDetailsColumnFilterIconProps): JSX.Element => {\n const { columnProps, ...iconProps } = props;\n const IconComponent = columnProps?.useFastIcons ? FontIcon : Icon;\n\n return ;\n };\n\n private _onRenderColumnHeaderTooltip = (tooltipHostProps: IDetailsColumnRenderTooltipProps): JSX.Element => {\n return {tooltipHostProps.children};\n };\n\n private _onColumnClick = (ev: React.MouseEvent): void => {\n const { onColumnClick, column } = this.props;\n\n if (column.columnActionsMode === ColumnActionsMode.disabled) {\n return;\n }\n\n if (column.onColumnClick) {\n column.onColumnClick(ev, column);\n }\n\n if (onColumnClick) {\n onColumnClick(ev, column);\n }\n };\n\n private _onColumnKeyDown = (ev: React.KeyboardEvent): void => {\n const { onColumnKeyDown, column } = this.props;\n\n if (column.onColumnKeyDown) {\n column.onColumnKeyDown(ev, column);\n }\n\n if (onColumnKeyDown) {\n onColumnKeyDown(ev, column);\n }\n };\n\n private _onColumnBlur = () => {\n this._tooltipRef.current && this._tooltipRef.current.dismiss();\n };\n\n private _onColumnFocus = () => {\n this._tooltipRef.current && this._tooltipRef.current.show();\n };\n\n private _getColumnDragDropOptions(): IDragDropOptions {\n const { columnIndex } = this.props;\n const options = {\n selectionIndex: columnIndex,\n context: { data: columnIndex, index: columnIndex },\n canDrag: () => this.props.isDraggable!,\n canDrop: () => false,\n onDragStart: this._onDragStart,\n updateDropState: () => undefined,\n onDrop: () => undefined,\n onDragEnd: this._onDragEnd,\n };\n return options;\n }\n\n private _hasAccessibleDescription(): boolean {\n const { column } = this.props;\n\n return !!(\n column.filterAriaLabel ||\n column.sortAscendingAriaLabel ||\n column.sortDescendingAriaLabel ||\n column.groupAriaLabel ||\n column.sortableAriaLabel\n );\n }\n\n private _renderAccessibleDescription(): JSX.Element | null {\n const { column, parentId } = this.props;\n const classNames = this._classNames;\n\n return this._hasAccessibleDescription() && !this.props.onRenderColumnHeaderTooltip ? (\n \n {(column.isFiltered && column.filterAriaLabel) || null}\n {((column.isSorted || column.showSortIconWhenUnsorted) &&\n (column.isSorted\n ? column.isSortedDescending\n ? column.sortDescendingAriaLabel\n : column.sortAscendingAriaLabel\n : column.sortableAriaLabel)) ||\n null}\n {(column.isGrouped && column.groupAriaLabel) || null}\n \n ) : null;\n }\n\n private _onDragStart = (item?: any, itemIndex?: number, selectedItems?: any[], event?: MouseEvent): void => {\n const classNames = this._classNames;\n if (itemIndex) {\n this._updateHeaderDragInfo(itemIndex);\n this._root.current!.classList.add(classNames.borderWhileDragging);\n this._async.setTimeout(() => {\n if (this._root.current) {\n this._root.current.classList.add(classNames.noBorderWhileDragging);\n }\n }, CLASSNAME_ADD_INTERVAL);\n }\n };\n\n private _onDragEnd = (item?: any, event?: MouseEvent): void => {\n const 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\n private _updateHeaderDragInfo = (itemIndex: number, event?: MouseEvent) => {\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 }, event);\n }\n };\n\n private _onColumnContextMenu = (ev: React.MouseEvent): void => {\n const { onColumnContextMenu, column } = this.props;\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\n private _onRootMouseDown = (ev: MouseEvent): void => {\n const { isDraggable } = this.props;\n // Ignore anything except the primary button.\n if (isDraggable && ev.button === MOUSEDOWN_PRIMARY_BUTTON) {\n ev.stopPropagation();\n }\n };\n\n private _addDragDropHandling() {\n this._dragDropSubscription = this.props.dragDropHelper!.subscribe(\n this._root.current!,\n this._events,\n this._getColumnDragDropOptions(),\n );\n\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}\n","import { getFocusStyle, getGlobalClassNames, hiddenContentStyle, FontWeights } from '../../Styling';\nimport { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles';\nimport { getCellStyles } from './DetailsHeader.styles';\nimport type { IDetailsColumnStyleProps, IDetailsColumnStyles } from './DetailsColumn.types';\nimport type { IStyle } from '../../Styling';\n\nconst 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};\n\nexport const getDetailsColumnStyles = (props: IDetailsColumnStyleProps): IDetailsColumnStyles => {\n const {\n theme,\n headerClassName,\n iconClassName,\n isActionable,\n isEmpty,\n isIconVisible,\n isPadded,\n isIconOnly,\n cellStyleProps = DEFAULT_CELL_STYLE_PROPS,\n transitionDurationDrag,\n transitionDurationDrop,\n } = props;\n\n const { semanticColors, palette, fonts } = theme;\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n const colors = {\n iconForegroundColor: semanticColors.bodySubtext,\n headerForegroundColor: semanticColors.bodyText,\n headerBackgroundColor: semanticColors.bodyBackground,\n dropdownChevronForegroundColor: palette.neutralSecondary,\n resizerColor: palette.neutralTertiaryAlt,\n };\n\n const nearIconStyle: IStyle = {\n color: colors.iconForegroundColor,\n opacity: 1,\n paddingLeft: 8,\n };\n\n const borderWhileDragging: IStyle = {\n outline: `1px solid ${palette.themePrimary}`,\n };\n\n const borderAfterDragOrDrop: IStyle = {\n outlineColor: 'transparent',\n };\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\n gripperBarVerticalStyle: {\n display: 'none',\n position: 'absolute',\n textAlign: 'left',\n color: palette.neutralTertiary,\n left: 1,\n },\n\n nearIcon: [classNames.nearIcon, nearIconStyle],\n\n sortIcon: [\n nearIconStyle,\n {\n paddingLeft: 4,\n position: 'relative',\n top: 1,\n },\n ],\n\n iconClassName: [\n {\n color: colors.iconForegroundColor,\n opacity: 1,\n },\n iconClassName,\n ],\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\n cellTitle: [\n classNames.cellTitle,\n getFocusStyle(theme),\n {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'flex-start',\n alignItems: 'stretch',\n boxSizing: 'border-box',\n overflow: 'hidden',\n padding: `0 ${cellStyleProps.cellRightPadding}px 0 ${cellStyleProps.cellLeftPadding}px`,\n ...(isIconOnly\n ? {\n alignContent: 'flex-end',\n maxHeight: '100%',\n flexWrap: 'wrap-reverse',\n }\n : {}),\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: {\n [`.${classNames.nearIcon}`]: {\n paddingLeft: 0,\n },\n },\n },\n ],\n\n cellTooltip: {\n display: 'block',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n },\n\n accessibleLabel: hiddenContentStyle,\n\n borderWhileDragging,\n\n noBorderWhileDragging: [borderAfterDragOrDrop, { transition: `outline ${transitionDurationDrag}ms ease` }],\n\n borderAfterDropping: borderWhileDragging,\n\n noBorderAfterDropping: [borderAfterDragOrDrop, { transition: `outline ${transitionDurationDrop}ms ease` }],\n };\n};\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { DetailsColumnBase } from './DetailsColumn.base';\nimport { getDetailsColumnStyles } from './DetailsColumn.styles';\nimport type { IDetailsColumnProps, IDetailsColumnStyleProps, IDetailsColumnStyles } from './DetailsColumn.types';\n\nexport const DetailsColumn: React.FunctionComponent = styled<\n IDetailsColumnProps,\n IDetailsColumnStyleProps,\n IDetailsColumnStyles\n>(DetailsColumnBase, getDetailsColumnStyles, undefined, { scope: 'DetailsColumn' });\n\nexport type { IDetailsColumnProps };\n","import * as React from 'react';\nimport { CollapseAllVisibility } from '../../GroupedList';\nimport { DetailsHeaderBase } from './DetailsHeader.base';\nimport { DetailsListLayoutMode, ColumnDragEndLocation } from './DetailsList.types';\nimport { SelectionMode } from '../../Selection';\nimport type { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities';\nimport type { ITheme, IStyle } from '../../Styling';\nimport type { IColumn, IColumnReorderOptions } from './DetailsList.types';\nimport type { ICellStyleProps, IDetailsItemProps } from './DetailsRow.types';\nimport type { ISelection } from '../../Selection';\nimport type { IDetailsCheckboxProps } from './DetailsRowCheck.types';\nimport type { IDetailsColumnRenderTooltipProps } from './DetailsColumn.types';\n\n/**\n * {@docCategory DetailsList}\n */\nexport interface IDetailsHeader {\n /** sets focus into the header */\n focus: () => boolean;\n}\n\n/**\n * {@docCategory DetailsList}\n */\nexport interface IDetailsHeaderBaseProps extends React.ClassAttributes, IDetailsItemProps {\n /** Theme from the Higher Order Component */\n theme?: ITheme;\n\n /** Call to provide customized styling that will layer on top of the variant rules. */\n styles?: IStyleFunctionOrObject;\n\n /** Ref to the component itself */\n componentRef?: IRefObject;\n\n /** Layout mode - fixedColumns or justified */\n layoutMode: DetailsListLayoutMode;\n\n /** Callback for when column sizing has changed */\n onColumnIsSizingChanged?: (column: IColumn, isSizing: boolean) => void;\n\n /** Callback for when column is resized */\n onColumnResized?: (column: IColumn, newWidth: number, columnIndex: number) => void;\n\n /** Callback for when column is automatically resized */\n onColumnAutoResized?: (column: IColumn, columnIndex: number) => void;\n\n /** Callback for when the column is clicked */\n onColumnClick?: (ev: React.MouseEvent, column: IColumn) => void;\n\n /** Callback for when the column needs to show a context menu */\n onColumnContextMenu?: (column: IColumn, ev: React.MouseEvent) => void;\n\n /** Callback to render a tooltip for the column header */\n onRenderColumnHeaderTooltip?: IRenderFunction;\n\n /** Whether to collapse for all visibility */\n collapseAllVisibility?: CollapseAllVisibility;\n\n /** Whether or not all is collapsed */\n isAllCollapsed?: boolean;\n\n /** Callback for when collapse all is toggled */\n onToggleCollapseAll?: (isAllCollapsed: boolean) => void;\n\n /** ariaLabel for the entire header */\n ariaLabel?: string;\n\n /** ariaLabel for expand/collapse group button */\n ariaLabelForToggleAllGroupsButton?: string;\n\n /** ariaLabel for the header checkbox that selects or deselects everything */\n ariaLabelForSelectAllCheckbox?: string;\n\n /** ariaLabel for the selection column */\n ariaLabelForSelectionColumn?: string;\n\n /** Select all button visibility */\n selectAllVisibility?: SelectAllVisibility;\n\n /** Column reordering options */\n columnReorderOptions?: IColumnReorderOptions;\n\n /** Column reordering options */\n columnReorderProps?: IColumnReorderHeaderProps;\n\n /** Minimum pixels to be moved before dragging is registered */\n minimumPixelsForDrag?: number;\n\n /** Overriding class name */\n className?: string;\n\n /** If provided, can be used to render a custom checkbox */\n onRenderDetailsCheckbox?: IRenderFunction;\n\n /**\n * Whether to use fast icon and check components. The icons can't be targeted by customization\n * but are still customizable via class names.\n * @defaultvalue true\n */\n useFastIcons?: boolean;\n}\n\n/**\n * {@docCategory DetailsList}\n */\nexport interface IDetailsHeaderProps extends IDetailsHeaderBaseProps {\n /**\n * Column metadata\n */\n columns: IColumn[];\n\n /**\n * Selection from utilities\n */\n selection: ISelection;\n\n /**\n * Selection mode\n */\n selectionMode: SelectionMode;\n}\n\n/**\n * {@docCategory DetailsList}\n */\nexport enum SelectAllVisibility {\n none = 0,\n hidden = 1,\n visible = 2,\n}\n\n/**\n * {@docCategory DetailsList}\n */\nexport interface IDetailsHeaderState {\n columnResizeDetails?: IColumnResizeDetails;\n isAllSelected?: boolean;\n isSizing?: boolean;\n isAllCollapsed?: boolean;\n}\n\n/**\n * {@docCategory DetailsList}\n */\nexport interface IColumnResizeDetails {\n columnIndex: number;\n originX?: number;\n columnMinWidth: number;\n}\n\n/**\n * {@docCategory DetailsList}\n */\nexport interface IColumnReorderHeaderProps extends IColumnReorderOptions {\n /** Callback to notify the column dragEnd event to List\n * Need this to check whether the dragEnd has happened on\n * corresponding list or outside of the list\n */\n onColumnDragEnd?: (props: { dropLocation?: ColumnDragEndLocation }, event: MouseEvent) => void;\n}\n\n/**\n * {@docCategory DetailsList}\n */\nexport interface IDropHintDetails {\n originX: number; // X index of dropHint Element relative to header\n startX: number; // start index of the range for the current drophint\n endX: number; // end index of the range for the current drophint\n dropHintElementRef: HTMLElement; // Reference for drophint to change the style when needed\n}\n\n/**\n * {@docCategory DetailsList}\n */\nexport type IDetailsHeaderStyleProps = Required> &\n Pick & {\n /** Whether to hide select all checkbox */\n isSelectAllHidden?: boolean;\n\n /** Whether the \"select all\" checkbox is checked */\n isAllSelected?: boolean;\n\n /** Is column being resized */\n isResizingColumn?: boolean;\n\n /** Are all columns collapsed */\n isAllCollapsed?: boolean;\n\n /** Whether the header is sizing */\n isSizing?: boolean;\n\n /** Whether checkbox is hidden */\n isCheckboxHidden?: boolean;\n\n cellStyleProps?: ICellStyleProps;\n };\n\n/**\n * {@docCategory DetailsList}\n */\nexport interface IDetailsHeaderStyles {\n root: IStyle;\n check: IStyle;\n\n /**\n * @deprecated Not used\n */\n cellWrapperPadded: IStyle;\n cellIsCheck: IStyle;\n\n /**\n * @deprecated Not used\n */\n cellIsActionable: IStyle;\n\n /**\n * @deprecated Not used\n */\n cellIsEmpty: IStyle;\n cellSizer: IStyle;\n cellSizerStart: IStyle;\n cellSizerEnd: IStyle;\n cellIsResizing: IStyle;\n cellIsGroupExpander: IStyle;\n collapseButton: IStyle;\n checkTooltip: IStyle;\n sizingOverlay: IStyle;\n dropHintCircleStyle: IStyle;\n dropHintCaretStyle: IStyle;\n dropHintLineStyle: IStyle;\n dropHintStyle: IStyle;\n accessibleLabel: IStyle;\n}\n","import * 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';\nimport type { IProcessedStyleSet } from '../../Styling';\nimport type { IDisposable } from '../../Utilities';\nimport type { IColumn, IDetailsHeaderBaseProps, IColumnDragDropDetails } from './DetailsList.types';\nimport type { IFocusZone } from '../../FocusZone';\nimport type { ITooltipHostProps } from '../../Tooltip';\nimport type { ISelection } from '../../Selection';\nimport type { IDragDropOptions } from '../../DragDrop';\nimport type { IDetailsColumnProps } from '../../components/DetailsList/DetailsColumn';\nimport type {\n IDropHintDetails,\n IColumnReorderHeaderProps,\n IDetailsHeaderState,\n IDetailsHeaderStyleProps,\n IDetailsHeaderStyles,\n IDetailsHeader,\n} from './DetailsHeader.types';\n\nconst getClassNames = classNamesFunction();\n\nconst MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button\nconst MOUSEMOVE_PRIMARY_BUTTON = 1; // for mouse move event we are using ev.buttons property, 1 means left button\n\nconst NO_COLUMNS: IColumn[] = [];\n\nexport class DetailsHeaderBase\n extends React.Component\n implements IDetailsHeader\n{\n public static defaultProps = {\n selectAllVisibility: SelectAllVisibility.visible,\n collapseAllVisibility: CollapseAllVisibility.visible,\n useFastIcons: true,\n };\n\n private _classNames: IProcessedStyleSet;\n private _rootElement = React.createRef();\n private _events: EventGroup;\n private _rootComponent = React.createRef();\n private _id: string;\n private _draggedColumnIndex = -1;\n private _dropHintDetails: { [key: number]: IDropHintDetails } = {};\n private _dragDropHelper: DragDropHelper;\n private _currentDropHintIndex: number;\n private _subscriptionObject?: IDisposable;\n private _onDropIndexInfo: {\n sourceIndex: number;\n targetIndex: number;\n };\n\n constructor(props: IDetailsHeaderBaseProps) {\n super(props);\n\n initializeComponentRef(this);\n this._events = new EventGroup(this);\n\n this.state = {\n columnResizeDetails: undefined,\n isAllCollapsed: this.props.isAllCollapsed,\n isAllSelected: !!this.props.selection && this.props.selection.isAllSelected(),\n };\n\n this._onDropIndexInfo = {\n sourceIndex: -1,\n targetIndex: -1,\n };\n this._id = getId('header');\n this._currentDropHintIndex = -1;\n\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: () => {\n return;\n },\n } as ISelection,\n minimumPixelsForDrag: this.props.minimumPixelsForDrag,\n });\n }\n\n public componentDidMount(): void {\n const { selection } = this.props;\n\n this._events.on(selection, SELECTION_CHANGE, this._onSelectionChanged);\n\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\n this._events.on(this._rootElement.current, 'keydown', this._onRootKeyDown);\n\n if (this._getColumnReorderProps()) {\n this._subscriptionObject = this._dragDropHelper.subscribe(\n this._rootElement.current,\n this._events,\n this._getHeaderDragDropOptions(),\n );\n }\n }\n }\n\n public componentDidUpdate(prevProps: IDetailsHeaderBaseProps): void {\n if (this._getColumnReorderProps()) {\n if (!this._subscriptionObject && this._rootElement.current) {\n this._subscriptionObject = this._dragDropHelper.subscribe(\n this._rootElement.current,\n this._events,\n this._getHeaderDragDropOptions(),\n );\n }\n } else if (this._subscriptionObject) {\n this._subscriptionObject.dispose();\n delete this._subscriptionObject;\n }\n\n if (this.props !== prevProps && this._onDropIndexInfo.sourceIndex >= 0 && this._onDropIndexInfo.targetIndex >= 0) {\n const { columns: previousColumns = NO_COLUMNS } = prevProps;\n const { columns = NO_COLUMNS } = this.props;\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\n if (this.props.isAllCollapsed !== prevProps.isAllCollapsed) {\n this.setState({ isAllCollapsed: this.props.isAllCollapsed });\n }\n }\n\n public componentWillUnmount(): void {\n if (this._subscriptionObject) {\n this._subscriptionObject.dispose();\n delete this._subscriptionObject;\n }\n\n this._dragDropHelper.dispose();\n\n this._events.dispose();\n }\n\n public render(): JSX.Element {\n const {\n columns = NO_COLUMNS,\n ariaLabel,\n ariaLabelForToggleAllGroupsButton,\n ariaLabelForSelectAllCheckbox,\n selectAllVisibility,\n ariaLabelForSelectionColumn,\n indentWidth,\n onColumnClick,\n onColumnContextMenu,\n onRenderColumnHeaderTooltip = this._onRenderColumnHeaderTooltip,\n styles,\n selectionMode,\n theme,\n onRenderDetailsCheckbox,\n groupNestingDepth,\n useFastIcons,\n checkboxVisibility,\n className,\n } = this.props;\n const { isAllSelected, columnResizeDetails, isSizing, isAllCollapsed } = this.state;\n const showCheckbox = selectAllVisibility !== SelectAllVisibility.none;\n const isCheckboxHidden = selectAllVisibility === SelectAllVisibility.hidden;\n const isCheckboxAlwaysVisible = checkboxVisibility === CheckboxVisibility.always;\n\n const columnReorderProps = this._getColumnReorderProps();\n const frozenColumnCountFromStart =\n columnReorderProps && columnReorderProps.frozenColumnCountFromStart\n ? columnReorderProps.frozenColumnCountFromStart\n : 0;\n const frozenColumnCountFromEnd =\n columnReorderProps && columnReorderProps.frozenColumnCountFromEnd\n ? columnReorderProps.frozenColumnCountFromEnd\n : 0;\n\n this._classNames = getClassNames(styles, {\n theme: theme!,\n isAllSelected,\n isSelectAllHidden: selectAllVisibility === SelectAllVisibility.hidden,\n isResizingColumn: !!columnResizeDetails && isSizing,\n isSizing,\n isAllCollapsed,\n isCheckboxHidden,\n className,\n });\n\n const classNames = this._classNames;\n const IconComponent = useFastIcons ? FontIcon : Icon;\n const hasGroupExpander = groupNestingDepth! > 0;\n const showGroupExpander = hasGroupExpander && this.props.collapseAllVisibility === CollapseAllVisibility.visible;\n const columnIndexOffset = this._computeColumnIndexOffset(showCheckbox);\n\n const isRTL = getRTL(theme);\n return (\n \n {showCheckbox\n ? [\n \n {onRenderColumnHeaderTooltip(\n {\n hostClassName: classNames.checkTooltip,\n id: `${this._id}-checkTooltip`,\n setAriaDescribedBy: false,\n content: ariaLabelForSelectAllCheckbox,\n children: (\n \n ),\n },\n this._onRenderColumnHeaderTooltip,\n )}\n ,\n !this.props.onRenderColumnHeaderTooltip ? (\n ariaLabelForSelectAllCheckbox && !isCheckboxHidden ? (\n \n {ariaLabelForSelectAllCheckbox}\n \n ) : ariaLabelForSelectionColumn && isCheckboxHidden ? (\n \n {ariaLabelForSelectionColumn}\n \n ) : null\n ) : null,\n ]\n : null}\n {showGroupExpander ? (\n \n \n {/* Use this span in addition to aria-label, otherwise VoiceOver ignores the column */}\n {ariaLabelForToggleAllGroupsButton}\n \n ) : hasGroupExpander ? (\n
    \n {/* Empty placeholder cell when CollapseAllVisibility is hidden */}\n
    \n ) : null}\n \n {columns.map((column: IColumn, columnIndex: number) => {\n const _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 ,\n this._renderColumnDivider(columnIndex),\n ];\n })}\n {columnReorderProps && frozenColumnCountFromEnd === 0 && this._renderDropHint(columns.length)}\n {isSizing && (\n \n \n \n )}\n \n );\n }\n\n /** Set focus to the active thing in the focus area. */\n public focus(): boolean {\n return !!this._rootComponent.current?.focus();\n }\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 private _getColumnReorderProps(): IColumnReorderHeaderProps | undefined {\n const { columnReorderOptions, columnReorderProps } = this.props;\n return columnReorderProps || (columnReorderOptions && { ...columnReorderOptions, onColumnDragEnd: undefined });\n }\n\n private _getHeaderDragDropOptions(): IDragDropOptions {\n const options = {\n selectionIndex: 1,\n context: { data: this, index: 0 },\n canDrag: () => false,\n canDrop: () => true,\n onDragStart: () => undefined,\n updateDropState: this._updateDroppingState,\n onDrop: this._onDrop,\n onDragEnd: () => undefined,\n onDragOver: this._onDragOver,\n };\n return options;\n }\n\n private _updateDroppingState = (newValue: boolean, event: DragEvent): void => {\n if (this._draggedColumnIndex >= 0 && event.type !== 'drop' && !newValue) {\n this._resetDropHints();\n }\n };\n\n private _isValidCurrentDropHintIndex() {\n return this._currentDropHintIndex >= 0;\n }\n\n private _onDragOver = (item: any, event: DragEvent): void => {\n if (this._draggedColumnIndex >= 0) {\n event.stopPropagation();\n this._computeDropHintToBeShown(event.clientX);\n }\n };\n\n private _onDrop = (item?: any, event?: DragEvent): void => {\n // Safe to assume this is defined since we're handling a drop event\n const columnReorderProps = this._getColumnReorderProps()!;\n\n // Target index will not get changed if draggeditem is after target item.\n if (this._draggedColumnIndex >= 0 && event) {\n const targetIndex =\n this._draggedColumnIndex > this._currentDropHintIndex\n ? this._currentDropHintIndex\n : this._currentDropHintIndex - 1;\n const isValidDrop = this._isValidCurrentDropHintIndex();\n event.stopPropagation();\n if (isValidDrop) {\n this._onDropIndexInfo.sourceIndex = this._draggedColumnIndex;\n this._onDropIndexInfo.targetIndex = targetIndex;\n\n if (columnReorderProps.onColumnDrop) {\n const dragDropDetails: IColumnDragDropDetails = {\n draggedIndex: this._draggedColumnIndex,\n targetIndex,\n };\n columnReorderProps.onColumnDrop(dragDropDetails);\n /* eslint-disable deprecation/deprecation */\n } else if (columnReorderProps.handleColumnReorder) {\n columnReorderProps.handleColumnReorder(this._draggedColumnIndex, targetIndex);\n /* eslint-enable deprecation/deprecation */\n }\n }\n }\n\n this._resetDropHints();\n this._dropHintDetails = {};\n this._draggedColumnIndex = -1;\n };\n\n private _computeColumnIndexOffset = (showCheckbox: boolean) => {\n const hasGroupExpander = this.props.groupNestingDepth && this.props.groupNestingDepth > 0;\n\n let offset = 1;\n if (showCheckbox) {\n offset += 1;\n }\n\n if (hasGroupExpander) {\n offset += 1;\n }\n\n return offset;\n };\n\n /**\n * @returns whether or not the \"Select All\" checkbox column is hidden.\n */\n private _isCheckboxColumnHidden(): boolean {\n const { selectionMode, checkboxVisibility } = this.props;\n\n return selectionMode === SelectionMode.none || checkboxVisibility === CheckboxVisibility.hidden;\n }\n\n private _updateDragInfo = (props: { itemIndex: number }, event?: MouseEvent) => {\n // Safe to assume this is defined since we're handling a drag event\n const columnReorderProps = this._getColumnReorderProps()!;\n const itemIndex = props.itemIndex;\n if (itemIndex >= 0) {\n // Column index is set based on the checkbox\n this._draggedColumnIndex = itemIndex - this._computeColumnIndexOffset(!this._isCheckboxColumnHidden());\n this._getDropHintPositions();\n if (columnReorderProps.onColumnDragStart) {\n columnReorderProps.onColumnDragStart(true);\n }\n } else if (event && this._draggedColumnIndex >= 0) {\n this._resetDropHints();\n this._draggedColumnIndex = -1;\n this._dropHintDetails = {};\n if (columnReorderProps.onColumnDragEnd) {\n const columnDragEndLocation = this._isEventOnHeader(event);\n columnReorderProps.onColumnDragEnd({ dropLocation: columnDragEndLocation }, event);\n }\n }\n };\n\n private _resetDropHints(): void {\n if (this._currentDropHintIndex >= 0) {\n this._updateDropHintElement(this._dropHintDetails[this._currentDropHintIndex].dropHintElementRef, 'none');\n this._currentDropHintIndex = -1;\n }\n }\n\n private _updateDropHintElement(element: HTMLElement, displayProperty: string) {\n (element.childNodes[1] as HTMLElement).style.display = displayProperty;\n (element.childNodes[0] as HTMLElement).style.display = displayProperty;\n }\n\n private _getDropHintPositions = (): void => {\n const { columns = NO_COLUMNS } = this.props;\n // Safe to assume this is defined since we're handling a drag/drop event\n const columnReorderProps = this._getColumnReorderProps()!;\n let prevX = 0;\n let prevMid = 0;\n let prevRef: HTMLElement;\n const frozenColumnCountFromStart = columnReorderProps.frozenColumnCountFromStart || 0;\n const frozenColumnCountFromEnd = columnReorderProps.frozenColumnCountFromEnd || 0;\n\n for (let i = frozenColumnCountFromStart; i < columns.length - frozenColumnCountFromEnd + 1; i++) {\n if (this._rootElement.current) {\n const dropHintElement = this._rootElement.current.querySelectorAll('#columnDropHint_' + i)[0] as HTMLElement;\n if (dropHintElement) {\n if (i === frozenColumnCountFromStart) {\n prevX = dropHintElement.offsetLeft;\n prevMid = dropHintElement.offsetLeft;\n prevRef = dropHintElement;\n } else {\n const 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 /**\n * Based on the given cursor position, finds the nearest drop hint and updates the state to make it visible\n */\n private _computeDropHintToBeShown = (clientX: number): void => {\n const isRtl = getRTL(this.props.theme);\n if (this._rootElement.current) {\n const clientRect = this._rootElement.current.getBoundingClientRect();\n const headerOriginX = clientRect.left;\n const eventXRelativePosition = clientX - headerOriginX;\n const currentDropHintIndex = this._currentDropHintIndex;\n if (this._isValidCurrentDropHintIndex()) {\n if (\n _liesBetween(\n isRtl,\n eventXRelativePosition,\n this._dropHintDetails[currentDropHintIndex!].startX,\n this._dropHintDetails[currentDropHintIndex!].endX,\n )\n ) {\n return;\n }\n }\n const { columns = NO_COLUMNS } = this.props;\n // Safe to assume this is defined since we're handling a drag/drop event\n const columnReorderProps = this._getColumnReorderProps()!;\n const frozenColumnCountFromStart = columnReorderProps.frozenColumnCountFromStart || 0;\n const frozenColumnCountFromEnd = columnReorderProps.frozenColumnCountFromEnd || 0;\n\n const currentIndex: number = frozenColumnCountFromStart;\n const lastValidColumn = columns.length - frozenColumnCountFromEnd;\n let indexToUpdate = -1;\n if (_isBefore(isRtl, eventXRelativePosition, this._dropHintDetails[currentIndex].endX)) {\n indexToUpdate = currentIndex;\n } else if (_isAfter(isRtl, eventXRelativePosition, this._dropHintDetails[lastValidColumn].startX)) {\n indexToUpdate = lastValidColumn;\n } else if (this._isValidCurrentDropHintIndex()) {\n if (\n this._dropHintDetails[currentDropHintIndex! + 1] &&\n _liesBetween(\n isRtl,\n eventXRelativePosition,\n this._dropHintDetails[currentDropHintIndex! + 1].startX,\n this._dropHintDetails[currentDropHintIndex! + 1].endX,\n )\n ) {\n indexToUpdate = currentDropHintIndex! + 1;\n } else if (\n this._dropHintDetails[currentDropHintIndex! - 1] &&\n _liesBetween(\n isRtl,\n eventXRelativePosition,\n this._dropHintDetails[currentDropHintIndex! - 1].startX,\n this._dropHintDetails[currentDropHintIndex! - 1].endX,\n )\n ) {\n indexToUpdate = currentDropHintIndex! - 1;\n }\n }\n if (indexToUpdate === -1) {\n let startIndex = frozenColumnCountFromStart;\n let endIndex = lastValidColumn;\n while (startIndex < endIndex) {\n const middleIndex = Math.ceil((endIndex + startIndex!) / 2);\n if (\n _liesBetween(\n isRtl,\n eventXRelativePosition,\n this._dropHintDetails[middleIndex].startX,\n this._dropHintDetails[middleIndex].endX,\n )\n ) {\n indexToUpdate = middleIndex;\n break;\n } else if (_isBefore(isRtl, eventXRelativePosition, this._dropHintDetails[middleIndex].originX)) {\n endIndex = middleIndex;\n } else if (_isAfter(isRtl, eventXRelativePosition, this._dropHintDetails[middleIndex].originX)) {\n startIndex = middleIndex;\n }\n }\n }\n\n if (indexToUpdate === this._draggedColumnIndex || indexToUpdate === this._draggedColumnIndex + 1) {\n if (this._isValidCurrentDropHintIndex()) {\n this._resetDropHints();\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\n private _isEventOnHeader(event: MouseEvent): ColumnDragEndLocation | undefined {\n if (this._rootElement.current) {\n const clientRect = this._rootElement.current.getBoundingClientRect();\n if (\n event.clientX > clientRect.left &&\n event.clientX < clientRect.right &&\n event.clientY > clientRect.top &&\n event.clientY < clientRect.bottom\n ) {\n return ColumnDragEndLocation.header;\n }\n }\n }\n\n private _renderColumnSizer = ({ columnIndex }: IDetailsColumnProps): JSX.Element | null => {\n const { columns = NO_COLUMNS } = this.props;\n const column = columns[columnIndex];\n const { columnResizeDetails } = this.state;\n const classNames = this._classNames;\n\n return column.isResizable ? (\n \n ) : null;\n };\n\n private _renderColumnDivider(columnIndex: number): JSX.Element | null {\n const { columns = NO_COLUMNS } = this.props;\n const column = columns[columnIndex];\n const { onRenderDivider } = column;\n return onRenderDivider\n ? onRenderDivider({ column, columnIndex }, this._renderColumnSizer)\n : this._renderColumnSizer({ column, columnIndex });\n }\n\n private _renderDropHint(dropHintIndex: number): JSX.Element {\n const classNames = this._classNames;\n const IconComponent = this.props.useFastIcons ? FontIcon : Icon;\n return (\n \n \n \n \n \n \n );\n }\n\n private _onRenderColumnHeaderTooltip = (tooltipHostProps: ITooltipHostProps): JSX.Element => {\n return {tooltipHostProps.children};\n };\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 private _onSizerDoubleClick(columnIndex: number, ev: React.MouseEvent): void {\n const { onColumnAutoResized, columns = NO_COLUMNS } = this.props;\n if (onColumnAutoResized) {\n onColumnAutoResized(columns[columnIndex], columnIndex);\n }\n }\n\n /**\n * Called when the select all toggle is clicked.\n */\n private _onSelectAllClicked = (): void => {\n const { selection } = this.props;\n\n if (selection) {\n selection.toggleAllSelected();\n }\n };\n\n private _onRootMouseDown = (ev: MouseEvent): void => {\n const columnIndexAttr = (ev.target as HTMLElement).getAttribute('data-sizer-index');\n const columnIndex = Number(columnIndexAttr);\n const { columns = NO_COLUMNS } = this.props;\n\n if (columnIndexAttr === null || ev.button !== MOUSEDOWN_PRIMARY_BUTTON) {\n // Ignore anything except the primary button.\n return;\n }\n\n this.setState({\n columnResizeDetails: {\n columnIndex,\n columnMinWidth: columns[columnIndex].calculatedWidth!,\n originX: ev.clientX,\n },\n });\n\n ev.preventDefault();\n ev.stopPropagation();\n };\n\n private _onRootMouseMove = (ev: React.MouseEvent): void => {\n const { columnResizeDetails, isSizing } = this.state;\n\n if (columnResizeDetails && !isSizing && ev.clientX !== columnResizeDetails.originX) {\n this.setState({ isSizing: true });\n }\n };\n\n private _onRootKeyDown = (ev: KeyboardEvent): void => {\n const { columnResizeDetails, isSizing } = this.state;\n const { columns = NO_COLUMNS, onColumnResized } = this.props;\n\n const columnIndexAttr = (ev.target as HTMLElement).getAttribute('data-sizer-index');\n\n if (!columnIndexAttr || isSizing) {\n return;\n }\n\n const columnIndex = Number(columnIndexAttr);\n\n if (!columnResizeDetails) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n this.setState({\n columnResizeDetails: {\n columnIndex,\n columnMinWidth: columns[columnIndex].calculatedWidth!,\n },\n });\n\n ev.preventDefault();\n ev.stopPropagation();\n }\n } else {\n let increment: number | undefined;\n\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n this.setState({\n columnResizeDetails: undefined,\n });\n\n ev.preventDefault();\n ev.stopPropagation();\n // eslint-disable-next-line deprecation/deprecation\n } else if (ev.which === KeyCodes.left) {\n increment = getRTL(this.props.theme) ? 1 : -1;\n // eslint-disable-next-line deprecation/deprecation\n } else if (ev.which === KeyCodes.right) {\n increment = getRTL(this.props.theme) ? -1 : 1;\n }\n\n if (increment) {\n if (!ev.shiftKey) {\n increment *= 10;\n }\n\n this.setState({\n columnResizeDetails: {\n ...columnResizeDetails,\n columnMinWidth: columnResizeDetails.columnMinWidth + increment,\n },\n });\n\n if (onColumnResized) {\n onColumnResized(columns[columnIndex], columnResizeDetails.columnMinWidth + increment, columnIndex);\n }\n\n ev.preventDefault();\n ev.stopPropagation();\n }\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 private _onSizerMouseMove = (ev: React.MouseEvent): void => {\n const {\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,\n } = ev;\n const { onColumnIsSizingChanged, onColumnResized, columns = NO_COLUMNS } = this.props;\n const { columnResizeDetails } = this.state;\n\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\n if (ev.clientX !== columnResizeDetails!.originX) {\n if (onColumnIsSizingChanged) {\n onColumnIsSizingChanged(columns[columnResizeDetails!.columnIndex], true);\n }\n }\n\n if (onColumnResized) {\n let movement = ev.clientX - columnResizeDetails!.originX!;\n\n if (getRTL(this.props.theme)) {\n movement = -movement;\n }\n\n onColumnResized(\n columns[columnResizeDetails!.columnIndex],\n columnResizeDetails!.columnMinWidth + movement,\n columnResizeDetails!.columnIndex,\n );\n }\n };\n\n private _onSizerBlur = (ev: React.FocusEvent): void => {\n const { columnResizeDetails } = this.state;\n\n if (columnResizeDetails) {\n this.setState({\n columnResizeDetails: undefined,\n isSizing: false,\n });\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 private _onSizerMouseUp = (ev: React.MouseEvent): void => {\n const { columns = NO_COLUMNS, onColumnIsSizingChanged } = this.props;\n const { columnResizeDetails } = this.state;\n\n this.setState({\n columnResizeDetails: undefined,\n isSizing: false,\n });\n\n if (onColumnIsSizingChanged) {\n onColumnIsSizingChanged(columns[columnResizeDetails!.columnIndex], false);\n }\n };\n\n private _onSelectionChanged(): void {\n const isAllSelected = !!this.props.selection && this.props.selection.isAllSelected();\n\n if (this.state.isAllSelected !== isAllSelected) {\n this.setState({\n isAllSelected,\n });\n }\n }\n\n private _onToggleCollapseAll = (): void => {\n const { onToggleCollapseAll } = this.props;\n const newCollapsed = !this.state.isAllCollapsed;\n this.setState({\n isAllCollapsed: newCollapsed,\n });\n if (onToggleCollapseAll) {\n onToggleCollapseAll(newCollapsed);\n }\n };\n}\n\nfunction _liesBetween(rtl: boolean, target: number, left: number, right: number): boolean {\n return rtl ? target <= left && target >= right : target >= left && target <= right;\n}\nfunction _isBefore(rtl: boolean, a: number, b: number): boolean {\n return rtl ? a >= b : a <= b;\n}\nfunction _isAfter(rtl: boolean, a: number, b: number): boolean {\n return rtl ? a <= b : a >= b;\n}\n\nfunction _stopPropagation(ev: React.MouseEvent): void {\n ev.stopPropagation();\n}\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { DetailsHeaderBase } from './DetailsHeader.base';\nimport { getDetailsHeaderStyles } from './DetailsHeader.styles';\nimport type {\n IDetailsHeaderProps,\n IDetailsHeaderBaseProps,\n IDetailsHeaderStyleProps,\n IDetailsHeaderStyles,\n} from './DetailsHeader.types';\n\nexport const DetailsHeader: React.FunctionComponent = styled<\n IDetailsHeaderBaseProps,\n IDetailsHeaderStyleProps,\n IDetailsHeaderStyles\n>(DetailsHeaderBase, getDetailsHeaderStyles, undefined, { scope: 'DetailsHeader' });\n\nexport type { IDetailsHeaderProps, IDetailsHeaderBaseProps };\n","import * as React from 'react';\nimport { composeRenderFunction, css } from '../../Utilities';\nimport { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles';\nimport type { IColumn } from './DetailsList.types';\nimport type { IDetailsRowFieldsProps } from './DetailsRowFields.types';\nimport type { IDetailsColumnFieldProps } from './DetailsColumn.types';\n\nconst getCellText = (item: any, column: IColumn): string => {\n let value = item && column && column.fieldName ? item[column.fieldName] : '';\n\n if (value === null || value === undefined) {\n value = '';\n }\n\n if (typeof value === 'boolean') {\n return value.toString();\n }\n\n return value;\n};\n\n/**\n * Component for rendering a row's cells in a `DetailsList`.\n *\n * {@docCategory DetailsList}\n */\nexport const DetailsRowFields: React.FunctionComponent = props => {\n const {\n columns,\n rowClassNames,\n cellStyleProps = DEFAULT_CELL_STYLE_PROPS,\n item,\n itemIndex,\n isSelected,\n onRenderItemColumn,\n getCellValueKey,\n onRenderField: propsOnRenderField,\n cellsByColumn,\n enableUpdateAnimations,\n rowHeaderId,\n } = props;\n\n const cellValueKeysRef = React.useRef<{\n [columnKey: string]: string | undefined;\n }>();\n\n const cellValueKeys = cellValueKeysRef.current || (cellValueKeysRef.current = {});\n\n const defaultOnRenderField = React.useCallback(\n (fieldProps: IDetailsColumnFieldProps): JSX.Element | null => {\n const { column, cellValueKey, className, onRender, item: fieldItem, itemIndex: fieldItemIndex } = fieldProps;\n\n const width: string | number =\n typeof column.calculatedWidth === 'undefined'\n ? 'auto'\n : column.calculatedWidth +\n cellStyleProps.cellLeftPadding +\n cellStyleProps.cellRightPadding +\n (column.isPadded ? cellStyleProps.cellExtraRightPadding : 0);\n\n const key = `${column.key}${cellValueKey !== undefined ? `-${cellValueKey}` : ''}`;\n\n return (\n \n {onRender(fieldItem, fieldItemIndex, column)}\n \n );\n },\n [rowClassNames, cellStyleProps, rowHeaderId],\n );\n\n return (\n
    \n {columns.map(column => {\n const { getValueKey = getCellValueKey } = column;\n\n const onRender =\n (cellsByColumn && column.key in cellsByColumn && (() => cellsByColumn[column.key])) ||\n column.onRender ||\n onRenderItemColumn ||\n defaultOnRender;\n\n let onRenderField = defaultOnRenderField;\n\n if (column.onRenderField) {\n onRenderField = composeRenderFunction(column.onRenderField, onRenderField);\n }\n\n if (propsOnRenderField) {\n onRenderField = composeRenderFunction(propsOnRenderField, onRenderField);\n }\n\n const previousValueKey = cellValueKeys[column.key];\n\n const cellValueKey = enableUpdateAnimations && getValueKey ? getValueKey(item, itemIndex, column) : undefined;\n\n let showAnimation = false;\n\n if (cellValueKey !== undefined && previousValueKey !== undefined && cellValueKey !== previousValueKey) {\n showAnimation = true;\n }\n\n cellValueKeys[column.key] = cellValueKey;\n\n return onRenderField({\n item,\n itemIndex,\n isSelected,\n column,\n cellValueKey,\n className: showAnimation ? rowClassNames.cellAnimation : undefined,\n onRender,\n });\n })}\n
    \n );\n};\n\nfunction defaultOnRender(item?: any, index?: number, column?: IColumn): React.ReactNode {\n if (!item || !column) {\n return null;\n }\n\n return getCellText(item, column);\n}\n","import * as React from 'react';\nimport {\n initializeComponentRef,\n EventGroup,\n css,\n shallowCompare,\n getNativeProps,\n divProperties,\n composeComponentAs,\n} from '../../Utilities';\nimport { CheckboxVisibility } from './DetailsList.types';\nimport { DetailsRowCheck } from './DetailsRowCheck';\nimport { GroupSpacer } from '../GroupedList/GroupSpacer';\nimport { DetailsRowFields } from './DetailsRowFields';\nimport { FocusZone, FocusZoneDirection } from '../../FocusZone';\nimport { SelectionMode, SELECTION_CHANGE } from '../../Selection';\nimport { classNamesFunction } from '../../Utilities';\nimport type { IDisposable } from '../../Utilities';\nimport type { IColumn } from './DetailsList.types';\nimport type { IFocusZone } from '../../FocusZone';\nimport type { IDragDropOptions } from '../../DragDrop';\nimport type { IDetailsRowBaseProps, IDetailsRowStyleProps, IDetailsRowStyles } from './DetailsRow.types';\nimport type { IDetailsRowCheckProps } from './DetailsRowCheck.types';\nimport type { IDetailsRowFieldsProps } from './DetailsRowFields.types';\nimport type { IProcessedStyleSet } from '../../Styling';\nimport { getId } from '../../Utilities';\n\nconst getClassNames = classNamesFunction();\n\nexport interface IDetailsRowSelectionState {\n isSelected: boolean;\n isSelectionModal: boolean;\n}\n\nexport interface IDetailsRowState {\n selectionState: IDetailsRowSelectionState;\n columnMeasureInfo?: {\n index: number;\n column: IColumn;\n onMeasureDone: (measuredWidth: number) => void;\n };\n isDropping?: boolean;\n}\n\nconst DEFAULT_DROPPING_CSS_CLASS = 'is-dropping';\n\nconst NO_COLUMNS: IColumn[] = [];\n\nexport class DetailsRowBase extends React.Component {\n private _events: EventGroup;\n private _root = React.createRef();\n private _cellMeasurer = React.createRef();\n private _focusZone = React.createRef();\n private _droppingClassNames: string;\n /** Whether this.props.onDidMount has been called */\n private _onDidMountCalled: boolean;\n private _dragDropSubscription?: IDisposable;\n\n private _classNames: IProcessedStyleSet;\n private _rowClassNames: IDetailsRowFieldsProps['rowClassNames'];\n private _ariaRowDescriptionId: string;\n\n public static getDerivedStateFromProps(\n nextProps: IDetailsRowBaseProps,\n previousState: IDetailsRowState,\n ): IDetailsRowState {\n return {\n ...previousState,\n selectionState: getSelectionState(nextProps),\n };\n }\n\n constructor(props: IDetailsRowBaseProps) {\n super(props);\n\n initializeComponentRef(this);\n this._events = new EventGroup(this);\n\n this.state = {\n selectionState: getSelectionState(props),\n columnMeasureInfo: undefined,\n isDropping: false,\n };\n\n this._droppingClassNames = '';\n }\n public componentDidMount(): void {\n const { dragDropHelper, selection, item, onDidMount } = this.props;\n\n if (dragDropHelper && this._root.current) {\n this._dragDropSubscription = dragDropHelper.subscribe(\n this._root.current,\n this._events,\n this._getRowDragDropOptions(),\n );\n }\n\n if (selection) {\n this._events.on(selection, SELECTION_CHANGE, this._onSelectionChanged);\n }\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\n public componentDidUpdate(previousProps: IDetailsRowBaseProps) {\n const state = this.state;\n const { item, onDidMount } = this.props;\n const { columnMeasureInfo } = state;\n\n if (\n this.props.itemIndex !== previousProps.itemIndex ||\n this.props.item !== previousProps.item ||\n this.props.dragDropHelper !== previousProps.dragDropHelper\n ) {\n if (this._dragDropSubscription) {\n this._dragDropSubscription.dispose();\n delete this._dragDropSubscription;\n }\n\n if (this.props.dragDropHelper && this._root.current) {\n this._dragDropSubscription = this.props.dragDropHelper.subscribe(\n this._root.current,\n this._events,\n this._getRowDragDropOptions(),\n );\n }\n }\n\n if (columnMeasureInfo && columnMeasureInfo.index >= 0 && this._cellMeasurer.current) {\n const newWidth = this._cellMeasurer.current.getBoundingClientRect().width;\n\n columnMeasureInfo.onMeasureDone(newWidth);\n\n this.setState({\n columnMeasureInfo: undefined,\n });\n }\n\n if (item && onDidMount && !this._onDidMountCalled) {\n this._onDidMountCalled = true;\n onDidMount(this);\n }\n }\n\n public componentWillUnmount(): void {\n const { item, onWillUnmount } = this.props;\n\n // Only call the onWillUnmount callback if we have an item.\n if (onWillUnmount && item) {\n onWillUnmount(this);\n }\n\n if (this._dragDropSubscription) {\n this._dragDropSubscription.dispose();\n delete this._dragDropSubscription;\n }\n\n this._events.dispose();\n }\n\n public shouldComponentUpdate(nextProps: IDetailsRowBaseProps, nextState: IDetailsRowState): boolean {\n if (this.props.useReducedRowRenderer) {\n const newSelectionState = getSelectionState(nextProps);\n if (this.state.selectionState.isSelected !== newSelectionState.isSelected) {\n return true;\n }\n return !shallowCompare(this.props, nextProps);\n } else {\n return true;\n }\n }\n\n public render(): JSX.Element {\n const {\n className,\n columns = NO_COLUMNS,\n dragDropEvents,\n item,\n itemIndex,\n id,\n flatIndexOffset = 2,\n onRenderCheck = this._onRenderCheck,\n onRenderDetailsCheckbox,\n onRenderItemColumn,\n onRenderField,\n getCellValueKey,\n selectionMode,\n checkboxVisibility,\n getRowAriaLabel,\n getRowAriaDescription,\n getRowAriaDescribedBy,\n isGridRow,\n checkButtonAriaLabel,\n checkboxCellClassName,\n /** Alias rowFieldsAs as RowFields and default to DetailsRowFields if rowFieldsAs does not exist */\n rowFieldsAs,\n selection,\n indentWidth,\n enableUpdateAnimations,\n compact,\n theme,\n styles,\n cellsByColumn,\n groupNestingDepth,\n useFastIcons = true,\n cellStyleProps,\n group,\n focusZoneProps,\n disabled = false,\n } = this.props;\n const { columnMeasureInfo, isDropping } = this.state;\n const { isSelected = false, isSelectionModal = false } = this.state.selectionState;\n const isDraggable = dragDropEvents ? !!(dragDropEvents.canDrag && dragDropEvents.canDrag(item)) : undefined;\n const droppingClassName = isDropping ? this._droppingClassNames || DEFAULT_DROPPING_CSS_CLASS : '';\n const ariaLabel = getRowAriaLabel ? getRowAriaLabel(item) : undefined;\n const ariaRowDescription = getRowAriaDescription ? getRowAriaDescription(item) : undefined;\n const ariaDescribedBy = getRowAriaDescribedBy ? getRowAriaDescribedBy(item) : undefined;\n const canSelect = !!selection && selection.canSelectItem(item, itemIndex) && !disabled;\n const isContentUnselectable = selectionMode === SelectionMode.multiple;\n const showCheckbox = selectionMode !== SelectionMode.none && checkboxVisibility !== CheckboxVisibility.hidden;\n const ariaSelected = selectionMode === SelectionMode.none ? undefined : isSelected;\n const ariaPositionInSet = group ? itemIndex - group.startIndex + 1 : undefined;\n const ariaSetSize = group ? group.count : undefined;\n const focusZoneDirection = focusZoneProps ? focusZoneProps.direction : FocusZoneDirection.horizontal;\n\n this._classNames = {\n ...this._classNames,\n ...getClassNames(styles, {\n theme: theme!,\n isSelected,\n canSelect: !isContentUnselectable,\n anySelected: isSelectionModal,\n checkboxCellClassName,\n droppingClassName,\n className,\n compact,\n enableUpdateAnimations,\n cellStyleProps,\n disabled,\n }),\n };\n\n const rowClassNames: IDetailsRowFieldsProps['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\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\n const RowFields = rowFieldsAs ? composeComponentAs(rowFieldsAs, DetailsRowFields) : DetailsRowFields;\n\n const rowFields = (\n \n );\n\n const defaultRole = 'row';\n const role = this.props.role ? this.props.role : defaultRole;\n this._ariaRowDescriptionId = getId('DetailsRow-description');\n\n // When the user does not specify any column is a row-header in the columns props,\n // The aria-labelledby of the checkbox does not specify {id}-header.\n const hasRowHeader = columns.some(column => {\n return !!column.isRowHeader;\n });\n const ariaLabelledby = `${id}-checkbox` + (hasRowHeader ? ` ${id}-header` : '');\n\n // additional props for rows within a GroupedList\n // these are needed for treegrid row semantics, but not grid row semantics\n const groupedListRowProps = isGridRow\n ? {}\n : {\n 'aria-level': (groupNestingDepth && groupNestingDepth + 1) || undefined,\n 'aria-posinset': ariaPositionInSet,\n 'aria-setsize': ariaSetSize,\n };\n\n return (\n \n {ariaRowDescription ? (\n \n ) : null}\n {showCheckbox && (\n
    \n {onRenderCheck({\n id: id ? `${id}-checkbox` : undefined,\n selected: isSelected,\n selectionMode,\n anySelected: isSelectionModal,\n 'aria-label': checkButtonAriaLabel,\n 'aria-labelledby': id ? ariaLabelledby : undefined,\n canSelect,\n compact,\n className: this._classNames.check,\n theme,\n isVisible: checkboxVisibility === CheckboxVisibility.always,\n onRenderDetailsCheckbox,\n useFastIcons,\n })}\n
    \n )}\n\n \n\n {item && rowFields}\n {columnMeasureInfo && (\n \n \n \n )}\n \n );\n }\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 public measureCell(index: number, onMeasureDone: (width: number) => void): void {\n const { columns = NO_COLUMNS } = this.props;\n const column: IColumn = { ...columns[index] };\n\n column.minWidth = 0;\n column.maxWidth = 999999;\n\n delete column.calculatedWidth;\n\n this.setState({\n columnMeasureInfo: {\n index,\n column,\n onMeasureDone,\n },\n });\n }\n\n public focus(forceIntoFirstElement: boolean = false): boolean {\n return !!this._focusZone.current?.focus(forceIntoFirstElement);\n }\n\n protected _onRenderCheck(props: IDetailsRowCheckProps) {\n return ;\n }\n\n private _onSelectionChanged = (): void => {\n const selectionState = getSelectionState(this.props);\n\n if (!shallowCompare(selectionState, this.state.selectionState)) {\n this.setState({ selectionState });\n }\n };\n\n private _getRowDragDropOptions(): IDragDropOptions {\n const { item, itemIndex, dragDropEvents, eventsToRegister } = this.props;\n const 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\n return options;\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 private _updateDroppingState = (newValue: boolean, event: DragEvent): void => {\n const { isDropping } = this.state;\n const { dragDropEvents, item } = this.props;\n\n if (!newValue) {\n if (dragDropEvents!.onDragLeave) {\n dragDropEvents!.onDragLeave(item, event);\n }\n } else if (dragDropEvents!.onDragEnter) {\n this._droppingClassNames = dragDropEvents!.onDragEnter(item, event);\n }\n\n if (isDropping !== newValue) {\n this.setState({ isDropping: newValue });\n }\n };\n}\n\nfunction getSelectionState(props: IDetailsRowBaseProps): IDetailsRowSelectionState {\n const { itemIndex, selection } = props;\n\n return {\n isSelected: !!selection?.isIndexSelected(itemIndex),\n isSelectionModal: !!selection?.isModal?.(),\n };\n}\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { DetailsRowBase } from './DetailsRow.base';\nimport { getDetailsRowStyles } from './DetailsRow.styles';\nimport type {\n IDetailsRowProps,\n IDetailsRowBaseProps,\n IDetailsRowStyleProps,\n IDetailsRowStyles,\n} from './DetailsRow.types';\n\nexport const DetailsRow: React.FunctionComponent = styled<\n IDetailsRowBaseProps,\n IDetailsRowStyleProps,\n IDetailsRowStyles\n>(DetailsRowBase, getDetailsRowStyles, undefined, {\n scope: 'DetailsRow',\n});\n\nexport type { IDetailsRowProps, IDetailsRowBaseProps };\n","import * as React from 'react';\nimport { BaseDecorator } from './BaseDecorator';\nimport { findScrollableParent, getRect, getWindow, Async, EventGroup } from '../../Utilities';\n\n/**\n * Viewport rectangle dimensions.\n *\n * {@docCategory DetailsList}\n */\nexport interface IViewport {\n /**\n * Width in pixels.\n */\n width: number;\n /**\n * Height in pixels.\n */\n height: number;\n}\n\nexport interface IWithViewportState {\n viewport?: IViewport;\n}\n\n/**\n * Props interface for the withViewport component.\n *\n * {@docCategory DetailsList}\n */\nexport interface IWithViewportProps {\n /**\n * Whether or not `withViewport` should disable its viewport measurements, effectively making this decorator\n * pass-through with no impact on the rendered component.\n *\n * Since `withViewport` measures the `viewport` on mount, after each React update, and in response to events,\n * it may cause a component which does not currently need this information due to its configuration to re-render\n * too often. `skipViewportMeasures` may be toggled on and off based on current state, and will suspend and resume\n * measurement as-needed.\n *\n * For example, when this wraps `DetailsList`, set `skipViewportMeasures` to `true` when the `layoutMode` is\n * `fixedColumns`, since the `DetailsList` does not use the viewport size in any calculations.\n *\n * In addition, consider setting `skipViewportMeasures` to `true` when running within a React test renderer, to avoid\n * direct DOM dependencies.\n */\n\n skipViewportMeasures?: boolean;\n /**\n * Whether or not to explicitly disable usage of the `ResizeObserver` in favor of a `'resize'` event on `window`,\n * even if the browser supports `ResizeObserver`. This may be necessary if use of `ResizeObserver` results in too\n * many re-renders of the wrapped component due to the frequency at which events are fired.\n *\n * This has no impact if `skipViewportMeasures` is `true`, as no viewport measurement strategy is used.\n */\n disableResizeObserver?: boolean;\n\n /**\n * Whether or not `withViewport` will delay before first measuring the viewport size.\n * Setting this will delay measurement by the same amount as the debounce for resizing the window.\n * This is useful for giving the child of the viewport time to render before measuring.\n *\n * This is an opt-in setting as existing systems have a dependency on immediate measurement for performance.\n * @default false\n */\n delayFirstMeasure?: boolean;\n}\n\nconst RESIZE_DELAY = 500;\nconst MAX_RESIZE_ATTEMPTS = 3;\n\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(\n ComposedComponent: new (props: TProps, ...args: any[]) => React.Component,\n): any {\n return class WithViewportComponent extends BaseDecorator {\n private _root = React.createRef();\n private _resizeAttempts: number;\n private _viewportResizeObserver: any;\n private _async: Async;\n private _events: EventGroup;\n\n constructor(props: TProps) {\n super(props);\n\n this._async = new Async(this);\n this._events = new EventGroup(this);\n this._resizeAttempts = 0;\n\n this.state = {\n viewport: {\n width: 0,\n height: 0,\n },\n };\n }\n\n public componentDidMount(): void {\n const { delayFirstMeasure, disableResizeObserver, skipViewportMeasures } = this.props as IWithViewportProps;\n const win = getWindow(this._root.current);\n\n this._onAsyncResize = this._async.debounce(this._onAsyncResize, RESIZE_DELAY, {\n leading: false,\n });\n\n if (!skipViewportMeasures) {\n if (!disableResizeObserver && this._isResizeObserverAvailable()) {\n this._registerResizeObserver();\n } else {\n this._events.on(win, 'resize', this._onAsyncResize);\n }\n\n if (delayFirstMeasure) {\n this._async.setTimeout(() => {\n this._updateViewport();\n }, RESIZE_DELAY);\n } else {\n this._updateViewport();\n }\n }\n }\n\n public componentDidUpdate(previousProps: TProps) {\n const { skipViewportMeasures: previousSkipViewportMeasures } = previousProps as IWithViewportProps;\n const { disableResizeObserver, skipViewportMeasures } = this.props as IWithViewportProps;\n const win = getWindow(this._root.current);\n\n if (skipViewportMeasures !== previousSkipViewportMeasures) {\n if (!skipViewportMeasures) {\n if (!disableResizeObserver && this._isResizeObserverAvailable()) {\n if (!this._viewportResizeObserver) {\n this._registerResizeObserver();\n }\n } else {\n this._events.on(win, 'resize', this._onAsyncResize);\n }\n\n this._updateViewport();\n } else {\n this._unregisterResizeObserver();\n this._events.off(win, 'resize', this._onAsyncResize);\n }\n }\n }\n\n public componentWillUnmount(): void {\n this._events.dispose();\n this._async.dispose();\n this._unregisterResizeObserver();\n }\n\n public render(): JSX.Element {\n const { viewport } = this.state;\n const newViewport = viewport!.width > 0 && viewport!.height > 0 ? viewport : undefined;\n\n return (\n
    \n \n
    \n );\n }\n\n public forceUpdate(): void {\n this._updateViewport(true);\n }\n\n private _onAsyncResize(): void {\n this._updateViewport();\n }\n\n private _isResizeObserverAvailable(): boolean {\n const win = getWindow(this._root.current);\n\n return win && (win as any).ResizeObserver;\n }\n\n private _registerResizeObserver = () => {\n const win = getWindow(this._root.current);\n\n this._viewportResizeObserver = new (win as any).ResizeObserver(this._onAsyncResize);\n this._viewportResizeObserver.observe(this._root.current);\n };\n\n private _unregisterResizeObserver = () => {\n if (this._viewportResizeObserver) {\n this._viewportResizeObserver.disconnect();\n delete this._viewportResizeObserver;\n }\n };\n\n /* Note: using lambda here because decorators don't seem to work in decorators. */\n private _updateViewport = (withForceUpdate?: boolean) => {\n const { viewport } = this.state;\n const viewportElement = this._root.current;\n const win = getWindow(viewportElement);\n const scrollElement = findScrollableParent(viewportElement) as HTMLElement;\n const scrollRect = getRect(scrollElement, win);\n const clientRect = getRect(viewportElement, win);\n const updateComponent = () => {\n if (withForceUpdate && this._composedComponentInstance) {\n this._composedComponentInstance.forceUpdate();\n }\n };\n\n const isSizeChanged =\n (clientRect && clientRect.width) !== viewport!.width || (scrollRect && scrollRect.height) !== viewport!.height;\n\n if (isSizeChanged && this._resizeAttempts < MAX_RESIZE_ATTEMPTS && clientRect && scrollRect) {\n this._resizeAttempts++;\n this.setState(\n {\n viewport: {\n width: clientRect.width,\n height: scrollRect.height,\n },\n },\n () => {\n this._updateViewport(withForceUpdate);\n },\n );\n } else {\n this._resizeAttempts = 0;\n updateComponent();\n }\n };\n };\n}\n","import * as React from 'react';\n\nimport {\n initializeComponentRef,\n FocusRects,\n Async,\n KeyCodes,\n elementContains,\n getRTLSafeKeyCode,\n classNamesFunction,\n css,\n memoizeFunction,\n warnMutuallyExclusive,\n} from '../../Utilities';\nimport {\n CheckboxVisibility,\n ColumnActionsMode,\n ConstrainMode,\n DetailsListLayoutMode,\n ColumnDragEndLocation,\n IColumnDragDropDetails,\n} from '../DetailsList/DetailsList.types';\nimport { DetailsHeader } from '../DetailsList/DetailsHeader';\nimport { SelectAllVisibility } from '../DetailsList/DetailsHeader.types';\nimport { DetailsRowBase } from '../DetailsList/DetailsRow.base';\nimport { DetailsRow } from '../DetailsList/DetailsRow';\nimport { FocusZone, FocusZoneDirection } from '../../FocusZone';\nimport { Selection, SelectionMode, SelectionZone } from '../../Selection';\n\nimport { DragDropHelper } from '../../DragDrop';\nimport { GroupedList } from '../../GroupedList';\nimport { List, ScrollToMode } from '../../List';\nimport { withViewport } from '../../utilities/decorators/withViewport';\nimport { GetGroupCount } from '../../utilities/groupedList/GroupedListUtility';\nimport { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles';\nimport { CHECK_CELL_WIDTH as CHECKBOX_WIDTH } from './DetailsRowCheck.styles';\n// For every group level there is a GroupSpacer added. Importing this const to have the source value in one place.\nimport { SPACER_WIDTH as GROUP_EXPAND_WIDTH } from '../GroupedList/GroupSpacer';\nimport { composeComponentAs, composeRenderFunction, getId } from '@fluentui/utilities';\nimport { useConst } from '@fluentui/react-hooks';\nimport type { IRenderFunction } from '../../Utilities';\nimport type {\n IColumn,\n IDetailsList,\n IDetailsListProps,\n IDetailsListStyles,\n IDetailsListStyleProps,\n} from '../DetailsList/DetailsList.types';\nimport type {\n IDetailsHeader,\n IDetailsHeaderProps,\n IColumnReorderHeaderProps,\n} from '../DetailsList/DetailsHeader.types';\nimport type { IDetailsFooterProps } from '../DetailsList/DetailsFooter.types';\nimport type { IDetailsRowProps } from '../DetailsList/DetailsRow.types';\nimport type { IFocusZone, IFocusZoneProps } from '../../FocusZone';\nimport type { IObjectWithKey, ISelection } from '../../Selection';\nimport type { IGroupedList, IGroupDividerProps, IGroupRenderProps, IGroup } from '../../GroupedList';\nimport type { IListProps } from '../../List';\nimport { WindowContext } from '@fluentui/react-window-provider';\nimport { getDocumentEx } from '../../utilities/dom';\n\nconst getClassNames = classNamesFunction();\nconst COMPONENT_NAME = 'DetailsList';\n\nexport interface IDetailsListState {\n focusedItemIndex: number;\n lastWidth?: number;\n lastSelectionMode?: SelectionMode;\n adjustedColumns: IColumn[];\n isCollapsed?: boolean;\n isSizing?: boolean;\n isSomeGroupExpanded?: boolean;\n /**\n * A unique object used to force-update the List when it changes.\n */\n version: {};\n getDerivedStateFromProps(nextProps: IDetailsListProps, previousState: IDetailsListState): IDetailsListState;\n}\n\nconst MIN_COLUMN_WIDTH = 100; // this is the global min width\n\nconst DEFAULT_RENDERED_WINDOWS_AHEAD = 2;\nconst DEFAULT_RENDERED_WINDOWS_BEHIND = 2;\n\nconst rowFocusZoneAddTabIndexProps = { tabIndex: 0 };\nconst rowFocusZoneNoTabIndexProps = {};\n\ntype IDetailsListInnerProps = Omit &\n IDetailsListState & {\n selection: ISelection;\n dragDropHelper: DragDropHelper | undefined;\n rootRef: React.RefObject;\n listRef: React.RefObject;\n groupedListRef: React.RefObject;\n focusZoneRef: React.RefObject;\n headerRef: React.RefObject;\n selectionZoneRef: React.RefObject;\n onGroupExpandStateChanged: (isSomeGroupExpanded: boolean) => void;\n onColumnIsSizingChanged: (column: IColumn, isSizing: boolean) => void;\n onRowDidMount: (row: DetailsRowBase) => void;\n onRowWillUnmount: (row: DetailsRowBase) => void;\n onColumnResized: (resizingColumn: IColumn, newWidth: number, resizingColumnIndex: number) => void;\n onColumnAutoResized: (column: IColumn, columnIndex: number) => void;\n onToggleCollapse: (collapsed: boolean) => void;\n onActiveRowChanged: (el?: HTMLElement, ev?: React.FocusEvent) => void;\n onBlur: (event: React.FocusEvent) => void;\n onRenderDefaultRow: (detailsRowProps: IDetailsRowProps) => JSX.Element;\n };\n\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 */\nconst DetailsListInner: React.ComponentType = (\n props: IDetailsListInnerProps,\n): JSX.Element | null => {\n const { selection } = props;\n\n const {\n ariaLabelForListHeader,\n ariaLabelForSelectAllCheckbox,\n ariaLabelForSelectionColumn,\n className,\n checkboxVisibility,\n compact,\n constrainMode,\n dragDropEvents,\n groups,\n groupProps,\n indentWidth,\n items,\n isPlaceholderData,\n isHeaderVisible,\n layoutMode,\n onItemInvoked,\n onItemContextMenu,\n onColumnHeaderClick,\n onColumnHeaderContextMenu,\n selectionMode = selection.mode,\n selectionPreservedOnEmptyClick,\n selectionZoneProps,\n // eslint-disable-next-line deprecation/deprecation\n ariaLabel,\n ariaLabelForGrid,\n rowElementEventMap,\n // eslint-disable-next-line deprecation/deprecation\n shouldApplyApplicationRole = false,\n getKey,\n listProps,\n usePageCache,\n onShouldVirtualize,\n viewport,\n minimumPixelsForDrag,\n getGroupHeight,\n styles,\n theme,\n cellStyleProps = DEFAULT_CELL_STYLE_PROPS,\n onRenderCheckbox,\n useFastIcons,\n dragDropHelper,\n adjustedColumns,\n isCollapsed,\n isSizing,\n isSomeGroupExpanded,\n version,\n rootRef,\n listRef,\n focusZoneRef,\n columnReorderOptions,\n groupedListRef,\n headerRef,\n onGroupExpandStateChanged,\n onColumnIsSizingChanged,\n onRowDidMount,\n onRowWillUnmount,\n disableSelectionZone,\n isSelectedOnFocus = true,\n onColumnResized,\n onColumnAutoResized,\n onToggleCollapse,\n onActiveRowChanged,\n onBlur,\n rowElementEventMap: eventsToRegister,\n onRenderMissingItem,\n onRenderItemColumn,\n onRenderField,\n getCellValueKey,\n getRowAriaLabel,\n getRowAriaDescribedBy,\n checkButtonAriaLabel,\n checkButtonGroupAriaLabel,\n checkboxCellClassName,\n useReducedRowRenderer,\n enableUpdateAnimations,\n enterModalSelectionOnTouch,\n onRenderDefaultRow,\n selectionZoneRef,\n focusZoneProps,\n } = props;\n\n const defaultRole = 'grid';\n const role = props.role ? props.role : defaultRole;\n\n const rowId = getId('row');\n\n const groupNestingDepth = getGroupNestingDepth(groups);\n const groupedDetailsListIndexMap = useGroupedDetailsListIndexMap(groups);\n\n const additionalListProps = React.useMemo((): IListProps => {\n return {\n renderedWindowsAhead: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_AHEAD,\n renderedWindowsBehind: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_BEHIND,\n getKey,\n version,\n ...listProps,\n };\n }, [isSizing, getKey, version, listProps]);\n\n let 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 let isCollapsedGroupSelectVisible =\n groupProps && groupProps.headerProps && groupProps.headerProps.isCollapsedGroupSelectVisible;\n if (isCollapsedGroupSelectVisible === undefined) {\n isCollapsedGroupSelectVisible = true;\n }\n const isSelectAllVisible = isCollapsedGroupSelectVisible || !groups || isSomeGroupExpanded;\n selectAllVisibility = isSelectAllVisible ? SelectAllVisibility.visible : SelectAllVisibility.hidden;\n }\n\n if (checkboxVisibility === CheckboxVisibility.hidden) {\n selectAllVisibility = SelectAllVisibility.none;\n }\n\n const defaultOnRenderDetailsHeader = React.useCallback(\n (detailsHeaderProps: IDetailsHeaderProps): JSX.Element | null => {\n return ;\n },\n [],\n );\n\n const defaultOnRenderDetailsFooter = React.useCallback((): JSX.Element | null => {\n return null;\n }, []);\n\n const propsOnRenderDetailsHeader = props.onRenderDetailsHeader;\n\n const onRenderDetailsHeader = React.useMemo(() => {\n return propsOnRenderDetailsHeader\n ? composeRenderFunction(propsOnRenderDetailsHeader, defaultOnRenderDetailsHeader)\n : defaultOnRenderDetailsHeader;\n }, [propsOnRenderDetailsHeader, defaultOnRenderDetailsHeader]);\n\n const propsOnRenderDetailsFooter = props.onRenderDetailsFooter;\n\n const onRenderDetailsFooter = React.useMemo(() => {\n return propsOnRenderDetailsFooter\n ? composeRenderFunction(propsOnRenderDetailsFooter, defaultOnRenderDetailsFooter)\n : defaultOnRenderDetailsFooter;\n }, [propsOnRenderDetailsFooter, defaultOnRenderDetailsFooter]);\n\n const detailsFooterProps = React.useMemo((): IDetailsFooterProps => {\n return {\n columns: adjustedColumns,\n groupNestingDepth,\n selection,\n selectionMode,\n viewport,\n checkboxVisibility,\n indentWidth,\n cellStyleProps,\n };\n }, [\n adjustedColumns,\n groupNestingDepth,\n selection,\n selectionMode,\n viewport,\n checkboxVisibility,\n indentWidth,\n cellStyleProps,\n ]);\n\n const columnReorderOnDragEnd = columnReorderOptions && columnReorderOptions.onDragEnd;\n\n const onColumnDragEnd = React.useCallback(\n (\n {\n dropLocation,\n }: {\n dropLocation?: ColumnDragEndLocation;\n },\n event: MouseEvent,\n ): void => {\n let finalDropLocation: ColumnDragEndLocation = ColumnDragEndLocation.outside;\n if (columnReorderOnDragEnd) {\n if (dropLocation && dropLocation !== ColumnDragEndLocation.header) {\n finalDropLocation = dropLocation;\n } else if (rootRef.current) {\n const clientRect = rootRef.current.getBoundingClientRect();\n if (\n event.clientX > clientRect.left &&\n event.clientX < clientRect.right &&\n event.clientY > clientRect.top &&\n event.clientY < clientRect.bottom\n ) {\n finalDropLocation = ColumnDragEndLocation.surface;\n }\n }\n columnReorderOnDragEnd(finalDropLocation);\n }\n },\n [columnReorderOnDragEnd, rootRef],\n );\n\n const columnReorderProps = React.useMemo((): IColumnReorderHeaderProps | undefined => {\n if (columnReorderOptions) {\n return {\n ...columnReorderOptions,\n onColumnDragEnd,\n };\n }\n }, [columnReorderOptions, onColumnDragEnd]);\n\n const rowCount =\n (isHeaderVisible ? 1 : 0) +\n (props.onRenderDetailsFooter ? 1 : 0) +\n GetGroupCount(groups) +\n (items ? items.length : 0);\n const colCount =\n (selectAllVisibility !== SelectAllVisibility.none ? 1 : 0) +\n (adjustedColumns ? adjustedColumns.length : 0) +\n (groups ? 1 : 0);\n\n const classNames = React.useMemo(() => {\n return getClassNames(styles, {\n theme: theme!,\n compact,\n isFixed: layoutMode === DetailsListLayoutMode.fixedColumns,\n isHorizontalConstrained: constrainMode === ConstrainMode.horizontalConstrained,\n className,\n });\n }, [styles, theme, compact, layoutMode, constrainMode, className]);\n\n const onRenderDetailsGroupFooter = groupProps && groupProps.onRenderFooter;\n\n const finalOnRenderDetailsGroupFooter = React.useMemo(() => {\n return onRenderDetailsGroupFooter\n ? (groupFooterProps: IGroupDividerProps, defaultRender?: IRenderFunction) => {\n return onRenderDetailsGroupFooter(\n {\n ...groupFooterProps,\n columns: adjustedColumns,\n groupNestingDepth,\n indentWidth,\n selection,\n selectionMode,\n viewport,\n checkboxVisibility,\n cellStyleProps,\n },\n defaultRender,\n );\n }\n : undefined;\n }, [\n onRenderDetailsGroupFooter,\n adjustedColumns,\n groupNestingDepth,\n indentWidth,\n selection,\n selectionMode,\n viewport,\n checkboxVisibility,\n cellStyleProps,\n ]);\n\n const onRenderDetailsGroupHeader = groupProps && groupProps.onRenderHeader;\n\n const finalOnRenderDetailsGroupHeader = React.useMemo(() => {\n return onRenderDetailsGroupHeader\n ? (groupHeaderProps: IGroupDividerProps, defaultRender?: IRenderFunction) => {\n const { groupIndex } = groupHeaderProps;\n const groupKey: string | undefined =\n groupIndex !== undefined ? groupHeaderProps.groups?.[groupIndex]?.key : undefined;\n const totalRowCount: number =\n groupKey !== undefined && groupedDetailsListIndexMap[groupKey]\n ? groupedDetailsListIndexMap[groupKey].totalRowCount\n : 0;\n\n return onRenderDetailsGroupHeader(\n {\n ...groupHeaderProps,\n columns: adjustedColumns,\n groupNestingDepth,\n indentWidth,\n selection,\n selectionMode: checkboxVisibility !== CheckboxVisibility.hidden ? selectionMode : SelectionMode.none,\n viewport,\n checkboxVisibility,\n cellStyleProps,\n ariaColSpan: adjustedColumns.length,\n ariaLevel: undefined,\n ariaPosInSet: undefined,\n ariaSetSize: undefined,\n ariaRowCount: undefined,\n ariaRowIndex: groupIndex !== undefined ? totalRowCount + (isHeaderVisible ? 1 : 0) : undefined,\n },\n defaultRender,\n );\n }\n : (groupHeaderProps: IGroupDividerProps, defaultRender: IRenderFunction) => {\n const { groupIndex } = groupHeaderProps;\n const groupKey: string | undefined =\n groupIndex !== undefined ? groupHeaderProps.groups?.[groupIndex]?.key : undefined;\n const totalRowCount: number =\n groupKey !== undefined && groupedDetailsListIndexMap[groupKey]\n ? groupedDetailsListIndexMap[groupKey].totalRowCount\n : 0;\n\n return defaultRender({\n ...groupHeaderProps,\n ariaColSpan: adjustedColumns.length,\n ariaLevel: undefined,\n ariaPosInSet: undefined,\n ariaSetSize: undefined,\n ariaRowCount: undefined,\n ariaRowIndex: groupIndex !== undefined ? totalRowCount + (isHeaderVisible ? 1 : 0) : undefined,\n });\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\n const finalGroupProps = React.useMemo((): IGroupRenderProps | undefined => {\n return {\n ...groupProps,\n role: role === defaultRole ? 'rowgroup' : 'presentation',\n onRenderFooter: finalOnRenderDetailsGroupFooter,\n onRenderHeader: finalOnRenderDetailsGroupHeader,\n // pass through custom group header checkbox label\n headerProps: {\n ...groupProps?.headerProps,\n selectAllButtonProps: {\n 'aria-label': checkButtonGroupAriaLabel,\n ...groupProps?.headerProps?.selectAllButtonProps,\n },\n },\n };\n }, [groupProps, finalOnRenderDetailsGroupFooter, finalOnRenderDetailsGroupHeader, checkButtonGroupAriaLabel, role]);\n\n const sumColumnWidths = useConst(() =>\n memoizeFunction((columns: IColumn[]) => {\n let totalWidth: number = 0;\n\n columns.forEach((column: IColumn) => (totalWidth += column.calculatedWidth || column.minWidth));\n\n return totalWidth;\n }),\n );\n\n const collapseAllVisibility = groupProps && groupProps.collapseAllVisibility;\n\n const rowWidth = React.useMemo(() => {\n return sumColumnWidths(adjustedColumns);\n }, [adjustedColumns, sumColumnWidths]);\n\n const onRenderCell = React.useCallback(\n (nestingDepth: number, item: any, index: number, group?: IGroup): React.ReactNode => {\n const finalOnRenderRow = props.onRenderRow\n ? composeRenderFunction(props.onRenderRow, onRenderDefaultRow)\n : onRenderDefaultRow;\n\n const groupKey: string | undefined = group ? group.key : undefined;\n const numOfGroupHeadersBeforeItem: number =\n groupKey && groupedDetailsListIndexMap[groupKey]\n ? groupedDetailsListIndexMap[groupKey].numOfGroupHeadersBeforeItem\n : 0;\n\n const rowRole = role === defaultRole ? undefined : 'presentation';\n\n // add tabindex=\"0\" to first row so if the header isn't rendered or isn't focusable,\n // the focuszone still has content in the tab order.\n const rowFocusZoneProps = index > 0 ? rowFocusZoneNoTabIndexProps : rowFocusZoneAddTabIndexProps;\n\n const rowProps: IDetailsRowProps = {\n item,\n itemIndex: index,\n flatIndexOffset: (isHeaderVisible ? 2 : 1) + numOfGroupHeadersBeforeItem,\n compact,\n columns: adjustedColumns,\n groupNestingDepth: nestingDepth,\n id: `${rowId}-${index}`,\n selectionMode,\n selection,\n onDidMount: onRowDidMount,\n onWillUnmount: onRowWillUnmount,\n onRenderItemColumn,\n onRenderField,\n getCellValueKey,\n eventsToRegister,\n dragDropEvents,\n dragDropHelper,\n viewport,\n checkboxVisibility,\n collapseAllVisibility,\n getRowAriaLabel,\n getRowAriaDescribedBy,\n checkButtonAriaLabel,\n checkboxCellClassName,\n useReducedRowRenderer,\n indentWidth,\n cellStyleProps,\n onRenderDetailsCheckbox: onRenderCheckbox,\n enableUpdateAnimations,\n rowWidth,\n useFastIcons,\n role: rowRole,\n isGridRow: true,\n focusZoneProps: rowFocusZoneProps,\n };\n\n if (!item) {\n if (onRenderMissingItem) {\n return onRenderMissingItem(index, rowProps);\n }\n\n return null;\n }\n\n return finalOnRenderRow(rowProps);\n },\n [\n compact,\n adjustedColumns,\n selectionMode,\n selection,\n rowId,\n onRowDidMount,\n onRowWillUnmount,\n onRenderItemColumn,\n onRenderField,\n getCellValueKey,\n eventsToRegister,\n dragDropEvents,\n dragDropHelper,\n viewport,\n checkboxVisibility,\n collapseAllVisibility,\n getRowAriaLabel,\n getRowAriaDescribedBy,\n isHeaderVisible,\n checkButtonAriaLabel,\n checkboxCellClassName,\n useReducedRowRenderer,\n indentWidth,\n cellStyleProps,\n onRenderCheckbox,\n enableUpdateAnimations,\n useFastIcons,\n onRenderDefaultRow,\n onRenderMissingItem,\n props.onRenderRow,\n rowWidth,\n role,\n groupedDetailsListIndexMap,\n ],\n );\n\n const onRenderListCell = React.useCallback(\n (nestingDepth: number): ((item: any, itemIndex: number) => React.ReactNode) => {\n return (item: any, itemIndex: number): React.ReactNode => {\n return onRenderCell(nestingDepth, item, itemIndex);\n };\n },\n [onRenderCell],\n );\n\n const isRightArrow = React.useCallback(\n (event: React.KeyboardEvent) => {\n // eslint-disable-next-line deprecation/deprecation\n return event.which === getRTLSafeKeyCode(KeyCodes.right, theme);\n },\n [theme],\n );\n\n const focusZoneInnerProps: IFocusZoneProps = {\n ...focusZoneProps,\n componentRef: focusZoneProps && focusZoneProps.componentRef ? focusZoneProps.componentRef : focusZoneRef,\n className:\n focusZoneProps && focusZoneProps.className\n ? css(classNames.focusZone, focusZoneProps.className)\n : classNames.focusZone,\n direction: focusZoneProps ? focusZoneProps.direction : FocusZoneDirection.vertical,\n shouldEnterInnerZone:\n focusZoneProps && focusZoneProps.shouldEnterInnerZone ? focusZoneProps.shouldEnterInnerZone : isRightArrow,\n onActiveElementChanged:\n focusZoneProps && focusZoneProps.onActiveElementChanged\n ? focusZoneProps.onActiveElementChanged\n : onActiveRowChanged,\n shouldRaiseClicksOnEnter: false,\n onBlur: focusZoneProps && focusZoneProps.onBlur ? focusZoneProps.onBlur : onBlur,\n };\n\n const FinalGroupedList =\n groups && groupProps?.groupedListAs ? composeComponentAs(groupProps.groupedListAs, GroupedList) : GroupedList;\n\n const list = groups ? (\n \n ) : (\n \n \n \n );\n\n const onHeaderKeyDown = React.useCallback(\n (ev: React.KeyboardEvent): void => {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.down) {\n if (focusZoneRef.current && focusZoneRef.current.focus()) {\n // select the first item in list after down arrow key event\n // only if nothing was selected; otherwise start with the already-selected item\n if (isSelectedOnFocus && selection.getSelectedIndices().length === 0) {\n selection.setIndexSelected(0, true, false);\n }\n\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n },\n [selection, focusZoneRef, isSelectedOnFocus],\n );\n\n const onContentKeyDown = React.useCallback(\n (ev: React.KeyboardEvent): void => {\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 },\n [headerRef],\n );\n\n return (\n \n \n \n
    \n {isHeaderVisible &&\n onRenderDetailsHeader(\n {\n componentRef: headerRef,\n selectionMode,\n layoutMode: layoutMode!,\n selection,\n columns: adjustedColumns,\n onColumnClick: onColumnHeaderClick,\n onColumnContextMenu: onColumnHeaderContextMenu,\n onColumnResized,\n onColumnIsSizingChanged,\n onColumnAutoResized,\n groupNestingDepth,\n isAllCollapsed: isCollapsed,\n onToggleCollapseAll: onToggleCollapse,\n ariaLabel: ariaLabelForListHeader,\n ariaLabelForSelectAllCheckbox,\n ariaLabelForSelectionColumn,\n selectAllVisibility,\n collapseAllVisibility: groupProps && groupProps.collapseAllVisibility,\n viewport,\n columnReorderProps,\n minimumPixelsForDrag,\n cellStyleProps,\n checkboxVisibility,\n indentWidth,\n onRenderDetailsCheckbox: onRenderCheckbox,\n rowWidth: sumColumnWidths(adjustedColumns),\n useFastIcons,\n },\n onRenderDetailsHeader,\n )}\n
    \n
    \n {!disableSelectionZone ? (\n \n {list}\n \n ) : (\n list\n )}\n
    \n {onRenderDetailsFooter({\n ...detailsFooterProps,\n })}\n \n \n );\n};\n\n@withViewport\nexport class DetailsListBase extends React.Component implements IDetailsList {\n public static 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\n public static contextType = WindowContext;\n\n // References\n private _async: Async;\n private _root = React.createRef();\n private _header = React.createRef();\n private _groupedList = React.createRef();\n private _list = React.createRef();\n private _focusZone = React.createRef();\n private _selectionZone = React.createRef();\n\n private _selection: ISelection;\n private _activeRows: { [key: string]: DetailsRowBase };\n private _dragDropHelper: DragDropHelper | undefined;\n private _initialFocusedIndex: number | undefined;\n\n private _columnOverrides: {\n [key: string]: IColumn;\n };\n\n public static getDerivedStateFromProps(\n nextProps: IDetailsListProps,\n previousState: IDetailsListState,\n ): IDetailsListState {\n return previousState.getDerivedStateFromProps(nextProps, previousState);\n }\n\n constructor(props: IDetailsListProps) {\n super(props);\n\n initializeComponentRef(this);\n this._async = new Async(this);\n\n this._activeRows = {};\n this._columnOverrides = {};\n\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\n warnMutuallyExclusive(COMPONENT_NAME, props, {\n selection: 'getKey',\n });\n\n this._selection =\n props.selection ||\n new Selection({\n onSelectionChanged: undefined,\n getKey: props.getKey,\n selectionMode: props.selectionMode,\n });\n\n if (!this.props.disableSelectionZone) {\n this._selection.setItems(props.items as IObjectWithKey[], false);\n }\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 }\n\n public scrollToIndex(index: number, measureItem?: (itemIndex: number) => number, scrollToMode?: ScrollToMode): void {\n this._list.current && this._list.current.scrollToIndex(index, measureItem, scrollToMode);\n this._groupedList.current && this._groupedList.current.scrollToIndex(index, measureItem, scrollToMode);\n }\n\n public focusIndex(\n index: number,\n forceIntoFirstElement: boolean = false,\n measureItem?: (itemIndex: number) => number,\n scrollToMode?: ScrollToMode,\n ): void {\n const item = this.props.items[index];\n if (item) {\n this.scrollToIndex(index, measureItem, scrollToMode);\n\n const itemKey = this._getItemKey(item, index);\n const row = this._activeRows[itemKey];\n if (row) {\n this._setFocusToRow(row, forceIntoFirstElement);\n }\n }\n }\n\n public getStartItemIndexInView(): number {\n if (this._list && this._list.current) {\n return this._list.current.getStartItemIndexInView();\n } else if (this._groupedList && this._groupedList.current) {\n return this._groupedList.current.getStartItemIndexInView();\n }\n return 0;\n }\n\n public updateColumn(column: IColumn, options: { width?: number; newColumnIndex?: number }) {\n const NO_COLUMNS: IColumn[] = [];\n\n const { columns = NO_COLUMNS, selectionMode, checkboxVisibility, columnReorderOptions } = this.props;\n const { width, newColumnIndex } = options;\n const index = columns.findIndex(col => col.key === column.key);\n\n if (width) {\n this._onColumnResized(column, width, index!);\n }\n\n if (newColumnIndex !== undefined && columnReorderOptions) {\n const isCheckboxColumnHidden =\n selectionMode === SelectionMode.none || checkboxVisibility === CheckboxVisibility.hidden;\n\n const showCheckbox = checkboxVisibility !== CheckboxVisibility.hidden;\n const columnIndex = (showCheckbox ? 2 : 1) + index!;\n\n const draggedIndex = isCheckboxColumnHidden ? columnIndex - 1 : columnIndex - 2;\n const targetIndex = isCheckboxColumnHidden ? newColumnIndex - 1 : newColumnIndex - 2;\n\n const frozenColumnCountFromStart = columnReorderOptions.frozenColumnCountFromStart ?? 0;\n const frozenColumnCountFromEnd = columnReorderOptions.frozenColumnCountFromEnd ?? 0;\n const isValidTargetIndex =\n targetIndex >= frozenColumnCountFromStart && targetIndex < columns.length - frozenColumnCountFromEnd;\n\n if (isValidTargetIndex) {\n if (columnReorderOptions.onColumnDrop) {\n const dragDropDetails: IColumnDragDropDetails = {\n draggedIndex,\n targetIndex,\n };\n columnReorderOptions.onColumnDrop(dragDropDetails);\n /* eslint-disable deprecation/deprecation */\n } else if (columnReorderOptions.handleColumnReorder) {\n columnReorderOptions.handleColumnReorder(draggedIndex, targetIndex);\n /* eslint-enable deprecation/deprecation */\n }\n }\n }\n }\n\n public componentWillUnmount(): void {\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\n public componentDidUpdate(prevProps: IDetailsListProps, prevState: IDetailsListState) {\n this._notifyColumnsResized();\n\n const doc = getDocumentEx(this.context);\n\n if (this._initialFocusedIndex !== undefined) {\n const item = this.props.items[this._initialFocusedIndex];\n if (item) {\n const itemKey = this._getItemKey(item, this._initialFocusedIndex);\n const row = this._activeRows[itemKey];\n if (row) {\n this._setFocusToRowIfPending(row);\n }\n }\n }\n\n if (\n this.props.items !== prevProps.items &&\n this.props.items.length > 0 &&\n this.state.focusedItemIndex !== -1 &&\n !elementContains(this._root.current, doc?.activeElement as HTMLElement, false)\n ) {\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 const index =\n this.state.focusedItemIndex < this.props.items.length\n ? this.state.focusedItemIndex\n : this.props.items.length - 1;\n const item = this.props.items[index];\n const itemKey = this._getItemKey(item, this.state.focusedItemIndex);\n const row = this._activeRows[itemKey];\n if (row) {\n this._setFocusToRow(row);\n } else {\n this._initialFocusedIndex = index;\n }\n }\n if (this.props.onDidUpdate) {\n this.props.onDidUpdate(this);\n }\n }\n\n public render(): JSX.Element {\n return (\n \n );\n }\n\n public forceUpdate(): void {\n super.forceUpdate();\n this._forceListUpdates();\n }\n\n protected _onRenderRow = (\n props: IDetailsRowProps,\n defaultRender?: IRenderFunction,\n ): JSX.Element => {\n return ;\n };\n\n private _getDerivedStateFromProps = (\n nextProps: IDetailsListProps,\n previousState: IDetailsListState,\n ): IDetailsListState => {\n const {\n checkboxVisibility,\n items,\n setKey,\n selectionMode = this._selection.mode,\n columns,\n viewport,\n compact,\n dragDropEvents,\n } = this.props;\n\n const { isAllGroupsCollapsed = undefined } = this.props.groupProps || {};\n const newViewportWidth = (nextProps.viewport && nextProps.viewport.width) || 0;\n const oldViewportWidth = (viewport && viewport.width) || 0;\n const shouldResetSelection = nextProps.setKey !== setKey || nextProps.setKey === undefined;\n let shouldForceUpdates = false;\n\n if (nextProps.layoutMode !== this.props.layoutMode) {\n shouldForceUpdates = true;\n }\n\n let nextState = previousState;\n\n if (shouldResetSelection) {\n this._initialFocusedIndex = nextProps.initialFocusedIndex;\n // reset focusedItemIndex when setKey changes\n nextState = {\n ...nextState,\n focusedItemIndex: this._initialFocusedIndex !== undefined ? this._initialFocusedIndex : -1,\n };\n }\n\n if (!this.props.disableSelectionZone && nextProps.items !== items) {\n this._selection.setItems(nextProps.items, shouldResetSelection);\n }\n\n if (\n nextProps.checkboxVisibility !== checkboxVisibility ||\n nextProps.columns !== columns ||\n newViewportWidth !== oldViewportWidth ||\n nextProps.compact !== compact\n ) {\n shouldForceUpdates = true;\n }\n\n nextState = {\n ...nextState,\n ...this._adjustColumns(nextProps, nextState, true),\n };\n\n if (nextProps.selectionMode !== selectionMode) {\n shouldForceUpdates = true;\n }\n\n if (\n isAllGroupsCollapsed === undefined &&\n nextProps.groupProps &&\n nextProps.groupProps.isAllGroupsCollapsed !== undefined\n ) {\n nextState = {\n ...nextState,\n isCollapsed: nextProps.groupProps.isAllGroupsCollapsed,\n isSomeGroupExpanded: !nextProps.groupProps.isAllGroupsCollapsed,\n };\n }\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\n if (shouldForceUpdates) {\n nextState = {\n ...nextState,\n version: {},\n };\n }\n\n return nextState;\n };\n\n private _onGroupExpandStateChanged = (isSomeGroupExpanded: boolean): void => {\n this.setState({ isSomeGroupExpanded });\n };\n\n private _onColumnIsSizingChanged = (column: IColumn, isSizing: boolean): void => {\n this.setState({ isSizing });\n };\n\n private _getGroupNestingDepth(): number {\n const { groups } = this.props;\n let level = 0;\n let groupsInLevel = groups;\n\n while (groupsInLevel && groupsInLevel.length > 0) {\n level++;\n groupsInLevel = groupsInLevel[0].children;\n }\n\n return level;\n }\n\n private _onRowDidMount = (row: DetailsRowBase): void => {\n const { item, itemIndex } = row.props;\n const itemKey = this._getItemKey(item, itemIndex);\n this._activeRows[itemKey] = row; // this is used for column auto resize\n\n this._setFocusToRowIfPending(row);\n\n const { onRowDidMount } = this.props;\n if (onRowDidMount) {\n onRowDidMount(item, itemIndex);\n }\n };\n\n private _setFocusToRowIfPending(row: DetailsRowBase): void {\n const { itemIndex } = row.props;\n if (this._initialFocusedIndex !== undefined && itemIndex === this._initialFocusedIndex) {\n this._setFocusToRow(row);\n delete this._initialFocusedIndex;\n }\n }\n\n private _setFocusToRow(row: DetailsRowBase, forceIntoFirstElement: boolean = false): void {\n if (this._selectionZone.current) {\n this._selectionZone.current.ignoreNextFocus();\n }\n this._async.setTimeout((): void => {\n row.focus(forceIntoFirstElement);\n }, 0);\n }\n\n private _onRowWillUnmount = (row: DetailsRowBase): void => {\n const { onRowWillUnmount } = this.props;\n\n const { item, itemIndex } = row.props;\n const itemKey = this._getItemKey(item, itemIndex);\n delete this._activeRows[itemKey];\n\n if (onRowWillUnmount) {\n onRowWillUnmount(item, itemIndex);\n }\n };\n\n private _onToggleCollapse = (collapsed: boolean): void => {\n this.setState({\n isCollapsed: collapsed,\n });\n if (this._groupedList.current) {\n this._groupedList.current.toggleCollapseAll(collapsed);\n }\n };\n\n private _forceListUpdates(): void {\n if (this._groupedList.current) {\n this._groupedList.current.forceUpdate();\n }\n if (this._list.current) {\n this._list.current.forceUpdate();\n }\n }\n\n private _notifyColumnsResized(): void {\n this.state.adjustedColumns.forEach(column => {\n if (column.onColumnResize) {\n column.onColumnResize(column.currentWidth);\n }\n });\n }\n\n private _adjustColumns(\n newProps: IDetailsListProps,\n previousState: IDetailsListState,\n forceUpdate?: boolean,\n resizingColumnIndex?: number,\n ): IDetailsListState {\n const adjustedColumns = this._getAdjustedColumns(newProps, previousState, forceUpdate, resizingColumnIndex);\n const { viewport } = this.props;\n const viewportWidth = viewport && viewport.width ? viewport.width : 0;\n\n return {\n ...previousState,\n adjustedColumns,\n lastWidth: viewportWidth,\n };\n }\n\n /** Returns adjusted columns, given the viewport size and layout mode. */\n private _getAdjustedColumns(\n newProps: IDetailsListProps,\n previousState: IDetailsListState | undefined,\n forceUpdate?: boolean,\n resizingColumnIndex?: number,\n ): IColumn[] {\n const { items: newItems, layoutMode, selectionMode, viewport } = newProps;\n const viewportWidth = viewport && viewport.width ? viewport.width : 0;\n let { columns: newColumns } = newProps;\n\n const columns = this.props ? this.props.columns : [];\n const lastWidth = previousState ? previousState.lastWidth : -1;\n const lastSelectionMode = previousState ? previousState.lastSelectionMode : undefined;\n\n if (\n !forceUpdate &&\n lastWidth === viewportWidth &&\n lastSelectionMode === selectionMode &&\n (!columns || newColumns === columns)\n ) {\n return newColumns || [];\n }\n\n newColumns = newColumns || buildColumns(newItems, true);\n\n let adjustedColumns: IColumn[];\n\n if (layoutMode === DetailsListLayoutMode.fixedColumns) {\n adjustedColumns = this._getFixedColumns(newColumns, viewportWidth, newProps);\n\n // Preserve adjusted column calculated widths.\n adjustedColumns.forEach(column => {\n this._rememberCalculatedWidth(column, column.calculatedWidth!);\n });\n } else {\n adjustedColumns = this._getJustifiedColumns(newColumns, viewportWidth, newProps);\n\n adjustedColumns.forEach(column => {\n this._getColumnOverride(column.key).currentWidth = column.calculatedWidth;\n });\n }\n\n return adjustedColumns;\n }\n\n /** Builds a set of columns based on the given columns mixed with the current overrides. */\n private _getFixedColumns(newColumns: IColumn[], viewportWidth: number, props: IDetailsListProps): IColumn[] {\n const { selectionMode = this._selection.mode, checkboxVisibility, flexMargin, skipViewportMeasures } = this.props;\n let remainingWidth = viewportWidth - (flexMargin || 0);\n let sumProportionalWidth = 0;\n\n newColumns.forEach((col: IColumn) => {\n if (skipViewportMeasures || !col.flexGrow) {\n remainingWidth -= col.maxWidth || col.minWidth || MIN_COLUMN_WIDTH;\n } else {\n remainingWidth -= col.minWidth || MIN_COLUMN_WIDTH;\n sumProportionalWidth += col.flexGrow;\n }\n\n remainingWidth -= getPaddedWidth(col, props, true);\n });\n\n const rowCheckWidth =\n selectionMode !== SelectionMode.none && checkboxVisibility !== CheckboxVisibility.hidden ? CHECKBOX_WIDTH : 0;\n const groupExpandWidth = this._getGroupNestingDepth() * GROUP_EXPAND_WIDTH;\n remainingWidth -= rowCheckWidth + groupExpandWidth;\n\n let widthFraction = remainingWidth / sumProportionalWidth;\n\n // Shrinks proportional columns to their max width and adds the remaining width to distribute to other columns.\n if (!skipViewportMeasures) {\n newColumns.forEach((column: IColumn) => {\n const newColumn: IColumn = { ...column, ...this._columnOverrides[column.key] };\n\n if (newColumn.flexGrow && newColumn.maxWidth) {\n const fullWidth = newColumn.flexGrow * widthFraction + newColumn.minWidth;\n const shrinkWidth = fullWidth - newColumn.maxWidth;\n\n if (shrinkWidth > 0) {\n remainingWidth += shrinkWidth;\n sumProportionalWidth -= (shrinkWidth / (fullWidth - newColumn.minWidth)) * newColumn.flexGrow;\n }\n }\n });\n }\n\n widthFraction = remainingWidth > 0 ? remainingWidth / sumProportionalWidth : 0;\n\n return newColumns.map(column => {\n const newColumn: IColumn = { ...column, ...this._columnOverrides[column.key] };\n\n // Delay computation until viewport width is available.\n if (!skipViewportMeasures && newColumn.flexGrow && remainingWidth <= 0 && viewportWidth === 0) {\n return newColumn;\n }\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 } else {\n newColumn.calculatedWidth = newColumn.maxWidth || newColumn.minWidth || MIN_COLUMN_WIDTH;\n }\n }\n\n return newColumn;\n });\n }\n\n /** Builds a set of columns to fix within the viewport width. */\n private _getJustifiedColumns(newColumns: IColumn[], viewportWidth: number, props: IDetailsListProps): IColumn[] {\n const { selectionMode = this._selection.mode, checkboxVisibility, skipViewportMeasures } = props;\n const rowCheckWidth =\n selectionMode !== SelectionMode.none && checkboxVisibility !== CheckboxVisibility.hidden ? CHECKBOX_WIDTH : 0;\n const groupExpandWidth = this._getGroupNestingDepth() * GROUP_EXPAND_WIDTH;\n let totalWidth = 0; // offset because we have one less inner padding.\n let minimumWidth = 0;\n const availableWidth = viewportWidth - (rowCheckWidth + groupExpandWidth);\n const adjustedColumns: IColumn[] = newColumns.map((column, i) => {\n const baseColumn = {\n ...column,\n calculatedWidth: column.minWidth || MIN_COLUMN_WIDTH,\n };\n\n const newColumn = {\n ...baseColumn,\n ...this._columnOverrides[column.key],\n };\n\n // eslint-disable-next-line deprecation/deprecation\n if (!(baseColumn.isCollapsible || baseColumn.isCollapsable)) {\n minimumWidth += getPaddedWidth(baseColumn, props);\n }\n\n totalWidth += getPaddedWidth(newColumn, props);\n\n return newColumn;\n });\n\n if (skipViewportMeasures) {\n return adjustedColumns;\n }\n\n let lastIndex = adjustedColumns.length - 1;\n\n // Shrink or remove collapsable columns.\n while (lastIndex >= 0 && totalWidth > availableWidth) {\n const column = adjustedColumns[lastIndex];\n\n const minWidth = column.minWidth || MIN_COLUMN_WIDTH;\n const overflowWidth = totalWidth - availableWidth;\n\n // eslint-disable-next-line deprecation/deprecation\n if (column.calculatedWidth! - minWidth >= overflowWidth || !(column.isCollapsible || column.isCollapsable)) {\n const originalWidth = column.calculatedWidth!;\n if (minimumWidth < availableWidth) {\n // Only adjust in cases where all the columns fit within the viewport\n column.calculatedWidth = Math.max(column.calculatedWidth! - overflowWidth, minWidth);\n }\n totalWidth -= originalWidth - column.calculatedWidth!;\n } else {\n totalWidth -= getPaddedWidth(column, props);\n adjustedColumns.splice(lastIndex, 1);\n }\n lastIndex--;\n }\n\n // Then expand columns starting at the beginning, until we've filled the width.\n for (let i = 0; i < adjustedColumns.length && totalWidth < availableWidth; i++) {\n const column = adjustedColumns[i];\n const isLast = i === adjustedColumns.length - 1;\n const overrides = this._columnOverrides[column.key];\n if (overrides && overrides.calculatedWidth && !isLast) {\n continue;\n }\n\n const spaceLeft = availableWidth - totalWidth;\n let increment: number;\n if (isLast) {\n increment = spaceLeft;\n } else {\n const maxWidth = column.maxWidth;\n const minWidth = column.minWidth || maxWidth || MIN_COLUMN_WIDTH;\n increment = maxWidth ? Math.min(spaceLeft, maxWidth - minWidth) : spaceLeft;\n }\n\n column.calculatedWidth = (column.calculatedWidth as number) + increment;\n totalWidth += increment;\n }\n\n return adjustedColumns;\n }\n\n private _onColumnResized = (resizingColumn: IColumn, newWidth: number, resizingColumnIndex: number): void => {\n const newCalculatedWidth = Math.max(resizingColumn.minWidth || MIN_COLUMN_WIDTH, newWidth);\n if (this.props.onColumnResize) {\n this.props.onColumnResize(resizingColumn, newCalculatedWidth, resizingColumnIndex);\n }\n\n this._rememberCalculatedWidth(resizingColumn, newCalculatedWidth);\n\n this.setState({\n ...this._adjustColumns(this.props, this.state, true, resizingColumnIndex),\n version: {},\n });\n };\n\n private _rememberCalculatedWidth(column: IColumn, newCalculatedWidth: number): void {\n const overrides = this._getColumnOverride(column.key);\n overrides.calculatedWidth = newCalculatedWidth;\n overrides.currentWidth = newCalculatedWidth;\n }\n\n private _getColumnOverride(key: string): IColumn {\n return (this._columnOverrides[key] = this._columnOverrides[key] || {});\n }\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 private _onColumnAutoResized = (column: IColumn, columnIndex: number): void => {\n let max = 0;\n let count = 0;\n const totalCount = Object.keys(this._activeRows).length;\n\n for (const key in this._activeRows) {\n if (this._activeRows.hasOwnProperty(key)) {\n const currentRow = this._activeRows[key];\n currentRow.measureCell(columnIndex, (width: number) => {\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 /**\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 private _onActiveRowChanged = (el?: HTMLElement, ev?: React.FocusEvent): void => {\n const { items, onActiveItemChanged } = this.props;\n\n if (!el) {\n return;\n }\n\n // Check and assign index only if the event was raised from any DetailsRow element\n if (el.getAttribute('data-item-index')) {\n const 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\n private _onBlur = (event: React.FocusEvent): void => {\n this.setState({\n focusedItemIndex: -1,\n });\n };\n\n private _getItemKey(item: any, itemIndex: number): string | number {\n const { getKey } = this.props;\n\n let itemKey: string | number | undefined = undefined;\n if (item) {\n itemKey = item.key;\n }\n\n if (getKey) {\n itemKey = getKey(item, itemIndex);\n }\n\n if (!itemKey) {\n itemKey = itemIndex;\n }\n\n return itemKey;\n }\n}\n\nexport function buildColumns(\n items: any[],\n canResizeColumns?: boolean,\n onColumnClick?: (ev: React.MouseEvent, column: IColumn) => void,\n sortedColumnKey?: string,\n isSortedDescending?: boolean,\n groupedColumnKey?: string,\n isMultiline?: boolean,\n columnActionsMode?: ColumnActionsMode,\n) {\n const columns: IColumn[] = [];\n\n if (items && items.length) {\n const firstItem = items[0];\n\n for (const propName in firstItem) {\n if (firstItem.hasOwnProperty(propName)) {\n columns.push({\n key: propName,\n name: propName,\n fieldName: propName,\n minWidth: MIN_COLUMN_WIDTH,\n maxWidth: 300,\n isCollapsible: !!columns.length,\n isMultiline: isMultiline === undefined ? false : isMultiline,\n isSorted: sortedColumnKey === propName,\n isSortedDescending: !!isSortedDescending,\n isRowHeader: false,\n columnActionsMode: columnActionsMode ?? ColumnActionsMode.clickable,\n isResizable: canResizeColumns,\n onColumnClick,\n isGrouped: groupedColumnKey === propName,\n });\n }\n }\n }\n\n return columns;\n}\n\nfunction getPaddedWidth(column: IColumn, props: IDetailsListProps, paddingOnly?: true): number {\n const { cellStyleProps = DEFAULT_CELL_STYLE_PROPS } = props;\n\n return (\n (paddingOnly ? 0 : column.calculatedWidth!) +\n cellStyleProps.cellLeftPadding +\n cellStyleProps.cellRightPadding +\n (column.isPadded ? cellStyleProps.cellExtraRightPadding : 0)\n );\n}\n\nfunction getGroupNestingDepth(groups: IDetailsListProps['groups']): number {\n let level = 0;\n let groupsInLevel = groups;\n\n while (groupsInLevel && groupsInLevel.length > 0) {\n level++;\n groupsInLevel = groupsInLevel[0].children;\n }\n\n return level;\n}\n\ninterface IGroupedDetailsListIndexMap {\n [key: string]: { numOfGroupHeadersBeforeItem: number; totalRowCount: number };\n}\n\nfunction useGroupedDetailsListIndexMap(groups: IDetailsListProps['groups']) {\n return React.useMemo((): IGroupedDetailsListIndexMap => {\n const indexMap: IGroupedDetailsListIndexMap = {};\n if (groups) {\n let rowCount = 1;\n let numGroupHeaders = 1;\n for (const group of groups) {\n const { key } = group;\n indexMap[key] = { numOfGroupHeadersBeforeItem: numGroupHeaders, totalRowCount: rowCount };\n numGroupHeaders++;\n rowCount += group.count + 1;\n }\n }\n return indexMap;\n }, [groups]);\n}\n","import { getGlobalClassNames } from '../../Styling';\nimport type { IDetailsListStyleProps, IDetailsListStyles } from './DetailsList.types';\n\nconst 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};\n\nexport const getDetailsListStyles = (props: IDetailsListStyleProps): IDetailsListStyles => {\n const { theme, className, isHorizontalConstrained, compact, isFixed } = props;\n const { semanticColors } = theme;\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n return {\n root: [\n classNames.root,\n theme.fonts.small,\n {\n position: 'relative',\n color: semanticColors.listText,\n selectors: {\n [`& .${classNames.listCell}`]: {\n minHeight: 38,\n wordBreak: 'break-word',\n },\n },\n },\n\n isFixed && classNames.isFixed,\n\n compact && [\n classNames.compact,\n {\n selectors: {\n [`.${classNames.listCell}`]: {\n minHeight: 32,\n },\n },\n },\n ],\n\n isHorizontalConstrained && [\n classNames.isHorizontalConstrained,\n {\n overflowX: 'auto',\n overflowY: 'visible',\n WebkitOverflowScrolling: 'touch',\n },\n ],\n\n className,\n ],\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","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { DetailsListBase } from './DetailsList.base';\nimport { getDetailsListStyles } from './DetailsList.styles';\nimport type { IDetailsListProps, IDetailsListStyleProps, IDetailsListStyles } from './DetailsList.types';\n\nexport const DetailsList: React.FunctionComponent = styled<\n IDetailsListProps,\n IDetailsListStyleProps,\n IDetailsListStyles\n>(DetailsListBase, getDetailsListStyles, undefined, {\n scope: 'DetailsList',\n});\n\nexport type { IDetailsListProps };\n","import * as React from 'react';\nimport { DialogContentBase } from './DialogContent.base';\nimport { ResponsiveMode } from '../../ResponsiveMode';\nimport type { IButtonProps } from '../../Button';\nimport type { IStyle, ITheme } from '../../Styling';\nimport type { IRefObject, IStyleFunctionOrObject } from '../../Utilities';\n\n/**\n * {@docCategory Dialog}\n */\nexport interface IDialogContent {}\n\n/**\n * {@docCategory Dialog}\n */\nexport interface IDialogContentProps extends React.ClassAttributes {\n children?: React.ReactNode;\n\n /**\n * Optional callback to access the IDialogContent interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules\n */\n styles?: IStyleFunctionOrObject;\n\n /**\n * Theme provided by HOC.\n */\n theme?: ITheme;\n\n /**\n * Is inside a multiline wrapper\n */\n isMultiline?: boolean;\n\n /**\n * Show an 'x' close button in the upper-right corner\n */\n showCloseButton?: boolean;\n\n /**\n * Other top buttons that will show up next to the close button\n */\n topButtonsProps?: IButtonProps[];\n\n /**\n * Optional override class name\n */\n className?: string;\n\n /**\n * Callback for when the Dialog is dismissed from the close button or light dismiss, before the animation completes.\n */\n onDismiss?: (ev?: React.MouseEvent) => any;\n\n /**\n * The Id for subText container\n */\n subTextId?: string;\n\n /**\n * The subtext to display in the dialog\n */\n subText?: string;\n\n /**\n * The Id for title container\n *\n * @deprecated use the `id` attribute in `titleProps` instead.\n */\n titleId?: string;\n\n /**\n * The title text to display at the top of the dialog.\n */\n title?: string | JSX.Element;\n\n /**\n * The props for title container.\n */\n titleProps?: React.HTMLAttributes;\n\n /**\n * Responsive mode passed in from decorator.\n */\n responsiveMode?: ResponsiveMode;\n\n /**\n * Label to be passed to to aria-label of close button\n * @defaultvalue Close\n */\n closeButtonAriaLabel?: string;\n\n /**\n * The type of Dialog to display.\n * @defaultvalue DialogType.normal\n */\n type?: DialogType;\n\n /**\n * The classname for when the header is draggable\n */\n draggableHeaderClassName?: string;\n}\n\n/**\n * {@docCategory Dialog}\n */\nexport enum DialogType {\n /** Standard dialog */\n normal = 0,\n /** Dialog with large header banner */\n largeHeader = 1,\n /** Dialog with an 'x' close button in the upper-right corner */\n close = 2,\n}\n\n/**\n * {@docCategory Dialog}\n */\nexport interface IDialogContentStyleProps {\n /**\n * Accept theme prop.\n */\n theme: ITheme;\n\n /**\n * Accept custom classNames\n */\n className?: string;\n\n isLargeHeader?: boolean;\n isClose?: boolean;\n hidden?: boolean;\n\n /**\n * Is inside a multiline wrapper\n */\n isMultiline?: boolean;\n\n /**\n * The classname for when the header is draggable\n */\n draggableHeaderClassName?: string;\n}\n\n/**\n * {@docCategory Dialog}\n */\nexport interface IDialogContentStyles {\n /**\n * Style for the content element.\n */\n content: IStyle;\n subText: IStyle;\n header: IStyle;\n button: IStyle;\n inner: IStyle;\n innerContent: IStyle;\n title: IStyle;\n topButton: IStyle;\n}\n","import { AnimationVariables, getGlobalClassNames, ZIndexes } from '../../Styling';\nimport type { IModalStyleProps, IModalStyles } from './Modal.types';\n\nexport const animationDuration = AnimationVariables.durationValue2;\n\nconst 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};\n\nexport const getStyles = (props: IModalStyleProps): IModalStyles => {\n const {\n className,\n containerClassName,\n scrollableContentClassName,\n isOpen,\n isVisible,\n hasBeenOpened,\n modalRectangleTop,\n theme,\n topOffsetFixed,\n isModeless,\n layerClassName,\n isDefaultDragHandle,\n windowInnerHeight,\n } = props;\n const { palette, effects, fonts } = theme;\n\n const classNames = getGlobalClassNames(globalClassNames, theme);\n\n return {\n root: [\n classNames.root,\n fonts.medium,\n {\n backgroundColor: 'transparent',\n position: '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 },\n isVisible &&\n !isModeless && {\n pointerEvents: 'auto',\n },\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 isModeless && {\n pointerEvents: 'auto',\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: {\n ['@supports (-webkit-overflow-scrolling: touch)']: {\n maxHeight: windowInnerHeight,\n },\n },\n },\n scrollableContentClassName,\n ],\n layer: isModeless && [layerClassName, classNames.layer, { pointerEvents: 'none' }],\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","import * as React from 'react';\nimport {\n classNamesFunction,\n getNativeProps,\n divProperties,\n enableBodyScroll,\n disableBodyScroll,\n initializeComponentRef,\n} from '../../Utilities';\nimport type { IOverlayProps, IOverlayStyleProps, IOverlayStyles } from './Overlay.types';\n\nconst getClassNames = classNamesFunction();\n\nexport class OverlayBase extends React.Component {\n private _allowTouchBodyScroll: boolean;\n\n constructor(props: IOverlayProps) {\n super(props);\n\n initializeComponentRef(this);\n const { allowTouchBodyScroll = false } = this.props;\n this._allowTouchBodyScroll = allowTouchBodyScroll;\n }\n\n public componentDidMount(): void {\n !this._allowTouchBodyScroll && disableBodyScroll();\n }\n\n public componentWillUnmount(): void {\n !this._allowTouchBodyScroll && enableBodyScroll();\n }\n\n public render(): JSX.Element {\n const { isDarkThemed: isDark, className, theme, styles } = this.props;\n\n const divProps = getNativeProps>(this.props, divProperties);\n\n const classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n isDark,\n });\n\n return
    ;\n }\n}\n","import { HighContrastSelector, getGlobalClassNames } from '../../Styling';\nimport type { IOverlayStyleProps, IOverlayStyles } from './Overlay.types';\n\nconst GlobalClassNames = {\n root: 'ms-Overlay',\n rootDark: 'ms-Overlay--dark',\n};\n\nexport const getStyles = (props: IOverlayStyleProps): IOverlayStyles => {\n const { className, theme, isNone, isDark } = props;\n\n const { palette } = theme;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\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\n selectors: {\n [HighContrastSelector]: {\n border: '1px solid WindowText',\n opacity: 0,\n },\n },\n },\n\n isNone && {\n visibility: 'hidden',\n },\n\n isDark && [\n classNames.rootDark,\n {\n backgroundColor: palette.blackTranslucent40,\n },\n ],\n\n className,\n ],\n };\n};\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { OverlayBase } from './Overlay.base';\nimport { getStyles } from './Overlay.styles';\nimport type { IOverlayProps, IOverlayStyleProps, IOverlayStyles } from './Overlay.types';\n\nexport const Overlay: React.FunctionComponent = styled<\n IOverlayProps,\n IOverlayStyleProps,\n IOverlayStyles\n>(OverlayBase, getStyles, undefined, {\n scope: 'Overlay',\n});\n","import { memoizeFunction } from '../../Utilities';\nimport { mergeStyles } from '../../Styling';\n\nexport interface IDraggableZoneStyles {\n root: string;\n}\n\nexport const getClassNames = memoizeFunction((className: string, isDragging: boolean): IDraggableZoneStyles => {\n return {\n root: mergeStyles(\n className,\n isDragging && {\n touchAction: 'none',\n selectors: {\n '& *': {\n userSelect: 'none',\n },\n },\n },\n ),\n };\n});\n","import * as React from 'react';\nimport { getClassNames } from './DraggableZone.styles';\nimport { on } from '../../Utilities';\nimport type { IDraggableZoneProps, ICoordinates, IDragData } from './DraggableZone.types';\nimport { WindowContext } from '@fluentui/react-window-provider';\nimport { getDocumentEx } from '../dom';\n\nexport interface IDraggableZoneState {\n isDragging: boolean;\n position: ICoordinates;\n lastPosition?: ICoordinates;\n}\n\nconst 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};\n\n// These are needed so that we can generalize the events\n// and so we have access to clientX and clientY in the touch events\ntype MouseTouchEvent = React.MouseEvent & React.TouchEvent & Event;\n\nexport class DraggableZone extends React.Component {\n public static contextType = WindowContext;\n\n private _touchId?: number;\n private _currentEventType = eventMapping.mouse;\n private _events: (() => void)[] = [];\n\n constructor(props: IDraggableZoneProps) {\n super(props);\n\n this.state = {\n isDragging: false,\n position: this.props.position || { x: 0, y: 0 },\n lastPosition: undefined,\n };\n }\n\n public componentDidUpdate(prevProps: IDraggableZoneProps) {\n if (this.props.position && (!prevProps.position || this.props.position !== prevProps.position)) {\n this.setState({ position: this.props.position });\n }\n }\n\n public componentWillUnmount() {\n this._events.forEach(dispose => dispose());\n }\n\n public render() {\n const child: any = React.Children.only(this.props.children);\n const { props } = child;\n const { position } = this.props;\n const { position: statePosition, isDragging } = this.state;\n let x = statePosition.x;\n let y = statePosition.y;\n\n if (position && !isDragging) {\n x = position.x;\n y = position.y;\n }\n\n return React.cloneElement(child, {\n style: {\n ...props.style,\n transform: `translate(${x}px, ${y}px)`,\n },\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 private _onMouseDown = (event: MouseTouchEvent) => {\n const onMouseDown = (React.Children.only(this.props.children) as any).props.onMouseDown;\n if (onMouseDown) {\n onMouseDown(event);\n }\n\n this._currentEventType = eventMapping.mouse;\n return this._onDragStart(event);\n };\n\n private _onMouseUp = (event: MouseTouchEvent) => {\n const onMouseUp = (React.Children.only(this.props.children) as any).props.onMouseUp;\n if (onMouseUp) {\n onMouseUp(event);\n }\n\n this._currentEventType = eventMapping.mouse;\n return this._onDragStop(event);\n };\n\n private _onTouchStart = (event: MouseTouchEvent) => {\n const onTouchStart = (React.Children.only(this.props.children) as any).props.onTouchStart;\n if (onTouchStart) {\n onTouchStart(event);\n }\n\n this._currentEventType = eventMapping.touch;\n return this._onDragStart(event);\n };\n\n private _onTouchEnd = (event: MouseTouchEvent) => {\n const onTouchEnd = (React.Children.only(this.props.children) as any).props.onTouchEnd;\n if (onTouchEnd) {\n onTouchEnd(event);\n }\n\n this._currentEventType = eventMapping.touch;\n this._onDragStop(event);\n };\n\n private _onDragStart = (event: MouseTouchEvent) => {\n // Only handle left click for dragging\n if (typeof event.button === 'number' && event.button !== 0) {\n return false;\n }\n\n // If the target doesn't match the handleSelector OR\n // if the target does match the preventDragSelector, bail out\n if (\n (this.props.handleSelector && !this._matchesSelector(event.target as HTMLElement, this.props.handleSelector)) ||\n (this.props.preventDragSelector &&\n this._matchesSelector(event.target as HTMLElement, this.props.preventDragSelector))\n ) {\n return;\n }\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\n const position = this._getControlPosition(event);\n if (position === undefined) {\n return;\n }\n\n const dragData = this._createDragDataFromPosition(position);\n this.props.onStart && this.props.onStart(event, dragData);\n\n this.setState({\n isDragging: true,\n lastPosition: position,\n });\n\n // hook up the appropriate mouse/touch events to the body to ensure\n // smooth dragging\n const doc = getDocumentEx(this.context)!;\n this._events = [\n on(doc.body, this._currentEventType.move, this._onDrag, true /* use capture phase */),\n on(doc.body, this._currentEventType.stop, this._onDragStop, true /* use capture phase */),\n ];\n };\n\n private _onDrag = (event: MouseTouchEvent) => {\n // Prevent scrolling on mobile devices\n if (event.type === 'touchmove') {\n event.preventDefault();\n }\n\n const position = this._getControlPosition(event);\n if (!position) {\n return;\n }\n\n // create the updated drag data from the position data\n const updatedData = this._createUpdatedDragData(this._createDragDataFromPosition(position));\n const updatedPosition = updatedData.position;\n\n this.props.onDragChange && this.props.onDragChange(event, updatedData);\n\n this.setState({\n position: updatedPosition,\n lastPosition: position,\n });\n };\n\n private _onDragStop = (event: MouseTouchEvent) => {\n if (!this.state.isDragging) {\n return;\n }\n\n const position = this._getControlPosition(event);\n if (!position) {\n return;\n }\n\n const baseDragData = this._createDragDataFromPosition(position);\n\n // Set dragging to false and reset the lastPosition\n this.setState({\n isDragging: false,\n lastPosition: undefined,\n });\n\n this.props.onStop && this.props.onStop(event, baseDragData);\n\n if (this.props.position) {\n this.setState({\n position: this.props.position,\n });\n }\n\n // Remove event handlers\n this._events.forEach(dispose => dispose());\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 private _getControlPosition(event: MouseTouchEvent): ICoordinates | undefined {\n const touchObj = this._getActiveTouch(event);\n\n // did we get the right touch?\n if (this._touchId !== undefined && !touchObj) {\n return undefined;\n }\n\n const eventToGetOffset = touchObj || event;\n return {\n x: eventToGetOffset.clientX,\n y: eventToGetOffset.clientY,\n };\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 private _getActiveTouch(event: MouseTouchEvent): React.Touch | undefined {\n return (\n (event.targetTouches && this._findTouchInTouchList(event.targetTouches)) ||\n (event.changedTouches && this._findTouchInTouchList(event.changedTouches))\n );\n }\n\n /**\n * Get the initial touch identifier associated with the given event\n * @param event - The event that contains the TouchList\n */\n private _getTouchId(event: MouseTouchEvent): number | undefined {\n const touch: React.Touch | undefined =\n (event.targetTouches && event.targetTouches[0]) || (event.changedTouches && event.changedTouches[0]);\n\n if (touch) {\n return touch.identifier;\n }\n }\n\n /**\n * Returns if an element (or any of the element's parents) match the given selector\n */\n private _matchesSelector(element: HTMLElement | null, selector: string): boolean {\n if (!element || element === getDocumentEx(this.context)?.body) {\n return false;\n }\n\n const matchesSelectorFn: Function =\n // eslint-disable-next-line deprecation/deprecation\n element.matches || element.webkitMatchesSelector || (element as any).msMatchesSelector; /* for IE */\n\n if (!matchesSelectorFn) {\n return false;\n }\n\n return matchesSelectorFn.call(element, selector) || this._matchesSelector(element.parentElement, selector);\n }\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 private _findTouchInTouchList(touchList: React.TouchList): React.Touch | undefined {\n if (this._touchId === undefined) {\n return;\n }\n\n for (let i = 0; i < touchList.length; i++) {\n if (touchList[i].identifier === this._touchId) {\n return touchList[i];\n }\n }\n\n return undefined;\n }\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 private _createDragDataFromPosition(position: ICoordinates): IDragData {\n const { lastPosition } = this.state;\n\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,\n };\n }\n\n return {\n delta: {\n x: position.x - lastPosition.x,\n y: position.y - lastPosition.y,\n },\n lastPosition,\n position,\n };\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 private _createUpdatedDragData(baseDragData: IDragData): IDragData {\n const { position } = this.state;\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}\n","import * as React from 'react';\nimport {\n classNamesFunction,\n css,\n allowScrollOnElement,\n allowOverscrollOnElement,\n getPropsWithDefaults,\n KeyCodes,\n elementContains,\n EventGroup,\n} 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 {\n useBoolean,\n useMergedRefs,\n useWarnings,\n useConst,\n useSetTimeout,\n useId,\n useUnmount,\n} from '@fluentui/react-hooks';\nimport type { IFocusTrapZone } from '../../FocusTrapZone';\nimport type { IDragOptions, IModalProps, IModalStyleProps, IModalStyles } from './Modal.types';\nimport type { ILayerProps } from '../../Layer';\nimport type { ICoordinates, IDragData } from '../../utilities/DraggableZone/index';\n\n// @TODO - need to change this to a panel whenever the breakpoint is under medium (verify the spec)\n\ninterface IModalInternalState {\n onModalCloseTimer: number;\n allowTouchBodyScroll?: boolean;\n scrollableContent: HTMLDivElement | null;\n lastSetCoordinates: ICoordinates;\n /** Minimum clamped position, if dragging and clamping (`dragOptions.keepInBounds`) are enabled */\n minPosition?: ICoordinates;\n /** Maximum clamped position, if dragging and clamping (`dragOptions.keepInBounds`) are enabled */\n maxPosition?: ICoordinates;\n events: EventGroup;\n /** Ensures we dispose the same keydown callback as was registered */\n disposeOnKeyDown?: () => void;\n /** Ensures we dispose the same keyup callback as was registered (also tracks whether keyup has been registered) */\n disposeOnKeyUp?: () => void;\n isInKeyboardMoveMode?: boolean;\n hasBeenOpened?: boolean;\n}\n\nconst ZERO: ICoordinates = { x: 0, y: 0 };\n\nconst DEFAULT_PROPS: Partial = {\n isOpen: false,\n isDarkOverlay: true,\n className: '',\n containerClassName: '',\n enableAriaHiddenSiblings: true,\n};\n\nconst getClassNames = classNamesFunction();\n\nconst getMoveDelta = (ev: React.KeyboardEvent): number => {\n let delta = 10;\n if (ev.shiftKey) {\n if (!ev.ctrlKey) {\n delta = 50;\n }\n } else if (ev.ctrlKey) {\n delta = 1;\n }\n\n return delta;\n};\n\nconst useComponentRef = (props: IModalProps, focusTrapZone: React.RefObject) => {\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n focus() {\n if (focusTrapZone.current) {\n focusTrapZone.current.focus();\n }\n },\n }),\n [focusTrapZone],\n );\n};\n\nexport const ModalBase: React.FunctionComponent = React.forwardRef(\n (propsWithoutDefaults, ref) => {\n const props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n const {\n allowTouchBodyScroll,\n className,\n children,\n containerClassName,\n scrollableContentClassName,\n elementToFocusOnDismiss,\n firstFocusableSelector,\n focusTrapZoneProps,\n forceFocusInsideTrap,\n // eslint-disable-next-line deprecation/deprecation\n disableRestoreFocus = props.ignoreExternalFocusing,\n isBlocking,\n isAlert,\n isClickableOutsideFocusTrap,\n isDarkOverlay,\n onDismiss,\n layerProps,\n overlay,\n isOpen,\n titleAriaId,\n styles,\n subtitleAriaId,\n theme,\n topOffsetFixed,\n responsiveMode,\n // eslint-disable-next-line deprecation/deprecation\n onLayerDidMount,\n isModeless,\n dragOptions,\n onDismissed,\n // eslint-disable-next-line deprecation/deprecation\n enableAriaHiddenSiblings,\n popupProps,\n } = props;\n\n const rootRef = React.useRef(null);\n const focusTrapZone = React.useRef(null);\n const focusTrapZoneRef = useMergedRefs(focusTrapZone, focusTrapZoneProps?.componentRef);\n const focusTrapZoneElm = React.useRef(null);\n const mergedRef = useMergedRefs(rootRef, ref);\n\n const modalResponsiveMode = useResponsiveMode(mergedRef);\n\n const focusTrapZoneId = useId('ModalFocusTrapZone', focusTrapZoneProps?.id);\n\n const win = useWindow();\n\n const { setTimeout, clearTimeout } = useSetTimeout();\n\n const [isModalOpen, setIsModalOpen] = React.useState(isOpen);\n const [isVisible, setIsVisible] = React.useState(isOpen);\n const [coordinates, setCoordinates] = React.useState(ZERO);\n const [modalRectangleTop, setModalRectangleTop] = React.useState();\n\n const [isModalMenuOpen, { toggle: toggleModalMenuOpen, setFalse: setModalMenuClose }] = useBoolean(false);\n\n const internalState = useConst(() => ({\n onModalCloseTimer: 0,\n allowTouchBodyScroll,\n scrollableContent: null,\n lastSetCoordinates: ZERO,\n events: new EventGroup({}),\n }));\n\n const { keepInBounds } = dragOptions || ({} as IDragOptions);\n const isAlertRole = isAlert ?? (isBlocking && !isModeless);\n\n const layerClassName = layerProps === undefined ? '' : layerProps.className;\n const classNames = getClassNames(styles, {\n theme: theme!,\n className,\n containerClassName,\n scrollableContentClassName,\n isOpen,\n isVisible,\n hasBeenOpened: internalState.hasBeenOpened,\n modalRectangleTop,\n topOffsetFixed,\n isModeless,\n layerClassName,\n windowInnerHeight: win?.innerHeight,\n isDefaultDragHandle: dragOptions && !dragOptions.dragHandleSelector,\n });\n\n const mergedLayerProps: ILayerProps = {\n eventBubblingEnabled: false,\n ...layerProps,\n onLayerDidMount: layerProps && layerProps.onLayerDidMount ? layerProps.onLayerDidMount : onLayerDidMount,\n insertFirst: layerProps?.insertFirst || isModeless,\n className: classNames.layer,\n };\n\n // Allow the user to scroll within the modal but not on the body\n const allowScrollOnModal = React.useCallback(\n (elt: HTMLDivElement | null): void => {\n if (elt) {\n if (internalState.allowTouchBodyScroll) {\n allowOverscrollOnElement(elt, internalState.events);\n } else {\n allowScrollOnElement(elt, internalState.events);\n }\n } else {\n internalState.events.off(internalState.scrollableContent);\n }\n internalState.scrollableContent = elt;\n },\n [internalState],\n );\n\n const registerInitialModalPosition = (): void => {\n const dialogMain = focusTrapZoneElm.current;\n const modalRectangle = dialogMain?.getBoundingClientRect();\n\n if (modalRectangle) {\n if (topOffsetFixed) {\n setModalRectangleTop(modalRectangle.top);\n }\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 /**\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 const getClampedAxis = React.useCallback(\n (axis: keyof ICoordinates, position: number) => {\n const { minPosition, maxPosition } = internalState;\n if (keepInBounds && minPosition && maxPosition) {\n position = Math.max(minPosition[axis], position);\n position = Math.min(maxPosition[axis], position);\n }\n return position;\n },\n [keepInBounds, internalState],\n );\n\n const handleModalClose = (): void => {\n internalState.lastSetCoordinates = ZERO;\n\n setModalMenuClose();\n internalState.isInKeyboardMoveMode = false;\n setIsModalOpen(false);\n setCoordinates(ZERO);\n\n internalState.disposeOnKeyUp?.();\n\n onDismissed?.();\n };\n\n const handleDragStart = React.useCallback((): void => {\n setModalMenuClose();\n internalState.isInKeyboardMoveMode = false;\n }, [internalState, setModalMenuClose]);\n\n const handleDrag = React.useCallback(\n (ev: React.MouseEvent & React.TouchEvent, dragData: IDragData): void => {\n setCoordinates(prevValue => ({\n x: getClampedAxis('x', prevValue.x + dragData.delta.x),\n y: getClampedAxis('y', prevValue.y + dragData.delta.y),\n }));\n },\n [getClampedAxis],\n );\n\n const handleDragStop = React.useCallback((): void => {\n if (focusTrapZone.current) {\n focusTrapZone.current.focus();\n }\n }, []);\n\n const handleEnterKeyboardMoveMode = () => {\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 const handleKeyDown = (ev: React.KeyboardEvent): void => {\n // eslint-disable-next-line deprecation/deprecation\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\n // eslint-disable-next-line deprecation/deprecation\n const newLocal = ev.altKey || ev.keyCode === KeyCodes.escape;\n if (isModalMenuOpen && newLocal) {\n setModalMenuClose();\n }\n\n // eslint-disable-next-line deprecation/deprecation\n if (internalState.isInKeyboardMoveMode && (ev.keyCode === KeyCodes.escape || ev.keyCode === KeyCodes.enter)) {\n internalState.isInKeyboardMoveMode = false;\n ev.preventDefault();\n ev.stopPropagation();\n }\n\n if (internalState.isInKeyboardMoveMode) {\n let handledEvent = true;\n const delta = getMoveDelta(ev);\n\n // eslint-disable-next-line deprecation/deprecation\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(prevValue => ({ x: prevValue.x, y: getClampedAxis('y', prevValue.y - delta) }));\n break;\n }\n case KeyCodes.down: {\n setCoordinates(prevValue => ({ x: prevValue.x, y: getClampedAxis('y', prevValue.y + delta) }));\n break;\n }\n case KeyCodes.left: {\n setCoordinates(prevValue => ({ x: getClampedAxis('x', prevValue.x - delta), y: prevValue.y }));\n break;\n }\n case KeyCodes.right: {\n setCoordinates(prevValue => ({ x: getClampedAxis('x', prevValue.x + delta), 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\n internalState.lastSetCoordinates = coordinates;\n setModalMenuClose();\n internalState.isInKeyboardMoveMode = true;\n\n internalState.events.on(win, 'keydown', handleKeyDown, true /* useCapture */);\n internalState.disposeOnKeyDown = () => {\n internalState.events.off(win, 'keydown', handleKeyDown, true /* useCapture */);\n internalState.disposeOnKeyDown = undefined;\n };\n };\n\n const handleExitKeyboardMoveMode = (ev: React.FocusEvent) => {\n focusTrapZoneProps?.onBlur?.(ev);\n internalState.lastSetCoordinates = ZERO;\n internalState.isInKeyboardMoveMode = false;\n internalState.disposeOnKeyDown?.();\n };\n\n const registerForKeyUp = (): void => {\n const handleKeyUp = (ev: React.KeyboardEvent): void => {\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 // eslint-disable-next-line deprecation/deprecation\n if (ev.altKey && ev.ctrlKey && ev.keyCode === KeyCodes.space) {\n if (elementContains(internalState.scrollableContent, ev.target as HTMLElement)) {\n toggleModalMenuOpen();\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n };\n\n if (!internalState.disposeOnKeyUp) {\n internalState.events.on(win, 'keyup', handleKeyUp, true /* useCapture */);\n internalState.disposeOnKeyUp = () => {\n internalState.events.off(win, 'keyup', handleKeyUp, true /* useCapture */);\n internalState.disposeOnKeyUp = undefined;\n };\n }\n };\n\n React.useEffect(() => {\n clearTimeout(internalState.onModalCloseTimer);\n // Opening the dialog\n if (isOpen) {\n // This must be done after the modal content has rendered\n requestAnimationFrame(() => setTimeout(registerInitialModalPosition, 0));\n\n setIsModalOpen(true);\n\n // Add a keyUp handler for all key up events once the dialog is open.\n if (dragOptions) {\n registerForKeyUp();\n }\n\n internalState.hasBeenOpened = true;\n setIsVisible(true);\n }\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\n useUnmount(() => {\n internalState.events.dispose();\n if (internalState.onModalCloseTimer) {\n clearTimeout(internalState.onModalCloseTimer);\n internalState.onModalCloseTimer = 0;\n }\n });\n\n useComponentRef(props, focusTrapZone);\n useDebugWarnings(props);\n\n const modalContent = (\n \n {dragOptions && internalState.isInKeyboardMoveMode && (\n
    \n {dragOptions.keyboardMoveIconProps ? (\n \n ) : (\n \n )}\n
    \n )}\n
    \n {dragOptions && isModalMenuOpen && (\n \n )}\n {children}\n
    \n \n );\n\n return (\n (isModalOpen && modalResponsiveMode! >= (responsiveMode || ResponsiveMode.small) && (\n \n \n
    \n {!isModeless && (\n \n )}\n {dragOptions ? (\n \n {modalContent}\n \n ) : (\n modalContent\n )}\n
    \n \n
    \n )) ||\n null\n );\n },\n);\nModalBase.displayName = 'Modal';\n\nfunction useDebugWarnings(props: IModalProps) {\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,\n deprecations: { onLayerDidMount: 'layerProps.onLayerDidMount' },\n });\n }\n}\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { ModalBase } from './Modal.base';\nimport { getStyles } from './Modal.styles';\nimport type { IModalProps, IModalStyleProps, IModalStyles } from './Modal.types';\n\nexport const Modal: React.FunctionComponent = styled(\n ModalBase,\n getStyles,\n undefined,\n {\n scope: 'Modal',\n fields: ['theme', 'styles', 'enableAriaHiddenSiblings'],\n },\n);\nModal.displayName = 'Modal';\n","import * as React from 'react';\nimport { classNamesFunction, initializeComponentRef } from '../../Utilities';\nimport type { IDialogFooterProps, IDialogFooterStyleProps, IDialogFooterStyles } from './DialogFooter.types';\nimport type { IProcessedStyleSet } from '../../Styling';\n\nconst getClassNames = classNamesFunction();\n\nexport class DialogFooterBase extends React.Component {\n private _classNames: IProcessedStyleSet;\n\n constructor(props: IDialogFooterProps) {\n super(props);\n\n initializeComponentRef(this);\n }\n\n public render(): JSX.Element {\n const { className, styles, theme } = this.props;\n\n this._classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n });\n\n return (\n
    \n
    {this._renderChildrenAsActions()}
    \n
    \n );\n }\n\n private _renderChildrenAsActions(): (JSX.Element | null)[] | null | undefined {\n return React.Children.map(this.props.children, child =>\n child ? {child} : null,\n );\n }\n}\n","import { getGlobalClassNames } from '../../Styling';\nimport type { IDialogFooterStyleProps, IDialogFooterStyles } from './DialogFooter.types';\n\nconst GlobalClassNames = {\n actions: 'ms-Dialog-actions',\n action: 'ms-Dialog-action',\n actionsRight: 'ms-Dialog-actionsRight',\n};\n\nexport const getStyles = (props: IDialogFooterStyleProps): IDialogFooterStyles => {\n const { className, theme } = props;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\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\n selectors: {\n '.ms-Button': {\n lineHeight: 'normal',\n verticalAlign: 'middle',\n },\n },\n },\n className,\n ],\n\n action: [\n classNames.action,\n {\n margin: '0 4px',\n },\n ],\n\n actionsRight: [\n classNames.actionsRight,\n {\n alignItems: 'center',\n display: 'flex',\n fontSize: '0',\n justifyContent: 'flex-end',\n marginRight: '-4px',\n },\n ],\n };\n};\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { DialogFooterBase } from './DialogFooter.base';\nimport { getStyles } from './DialogFooter.styles';\nimport type { IDialogFooterProps, IDialogFooterStyleProps, IDialogFooterStyles } from './DialogFooter.types';\n\nexport const DialogFooter: React.FunctionComponent = styled<\n IDialogFooterProps,\n IDialogFooterStyleProps,\n IDialogFooterStyles\n>(DialogFooterBase, getStyles, undefined, { scope: 'DialogFooter' });\n\nDialogFooter.displayName = 'DialogFooter';\n","import * 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';\nimport type { IDialogContentProps, IDialogContentStyleProps, IDialogContentStyles } from './DialogContent.types';\nimport type { IDialogFooterProps } from './DialogFooter.types';\n\nconst getClassNames = classNamesFunction();\n\nconst DialogFooterType = (() as React.ReactElement).type;\n\nconst COMPONENT_NAME = 'DialogContent';\n\n// eslint-disable-next-line deprecation/deprecation\n@withResponsiveMode\nexport class DialogContentBase extends React.Component {\n public static defaultProps: IDialogContentProps = {\n showCloseButton: false,\n className: '',\n topButtonsProps: [],\n closeButtonAriaLabel: 'Close',\n };\n\n constructor(props: IDialogContentProps) {\n super(props);\n\n initializeComponentRef(this);\n warnDeprecations(COMPONENT_NAME, props, {\n titleId: 'titleProps.id',\n });\n }\n\n public render(): JSX.Element {\n const {\n showCloseButton,\n className,\n closeButtonAriaLabel,\n onDismiss,\n subTextId,\n subText,\n titleProps = {},\n // eslint-disable-next-line deprecation/deprecation\n titleId,\n title,\n type,\n styles,\n theme,\n draggableHeaderClassName,\n } = this.props;\n\n const classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n isLargeHeader: type === DialogType.largeHeader,\n isClose: type === DialogType.close,\n draggableHeaderClassName,\n });\n\n const groupings = this._groupChildren();\n let subTextContent;\n if (subText) {\n subTextContent = (\n

    \n {subText}\n

    \n );\n }\n\n return (\n
    \n
    \n \n {title}\n
    \n
    \n {this.props.topButtonsProps!.map((props, index) => (\n \n ))}\n {(type === DialogType.close || (showCloseButton && type !== DialogType.largeHeader)) && (\n \n )}\n
    \n
    \n
    \n
    \n {subTextContent}\n {groupings.contents}\n
    \n {groupings.footers}\n
    \n
    \n );\n }\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 private _groupChildren(): { footers: any[]; contents: any[] } {\n const groupings: { footers: any[]; contents: any[] } = {\n footers: [],\n contents: [],\n };\n\n React.Children.map(this.props.children, child => {\n if (typeof child === 'object' && child !== null && (child as any).type === DialogFooterType) {\n groupings.footers.push(child);\n } else {\n groupings.contents.push(child);\n }\n });\n\n return groupings;\n }\n}\n","import {\n FontWeights,\n getGlobalClassNames,\n IconFontSizes,\n ScreenWidthMinSmall,\n ScreenWidthMaxSmall,\n} from '../../Styling';\nimport type { IDialogContentStyleProps, IDialogContentStyles } from './DialogContent.types';\n\nconst 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};\n\nexport const getStyles = (props: IDialogContentStyleProps): IDialogContentStyles => {\n const { className, theme, isLargeHeader, isClose, hidden, isMultiline, draggableHeaderClassName } = props;\n\n const { palette, fonts, effects, semanticColors } = theme;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\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', // required for allowScrollOnElement\n },\n className,\n ],\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\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\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\n inner: [\n classNames.inner,\n {\n padding: '0 24px 24px',\n selectors: {\n [`@media (min-width: ${ScreenWidthMinSmall}px) and (max-width: ${ScreenWidthMaxSmall}px)`]: {\n padding: '0 16px 16px',\n },\n },\n },\n ],\n\n innerContent: [\n classNames.content,\n {\n position: 'relative',\n width: '100%',\n },\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: {\n [`@media (min-width: ${ScreenWidthMinSmall}px) and (max-width: ${ScreenWidthMaxSmall}px)`]: {\n padding: '16px 46px 16px 16px',\n },\n },\n },\n isLargeHeader && {\n color: semanticColors.menuHeader,\n },\n isMultiline && { fontSize: fonts.xxLarge.fontSize },\n ],\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: {\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 [`@media (min-width: ${ScreenWidthMinSmall}px) and (max-width: ${ScreenWidthMaxSmall}px)`]: {\n padding: '15px 8px 0 0',\n },\n },\n },\n ],\n };\n};\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { DialogContentBase } from './DialogContent.base';\nimport { getStyles } from './DialogContent.styles';\nimport type { IDialogContentProps, IDialogContentStyleProps, IDialogContentStyles } from './DialogContent.types';\n\nexport const DialogContent: React.FunctionComponent = styled<\n IDialogContentProps,\n IDialogContentStyleProps,\n IDialogContentStyles\n>(DialogContentBase, getStyles, undefined, { scope: 'DialogContent' });\n\nDialogContent.displayName = 'DialogContent';\n","import * as React from 'react';\nimport { warnDeprecations, classNamesFunction, getId } from '../../Utilities';\nimport { DialogType } from './DialogContent.types';\nimport { Modal } from '../../Modal';\nimport { withResponsiveMode } from '../../ResponsiveMode';\n\nconst getClassNames = classNamesFunction();\n\nimport { DialogContent } from './DialogContent';\nimport type { IDialogProps, IDialogStyleProps, IDialogStyles } from './Dialog.types';\nimport type { IDialogContentProps } from './DialogContent.types';\nimport type { IModalProps } from '../../Modal';\nimport type { ILayerProps } from '../../Layer';\n\nconst DefaultModalProps: IModalProps = {\n isDarkOverlay: false,\n isBlocking: false,\n className: '',\n containerClassName: '',\n topOffsetFixed: false,\n enableAriaHiddenSiblings: true,\n};\n\nconst DefaultDialogContentProps: IDialogContentProps = {\n type: DialogType.normal,\n className: '',\n topButtonsProps: [],\n};\n\n// eslint-disable-next-line deprecation/deprecation\n@withResponsiveMode\nexport class DialogBase extends React.Component {\n public static defaultProps: IDialogProps = {\n hidden: true,\n };\n\n private _id: string;\n private _defaultTitleTextId: string;\n private _defaultSubTextId: string;\n\n constructor(props: IDialogProps) {\n super(props);\n\n this._id = getId('Dialog');\n this._defaultTitleTextId = this._id + '-title';\n this._defaultSubTextId = this._id + '-subText';\n\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 }\n\n public render(): JSX.Element {\n const props = this.props;\n const {\n /* eslint-disable deprecation/deprecation */\n className,\n containerClassName,\n contentClassName,\n elementToFocusOnDismiss,\n firstFocusableSelector,\n forceFocusInsideTrap,\n styles,\n hidden,\n disableRestoreFocus = props.ignoreExternalFocusing,\n isBlocking,\n isClickableOutsideFocusTrap,\n isDarkOverlay,\n isOpen = !hidden,\n onDismiss,\n onDismissed,\n onLayerDidMount,\n responsiveMode,\n subText,\n theme,\n title,\n topButtonsProps,\n type,\n /* eslint-enable deprecation/deprecation */\n minWidth,\n maxWidth,\n modalProps,\n } = props;\n\n const mergedLayerProps: ILayerProps = {\n onLayerDidMount,\n ...modalProps?.layerProps,\n };\n\n let dialogDraggableClassName: string | undefined;\n let dragOptions: IModalProps['dragOptions'];\n\n // If dragOptions are provided, but no drag handle is specified, we supply a drag handle,\n // and inform dialog contents to add class to draggable class to the header\n if (modalProps?.dragOptions && !modalProps.dragOptions?.dragHandleSelector) {\n // spread options to avoid mutating props\n dragOptions = { ...modalProps.dragOptions };\n dialogDraggableClassName = 'ms-Dialog-draggable-header';\n dragOptions.dragHandleSelector = `.${dialogDraggableClassName}`;\n }\n\n const mergedModalProps: IModalProps = {\n ...DefaultModalProps,\n elementToFocusOnDismiss,\n firstFocusableSelector,\n forceFocusInsideTrap,\n disableRestoreFocus,\n isClickableOutsideFocusTrap,\n responsiveMode,\n className,\n containerClassName,\n isBlocking,\n isDarkOverlay,\n onDismissed,\n ...modalProps,\n dragOptions,\n layerProps: mergedLayerProps,\n isOpen,\n };\n\n const dialogContentProps: IDialogContentProps = {\n className: contentClassName,\n subText,\n title,\n topButtonsProps,\n type,\n ...DefaultDialogContentProps,\n ...props.dialogContentProps,\n draggableHeaderClassName: dialogDraggableClassName,\n titleProps: {\n // eslint-disable-next-line deprecation/deprecation\n id: props.dialogContentProps?.titleId || this._defaultTitleTextId,\n ...props.dialogContentProps?.titleProps,\n },\n };\n\n const classNames = getClassNames(styles!, {\n theme: theme!,\n className: mergedModalProps.className,\n containerClassName: mergedModalProps.containerClassName,\n hidden,\n dialogDefaultMinWidth: minWidth,\n dialogDefaultMaxWidth: maxWidth,\n });\n\n return (\n \n \n {props.children}\n \n \n );\n }\n\n private _getSubTextId = (): string | undefined => {\n // eslint-disable-next-line deprecation/deprecation\n const { ariaDescribedById, modalProps, dialogContentProps, subText } = this.props;\n let id = (modalProps && modalProps.subtitleAriaId) || ariaDescribedById;\n\n if (!id) {\n id = ((dialogContentProps && dialogContentProps.subText) || subText) && this._defaultSubTextId;\n }\n\n return id;\n };\n\n private _getTitleTextId = (): string | undefined => {\n // eslint-disable-next-line deprecation/deprecation\n const { ariaLabelledById, modalProps, dialogContentProps, title } = this.props;\n let id = (modalProps && modalProps.titleAriaId) || ariaLabelledById;\n\n if (!id) {\n id = ((dialogContentProps && dialogContentProps.title) || title) && this._defaultTitleTextId;\n }\n\n return id;\n };\n}\n","import { ScreenWidthMinMedium, getGlobalClassNames } from '../../Styling';\nimport type { IDialogStyleProps, IDialogStyles } from './Dialog.types';\n\nconst GlobalClassNames = {\n root: 'ms-Dialog',\n};\n\nexport const getStyles = (props: IDialogStyleProps): IDialogStyles => {\n const {\n className,\n containerClassName, // eslint-disable-line deprecation/deprecation\n dialogDefaultMinWidth = '288px',\n dialogDefaultMaxWidth = '340px',\n hidden,\n theme,\n } = props;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n return {\n root: [classNames.root, theme.fonts.medium, className],\n\n main: [\n {\n width: dialogDefaultMinWidth,\n outline: '3px solid transparent',\n\n selectors: {\n [`@media (min-width: ${ScreenWidthMinMedium}px)`]: {\n width: 'auto',\n maxWidth: dialogDefaultMaxWidth,\n minWidth: dialogDefaultMinWidth,\n },\n },\n },\n !hidden && { display: 'flex' },\n containerClassName,\n ],\n };\n};\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { DialogBase } from './Dialog.base';\nimport { getStyles } from './Dialog.styles';\nimport type { IDialogProps, IDialogStyleProps, IDialogStyles } from './Dialog.types';\n\nexport const Dialog: React.FunctionComponent = styled(\n DialogBase,\n getStyles,\n undefined,\n { scope: 'Dialog' },\n);\nDialog.displayName = 'Dialog';\n","import * as React from 'react';\nimport type { IStyle, ITheme } from '../../Styling';\nimport type { IBaseProps, IRefObject, IStyleFunctionOrObject } from '../../Utilities';\n\n/**\n * {@docCategory DocumentCard}\n */\nexport interface IDocumentCard {\n /**\n * Sets focus to the DocumentCard.\n */\n focus: () => void;\n}\n\n/**\n * {@docCategory DocumentCard}\n */\nexport interface IDocumentCardProps extends IBaseProps, React.HTMLAttributes {\n /**\n * Optional callback to access the IDocumentCard interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject;\n\n /**\n * The type of DocumentCard to display.\n * @defaultvalue DocumentCardType.normal\n */\n type?: DocumentCardType;\n\n /**\n * Function to call when the card is clicked or keyboard Enter/Space is pushed.\n */\n onClick?: (ev?: React.SyntheticEvent) => void;\n\n /**\n * A URL to navigate to when the card is clicked. If a function has also been provided,\n * it will be used instead of the URL.\n */\n onClickHref?: string;\n\n /**\n * A target browser context for opening the link. If not specified, will open in the same tab/window.\n */\n onClickTarget?: string;\n\n /**\n * Aria role assigned to the documentCard (Eg. button, link).\n * Use this to override the default assignment.\n * @defaultvalue When `onClick` is provided, default role will be 'button'.\n * When `onClickHref` is provided, default role will be 'link'.\n */\n role?: string;\n\n /**\n * Hex color value of the line below the card, which should correspond to the document type.\n * This should only be supplied when using the 'compact' card layout.\n *\n * @deprecated To be removed at \\>= v5.0.0.\n */\n accentColor?: string;\n\n /**\n * Child components to render within the card.\n */\n children?: React.ReactNode;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules\n */\n styles?: IStyleFunctionOrObject;\n\n /**\n * Theme provided by HOC.\n */\n theme?: ITheme;\n\n /**\n * Optional override class name\n */\n className?: string;\n}\n\n/**\n * {@docCategory DocumentCard}\n */\nexport enum DocumentCardType {\n /**\n * Standard DocumentCard.\n */\n normal = 0,\n /**\n * Compact layout. Displays the preview beside the details, rather than above.\n */\n compact = 1,\n}\n\n/**\n * {@docCategory DocumentCard}\n */\nexport interface IDocumentCardStyleProps {\n /**\n * Accept theme prop.\n */\n theme: ITheme;\n\n /**\n * Optional override class name\n */\n className?: string;\n\n /**\n * True when the card has a click action.\n */\n actionable?: boolean;\n\n /**\n * Compact variant of the card.\n */\n compact?: boolean;\n}\n\n/**\n * {@docCategory DocumentCard}\n */\nexport interface IDocumentCardStyles {\n root: IStyle;\n}\n\n/**\n * {@docCategory DocumentCard}\n */\nexport interface IDocumentCardContext {\n role?: string;\n tabIndex?: number;\n}\n","import * as React from 'react';\nimport {\n classNamesFunction,\n KeyCodes,\n getNativeProps,\n divProperties,\n warnDeprecations,\n initializeComponentRef,\n} from '../../Utilities';\nimport { DocumentCardType } from './DocumentCard.types';\nimport type { IProcessedStyleSet } from '../../Styling';\nimport type {\n IDocumentCard,\n IDocumentCardContext,\n IDocumentCardProps,\n IDocumentCardStyleProps,\n IDocumentCardStyles,\n} from './DocumentCard.types';\nimport { WindowContext } from '@fluentui/react-window-provider';\nimport { getWindowEx } from '../../utilities/dom';\n\nconst getClassNames = classNamesFunction();\n\nconst COMPONENT_NAME = 'DocumentCard';\n\nexport const DocumentCardContext = React.createContext({});\n\n/**\n * {@docCategory DocumentCard}\n */\nexport class DocumentCardBase extends React.Component implements IDocumentCard {\n public static defaultProps: IDocumentCardProps = {\n type: DocumentCardType.normal,\n };\n\n public static contextType = WindowContext;\n\n private _rootElement = React.createRef();\n private _classNames: IProcessedStyleSet;\n\n constructor(props: IDocumentCardProps) {\n super(props);\n\n initializeComponentRef(this);\n warnDeprecations(COMPONENT_NAME, props, {\n accentColor: undefined,\n });\n }\n\n public render(): JSX.Element {\n // eslint-disable-next-line deprecation/deprecation\n const { onClick, onClickHref, children, type, accentColor, styles, theme, className } = this.props;\n const nativeProps = getNativeProps>(this.props, divProperties, [\n 'className',\n 'onClick',\n 'type',\n 'role',\n ]);\n const actionable = onClick || onClickHref ? true : false;\n\n this._classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n actionable,\n compact: type === DocumentCardType.compact ? true : false,\n });\n\n // Override the border color if an accent color was provided (compact card only)\n let style;\n if (type === DocumentCardType.compact && accentColor) {\n style = {\n borderBottomColor: accentColor,\n };\n }\n\n // if this element is actionable it should have an aria role\n const role = this.props.role || (actionable ? (onClick ? 'button' : 'link') : undefined);\n const tabIndex = actionable ? 0 : undefined;\n const documentCardContextValue = { role, tabIndex };\n\n return (\n \n {children}\n \n );\n }\n\n public focus(): void {\n if (this._rootElement.current) {\n this._rootElement.current.focus();\n }\n }\n\n private _onClick = (ev: React.MouseEvent): void => {\n this._onAction(ev);\n };\n\n private _onKeyDown = (ev: React.KeyboardEvent): void => {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) {\n this._onAction(ev);\n }\n };\n\n private _onAction = (ev: React.SyntheticEvent): void => {\n const { onClick, onClickHref, onClickTarget } = this.props;\n\n const win = getWindowEx(this.context)!; // can only be called on the client\n\n if (onClick) {\n onClick(ev);\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 win.open(onClickHref, onClickTarget, 'noreferrer noopener nofollow');\n } else {\n win.location.href = onClickHref;\n }\n\n ev.preventDefault();\n ev.stopPropagation();\n }\n };\n}\n","import { getFocusStyle, getGlobalClassNames, HighContrastSelector } from '../../Styling';\nimport { IsFocusVisibleClassName } from '../../Utilities';\nimport type { IDocumentCardPreviewStyleProps, IDocumentCardPreviewStyles } from './DocumentCardPreview.types';\n\nexport const DocumentCardPreviewGlobalClassNames = {\n root: 'ms-DocumentCardPreview',\n icon: 'ms-DocumentCardPreview-icon',\n iconContainer: 'ms-DocumentCardPreview-iconContainer',\n};\n\nexport const getStyles = (props: IDocumentCardPreviewStyleProps): IDocumentCardPreviewStyles => {\n const { theme, className, isFileList } = props;\n const { palette, fonts } = theme;\n\n const classNames = getGlobalClassNames(DocumentCardPreviewGlobalClassNames, theme);\n\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: {\n ':hover': {\n color: palette.themePrimary,\n },\n [`.${IsFocusVisibleClassName} &:focus, :host(.${IsFocusVisibleClassName}) &:focus`]: {\n selectors: {\n [HighContrastSelector]: {\n outline: 'none',\n },\n },\n },\n },\n },\n ],\n fileListOverflowText: {\n padding: '0px 16px 8px 16px',\n display: 'block',\n },\n };\n};\n","import { getGlobalClassNames, FontWeights } from '../../Styling';\nimport type { IDocumentCardActivityStyleProps, IDocumentCardActivityStyles } from './DocumentCardActivity.types';\n\nconst VERTICAL_PADDING = 8;\nconst HORIZONTAL_PADDING = 16;\nconst IMAGE_SIZE = 32;\nconst PERSONA_TEXT_GUTTER = 8;\n\nexport const 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};\n\nexport const getStyles = (props: IDocumentCardActivityStyleProps): IDocumentCardActivityStyles => {\n const { theme, className, multiplePeople } = props;\n const { palette, fonts } = theme;\n\n const classNames = getGlobalClassNames(DocumentCardActivityGlobalClassNames, theme);\n\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', // Avatars sit outside of the usual padding for visual balance\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\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}`, // Match the background of the card\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","import { getGlobalClassNames, getInputFocusStyle } from '../../Styling';\nimport { IsFocusVisibleClassName } from '../../Utilities';\nimport type { IDocumentCardTitleStyleProps, IDocumentCardTitleStyles } from './DocumentCardTitle.types';\n\nexport const DocumentCardTitleGlobalClassNames = {\n root: 'ms-DocumentCardTitle',\n};\n\nexport const getStyles = (props: IDocumentCardTitleStyleProps): IDocumentCardTitleStyles => {\n const { theme, className, showAsSecondaryTitle } = props;\n const { palette, fonts, effects } = theme;\n\n const classNames = getGlobalClassNames(DocumentCardTitleGlobalClassNames, theme);\n\n return {\n root: [\n classNames.root,\n showAsSecondaryTitle ? fonts.medium : fonts.large,\n {\n padding: '8px 16px',\n display: 'block',\n overflow: 'hidden',\n position: 'relative',\n wordWrap: 'break-word',\n height: showAsSecondaryTitle ? '45px' : '38px',\n lineHeight: showAsSecondaryTitle ? '18px' : '21px',\n color: showAsSecondaryTitle ? palette.neutralSecondary : palette.neutralPrimary,\n selectors: {\n ':focus': {\n outline: '0px solid',\n },\n [`.${IsFocusVisibleClassName} &:focus, :host(.${IsFocusVisibleClassName}) &:focus`]: getInputFocusStyle(\n palette.neutralSecondary,\n effects.roundedCorner2,\n ),\n },\n },\n className,\n ],\n };\n};\n","import { getGlobalClassNames, FontWeights } from '../../Styling';\nimport type { IDocumentCardLocationStyleProps, IDocumentCardLocationStyles } from './DocumentCardLocation.types';\n\nexport const DocumentCardLocationGlobalClassNames = {\n root: 'ms-DocumentCardLocation',\n};\n\nexport const getStyles = (props: IDocumentCardLocationStyleProps): IDocumentCardLocationStyles => {\n const { theme, className } = props;\n const { palette, fonts } = theme;\n\n const classNames = getGlobalClassNames(DocumentCardLocationGlobalClassNames, theme);\n\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\n selectors: {\n ':hover': {\n color: palette.themePrimary,\n cursor: 'pointer',\n },\n },\n },\n className,\n ],\n };\n};\n","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';\nimport type { IDocumentCardStyleProps, IDocumentCardStyles } from './DocumentCard.types';\n\nconst GlobalClassNames = {\n root: 'ms-DocumentCard',\n rootActionable: 'ms-DocumentCard--actionable',\n rootCompact: 'ms-DocumentCard--compact',\n};\n\nexport const getStyles = (props: IDocumentCardStyleProps): IDocumentCardStyles => {\n const { className, theme, actionable, compact } = props;\n const { palette, fonts, effects } = theme;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\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: {\n ':focus': {\n outline: '0px solid',\n },\n [`.${IsFocusVisibleClassName} &:focus, :host(.${IsFocusVisibleClassName}) &:focus`]: getInputFocusStyle(\n palette.neutralSecondary,\n effects.roundedCorner2,\n ),\n [`.${locationClassNames.root} + .${titleClassNames.root}`]: {\n paddingTop: '4px',\n },\n },\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: {\n [`.${previewClassNames.root}`]: {\n borderRight: `1px solid ${palette.neutralLight}`,\n borderBottom: 0, // Remove the usual border from the preview\n maxHeight: '106px',\n maxWidth: '144px',\n },\n [`.${previewClassNames.icon}`]: {\n maxHeight: '32px',\n maxWidth: '32px',\n },\n [`.${activityClassNames.root}`]: {\n paddingBottom: '12px',\n },\n [`.${titleClassNames.root}`]: {\n paddingBottom: '12px 16px 8px 16px',\n fontSize: fonts.mediumPlus.fontSize,\n lineHeight: '16px',\n },\n },\n },\n ],\n className,\n ],\n };\n};\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { DocumentCardBase } from './DocumentCard.base';\nimport { getStyles } from './DocumentCard.styles';\nimport type { IDocumentCardProps, IDocumentCardStyleProps, IDocumentCardStyles } from './DocumentCard.types';\n\nexport const DocumentCard: React.FunctionComponent = styled<\n IDocumentCardProps,\n IDocumentCardStyleProps,\n IDocumentCardStyles\n>(DocumentCardBase, getStyles, undefined, { scope: 'DocumentCard' });\n","import * as React from 'react';\nimport { classNamesFunction, initializeComponentRef } from '../../Utilities';\nimport type {\n IDocumentCardDetailsProps,\n IDocumentCardDetailsStyleProps,\n IDocumentCardDetailsStyles,\n} from './DocumentCardDetails.types';\nimport type { IProcessedStyleSet } from '../../Styling';\n\nconst getClassNames = classNamesFunction();\n\n/**\n * {@docCategory DocumentCard}\n */\nexport class DocumentCardDetailsBase extends React.Component {\n private _classNames: IProcessedStyleSet;\n\n constructor(props: IDocumentCardDetailsProps) {\n super(props);\n\n initializeComponentRef(this);\n }\n\n public render(): JSX.Element {\n const { children, styles, theme, className } = this.props;\n\n this._classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n });\n\n return
    {children}
    ;\n }\n}\n","import { getGlobalClassNames } from '../../Styling';\nimport type { IDocumentCardStatusStyleProps, IDocumentCardStatusStyles } from './DocumentCardStatus.types';\n\nconst GlobalClassNames = {\n root: 'ms-DocumentCardDetails',\n};\n\nexport const getStyles = (props: IDocumentCardStatusStyleProps): IDocumentCardStatusStyles => {\n const { className, theme } = props;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\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","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { DocumentCardDetailsBase } from './DocumentCardDetails.base';\nimport { getStyles } from './DocumentCardDetails.styles';\nimport type {\n IDocumentCardDetailsProps,\n IDocumentCardDetailsStyleProps,\n IDocumentCardDetailsStyles,\n} from './DocumentCardDetails.types';\n\nexport const DocumentCardDetails: React.FunctionComponent = styled<\n IDocumentCardDetailsProps,\n IDocumentCardDetailsStyleProps,\n IDocumentCardDetailsStyles\n>(DocumentCardDetailsBase, getStyles, undefined, { scope: 'DocumentCardDetails' });\n","import * as React from 'react';\nimport { Icon } from '../../Icon';\nimport { Image } from '../../Image';\nimport { classNamesFunction, initializeComponentRef } from '../../Utilities';\nimport type { IProcessedStyleSet } from '../../Styling';\nimport type {\n IDocumentCardImageProps,\n IDocumentCardImageStyleProps,\n IDocumentCardImageStyles,\n} from './DocumentCardImage.types';\n\nexport interface IDocumentCardImageState {\n readonly imageHasLoaded: boolean;\n}\n\nconst getClassNames = classNamesFunction();\n\n/**\n * {@docCategory DocumentCard}\n */\nexport class DocumentCardImageBase extends React.Component {\n private _classNames: IProcessedStyleSet;\n\n constructor(props: IDocumentCardImageProps) {\n super(props);\n\n initializeComponentRef(this);\n this.state = { imageHasLoaded: false };\n }\n\n public render(): JSX.Element {\n const { styles, width, height, imageFit, imageSrc } = this.props;\n\n this._classNames = getClassNames(styles!, this.props);\n\n return (\n
    \n {imageSrc && (\n \n )}\n {this.state.imageHasLoaded ? this._renderCornerIcon() : this._renderCenterIcon()}\n
    \n );\n }\n\n private _onImageLoad = () => {\n this.setState({ imageHasLoaded: true });\n };\n\n private _renderCenterIcon(): JSX.Element {\n const { iconProps } = this.props;\n return (\n
    \n \n
    \n );\n }\n\n private _renderCornerIcon(): JSX.Element {\n const { iconProps } = this.props;\n return ;\n }\n}\n","import type { IDocumentCardImageStyleProps, IDocumentCardImageStyles } from './DocumentCardImage.types';\n\nconst centeredIconSize = '42px';\nconst cornerIconSize = '32px';\n\nexport const getStyles = (props: IDocumentCardImageStyleProps): IDocumentCardImageStyles => {\n const { theme, className, height, width } = props;\n const { palette } = theme!;\n\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","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { DocumentCardImageBase } from './DocumentCardImage.base';\nimport { getStyles } from './DocumentCardImage.styles';\nimport type {\n IDocumentCardImageProps,\n IDocumentCardImageStyleProps,\n IDocumentCardImageStyles,\n} from './DocumentCardImage.types';\n\nexport const DocumentCardImage: React.FunctionComponent = styled<\n IDocumentCardImageProps,\n IDocumentCardImageStyleProps,\n IDocumentCardImageStyles\n>(DocumentCardImageBase, getStyles, undefined, { scope: 'DocumentCardImage' });\n","import * as React from 'react';\n\nimport { Async, EventGroup, classNamesFunction } from '../../Utilities';\nimport { initializeComponentRef } from '@fluentui/utilities';\nimport type {\n IDocumentCardTitleProps,\n IDocumentCardTitleStyleProps,\n IDocumentCardTitleStyles,\n} from './DocumentCardTitle.types';\nimport type { IProcessedStyleSet } from '../../Styling';\nimport { DocumentCardContext } from './DocumentCard.base';\nimport { WindowContext } from '@fluentui/react-window-provider';\nimport { getWindowEx } from '../../utilities/dom';\n\nconst getClassNames = classNamesFunction();\n\nexport interface IDocumentCardTitleState {\n truncatedTitleFirstPiece?: string;\n truncatedTitleSecondPiece?: string;\n}\n\nconst TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD = 5;\n\n/**\n * {@docCategory DocumentCard}\n */\nexport class DocumentCardTitleBase extends React.Component {\n public static contextType = WindowContext;\n\n private _titleElement = React.createRef();\n private _classNames: IProcessedStyleSet;\n private _async: Async;\n private _events: EventGroup;\n private _clientWidth: number | undefined;\n private _timerId: number | undefined;\n\n constructor(props: IDocumentCardTitleProps) {\n super(props);\n\n initializeComponentRef(this);\n this._async = new Async(this);\n this._events = new EventGroup(this);\n this._clientWidth = undefined;\n\n this.state = {\n truncatedTitleFirstPiece: undefined,\n truncatedTitleSecondPiece: undefined,\n };\n }\n\n public componentDidUpdate(prevProps: IDocumentCardTitleProps): void {\n if (this.props.title !== prevProps.title) {\n this.setState({\n truncatedTitleFirstPiece: undefined,\n truncatedTitleSecondPiece: undefined,\n });\n }\n\n if (prevProps.shouldTruncate !== this.props.shouldTruncate) {\n const win = getWindowEx(this.context);\n if (this.props.shouldTruncate) {\n this._truncateTitle();\n this._async.requestAnimationFrame(this._shrinkTitle);\n this._events.on(win, 'resize', this._updateTruncation);\n } else {\n this._events.off(win, 'resize', this._updateTruncation);\n }\n } else if (this._needMeasurement) {\n this._async.requestAnimationFrame(() => {\n this._truncateWhenInAnimation();\n this._shrinkTitle();\n });\n }\n }\n\n public componentDidMount(): void {\n if (this.props.shouldTruncate) {\n this._truncateTitle();\n const win = getWindowEx(this.context);\n this._events.on(win, 'resize', this._updateTruncation);\n }\n }\n\n public componentWillUnmount(): void {\n this._events.dispose();\n this._async.dispose();\n }\n\n public render(): JSX.Element {\n const { title, shouldTruncate, showAsSecondaryTitle, styles, theme, className } = this.props;\n const { truncatedTitleFirstPiece, truncatedTitleSecondPiece } = this.state;\n\n this._classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n showAsSecondaryTitle,\n });\n\n if (shouldTruncate && truncatedTitleFirstPiece && truncatedTitleSecondPiece) {\n return (\n \n {({ role, tabIndex }) => {\n return (\n \n {truncatedTitleFirstPiece}\n …\n {truncatedTitleSecondPiece}\n \n );\n }}\n \n );\n } else {\n return (\n \n {({ role, tabIndex }) => {\n return (\n \n {title}\n \n );\n }}\n \n );\n }\n }\n\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 private get _needMeasurement(): boolean {\n return !!this.props.shouldTruncate && this._clientWidth === undefined;\n }\n\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 private _truncateTitle = (): void => {\n if (!this._needMeasurement) {\n return;\n }\n\n this._async.requestAnimationFrame(this._truncateWhenInAnimation);\n };\n\n private _truncateWhenInAnimation: () => void = () => {\n const originalTitle = this.props.title;\n const element: HTMLDivElement | null = this._titleElement.current;\n\n if (element) {\n const style: CSSStyleDeclaration = getComputedStyle(element);\n if (style.width && style.lineHeight && style.height) {\n const { clientWidth, scrollWidth } = element;\n\n this._clientWidth = clientWidth;\n\n const lines: number = Math.floor(\n (parseInt(style.height, 10) + TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD) / parseInt(style.lineHeight, 10),\n );\n\n element.style.whiteSpace = '';\n\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 const overFlowRate: number = scrollWidth / (parseInt(style.width, 10) * lines);\n\n if (overFlowRate > 1) {\n const truncatedLength: number = 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\n private _shrinkTitle: () => void = () => {\n const { truncatedTitleFirstPiece, truncatedTitleSecondPiece } = this.state;\n if (truncatedTitleFirstPiece && truncatedTitleSecondPiece) {\n const titleElement = this._titleElement.current;\n\n if (!titleElement) {\n return;\n }\n\n if (\n titleElement.scrollHeight > titleElement.clientHeight + TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD ||\n titleElement.scrollWidth > titleElement.clientWidth\n ) {\n this.setState({\n truncatedTitleFirstPiece: truncatedTitleFirstPiece.slice(0, truncatedTitleFirstPiece.length - 1),\n truncatedTitleSecondPiece: truncatedTitleSecondPiece.slice(1),\n });\n }\n }\n };\n\n private _updateTruncation(): void {\n if (this._timerId) {\n return;\n }\n\n this._timerId = this._async.setTimeout(() => {\n delete this._timerId;\n this._clientWidth = undefined;\n this.setState({\n truncatedTitleFirstPiece: undefined,\n truncatedTitleSecondPiece: undefined,\n });\n }, 250);\n }\n}\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { DocumentCardTitleBase } from './DocumentCardTitle.base';\nimport { getStyles } from './DocumentCardTitle.styles';\nimport type {\n IDocumentCardTitleProps,\n IDocumentCardTitleStyleProps,\n IDocumentCardTitleStyles,\n} from './DocumentCardTitle.types';\n\nexport const DocumentCardTitle: React.FunctionComponent = styled<\n IDocumentCardTitleProps,\n IDocumentCardTitleStyleProps,\n IDocumentCardTitleStyles\n>(DocumentCardTitleBase, getStyles, undefined, { scope: 'DocumentCardTitle' });\n","import { DropdownMenuItemType } from '../Dropdown.types';\nimport type { IDropdownOption } from '../Dropdown.types';\n\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 */\nexport class DropdownSizePosCache {\n private _cachedOptions: IDropdownOption[];\n private _displayOnlyOptionsCache: number[];\n private _notSelectableOptionsCache: number[];\n private _size = 0;\n\n /**\n * Invalidates the cache and recalculate the size of selectable options.\n */\n public updateOptions(options: IDropdownOption[]) {\n const displayOnlyOptionsCache = [];\n const notSelectableOptionsCache = [];\n let size = 0;\n for (let i = 0; i < options.length; i++) {\n const { itemType, hidden } = options[i];\n\n if (itemType === DropdownMenuItemType.Divider || itemType === DropdownMenuItemType.Header) {\n displayOnlyOptionsCache.push(i);\n notSelectableOptionsCache.push(i);\n } else if (hidden) {\n notSelectableOptionsCache.push(i);\n } else {\n size++;\n }\n }\n\n this._size = size;\n this._displayOnlyOptionsCache = displayOnlyOptionsCache;\n this._notSelectableOptionsCache = notSelectableOptionsCache;\n this._cachedOptions = [...options];\n }\n\n /**\n * The size of all the selectable options.\n */\n public get optionSetSize(): number {\n return this._size;\n }\n\n /**\n * The chached options array.\n */\n public get cachedOptions(): IDropdownOption[] {\n return this._cachedOptions;\n }\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 public positionInSet(index: number | undefined): number | undefined {\n if (index === undefined) {\n return undefined;\n }\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 let offset = 0;\n while (index > this._notSelectableOptionsCache[offset]) {\n offset++;\n }\n\n if (this._displayOnlyOptionsCache[offset] === index) {\n throw new Error(`Unexpected: Option at index ${index} is not a selectable element.`);\n }\n\n if (this._notSelectableOptionsCache[offset] === index) {\n return undefined;\n }\n\n return index - offset + 1;\n }\n}\n","import * as React from 'react';\nimport { PanelBase } from './Panel.base';\nimport type { IFocusTrapZoneProps } from '../../FocusTrapZone';\nimport type { ILayerProps } from '../../Layer';\nimport type { IOverlayProps } from '../../Overlay';\nimport type { IStyle, ITheme } from '../../Styling';\nimport type { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities';\nimport type { IButtonStyles } from '../../Button';\nimport type { IPopupProps } from '../../Popup';\n\n/**\n * {@docCategory Panel}\n */\nexport interface IPanel {\n /**\n * Forces the panel to open.\n */\n open: () => void;\n\n /**\n * Forces the panel to dismiss.\n */\n dismiss: (ev?: React.KeyboardEvent | KeyboardEvent) => void;\n}\n\n/**\n * {@docCategory Panel}\n */\nexport interface IPanelProps extends React.HTMLAttributes {\n /**\n * Optional callback to access the IPanel interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject;\n\n /**\n * Whether the panel is displayed.\n * If true, will cause panel to stay open even if dismissed.\n * If false, will cause panel to stay hidden.\n * If undefined, will allow the panel to control its own visibility through open/dismiss methods.\n * @defaultvalue undefined\n */\n isOpen?: boolean;\n\n /**\n * Has the close button visible.\n * @defaultvalue true\n */\n hasCloseButton?: boolean;\n\n /**\n * Whether the panel can be light dismissed.\n * @defaultvalue false\n */\n isLightDismiss?: boolean;\n\n /**\n * Whether the panel is hidden on dismiss, instead of destroyed in the DOM.\n * Protects the contents from being destroyed when the panel is dismissed.\n * @defaultvalue false\n */\n isHiddenOnDismiss?: boolean;\n\n /**\n * Whether the panel uses a modal overlay or not\n * @defaultvalue true\n */\n isBlocking?: boolean;\n\n /**\n * Determines if content should stretch to fill available space putting footer at the bottom of the page\n * @defaultvalue false\n */\n isFooterAtBottom?: boolean;\n\n /**\n * Header text for the Panel.\n * @defaultvalue \"\"\n */\n headerText?: string;\n\n /**\n * The props for header text container.\n */\n headerTextProps?: React.HTMLAttributes;\n\n /**\n * A callback function for when the Panel is opened, before the animation completes.\n */\n onOpen?: () => void;\n\n /**\n * A callback function for when the Panel is opened, after the animation completes.\n */\n onOpened?: () => void;\n\n /**\n * A callback function for when the panel is closed, before the animation completes.\n * If the panel should NOT be dismissed based on some keyboard event, then simply call ev.preventDefault() on it\n */\n onDismiss?: (ev?: React.SyntheticEvent | KeyboardEvent) => void;\n\n /**\n * A callback function which is called **after** the Panel is dismissed and the animation is complete.\n * (If you need to update the Panel's `isOpen` prop in response to a dismiss event, use `onDismiss` instead.)\n */\n onDismissed?: () => void;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject;\n\n /**\n * Theme provided by High-Order Component.\n */\n theme?: ITheme;\n\n /**\n * Additional css class to apply to the Panel\n * @defaultvalue undefined\n */\n className?: string;\n\n /**\n * Type of the panel.\n * @defaultvalue PanelType.smallFixedFar\n */\n type?: PanelType;\n\n /**\n * Custom panel width, used only when `type` is set to `PanelType.custom`.\n */\n customWidth?: string;\n\n /**\n * Aria label on close button\n */\n closeButtonAriaLabel?: string;\n\n /**\n * Optional parameter to provider the class name for header text\n */\n headerClassName?: string;\n\n /**\n * Sets the HTMLElement to focus on when exiting the FocusTrapZone.\n * @defaultvalue The `element.target` that triggered the Panel.\n */\n elementToFocusOnDismiss?: HTMLElement;\n\n /**\n * Indicates if this Panel will ignore keeping track of HTMLElement that activated the Zone.\n * @defaultvalue false\n * @deprecated Use `focusTrapZoneProps`.\n */\n ignoreExternalFocusing?: boolean;\n\n /**\n * Indicates whether Panel should force focus inside the focus trap zone.\n * If not explicitly specified, behavior aligns with FocusTrapZone's default behavior.\n * @deprecated Use `focusTrapZoneProps`.\n */\n forceFocusInsideTrap?: boolean;\n\n /**\n * Indicates the selector for first focusable item.\n * @deprecated Use `focusTrapZoneProps`.\n */\n firstFocusableSelector?: string;\n\n /**\n * Optional props to pass to the FocusTrapZone component to manage focus in the panel.\n */\n focusTrapZoneProps?: IFocusTrapZoneProps;\n\n /**\n * Optional props to pass to the Layer component hosting the panel.\n */\n layerProps?: ILayerProps;\n\n /**\n * Optional props to pass to the Overlay component that the panel uses.\n */\n overlayProps?: IOverlayProps;\n\n /**\n * Optional props to pass the Popup component that the panel uses.\n */\n popupProps?: IPopupProps;\n\n /**\n * Optional custom function to handle clicks outside the panel in lightdismiss mode\n */\n onLightDismissClick?: () => void;\n\n /**\n * Optional custom function to handle clicks outside this component\n */\n onOuterClick?: (ev?: React.MouseEvent) => void;\n\n /**\n * Optional custom renderer navigation region. Replaces the region that contains the close button.\n */\n onRenderNavigation?: IRenderFunction;\n\n /**\n * Optional custom renderer for content in the navigation region. Replaces current close button.\n */\n onRenderNavigationContent?: IRenderFunction;\n\n /**\n * Optional custom renderer for header region. Replaces current title\n */\n onRenderHeader?: IPanelHeaderRenderer;\n\n /**\n * Optional custom renderer for body region. Replaces any children passed into the component.\n */\n onRenderBody?: IRenderFunction;\n\n /**\n * Optional custom renderer for footer region. Replaces sticky footer.\n */\n onRenderFooter?: IRenderFunction;\n\n /**\n * Custom renderer for content in the sticky footer\n */\n onRenderFooterContent?: IRenderFunction;\n\n /**\n * @deprecated Not used.\n */\n componentId?: string;\n\n /**\n * Allow body scroll on content and overlay on touch devices. Changing after mounting has no effect.\n * @defaultvalue false\n */\n allowTouchBodyScroll?: boolean;\n}\n\n/**\n * Renderer function which takes an additional parameter, the ID to use for the element containing\n * the panel's title. This allows the `aria-labelledby` for the panel popup to work correctly.\n * Note that if `headerTextId` is provided, it **must** be used on an element, or screen readers\n * will be confused by the reference to a nonexistent ID.\n * {@docCategory Panel}\n */\nexport interface IPanelHeaderRenderer extends IRenderFunction {\n /**\n * @param props - Props given to the panel\n * @param defaultRender - Default header renderer. If using this renderer in code that does not\n * assign `headerTextId` to an element elsewhere, it **must** be passed to this function.\n * @param headerTextId - If provided, this **must** be used as the ID of an element containing the\n * panel's title, because the panel popup uses this ID as its aria-labelledby.\n */\n (props?: IPanelProps, defaultRender?: IPanelHeaderRenderer, headerTextId?: string | undefined): JSX.Element | null;\n}\n\n/**\n * {@docCategory Panel}\n */\nexport enum 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 smallFluid = 0,\n\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 smallFixedFar = 1,\n\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 smallFixedNear = 2,\n\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 medium = 3,\n\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 large = 4,\n\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 largeFixed = 5,\n\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 extraLarge = 6,\n\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 custom = 7,\n\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 customNear = 8,\n}\n\n/**\n * {@docCategory Panel}\n */\nexport interface IPanelStyleProps {\n /**\n * Theme provided by High-Order Component.\n */\n theme: ITheme;\n\n /**\n * Accept custom classNames\n */\n className?: string;\n\n /**\n * Is Panel open\n */\n isOpen?: boolean;\n\n /**\n * Is animation currently running\n */\n isAnimating?: boolean;\n\n /**\n * Is panel on right side\n */\n isOnRightSide?: boolean;\n\n /**\n * Is panel hidden on dismiss\n */\n isHiddenOnDismiss?: boolean;\n\n /**\n * Classname for FocusTrapZone element\n */\n focusTrapZoneClassName?: string;\n\n /**\n * Determines if content should stretch to fill available space putting footer at the bottom of the page\n */\n isFooterAtBottom?: boolean;\n\n /**\n * Based on state value setting footer to sticky or not\n */\n isFooterSticky?: boolean;\n\n /**\n * Panel has close button\n */\n hasCloseButton?: boolean;\n\n /**\n * Type of the panel.\n */\n type?: PanelType;\n\n /**\n * Optional parameter to provider the class name for header text\n */\n headerClassName?: string;\n\n /**\n * Determines where the header is rendered based on whether the user\n * has passed in a custom onRenderNavigation or onRenderNavigationContent render callback\n */\n hasCustomNavigation?: boolean;\n}\n\nexport interface IPanelSubComponentStyles {\n /**\n * Styling for close button child component.\n */\n closeButton: Partial;\n}\n\n/**\n * {@docCategory Panel}\n */\nexport interface IPanelStyles {\n /**\n * Style for the root element.\n */\n root: IStyle;\n\n /**\n * Style for the overlay element.\n */\n overlay: IStyle;\n\n /**\n * Style for the hidden element.\n */\n hiddenPanel: IStyle;\n\n /**\n * Style for the main section element.\n */\n main: IStyle;\n\n /**\n * Style for the navigation container element.\n */\n commands: IStyle;\n\n /**\n * Style for the Body and Footer container element.\n */\n contentInner: IStyle;\n\n /**\n * Style for the scrollable content area container element.\n */\n scrollableContent: IStyle;\n\n /**\n * Style for the close button container element.\n */\n navigation: IStyle;\n\n /**\n * Style for the close button IconButton element.\n * @deprecated Use `subComponentStyles.closeButton` instead.\n */\n closeButton?: IStyle;\n\n /**\n * Style for the header container div element.\n */\n header: IStyle;\n\n /**\n * Style for the header text div element.\n */\n headerText: IStyle;\n\n /**\n * Style for the body div element.\n */\n content: IStyle;\n\n /**\n * Style for the footer div element.\n */\n footer: IStyle;\n\n /**\n * Style for the inner footer div element.\n */\n footerInner: IStyle;\n\n /**\n * Styling for subcomponents.\n */\n subComponentStyles: IPanelSubComponentStyles;\n}\n","import * as React from 'react';\nimport { IconButton } from '../../Button';\nimport { Layer } from '../../Layer';\nimport { Overlay } from '../../Overlay';\nimport { Popup } from '../../Popup';\nimport {\n allowScrollOnElement,\n allowOverscrollOnElement,\n classNamesFunction,\n divProperties,\n elementContains,\n getId,\n getNativeProps,\n getRTL,\n css,\n warnDeprecations,\n Async,\n EventGroup,\n initializeComponentRef,\n} from '../../Utilities';\nimport { FocusTrapZone } from '../FocusTrapZone/index';\nimport { PanelType } from './Panel.types';\nimport type { IProcessedStyleSet } from '../../Styling';\nimport type { IPanel, IPanelProps, IPanelStyleProps, IPanelStyles } from './Panel.types';\nimport { WindowContext } from '@fluentui/react-window-provider';\nimport { getDocumentEx, getWindowEx } from '../../utilities/dom';\n\nconst getClassNames = classNamesFunction();\nconst COMPONENT_NAME = 'Panel';\n\nenum PanelVisibilityState {\n closed,\n animatingOpen,\n open,\n animatingClosed,\n}\n\ninterface IPanelState {\n isFooterSticky?: boolean;\n id?: string;\n visibility: PanelVisibilityState;\n}\n\nexport class PanelBase extends React.Component implements IPanel {\n public static defaultProps: IPanelProps = {\n isHiddenOnDismiss: false,\n isOpen: undefined,\n isBlocking: true,\n hasCloseButton: true,\n type: PanelType.smallFixedFar,\n };\n\n public static contextType = WindowContext;\n\n private _async: Async;\n private _events: EventGroup;\n private _panel = React.createRef();\n private _classNames: IProcessedStyleSet;\n private _scrollableContent: HTMLDivElement | null;\n private _animationCallback: number | null = null;\n private _hasCustomNavigation: boolean = !!(this.props.onRenderNavigation || this.props.onRenderNavigationContent);\n private _headerTextId: string | undefined;\n private _allowTouchBodyScroll: boolean;\n\n public static getDerivedStateFromProps(\n nextProps: Readonly,\n prevState: Readonly,\n ): Partial | null {\n if (nextProps.isOpen === undefined) {\n return null; // no state update\n }\n if (\n nextProps.isOpen &&\n (prevState.visibility === PanelVisibilityState.closed ||\n prevState.visibility === PanelVisibilityState.animatingClosed)\n ) {\n return { visibility: PanelVisibilityState.animatingOpen };\n }\n if (\n !nextProps.isOpen &&\n (prevState.visibility === PanelVisibilityState.open ||\n prevState.visibility === PanelVisibilityState.animatingOpen)\n ) {\n return { visibility: PanelVisibilityState.animatingClosed };\n }\n return null;\n }\n\n constructor(props: IPanelProps) {\n super(props);\n\n const { allowTouchBodyScroll = false } = this.props;\n this._allowTouchBodyScroll = allowTouchBodyScroll;\n\n initializeComponentRef(this);\n\n warnDeprecations(COMPONENT_NAME, props, {\n ignoreExternalFocusing: 'focusTrapZoneProps',\n forceFocusInsideTrap: 'focusTrapZoneProps',\n firstFocusableSelector: 'focusTrapZoneProps',\n });\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 }\n\n public componentDidMount(): void {\n this._async = new Async(this);\n this._events = new EventGroup(this);\n const win = getWindowEx(this.context);\n const doc = getDocumentEx(this.context);\n\n this._events.on(win, 'resize', this._updateFooterPosition);\n\n if (this._shouldListenForOuterClick(this.props)) {\n this._events.on(doc?.body, 'mousedown', this._dismissOnOuterClick, true);\n }\n\n if (this.props.isOpen) {\n this.setState({ visibility: PanelVisibilityState.animatingOpen });\n }\n }\n\n public componentDidUpdate(previousProps: IPanelProps, previousState: IPanelState): void {\n const shouldListenOnOuterClick = this._shouldListenForOuterClick(this.props);\n const previousShouldListenOnOuterClick = this._shouldListenForOuterClick(previousProps);\n\n if (this.state.visibility !== previousState.visibility) {\n this._clearExistingAnimationTimer();\n if (this.state.visibility === PanelVisibilityState.animatingOpen) {\n this._animateTo(PanelVisibilityState.open);\n } else if (this.state.visibility === PanelVisibilityState.animatingClosed) {\n this._animateTo(PanelVisibilityState.closed);\n }\n }\n\n const doc = getDocumentEx(this.context);\n if (shouldListenOnOuterClick && !previousShouldListenOnOuterClick) {\n this._events.on(doc?.body, 'mousedown', this._dismissOnOuterClick, true);\n } else if (!shouldListenOnOuterClick && previousShouldListenOnOuterClick) {\n this._events.off(doc?.body, 'mousedown', this._dismissOnOuterClick, true);\n }\n }\n\n public componentWillUnmount(): void {\n this._async.dispose();\n this._events.dispose();\n }\n\n public render(): JSX.Element | null {\n const {\n className = '',\n elementToFocusOnDismiss,\n /* eslint-disable deprecation/deprecation */\n firstFocusableSelector,\n focusTrapZoneProps,\n forceFocusInsideTrap,\n hasCloseButton,\n headerText,\n headerClassName = '',\n ignoreExternalFocusing,\n isBlocking,\n isFooterAtBottom,\n isLightDismiss,\n isHiddenOnDismiss,\n layerProps,\n overlayProps,\n popupProps,\n type,\n styles,\n theme,\n customWidth,\n onLightDismissClick = this._onPanelClick,\n onRenderNavigation = this._onRenderNavigation,\n onRenderHeader = this._onRenderHeader,\n onRenderBody = this._onRenderBody,\n onRenderFooter = this._onRenderFooter,\n } = this.props;\n const { isFooterSticky, visibility, id } = this.state;\n const isLeft = type === PanelType.smallFixedNear || type === PanelType.customNear ? true : false;\n const isRTL = getRTL(theme);\n const isOnRightSide = isRTL ? isLeft : !isLeft;\n const customWidthStyles = type === PanelType.custom || type === PanelType.customNear ? { width: customWidth } : {};\n const nativeProps = getNativeProps>(this.props, divProperties);\n const isOpen = this.isActive;\n const isAnimating =\n visibility === PanelVisibilityState.animatingClosed || visibility === PanelVisibilityState.animatingOpen;\n\n this._headerTextId = headerText && id + '-headerText';\n\n if (!isOpen && !isAnimating && !isHiddenOnDismiss) {\n return null;\n }\n\n this._classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n focusTrapZoneClassName: focusTrapZoneProps ? focusTrapZoneProps.className : undefined,\n hasCloseButton,\n headerClassName,\n isAnimating,\n isFooterSticky,\n isFooterAtBottom,\n isOnRightSide,\n isOpen,\n isHiddenOnDismiss,\n type,\n hasCustomNavigation: this._hasCustomNavigation,\n });\n\n const { _classNames, _allowTouchBodyScroll } = this;\n\n let overlay;\n if (isBlocking && isOpen) {\n overlay = (\n \n );\n }\n\n return (\n \n \n
    \n {overlay}\n \n
    \n
    \n
    \n {onRenderNavigation(this.props, this._onRenderNavigation)}\n
    \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
    \n \n
    \n \n
    \n );\n }\n\n public open() {\n if (this.props.isOpen !== undefined) {\n return;\n }\n\n if (this.isActive) {\n return;\n }\n\n this.setState({ visibility: PanelVisibilityState.animatingOpen });\n }\n\n public close() {\n if (this.props.isOpen !== undefined) {\n return;\n }\n\n if (!this.isActive) {\n return;\n }\n\n this.setState({ visibility: PanelVisibilityState.animatingClosed });\n }\n\n public dismiss = (ev?: React.SyntheticEvent | KeyboardEvent): void => {\n if (this.props.onDismiss && this.isActive) {\n this.props.onDismiss(ev);\n }\n\n if (!ev || (ev && !ev.defaultPrevented)) {\n this.close();\n }\n };\n\n /** isActive is true when panel is open or opening. */\n public get isActive(): boolean {\n return (\n this.state.visibility === PanelVisibilityState.open ||\n this.state.visibility === PanelVisibilityState.animatingOpen\n );\n }\n\n // Allow the user to scroll within the panel but not on the body\n private _allowScrollOnPanel = (elt: HTMLDivElement | null): void => {\n if (elt) {\n if (this._allowTouchBodyScroll) {\n allowOverscrollOnElement(elt, this._events);\n } else {\n allowScrollOnElement(elt, this._events);\n }\n } else {\n this._events.off(this._scrollableContent);\n }\n this._scrollableContent = elt;\n };\n\n private _shouldListenForOuterClick(props: IPanelProps): boolean {\n return !!props.isBlocking && !!props.isOpen;\n }\n\n private _onRenderNavigation = (props: IPanelProps): JSX.Element | null => {\n if (!this.props.onRenderNavigationContent && !this.props.onRenderNavigation && !this.props.hasCloseButton) {\n return null;\n }\n const { onRenderNavigationContent = this._onRenderNavigationContent } = this.props;\n return (\n
    \n {onRenderNavigationContent(props, this._onRenderNavigationContent)}\n
    \n );\n };\n\n private _onRenderNavigationContent = (props: IPanelProps): JSX.Element | null => {\n const { closeButtonAriaLabel, hasCloseButton, onRenderHeader = this._onRenderHeader } = props;\n if (hasCloseButton) {\n const iconButtonStyles = this._classNames.subComponentStyles?.closeButton();\n\n return (\n <>\n {!this._hasCustomNavigation && onRenderHeader(this.props, this._onRenderHeader, this._headerTextId)}\n \n \n );\n }\n return null;\n };\n\n private _onRenderHeader = (\n props: IPanelProps,\n defaultRender?: (props?: IPanelProps) => JSX.Element | null,\n headerTextId?: string | undefined,\n ): JSX.Element | null => {\n const { headerText, headerTextProps = {} } = props;\n\n if (headerText) {\n return (\n
    \n \n {headerText}\n
    \n \n );\n }\n return null;\n };\n\n private _onRenderBody = (props: IPanelProps): JSX.Element => {\n return
    {props.children}
    ;\n };\n\n private _onRenderFooter = (props: IPanelProps): JSX.Element | null => {\n const { onRenderFooterContent = null } = this.props;\n if (onRenderFooterContent) {\n return (\n
    \n
    {onRenderFooterContent()}
    \n
    \n );\n }\n return null;\n };\n\n private _updateFooterPosition(): void {\n const scrollableContent = this._scrollableContent;\n if (scrollableContent) {\n const height = scrollableContent.clientHeight;\n const innerHeight = scrollableContent.scrollHeight;\n\n this.setState({\n isFooterSticky: height < innerHeight ? true : false,\n });\n }\n }\n\n private _dismissOnOuterClick(ev: React.MouseEvent): void {\n const panel = this._panel.current;\n if (this.isActive && panel && !ev.defaultPrevented) {\n if (!elementContains(panel, ev.target as HTMLElement)) {\n if (this.props.onOuterClick) {\n this.props.onOuterClick(ev);\n } else {\n this.dismiss(ev);\n }\n }\n }\n }\n\n private _animateTo = (newVisibilityState: PanelVisibilityState): void => {\n if (newVisibilityState === PanelVisibilityState.open && this.props.onOpen) {\n this.props.onOpen();\n }\n\n this._animationCallback = this._async.setTimeout(() => {\n this.setState({ visibility: newVisibilityState });\n this._onTransitionComplete(newVisibilityState);\n }, 200);\n };\n\n private _clearExistingAnimationTimer = (): void => {\n if (this._animationCallback !== null) {\n this._async.clearTimeout(this._animationCallback);\n }\n };\n\n private _onPanelClick = (ev?: any): void => {\n this.dismiss(ev);\n };\n\n private _onTransitionComplete = (newVisibilityState: PanelVisibilityState): void => {\n this._updateFooterPosition();\n if (newVisibilityState === PanelVisibilityState.open && this.props.onOpened) {\n this.props.onOpened();\n }\n\n if (newVisibilityState === PanelVisibilityState.closed && this.props.onDismissed) {\n this.props.onDismissed();\n }\n };\n}\n","import { PanelType } from './Panel.types';\nimport {\n AnimationClassNames,\n AnimationVariables,\n getGlobalClassNames,\n HighContrastSelector,\n ScreenWidthMinMedium,\n ScreenWidthMinLarge,\n ScreenWidthMinXLarge,\n ScreenWidthMinXXLarge,\n ScreenWidthMinUhfMobile,\n IconFontSizes,\n} from '../../Styling';\nimport type { IPanelStyleProps, IPanelStyles } from './Panel.types';\nimport type { IStyle } from '../../Styling';\n\nconst 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};\n\nconst panelWidth = {\n full: '100%',\n auto: 'auto',\n xs: 272,\n sm: 340,\n md1: 592,\n md2: 644,\n lg: 940,\n};\n\nconst panelMargin = {\n auto: 'auto',\n none: 0,\n md: 48,\n lg: 428,\n xl: 176,\n};\n\n// Following consts are used below in `getPanelBreakpoints()` function to provide\n// necessary fallbacks for different types of Panel in different breakpoints.\nconst smallPanelSelectors = {\n [`@media (min-width: ${ScreenWidthMinMedium}px)`]: {\n width: panelWidth.sm,\n },\n};\n\nconst mediumPanelSelectors = {\n [`@media (min-width: ${ScreenWidthMinLarge}px)`]: {\n width: panelWidth.md1,\n },\n [`@media (min-width: ${ScreenWidthMinXLarge}px)`]: {\n width: panelWidth.md2,\n },\n};\n\nconst largePanelSelectors = {\n [`@media (min-width: ${ScreenWidthMinUhfMobile}px)`]: {\n left: panelMargin.md,\n width: panelWidth.auto,\n },\n [`@media (min-width: ${ScreenWidthMinXXLarge}px)`]: {\n left: panelMargin.lg,\n },\n};\n\nconst largeFixedPanelSelectors = {\n [`@media (min-width: ${ScreenWidthMinXXLarge}px)`]: {\n left: panelMargin.auto,\n width: panelWidth.lg,\n },\n};\n\nconst extraLargePanelSelectors = {\n [`@media (min-width: ${ScreenWidthMinXXLarge}px)`]: {\n left: panelMargin.xl,\n },\n};\n\n// Make sure Panels have fallbacks to different breakpoints by reusing same selectors.\n// This is done in the effort to follow design redlines.\nconst getPanelBreakpoints = (type: PanelType): { [x: string]: IStyle } | undefined => {\n let selectors;\n\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 = {\n ...smallPanelSelectors,\n };\n break;\n case PanelType.medium:\n selectors = {\n ...smallPanelSelectors,\n ...mediumPanelSelectors,\n };\n break;\n case PanelType.large:\n selectors = {\n ...smallPanelSelectors,\n ...mediumPanelSelectors,\n ...largePanelSelectors,\n };\n break;\n case PanelType.largeFixed:\n selectors = {\n ...smallPanelSelectors,\n ...mediumPanelSelectors,\n ...largePanelSelectors,\n ...largeFixedPanelSelectors,\n };\n break;\n case PanelType.extraLarge:\n selectors = {\n ...smallPanelSelectors,\n ...mediumPanelSelectors,\n ...largePanelSelectors,\n ...extraLargePanelSelectors,\n };\n break;\n default:\n break;\n }\n\n return selectors;\n};\n\nconst commandBarHeight = '44px';\n\nconst sharedPaddingStyles = {\n paddingLeft: '24px',\n paddingRight: '24px',\n};\n\nexport const getStyles = (props: IPanelStyleProps): IPanelStyles => {\n const {\n className,\n focusTrapZoneClassName,\n hasCloseButton,\n headerClassName,\n isAnimating,\n isFooterSticky,\n isFooterAtBottom,\n isOnRightSide,\n isOpen,\n isHiddenOnDismiss,\n hasCustomNavigation,\n theme,\n type = PanelType.smallFixedFar,\n } = props;\n const { effects, fonts, semanticColors } = theme;\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n const isCustomPanel = type === PanelType.custom || type === PanelType.customNear;\n\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: {\n [HighContrastSelector]: {\n borderLeft: `3px solid ${semanticColors.variantBorder}`,\n borderRight: `3px solid ${semanticColors.variantBorder}`,\n },\n ...getPanelBreakpoints(type),\n },\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 // Ensures that the sticky header always has a background to prevent overlaps on scroll.\n backgroundColor: semanticColors.bodyBackground,\n paddingTop: 18,\n selectors: {\n [`@media (min-height: ${ScreenWidthMinMedium}px)`]: {\n position: 'sticky',\n top: 0,\n zIndex: 1,\n },\n },\n },\n hasCustomNavigation && {\n paddingTop: '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: {\n [`@media (min-height: ${ScreenWidthMinMedium}px)`]: {\n flexGrow: 1,\n },\n },\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: {\n [`@media (min-height: ${ScreenWidthMinMedium}px)`]: {\n position: 'sticky',\n bottom: 0,\n },\n },\n },\n isFooterSticky && {\n backgroundColor: 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","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { PanelBase } from './Panel.base';\nimport { getStyles } from './Panel.styles';\nimport type { IPanelProps, IPanelStyleProps, IPanelStyles } from './Panel.types';\n\n/**\n * Panel description\n */\nexport const Panel: React.FunctionComponent = styled(\n PanelBase,\n getStyles,\n undefined,\n {\n scope: 'Panel',\n },\n);\n","import * as React from 'react';\nimport {\n css,\n KeyCodes,\n classNamesFunction,\n divProperties,\n findIndex,\n getDocument,\n getFirstFocusable,\n getId,\n getLastFocusable,\n getNativeProps,\n initializeComponentRef,\n isIOS,\n isMac,\n mergeAriaAttributeValues,\n safeRequestAnimationFrame,\n warn,\n warnDeprecations,\n warnMutuallyExclusive,\n} 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 { RectangleEdge } from '../../Positioning';\nimport { Icon } from '../../Icon';\nimport { Label } from '../../Label';\nimport { Panel } from '../../Panel';\nimport { ResponsiveMode, useResponsiveMode } from '../../ResponsiveMode';\nimport { SelectableOptionMenuItemType, getAllSelectedOptions } from '../../SelectableOption';\n// import and use V7 Checkbox to ensure no breaking changes.\nimport { Checkbox } from '../../Checkbox';\nimport { getNextElement, getPreviousElement, getPropsWithDefaults } from '@fluentui/utilities';\nimport { useMergedRefs, usePrevious } from '@fluentui/react-hooks';\nimport type { IStyleFunctionOrObject } from '../../Utilities';\nimport type {\n IDropdownOption,\n IDropdownProps,\n IDropdownStyleProps,\n IDropdownStyles,\n IDropdown,\n} from './Dropdown.types';\nimport type { ICalloutPositionedInfo } from '../../Positioning';\nimport type { ILabelStyleProps, ILabelStyles } from '../../Label';\nimport type { IProcessedStyleSet } from '../../Styling';\nimport type { IPanelStyleProps, IPanelStyles } from '../../Panel';\nimport type { IWithResponsiveModeState } from '../../ResponsiveMode';\nimport type { ISelectableDroppableTextProps } from '../../SelectableOption';\nimport type { ICheckboxStyleProps, ICheckboxStyles } from '../../Checkbox';\nimport { IFocusTrapZoneProps } from '../FocusTrapZone/FocusTrapZone.types';\nimport { WindowContext } from '@fluentui/react-window-provider';\nimport { getDocumentEx, getWindowEx } from '../../utilities/dom';\n\nconst COMPONENT_NAME = 'Dropdown';\nconst getClassNames = classNamesFunction();\n\n/** Internal only props interface to support mixing in responsive mode */\n// eslint-disable-next-line deprecation/deprecation\ninterface IDropdownInternalProps extends Omit, IWithResponsiveModeState {\n hoisted: {\n rootRef: React.RefObject;\n selectedIndices: number[];\n setSelectedIndices: React.Dispatch>;\n };\n}\n\ninterface IDropdownState {\n isOpen: boolean;\n /** Used to track whether focus is already within the Dropdown, for openOnFocus handling. */\n hasFocus: boolean;\n calloutRenderEdge?: RectangleEdge;\n}\n\nconst DEFAULT_PROPS: Partial = {\n options: [],\n};\n\nfunction useSelectedItemsState({\n defaultSelectedKeys,\n selectedKeys,\n defaultSelectedKey,\n selectedKey,\n options,\n multiSelect,\n}: IDropdownProps) {\n const oldOptions = usePrevious(options);\n const [selectedIndices, setSelectedIndices] = React.useState([]);\n\n // In controlled component usage where selectedKey is provided, update the selectedIndex\n // state if the key or options change.\n let selectedKeyPropToUse: string | number | string[] | number[] | null | undefined;\n\n // this does a shallow compare (assumes options are pure), for the purposes of determining whether\n // defaultSelectedKey/defaultSelectedKeys are respected.\n const didOptionsChange = options !== oldOptions;\n\n if (multiSelect) {\n if (didOptionsChange && defaultSelectedKeys !== undefined) {\n selectedKeyPropToUse = defaultSelectedKeys;\n } else {\n selectedKeyPropToUse = selectedKeys;\n }\n } else {\n if (didOptionsChange && defaultSelectedKey !== undefined) {\n selectedKeyPropToUse = defaultSelectedKey;\n } else {\n selectedKeyPropToUse = selectedKey;\n }\n }\n\n const oldSelectedKeyProp = usePrevious(selectedKeyPropToUse);\n\n React.useEffect(() => {\n /** Get all selected indexes for multi-select mode */\n const getSelectedIndexes = (): number[] => {\n if (selectedKeyPropToUse === undefined) {\n if (multiSelect) {\n return getAllSelectedIndices();\n }\n const selectedIndex = getSelectedIndex(null);\n return selectedIndex !== -1 ? [selectedIndex] : [];\n } else if (!Array.isArray(selectedKeyPropToUse)) {\n const selectedIndex = getSelectedIndex(selectedKeyPropToUse);\n return selectedIndex !== -1 ? [selectedIndex] : [];\n }\n\n const returnValue: number[] = [];\n for (const key of selectedKeyPropToUse) {\n const selectedIndex = getSelectedIndex(key);\n selectedIndex !== -1 && returnValue.push(selectedIndex);\n }\n return returnValue;\n };\n\n const getAllSelectedIndices = (): number[] => {\n return options\n .map((option: IDropdownOption, index: number) => (option.selected ? index : -1))\n .filter(index => index !== -1);\n };\n\n const getSelectedIndex = (searchKey: string | number | null | undefined): number => {\n return findIndex(options, option => {\n // eslint-disable-next-line eqeqeq\n if (searchKey != null) {\n return option.key === searchKey;\n } else {\n // eslint-disable-next-line deprecation/deprecation\n return !!option.selected || !!option.isSelected;\n }\n });\n };\n\n if (\n (selectedKeyPropToUse !== undefined || !oldOptions) &&\n (selectedKeyPropToUse !== oldSelectedKeyProp || didOptionsChange)\n ) {\n setSelectedIndices(getSelectedIndexes());\n }\n }, [didOptionsChange, multiSelect, oldOptions, oldSelectedKeyProp, options, selectedKeyPropToUse]);\n\n return [selectedIndices, setSelectedIndices] as const;\n}\n\nexport const DropdownBase: React.FunctionComponent = React.forwardRef(\n (propsWithoutDefaults, forwardedRef) => {\n const props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n\n const rootRef = React.useRef(null);\n const mergedRootRef = useMergedRefs(forwardedRef, rootRef);\n\n const responsiveMode = useResponsiveMode(rootRef, props.responsiveMode);\n const [selectedIndices, setSelectedIndices] = useSelectedItemsState(props);\n\n return (\n )}\n responsiveMode={responsiveMode}\n hoisted={{ rootRef: mergedRootRef, selectedIndices, setSelectedIndices }}\n />\n );\n },\n);\nDropdownBase.displayName = 'DropdownBase';\n\nclass DropdownInternal extends React.Component implements IDropdown {\n public static defaultProps = {\n options: [] as IDropdownOption[],\n };\n\n public static contextType = WindowContext;\n\n private _host = React.createRef();\n private _focusZone = React.createRef();\n private _dropDown = React.createRef();\n private _id: string;\n private _labelId: string;\n private _listId: string;\n private _optionId: string;\n private _isScrollIdle: boolean;\n /** Flag for tracking if the Callout has previously been positioned.\n * This is necessary to properly control focus state when the width\n * of the Dropdown is dynamic (e.g, \"fit-content\").\n */\n private _hasBeenPositioned: boolean;\n private readonly _scrollIdleDelay: number = 250 /* ms */;\n private _scrollIdleTimeoutId: number | undefined;\n /** True if the most recent keydown event was for alt (option) or meta (command). */\n private _lastKeyDownWasAltOrMeta: boolean | undefined;\n private _sizePosCache: DropdownSizePosCache = new DropdownSizePosCache();\n private _classNames: IProcessedStyleSet;\n private _requestAnimationFrame = safeRequestAnimationFrame(this);\n /** Flag for when we get the first mouseMove */\n private _gotMouseMove: boolean;\n /** Flag for tracking whether focus is triggered by click (alternatively triggered by keyboard nav) */\n private _isFocusedByClick: boolean;\n\n constructor(props: IDropdownInternalProps) {\n super(props);\n\n initializeComponentRef(this);\n\n const { multiSelect, selectedKey, selectedKeys, defaultSelectedKey, defaultSelectedKeys, options } = props;\n\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\n warnMutuallyExclusive(COMPONENT_NAME, props, {\n defaultSelectedKey: 'selectedKey',\n defaultSelectedKeys: 'selectedKeys',\n selectedKeys: 'selectedKey',\n });\n\n if (multiSelect) {\n const warnMultiSelect = (prop: keyof IDropdownProps) =>\n warn(`Dropdown property '${prop}' cannot be used when 'multiSelect' is true. Use '${prop}s' instead.`);\n if (selectedKey !== undefined) {\n warnMultiSelect('selectedKey');\n }\n if (defaultSelectedKey !== undefined) {\n warnMultiSelect('defaultSelectedKey');\n }\n } else {\n const warnNotMultiSelect = (prop: keyof IDropdownProps) =>\n warn(`Dropdown property '${prop}s' cannot be used when 'multiSelect' is false/unset. Use '${prop}' instead.`);\n if (selectedKeys !== undefined) {\n warnNotMultiSelect('selectedKey');\n }\n if (defaultSelectedKeys !== undefined) {\n warnNotMultiSelect('defaultSelectedKey');\n }\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\n this._sizePosCache.updateOptions(options);\n\n this.state = {\n isOpen: false,\n hasFocus: false,\n calloutRenderEdge: undefined,\n };\n }\n\n /**\n * All selected options\n */\n public get selectedOptions(): IDropdownOption[] {\n const {\n options,\n hoisted: { selectedIndices },\n } = this.props;\n\n return getAllSelectedOptions(options, selectedIndices);\n }\n\n public componentWillUnmount() {\n clearTimeout(this._scrollIdleTimeoutId);\n }\n\n public componentDidUpdate(prevProps: IDropdownProps, prevState: IDropdownState) {\n if (prevState.isOpen === true && this.state.isOpen === false) {\n this._gotMouseMove = false;\n this._hasBeenPositioned = false;\n\n if (this.props.onDismiss) {\n this.props.onDismiss();\n }\n }\n }\n\n public render(): JSX.Element {\n const id = this._id;\n\n const props = this.props;\n const {\n className,\n label,\n options,\n ariaLabel,\n required,\n errorMessage,\n styles: propStyles,\n theme,\n panelProps,\n calloutProps,\n onRenderTitle = this._getTitle,\n onRenderContainer = this._onRenderContainer,\n onRenderCaretDown = this._onRenderCaretDown,\n onRenderLabel = this._onRenderLabel,\n onRenderItem = this._onRenderItem,\n hoisted: { selectedIndices },\n } = props;\n const { isOpen, calloutRenderEdge, hasFocus } = this.state;\n // eslint-disable-next-line deprecation/deprecation\n const onRenderPlaceholder = props.onRenderPlaceholder || props.onRenderPlaceHolder || this._getPlaceholder;\n\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\n const selectedOptions = getAllSelectedOptions(options, selectedIndices);\n const divProps = getNativeProps(props, divProperties);\n\n const disabled = this._isDisabled();\n\n const errorMessageId = id + '-errorMessage';\n\n this._classNames = getClassNames(propStyles, {\n theme,\n className,\n hasError: !!(errorMessage && errorMessage.length > 0),\n hasLabel: !!label,\n isOpen,\n required,\n disabled,\n isRenderingPlaceholder: !selectedOptions.length,\n panelClassName: panelProps ? panelProps.className : undefined,\n calloutClassName: calloutProps ? calloutProps.className : undefined,\n calloutRenderEdge,\n });\n\n const hasErrorMessage: boolean = !!errorMessage && errorMessage.length > 0;\n\n return (\n \n {onRenderLabel(this.props, this._onRenderLabel)}\n \n \n {\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 }\n \n {onRenderCaretDown(props, this._onRenderCaretDown)}\n \n {isOpen &&\n onRenderContainer(\n {\n ...props,\n onDismiss: this._onDismiss,\n onRenderItem,\n },\n this._onRenderContainer,\n )}\n {hasErrorMessage && (\n
    \n {errorMessage}\n
    \n )}\n \n );\n }\n\n /**\n * Close menu callout if it is open\n */\n public dismissMenu = (): void => {\n const { isOpen } = this.state;\n isOpen && this.setState({ isOpen: false });\n };\n\n public focus(shouldOpenOnFocus?: boolean): void {\n if (this._dropDown.current) {\n this._dropDown.current.focus();\n\n if (shouldOpenOnFocus) {\n this.setState({\n isOpen: true,\n });\n }\n }\n }\n\n public setSelectedIndex(event: React.FormEvent, index: number): void {\n const {\n options,\n selectedKey,\n selectedKeys,\n multiSelect,\n notifyOnReselect,\n hoisted: { selectedIndices = [] },\n } = this.props;\n const checked: boolean = selectedIndices ? selectedIndices.indexOf(index) > -1 : false;\n let newIndexes: number[] = [];\n\n index = Math.max(0, Math.min(options.length - 1, index));\n\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\n if (!multiSelect && !notifyOnReselect && index === selectedIndices[0]) {\n return;\n } else if (multiSelect) {\n newIndexes = selectedIndices ? this._copyArray(selectedIndices) : [];\n if (checked) {\n const position = newIndexes.indexOf(index);\n if (position > -1) {\n // unchecked the current one\n newIndexes.splice(position, 1);\n }\n } else {\n // add the new selected index into the existing one\n newIndexes.push(index);\n }\n } else {\n // Set the selected option if this is an uncontrolled component\n newIndexes = [index];\n }\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\n private _onChange = (\n event: React.FormEvent,\n options: IDropdownOption[],\n index: number,\n checked?: boolean,\n multiSelect?: boolean,\n ) => {\n // eslint-disable-next-line deprecation/deprecation\n const { onChange, onChanged } = this.props;\n if (onChange || onChanged) {\n // for single-select, option passed in will always be selected.\n // for multi-select, flip the checked value\n const changedOpt = multiSelect ? { ...options[index], selected: !checked } : options[index];\n\n onChange && onChange({ ...event, target: this._dropDown.current as EventTarget }, changedOpt, index);\n onChanged && onChanged(changedOpt, index);\n }\n };\n\n /** Get either props.placeholder (new name) or props.placeHolder (old name) */\n private _getPlaceholder = (): string | undefined => {\n // eslint-disable-next-line deprecation/deprecation\n return this.props.placeholder || this.props.placeHolder;\n };\n\n private _copyArray(array: any[]): any[] {\n const newArray = [];\n for (const element of array) {\n newArray.push(element);\n }\n return newArray;\n }\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 private _moveIndex(\n event: React.FormEvent,\n stepValue: number,\n index: number,\n selectedIndex: number,\n ): number {\n const { options } = this.props;\n // Return selectedIndex if nothing has changed or options is empty\n if (selectedIndex === index || options.length === 0) {\n return selectedIndex;\n }\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 } else if (index < 0) {\n index = options.length - 1;\n }\n\n let stepCounter = 0;\n // If current index is a header or divider, or disabled, increment by step\n while (\n options[index].itemType === DropdownMenuItemType.Header ||\n options[index].itemType === DropdownMenuItemType.Divider ||\n options[index].disabled\n ) {\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 } else if (index + stepValue >= options.length) {\n index = -1;\n }\n\n index = index + stepValue;\n stepCounter++;\n }\n\n this.setSelectedIndex(event, index);\n return index;\n }\n\n /** Get text in dropdown input as a string */\n private _getTitle = (items: IDropdownOption[], _unused?: unknown): string => {\n const { multiSelectDelimiter = ', ' } = this.props;\n return items.map(i => i.text).join(multiSelectDelimiter);\n };\n\n /** Render text in dropdown input */\n private _onRenderTitle = (items: IDropdownOption[]): JSX.Element => {\n return <>{this._getTitle(items)};\n };\n\n /** Render placeholder text in dropdown input */\n private _onRenderPlaceholder = (props: IDropdownProps): JSX.Element | null => {\n if (!this._getPlaceholder()) {\n return null;\n }\n return <>{this._getPlaceholder()};\n };\n\n /** Render Callout or Panel container and pass in list */\n private _onRenderContainer = (props: ISelectableDroppableTextProps): JSX.Element => {\n const { calloutProps, panelProps } = props;\n const { responsiveMode, dropdownWidth } = this.props;\n\n const isSmall = responsiveMode! <= ResponsiveMode.medium;\n\n const focusTrapZoneProps: IFocusTrapZoneProps = { firstFocusableTarget: `#${this._listId}1` };\n const panelStyles = this._classNames.subComponentStyles\n ? (this._classNames.subComponentStyles.panel as IStyleFunctionOrObject)\n : undefined;\n\n let calloutWidth = undefined;\n let calloutMinWidth = undefined;\n if (dropdownWidth === 'auto') {\n calloutMinWidth = this._dropDown.current ? this._dropDown.current.clientWidth : 0;\n } else {\n calloutWidth = dropdownWidth || (this._dropDown.current ? this._dropDown.current.clientWidth : 0);\n }\n\n return isSmall ? (\n \n {this._renderFocusableList(props)}\n \n ) : (\n \n {this._renderFocusableList(props)}\n \n );\n };\n\n /** Render Caret Down Icon */\n private _onRenderCaretDown = (props: IDropdownProps): JSX.Element => {\n return ;\n };\n\n /** Wrap item list in a FocusZone */\n private _renderFocusableList(props: ISelectableDroppableTextProps): JSX.Element {\n const { onRenderList = this._onRenderList, label, ariaLabel, multiSelect } = props;\n\n return (\n \n \n {onRenderList(props, this._onRenderList)}\n
    \n \n );\n }\n\n /** Render List of items */\n private _onRenderList = (props: ISelectableDroppableTextProps): JSX.Element => {\n const { onRenderItem = this._onRenderItem } = props;\n\n let queue: { id?: string; items: JSX.Element[] } = { items: [] };\n let renderedList: JSX.Element[] = [];\n\n const emptyQueue = (): void => {\n const newGroup = queue.id\n ? [\n
    \n {queue.items}\n
    ,\n ]\n : queue.items;\n\n renderedList = [...renderedList, ...newGroup];\n // Flush items and id\n queue = { items: [] };\n };\n\n const placeRenderedOptionIntoQueue = (item: IDropdownOption, index: number) => {\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\n const id = this._id + item.key;\n queue.items.push(onRenderItem({ id, ...item, index }, this._onRenderItem)!);\n queue.id = id;\n break;\n case SelectableOptionMenuItemType.Divider:\n index > 0 && queue.items.push(onRenderItem({ ...item, index }, this._onRenderItem)!);\n\n queue.items.length > 0 && emptyQueue();\n break;\n default:\n queue.items.push(onRenderItem({ ...item, index }, this._onRenderItem)!);\n }\n };\n\n // Place options into the queue. Queue will be emptied anytime a Header or Divider is encountered\n props.options.forEach((item: IDropdownOption, index: number) => {\n placeRenderedOptionIntoQueue(item, index);\n });\n\n // Push remaining items into all renderedList\n queue.items.length > 0 && emptyQueue();\n\n return <>{renderedList};\n };\n\n private _onRenderItem = (item: IDropdownOption): JSX.Element | null => {\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\n private _renderSeparator(item: IDropdownOption): JSX.Element | null {\n const { index, key } = item;\n const separatorClassName = item.hidden ? this._classNames.dropdownDividerHidden : this._classNames.dropdownDivider;\n if (index! > 0) {\n return
    ;\n }\n return null;\n }\n\n private _renderHeader(item: IDropdownOption): JSX.Element {\n const { onRenderOption = this._onRenderOption } = this.props;\n const { key, id } = item;\n const headerClassName = item.hidden\n ? this._classNames.dropdownItemHeaderHidden\n : this._classNames.dropdownItemHeader;\n\n return (\n
    \n {onRenderOption(item, this._onRenderOption)}\n
    \n );\n }\n\n private _renderOption = (item: IDropdownOption): JSX.Element => {\n const {\n onRenderOption = this._onRenderOption,\n hoisted: { selectedIndices = [] },\n } = this.props;\n const isItemSelected =\n item.index !== undefined && selectedIndices ? selectedIndices.indexOf(item.index) > -1 : false;\n\n // select the right className based on the combination of selected/disabled\n const 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\n const { title } = item;\n\n // define the id and label id (for multiselect checkboxes)\n const id = this._listId + item.index;\n const labelId = item.id ?? id + '-label';\n\n const multiSelectItemStyles = this._classNames.subComponentStyles\n ? (this._classNames.subComponentStyles.multiSelectItem as IStyleFunctionOrObject<\n ICheckboxStyleProps,\n ICheckboxStyles\n >)\n : undefined;\n\n return !this.props.multiSelect ? (\n \n {onRenderOption(item, this._onRenderOption)}\n \n ) : (\n \n );\n };\n\n /** Render content of item (i.e. text/icon inside of button) */\n private _onRenderOption = (item: IDropdownOption): JSX.Element => {\n return {item.text};\n };\n\n /*\n * Render content of a multiselect item label.\n * Text within the label is aria-hidden, to prevent duplicate input/label exposure\n */\n private _onRenderMultiselectOption = (item: IDropdownOption): JSX.Element => {\n return (\n \n {item.text}\n \n );\n };\n\n /** Render custom label for multiselect checkbox items */\n private _onRenderItemLabel = (item: IDropdownOption): JSX.Element | null => {\n const { onRenderOption = this._onRenderMultiselectOption } = this.props;\n return onRenderOption(item, this._onRenderMultiselectOption);\n };\n\n private _onPositioned = (positions?: ICalloutPositionedInfo): void => {\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(() => {\n const selectedIndices = this.props.hoisted.selectedIndices;\n if (this._focusZone.current) {\n if (\n !this._hasBeenPositioned &&\n selectedIndices &&\n selectedIndices[0] &&\n !this.props.options[selectedIndices[0]].disabled\n ) {\n const element: HTMLElement | null = getDocument()!.getElementById(`${this._id}-list${selectedIndices[0]}`);\n if (element) {\n this._focusZone.current.focusElement(element);\n }\n this._hasBeenPositioned = true;\n } else {\n this._focusZone.current.focus();\n }\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\n private _onItemClick = (item: IDropdownOption): ((event: React.MouseEvent) => void) => {\n return (event: React.MouseEvent): void => {\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 /**\n * Scroll handler for the callout to make sure the mouse events\n * for updating focus are not interacting during scroll\n */\n private _onScroll = (): void => {\n const win = getWindowEx(this.context)!; // can only be called on the client\n if (!this._isScrollIdle && this._scrollIdleTimeoutId !== undefined) {\n win.clearTimeout(this._scrollIdleTimeoutId);\n this._scrollIdleTimeoutId = undefined;\n } else {\n this._isScrollIdle = false;\n }\n\n this._scrollIdleTimeoutId = win.setTimeout(() => {\n this._isScrollIdle = true;\n }, this._scrollIdleDelay);\n };\n\n private _onItemMouseEnter(item: any, ev: React.MouseEvent): void {\n if (this._shouldIgnoreMouseEvent()) {\n return;\n }\n\n const targetElement = ev.currentTarget as HTMLElement;\n targetElement.focus();\n }\n\n private _onItemMouseMove(item: any, ev: React.MouseEvent): void {\n const doc = getDocumentEx(this.context)!; // can only be called on the client\n const targetElement = ev.currentTarget as HTMLElement;\n this._gotMouseMove = true;\n\n if (!this._isScrollIdle || doc.activeElement === targetElement) {\n return;\n }\n\n targetElement.focus();\n }\n\n private _onMouseItemLeave = (item: any, ev: React.MouseEvent): void => {\n if (this._shouldIgnoreMouseEvent()) {\n return;\n }\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 as any).setActive) {\n try {\n (this._host.current as any).setActive();\n } catch (e) {\n /* no-op */\n }\n } else {\n this._host.current.focus();\n }\n }\n };\n\n private _shouldIgnoreMouseEvent(): boolean {\n return !this._isScrollIdle || !this._gotMouseMove;\n }\n\n private _onDismiss = (): void => {\n this.setState({ isOpen: false });\n };\n\n private _onDropdownBlur = (ev: React.FocusEvent): void => {\n // If Dropdown disabled do not proceed with this logic.\n const disabled = this._isDisabled();\n if (disabled) {\n return;\n }\n\n if (this.state.isOpen) {\n // Do not call onBlur or update focus state when the callout is opened\n return;\n }\n\n this.setState({ hasFocus: false });\n\n if (this.props.onBlur) {\n this.props.onBlur(ev);\n }\n };\n\n private _onDropdownKeyDown = (ev: React.KeyboardEvent): void => {\n // If Dropdown disabled do not process any keyboard events.\n const disabled = this._isDisabled();\n if (disabled) {\n return;\n }\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\n if (this.props.onKeyDown) {\n this.props.onKeyDown(ev);\n if (ev.defaultPrevented) {\n return;\n }\n }\n\n let newIndex: number | undefined;\n const selectedIndex = this.props.hoisted.selectedIndices.length ? this.props.hoisted.selectedIndices[0] : -1;\n const containsExpandCollapseModifier = ev.altKey || ev.metaKey;\n const isOpen = this.state.isOpen;\n\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\n case KeyCodes.escape:\n if (!isOpen) {\n return;\n }\n\n this.setState({\n isOpen: false,\n });\n break;\n\n case KeyCodes.up:\n if (containsExpandCollapseModifier) {\n if (isOpen) {\n this.setState({ isOpen: false });\n break;\n }\n\n return;\n }\n if (this.props.multiSelect) {\n this.setState({ isOpen: true });\n } else if (!this._isDisabled()) {\n newIndex = this._moveIndex(ev, -1, selectedIndex - 1, selectedIndex);\n }\n break;\n\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 } else if (!this._isDisabled()) {\n newIndex = this._moveIndex(ev, 1, selectedIndex + 1, selectedIndex);\n }\n break;\n\n case KeyCodes.home:\n if (!this.props.multiSelect) {\n newIndex = this._moveIndex(ev, 1, 0, selectedIndex);\n }\n break;\n\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\n case KeyCodes.space:\n // event handled in _onDropdownKeyUp\n break;\n\n default:\n return;\n }\n\n if (newIndex !== selectedIndex) {\n ev.stopPropagation();\n ev.preventDefault();\n }\n };\n\n private _onDropdownKeyUp = (ev: React.KeyboardEvent): void => {\n // If Dropdown disabled do not process any keyboard events.\n const disabled = this._isDisabled();\n if (disabled) {\n return;\n }\n\n const shouldHandleKey = this._shouldHandleKeyUp(ev);\n const isOpen = this.state.isOpen;\n\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\n default:\n if (shouldHandleKey && isOpen) {\n this.setState({ isOpen: false });\n }\n return;\n }\n\n ev.stopPropagation();\n ev.preventDefault();\n };\n\n /**\n * Returns true if the key for the event is alt (Mac option) or meta (Mac command).\n */\n private _isAltOrMeta(ev: React.KeyboardEvent): boolean {\n // eslint-disable-next-line deprecation/deprecation\n return ev.which === KeyCodes.alt || ev.key === 'Meta';\n }\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 private _shouldHandleKeyUp(ev: React.KeyboardEvent): boolean {\n const keyPressIsAltOrMetaAlone = this._lastKeyDownWasAltOrMeta && this._isAltOrMeta(ev);\n this._lastKeyDownWasAltOrMeta = false;\n return !!keyPressIsAltOrMetaAlone && !(isMac() || isIOS());\n }\n\n private _onZoneKeyDown = (ev: React.KeyboardEvent): void => {\n let elementToFocus;\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 const containsExpandCollapseModifier = ev.altKey || ev.metaKey;\n\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.up:\n if (containsExpandCollapseModifier) {\n this.setState({ isOpen: false });\n } else {\n if (this._host.current) {\n elementToFocus = getLastFocusable(this._host.current, this._host.current.lastChild as HTMLElement, true);\n }\n }\n break;\n\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\n case KeyCodes.down:\n if (!containsExpandCollapseModifier && this._host.current) {\n elementToFocus = getFirstFocusable(this._host.current, this._host.current.firstChild as HTMLElement, true);\n }\n break;\n\n case KeyCodes.escape:\n this.setState({ isOpen: false });\n break;\n\n case KeyCodes.tab:\n this.setState({ isOpen: false });\n\n const document = getDocument();\n\n if (document) {\n if (ev.shiftKey) {\n getPreviousElement(document.body, this._dropDown.current, false, false, true, true)?.focus();\n } else {\n getNextElement(document.body, this._dropDown.current, false, false, true, true)?.focus();\n }\n }\n break;\n\n default:\n return;\n }\n\n if (elementToFocus) {\n elementToFocus.focus();\n }\n\n ev.stopPropagation();\n ev.preventDefault();\n };\n\n private _onZoneKeyUp = (ev: React.KeyboardEvent): void => {\n const shouldHandleKey = this._shouldHandleKeyUp(ev);\n\n if (shouldHandleKey && this.state.isOpen) {\n this.setState({ isOpen: false });\n ev.preventDefault();\n }\n };\n\n private _onDropdownClick = (ev: React.MouseEvent): void => {\n if (this.props.onClick) {\n this.props.onClick(ev);\n if (ev.defaultPrevented) {\n return;\n }\n }\n\n const { isOpen } = this.state;\n const disabled = this._isDisabled();\n\n if (!disabled && !this._shouldOpenOnFocus()) {\n this.setState({\n isOpen: !isOpen,\n });\n }\n\n this._isFocusedByClick = false; // reset\n };\n\n private _onDropdownMouseDown = (): void => {\n this._isFocusedByClick = true;\n };\n\n private _onFocus = (ev: React.FocusEvent): void => {\n const disabled = this._isDisabled();\n\n if (!disabled) {\n if (this.props.onFocus) {\n this.props.onFocus(ev);\n }\n const state: Pick | Pick = { hasFocus: true };\n if (this._shouldOpenOnFocus()) {\n (state as Pick).isOpen = true;\n }\n\n this.setState(state);\n }\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 private _isDisabled: () => boolean | undefined = () => {\n let { disabled } = this.props;\n // eslint-disable-next-line deprecation/deprecation\n const { isDisabled } = this.props;\n\n // Remove this deprecation workaround at 1.0.0\n if (disabled === undefined) {\n disabled = isDisabled;\n }\n\n return disabled;\n };\n\n private _onRenderLabel = (props: IDropdownProps): JSX.Element | null => {\n const { label, required, disabled } = props;\n\n const labelStyles = this._classNames.subComponentStyles\n ? (this._classNames.subComponentStyles.label as IStyleFunctionOrObject)\n : undefined;\n\n return label ? (\n \n {label}\n \n ) : null;\n };\n\n /**\n * Returns true if dropdown should set to open on focus.\n * Otherwise, isOpen state should be toggled on click\n */\n private _shouldOpenOnFocus(): boolean {\n const { hasFocus } = this.state;\n const { openOnKeyboardFocus } = this.props;\n return !this._isFocusedByClick && openOnKeyboardFocus === true && !hasFocus;\n }\n}\n","import { IsFocusVisibleClassName } from '../../Utilities';\nimport { RectangleEdge } from '../../Positioning';\nimport {\n FontWeights,\n HighContrastSelector,\n getGlobalClassNames,\n normalize,\n HighContrastSelectorWhite,\n getScreenSelector,\n ScreenWidthMinMedium,\n getHighContrastNoAdjustStyle,\n} from '../../Styling';\nimport type { IDropdownStyles, IDropdownStyleProps } from './Dropdown.types';\nimport type { IStyleFunction } from '../../Utilities';\nimport type { IRawStyle, IStyle } from '../../Styling';\n\nconst 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};\n\nconst DROPDOWN_HEIGHT = 32;\nconst DROPDOWN_ITEM_HEIGHT = 36;\n\nconst highContrastAdjustMixin = {\n [`${HighContrastSelector}, ${HighContrastSelectorWhite.replace('@media ', '')}`]: {\n ...getHighContrastNoAdjustStyle(),\n },\n};\n\nconst highContrastItemAndTitleStateMixin: IRawStyle = {\n selectors: {\n [HighContrastSelector]: {\n backgroundColor: 'Highlight',\n borderColor: 'Highlight',\n color: 'HighlightText',\n\n [`.${IsFocusVisibleClassName} &:focus:after`]: {\n borderColor: 'HighlightText',\n },\n },\n ['.ms-Checkbox-checkbox']: {\n [HighContrastSelector]: {\n borderColor: 'HighlightText',\n },\n },\n ...highContrastAdjustMixin,\n },\n};\n\nconst highContrastBorderState: IRawStyle = {\n selectors: {\n [HighContrastSelector]: {\n borderColor: 'Highlight',\n },\n },\n};\n\nconst MinimumScreenSelector = getScreenSelector(0, ScreenWidthMinMedium);\n\nexport const getStyles: IStyleFunction = props => {\n const {\n theme,\n hasError,\n hasLabel,\n className,\n isOpen,\n disabled,\n required,\n isRenderingPlaceholder,\n panelClassName,\n calloutClassName,\n calloutRenderEdge,\n } = props;\n\n if (!theme) {\n throw new Error('theme is undefined or null in base Dropdown getStyles function.');\n }\n\n const globalClassnames = getGlobalClassNames(GlobalClassNames, theme);\n const { palette, semanticColors, effects, fonts } = theme;\n\n const rootHoverFocusActiveSelectorNeutralDarkMixin: IStyle = {\n color: semanticColors.menuItemTextHovered,\n };\n\n const rootHoverFocusActiveSelectorNeutralPrimaryMixin: IStyle = {\n color: semanticColors.menuItemText,\n };\n\n const borderColorError: IStyle = {\n borderColor: semanticColors.errorText,\n };\n\n const dropdownItemStyle: IStyle = [\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\n '.ms-Button-flexContainer': {\n width: '100%',\n },\n },\n ];\n\n const dropdownHeaderStyle: IStyle = [\n globalClassnames.dropdownItemHeader,\n {\n ...fonts.medium,\n fontWeight: FontWeights.semibold,\n color: semanticColors.menuHeader,\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n height: DROPDOWN_ITEM_HEIGHT,\n lineHeight: DROPDOWN_ITEM_HEIGHT,\n cursor: 'default',\n padding: '0 8px',\n userSelect: 'none',\n textAlign: 'left',\n selectors: {\n [HighContrastSelector]: {\n color: 'GrayText',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\n ];\n\n const selectedItemBackgroundColor = semanticColors.menuItemBackgroundPressed;\n\n const itemSelectors = (isSelected: boolean = false) => {\n return {\n selectors: {\n '&:hover': [\n {\n color: semanticColors.menuItemTextHovered,\n backgroundColor: !isSelected ? semanticColors.menuItemBackgroundHovered : selectedItemBackgroundColor,\n },\n highContrastItemAndTitleStateMixin,\n ],\n '&.is-multi-select:hover': [\n { backgroundColor: !isSelected ? 'transparent' : selectedItemBackgroundColor },\n highContrastItemAndTitleStateMixin,\n ],\n '&:active:hover': [\n {\n color: semanticColors.menuItemTextHovered,\n backgroundColor: !isSelected\n ? semanticColors.menuItemBackgroundPressed\n : semanticColors.menuItemBackgroundHovered,\n },\n highContrastItemAndTitleStateMixin,\n ],\n [`.${IsFocusVisibleClassName} &:focus:after, :host(.${IsFocusVisibleClassName}) &:focus:after`]: {\n left: 0,\n top: 0,\n bottom: 0,\n right: 0,\n [HighContrastSelector]: {\n inset: '2px',\n },\n },\n [HighContrastSelector]: {\n border: 'none',\n },\n },\n };\n };\n\n const dropdownItemSelected: IStyle = [\n ...dropdownItemStyle,\n {\n backgroundColor: selectedItemBackgroundColor,\n color: semanticColors.menuItemTextHovered,\n },\n itemSelectors(true),\n highContrastItemAndTitleStateMixin,\n ];\n\n const dropdownItemDisabled: IStyle = [\n ...dropdownItemStyle,\n {\n color: semanticColors.disabledText,\n cursor: 'default',\n selectors: {\n [HighContrastSelector]: {\n color: 'GrayText',\n border: 'none',\n },\n },\n },\n ];\n\n const titleOpenBorderRadius =\n calloutRenderEdge === RectangleEdge.bottom\n ? `${effects.roundedCorner2} ${effects.roundedCorner2} 0 0`\n : `0 0 ${effects.roundedCorner2} ${effects.roundedCorner2}`;\n\n const calloutOpenBorderRadius =\n calloutRenderEdge === RectangleEdge.bottom\n ? `0 0 ${effects.roundedCorner2} ${effects.roundedCorner2}`\n : `${effects.roundedCorner2} ${effects.roundedCorner2} 0 0`;\n\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: {\n ['&:hover .' + globalClassnames.title]: [\n !disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,\n { borderColor: isOpen ? palette.neutralSecondary : palette.neutralPrimary },\n highContrastBorderState,\n ],\n ['&:focus .' + globalClassnames.title]: [\n !disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,\n { selectors: { [HighContrastSelector]: { color: 'Highlight' } } },\n ],\n\n ['&: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\n selectors: {\n [HighContrastSelector]: {\n color: 'Highlight',\n },\n },\n },\n ],\n ['&:active .' + globalClassnames.title]: [\n !disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,\n { borderColor: palette.themePrimary },\n highContrastBorderState,\n ],\n\n ['&:hover .' + globalClassnames.caretDown]: !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,\n ['&:focus .' + globalClassnames.caretDown]: [\n !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,\n { selectors: { [HighContrastSelector]: { color: 'Highlight' } } },\n ],\n ['&:active .' + globalClassnames.caretDown]: !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,\n\n ['&:hover .' + globalClassnames.titleIsPlaceHolder]:\n !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,\n ['&:focus .' + globalClassnames.titleIsPlaceHolder]:\n !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,\n ['&:active .' + globalClassnames.titleIsPlaceHolder]:\n !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,\n\n ['&:hover .' + globalClassnames.titleHasError]: borderColorError,\n ['&:active .' + globalClassnames.titleHasError]: borderColorError,\n },\n },\n isOpen && 'is-open',\n disabled && 'is-disabled',\n required && 'is-required',\n required &&\n !hasLabel && {\n selectors: {\n ':before': {\n content: `'*'`,\n color: semanticColors.errorText,\n position: 'absolute',\n top: -5,\n right: -10,\n },\n [HighContrastSelector]: {\n selectors: {\n ':after': {\n right: -14, // moving the * 4 pixel to right to alleviate border clipping in HC mode.\n },\n },\n },\n },\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: {\n [HighContrastSelector]: {\n border: '1px solid GrayText',\n color: 'GrayText',\n backgroundColor: 'Window',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\n ],\n caretDownWrapper: [\n globalClassnames.caretDownWrapper,\n {\n height: DROPDOWN_HEIGHT,\n lineHeight: DROPDOWN_HEIGHT - 2, // height minus the border\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: {\n [HighContrastSelector]: { color: 'GrayText', ...getHighContrastNoAdjustStyle() },\n },\n },\n ],\n errorMessage: { color: semanticColors.errorText, ...theme.fonts.small, paddingTop: 5 },\n callout: [\n globalClassnames.callout,\n {\n boxShadow: effects.elevation8,\n borderRadius: calloutOpenBorderRadius,\n selectors: {\n ['.ms-Callout-main']: { borderRadius: calloutOpenBorderRadius },\n },\n },\n calloutClassName,\n ],\n dropdownItemsWrapper: { selectors: { '&:focus': { outline: 0 } } },\n dropdownItems: [globalClassnames.dropdownItems, { display: 'block' }],\n dropdownItem: [...dropdownItemStyle, itemSelectors()],\n dropdownItemSelected,\n dropdownItemDisabled,\n dropdownItemSelectedAndDisabled: [dropdownItemSelected, dropdownItemDisabled, { backgroundColor: 'transparent' }],\n dropdownItemHidden: [...dropdownItemStyle, { display: 'none' }],\n dropdownDivider: [globalClassnames.dropdownDivider, { height: 1, backgroundColor: semanticColors.bodyDivider }],\n dropdownDividerHidden: [globalClassnames.dropdownDivider, { display: 'none' }],\n dropdownOptionText: [\n globalClassnames.dropdownOptionText,\n {\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n minWidth: 0,\n maxWidth: '100%',\n wordWrap: 'break-word',\n overflowWrap: 'break-word',\n margin: '1px',\n },\n ],\n dropdownItemHeader: dropdownHeaderStyle,\n dropdownItemHeaderHidden: [...dropdownHeaderStyle, { display: 'none' }],\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: {\n // eslint-disable-next-line @fluentui/max-len\n [`.${IsFocusVisibleClassName} &:focus + label::before, :host(.${IsFocusVisibleClassName}) &:focus + label::before`]:\n {\n outlineOffset: '0px',\n },\n },\n },\n },\n panel: {\n root: [panelClassName],\n main: {\n selectors: {\n // In case of extra small screen sizes\n [MinimumScreenSelector]: {\n // panelWidth xs\n width: 272,\n },\n },\n },\n contentInner: { padding: '0 0 20px' },\n },\n },\n };\n};\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { DropdownBase } from './Dropdown.base';\nimport { getStyles } from './Dropdown.styles';\nimport type { IDropdownProps, IDropdownStyleProps, IDropdownStyles } from './Dropdown.types';\n\nexport const Dropdown: React.FunctionComponent = styled<\n IDropdownProps,\n IDropdownStyleProps,\n IDropdownStyles\n>(DropdownBase, getStyles, undefined, {\n scope: 'Dropdown',\n});\nDropdown.displayName = 'Dropdown';\n","import * as React from 'react';\n\nimport { KeyCodes } from '../../../Utilities';\nimport type { IReactProps, IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../../Utilities';\nimport type { IPersonaProps } from '../../Persona/Persona.types';\nimport type { IStyle, ITheme } from '../../../Styling';\nimport type { ISpinnerStyleProps } from '../../Spinner/Spinner.types';\nimport type { ISuggestionItemProps } from './SuggestionsItem.types';\nimport { IIconProps } from '../../Icon/Icon.types';\n/**\n * Suggestions component.\n * {@docCategory Pickers}\n */\nexport interface ISuggestions {\n /** Execute the action selected. Can be SearchMore or ForceResolve actions. */\n executeSelectedAction: () => void;\n\n /** Focus on the ForceResolve action above the suggestions. If not available then focus on SearchMore action. */\n focusAboveSuggestions: () => void;\n\n /** Focus on the SearchMore action below the suggestions. If not available then focus on ForceResolve action. */\n focusBelowSuggestions: () => void;\n\n /** Focus the SearchMore action button. */\n focusSearchForMoreButton: () => void;\n\n /** Whether it has any suggested actions like ForceResolve or SearchMore. */\n hasSuggestedAction: () => boolean;\n\n /** Whether any of the suggested actions (ForceResolve or SearchMore) is selected. */\n hasSuggestedActionSelected: () => boolean;\n\n /** Returns true if the event was handled, false otherwise. */\n tryHandleKeyDown: (keyCode: number, currentSuggestionIndex: number) => boolean;\n}\n\n/**\n * Suggestions props interface. Refers to the entire container holding all the suggestions.\n * Type T is the type of the items that are displayed.\n * {@docCategory Pickers}\n */\nexport interface ISuggestionsProps extends IReactProps {\n /**\n * Optional callback to access the ISuggestions interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject>;\n\n /**\n * How the suggestion should look in the suggestion list.\n */\n onRenderSuggestion: (props: T, suggestionItemProps: ISuggestionItemProps) => JSX.Element;\n\n /**\n * What should occur when a suggestion is clicked\n */\n onSuggestionClick: (ev?: React.MouseEvent, item?: any, index?: number) => void;\n\n /**\n * The list of Suggestions that will be displayed\n */\n suggestions: ISuggestionModel[];\n\n /**\n * How the \"no result found\" should look in the suggestion list.\n */\n onRenderNoResultFound?: IRenderFunction;\n\n /**\n * The text that appears at the top of the suggestions list.\n */\n suggestionsHeaderText?: string;\n\n /**\n * The text that should appear at the top of the most recently used box.\n */\n mostRecentlyUsedHeaderText?: string;\n\n /**\n * The icon that appears indicating to the user that they can search for more results.\n */\n searchForMoreIcon?: IIconProps;\n\n /**\n * The text that appears indicating to the user that they can search for more results.\n */\n searchForMoreText?: string;\n\n /**\n * The callback that should be called when the user attempts to get more results\n */\n onGetMoreResults?: () => void;\n\n /**\n * The text that appears indicating to the use to force resolve the input\n */\n forceResolveText?: string;\n\n /**\n * The callback that should be called to see if the force resolve command should be shown\n */\n showForceResolve?: () => boolean;\n\n /**\n * The callback that should be called when the user attempts to use the input text as as item\n */\n createGenericItem?: () => void;\n\n /**\n * The CSS className of the suggestions root.\n */\n className?: string;\n\n /**\n * The CSS className of the suggestions list\n */\n suggestionsClassName?: string;\n\n /**\n * The text that should appear if there is a search error.\n *\n * @deprecated Use noResultsFoundText instead.\n */\n searchErrorText?: string;\n\n /**\n * The text that should appear if no results are found when searching.\n */\n noResultsFoundText?: string;\n\n /**\n * The className of the suggestion item.\n */\n suggestionsItemClassName?: string;\n\n /**\n * Used to indicate whether or not the user can request more suggestions.\n * Dictates whether or not the searchForMore button is displayed.\n */\n moreSuggestionsAvailable?: boolean;\n\n /**\n * Used to indicate whether or not the suggestions are loading.\n */\n isLoading?: boolean;\n\n /**\n * Used to indicate whether or not the suggestions are taking an extended amount of time to load.\n */\n isExtendedLoading?: boolean;\n\n /**\n * Used to indicate whether or not the component is searching for more results.\n */\n isSearching?: boolean;\n\n /**\n * The text to display while the results are loading.\n */\n loadingText?: string;\n\n /**\n * The text to display while searching for more results in a limited suggestions list.\n */\n searchingText?: string;\n\n /**\n * Indicates if a short list of recent suggestions should be shown.\n */\n isMostRecentlyUsedVisible?: boolean;\n\n /**\n * Function to fire when one of the optional remove buttons on a suggestion is clicked.\n *\n * TODO (adjective-object) remove IPersonaprops before the next major version bump\n */\n onSuggestionRemove?: (ev?: React.MouseEvent, item?: T | IPersonaProps, index?: number) => void;\n\n /**\n * Indicates if the text in resultsFooter or resultsFooterFull should be shown at the end of the suggestion list.\n * @defaultvalue true\n */\n isResultsFooterVisible?: boolean;\n\n /**\n * Maximum number of suggestions to show in the full suggestion list.\n */\n resultsMaximumNumber?: number;\n\n /**\n * A renderer that adds an element at the end of the suggestions list it has more items than resultsMaximumNumber.\n * This should not include interactive elements as the footer is not focusable.\n */\n resultsFooterFull?: (props: ISuggestionsProps) => JSX.Element;\n\n /**\n * A renderer that adds an element at the end of the suggestions list it has fewer items than resultsMaximumNumber.\n * This should not include interactive elements as the footer is not focusable.\n */\n resultsFooter?: (props: ISuggestionsProps) => JSX.Element;\n\n /**\n * Indicates whether to show a button with each suggestion to remove that suggestion.\n */\n showRemoveButtons?: boolean;\n\n /**\n * Screen reader message to read when there are suggestions available.\n */\n suggestionsAvailableAlertText?: string;\n\n /**\n * A function that resets focus to the expected item in the suggestion list\n */\n refocusSuggestions?: (keyCode: KeyCodes) => void;\n\n /**\n * An ARIA label for the container that is the parent of the suggestions.\n */\n suggestionsContainerAriaLabel?: string;\n\n /**\n * An ARIA label to use for the buttons to remove individual suggestions.\n */\n removeSuggestionAriaLabel?: string;\n\n /**\n * The string that will be used as the suggestionsListId.\n * Will be used by the BasePicker to keep track of the list for aria.\n */\n suggestionsListId?: string;\n\n /** Call to provide customized styling that will layer on top of the variant rules. */\n styles?: IStyleFunctionOrObject;\n\n /** Theme provided by High-Order Component. */\n theme?: ITheme;\n\n /**\n * Props for the icon used in the item's remove button.\n * @defaultvalue `{ iconName:'Cancel' }`\n */\n removeButtonIconProps?: IIconProps;\n}\n\n/**\n * The props needed to construct Suggestions styles.\n * {@docCategory Pickers}\n */\nexport type ISuggestionsStyleProps = Required, 'theme'>> &\n Pick, 'className' | 'suggestionsClassName'> & {\n /** Whether the forceResolve actionButton is selected. */\n forceResolveButtonSelected?: boolean;\n\n /** Whether the searchForMore actionButton is selected. */\n searchForMoreButtonSelected?: boolean;\n };\n\n/**\n * Represents the stylable areas of the Suggestions.\n * {@docCategory Pickers}\n */\nexport interface ISuggestionsStyles {\n /** Root element of the suggestions outer wrapper. */\n root: IStyle;\n\n /** Refers to the suggestions container. */\n suggestionsContainer: IStyle;\n\n /** Refers to the title rendered for suggestions container header and/or footer (if provided). */\n title: IStyle;\n\n /** Refers to the 'Force resolve' actionButton. */\n forceResolveButton: IStyle;\n\n /** Refers to the 'Search for more' actionButton. */\n searchForMoreButton: IStyle;\n\n /** Refers to the text rendered when no suggestions are found. */\n noSuggestions: IStyle;\n\n /** Refers to the text displaying if more suggestions available. */\n suggestionsAvailable: IStyle;\n\n /** SubComponents (Spinner) styles. */\n subComponentStyles: ISuggestionsSubComponentStyles;\n}\n\n/**\n * Styles interface of the SubComponents rendered within PeoplePickerItemSelected.\n * {@docCategory Pickers}\n */\nexport interface ISuggestionsSubComponentStyles {\n /** Refers to the Spinner rendered within the Suggestions when searching or loading suggestions. */\n spinner: IStyleFunctionOrObject;\n}\n\n/**\n * SuggestionModel interface.\n * Type T is the type of the item that is suggested (Persona, Tag or any other custom picker).\n * {@docCategory Pickers}\n */\nexport interface ISuggestionModel {\n /** The suggested item of the type T */\n item: T;\n\n /** Whether the suggested item is selected or not. */\n selected: boolean;\n\n /** Aria-label string for each suggested item. */\n ariaLabel?: string;\n}\n\n/**\n * Enum to help identify which suggestions action button is selected.\n * {@docCategory Pickers}\n */\nexport enum SuggestionActionType {\n /** None of the actions is selected. */\n none,\n\n /** ForceResolve action is selected. */\n forceResolve,\n\n /** SearchMore action is selected. */\n searchMore,\n}\n","/* eslint-disable */\nimport { loadStyles } from '@microsoft/load-themed-styles';\nloadStyles([{\"rawString\":\".root_8c91000a{min-width:260px}.suggestionsItem_8c91000a{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_8c91000a:hover{background:\"},{\"theme\":\"neutralLighter\",\"defaultValue\":\"#f3f2f1\"},{\"rawString\":\"}.suggestionsItem_8c91000a:hover .closeButton_8c91000a{display:block}.suggestionsItem_8c91000a.suggestionsItemIsSuggested_8c91000a{background:\"},{\"theme\":\"neutralLight\",\"defaultValue\":\"#edebe9\"},{\"rawString\":\"}.suggestionsItem_8c91000a.suggestionsItemIsSuggested_8c91000a:hover{background:\"},{\"theme\":\"neutralTertiaryAlt\",\"defaultValue\":\"#c8c6c4\"},{\"rawString\":\"}@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){.suggestionsItem_8c91000a.suggestionsItemIsSuggested_8c91000a:hover{background:Highlight;color:HighlightText}}@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){.suggestionsItem_8c91000a.suggestionsItemIsSuggested_8c91000a{background:Highlight;color:HighlightText;-ms-high-contrast-adjust:none}}.suggestionsItem_8c91000a.suggestionsItemIsSuggested_8c91000a .closeButton_8c91000a:hover{background:\"},{\"theme\":\"neutralTertiary\",\"defaultValue\":\"#a19f9d\"},{\"rawString\":\";color:\"},{\"theme\":\"neutralPrimary\",\"defaultValue\":\"#323130\"},{\"rawString\":\"}@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){.suggestionsItem_8c91000a.suggestionsItemIsSuggested_8c91000a .itemButton_8c91000a{color:HighlightText}}.suggestionsItem_8c91000a .closeButton_8c91000a{display:none;color:\"},{\"theme\":\"neutralSecondary\",\"defaultValue\":\"#605e5c\"},{\"rawString\":\"}.suggestionsItem_8c91000a .closeButton_8c91000a:hover{background:\"},{\"theme\":\"neutralLight\",\"defaultValue\":\"#edebe9\"},{\"rawString\":\"}.actionButton_8c91000a{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_8c91000a{padding-left:8px}[dir=rtl] .actionButton_8c91000a{padding-right:8px}html[dir=ltr] .actionButton_8c91000a{text-align:left}html[dir=rtl] .actionButton_8c91000a{text-align:right}.actionButton_8c91000a:hover{background-color:\"},{\"theme\":\"neutralLight\",\"defaultValue\":\"#edebe9\"},{\"rawString\":\";cursor:pointer}.actionButton_8c91000a:active,.actionButton_8c91000a:focus{background-color:\"},{\"theme\":\"themeLight\",\"defaultValue\":\"#c7e0f4\"},{\"rawString\":\"}.actionButton_8c91000a .ms-Button-icon{font-size:16px;width:25px}.actionButton_8c91000a .ms-Button-label{margin:0 4px 0 9px}html[dir=rtl] .actionButton_8c91000a .ms-Button-label{margin:0 9px 0 4px}.buttonSelected_8c91000a{background-color:\"},{\"theme\":\"themeLight\",\"defaultValue\":\"#c7e0f4\"},{\"rawString\":\"}.suggestionsTitle_8c91000a{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_8c91000a{overflow-y:auto;overflow-x:hidden;max-height:300px;border-bottom:1px solid \"},{\"theme\":\"neutralLight\",\"defaultValue\":\"#edebe9\"},{\"rawString\":\"}.suggestionsNone_8c91000a{text-align:center;color:#797775;font-size:12px;line-height:30px}.suggestionsSpinner_8c91000a{margin:5px 0;white-space:nowrap;line-height:20px;font-size:12px}html[dir=ltr] .suggestionsSpinner_8c91000a{padding-left:14px}html[dir=rtl] .suggestionsSpinner_8c91000a{padding-right:14px}html[dir=ltr] .suggestionsSpinner_8c91000a{text-align:left}html[dir=rtl] .suggestionsSpinner_8c91000a{text-align:right}.suggestionsSpinner_8c91000a .ms-Spinner-circle{display:inline-block;vertical-align:middle}.suggestionsSpinner_8c91000a .ms-Spinner-label{display:inline-block;margin:0 10px 0 16px;vertical-align:middle}html[dir=rtl] .suggestionsSpinner_8c91000a .ms-Spinner-label{margin:0 16px 0 10px}.itemButton_8c91000a.itemButton_8c91000a{width:100%;padding:0;min-width:0;height:100%}@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){.itemButton_8c91000a.itemButton_8c91000a{color:WindowText}}.itemButton_8c91000a.itemButton_8c91000a:hover{color:\"},{\"theme\":\"neutralDark\",\"defaultValue\":\"#201f1e\"},{\"rawString\":\"}.closeButton_8c91000a.closeButton_8c91000a{padding:0 4px;height:auto;width:32px}@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){.closeButton_8c91000a.closeButton_8c91000a{color:WindowText}}.closeButton_8c91000a.closeButton_8c91000a:hover{background:\"},{\"theme\":\"neutralTertiaryAlt\",\"defaultValue\":\"#c8c6c4\"},{\"rawString\":\";color:\"},{\"theme\":\"neutralDark\",\"defaultValue\":\"#201f1e\"},{\"rawString\":\"}.suggestionsAvailable_8c91000a{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\"}]);\nexport const root = \"root_8c91000a\";\nexport const suggestionsItem = \"suggestionsItem_8c91000a\";\nexport const closeButton = \"closeButton_8c91000a\";\nexport const suggestionsItemIsSuggested = \"suggestionsItemIsSuggested_8c91000a\";\nexport const itemButton = \"itemButton_8c91000a\";\nexport const actionButton = \"actionButton_8c91000a\";\nexport const buttonSelected = \"buttonSelected_8c91000a\";\nexport const suggestionsTitle = \"suggestionsTitle_8c91000a\";\nexport const suggestionsContainer = \"suggestionsContainer_8c91000a\";\nexport const suggestionsNone = \"suggestionsNone_8c91000a\";\nexport const suggestionsSpinner = \"suggestionsSpinner_8c91000a\";\nexport const suggestionsAvailable = \"suggestionsAvailable_8c91000a\";","import * as React from 'react';\n\nimport { classNamesFunction, css, initializeComponentRef } from '../../../Utilities';\nimport { CommandButton, IconButton } from '../../../Button';\nimport * as stylesImport from './Suggestions.scss';\nimport type { IProcessedStyleSet } from '../../../Styling';\nimport type { ISuggestionItemProps, ISuggestionsItemStyleProps, ISuggestionsItemStyles } from './SuggestionsItem.types';\n\nconst legacyStyles: any = stylesImport;\n\nconst getClassNames = classNamesFunction();\n\n/**\n * {@docCategory Pickers}\n */\nexport class SuggestionsItem extends React.Component, {}> {\n constructor(props: ISuggestionItemProps) {\n super(props);\n\n initializeComponentRef(this);\n }\n\n public render(): JSX.Element {\n const {\n suggestionModel,\n RenderSuggestion,\n onClick,\n className,\n id,\n onRemoveItem,\n isSelectedOverride,\n removeButtonAriaLabel,\n styles,\n theme,\n removeButtonIconProps,\n } = this.props;\n\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 const classNames: Partial> = styles\n ? getClassNames(styles, {\n theme: theme!,\n className,\n suggested: suggestionModel.selected || isSelectedOverride,\n })\n : {\n root: css(\n 'ms-Suggestions-item',\n legacyStyles.suggestionsItem,\n {\n ['is-suggested ' + legacyStyles.suggestionsItemIsSuggested]:\n suggestionModel.selected || isSelectedOverride,\n },\n className,\n ),\n itemButton: css('ms-Suggestions-itemButton', legacyStyles.itemButton),\n closeButton: css('ms-Suggestions-closeButton', legacyStyles.closeButton),\n };\n\n return (\n
    \n \n {RenderSuggestion(suggestionModel.item, this.props)}\n \n {this.props.showRemoveButton ? (\n \n ) : null}\n
    \n );\n }\n}\n","import { getGlobalClassNames, HighContrastSelector, getHighContrastNoAdjustStyle } from '../../../Styling';\nimport { IsFocusVisibleClassName } from '../../../Utilities';\nimport type { ISuggestionsItemStyleProps, ISuggestionsItemStyles } from './SuggestionsItem.types';\n\nexport const SuggestionsItemGlobalClassNames = {\n root: 'ms-Suggestions-item',\n itemButton: 'ms-Suggestions-itemButton',\n closeButton: 'ms-Suggestions-closeButton',\n isSuggested: 'is-suggested',\n};\n\nexport function getStyles(props: ISuggestionsItemStyleProps): ISuggestionsItemStyles {\n const { className, theme, suggested } = props;\n\n const { palette, semanticColors } = theme;\n\n const classNames = getGlobalClassNames(SuggestionsItemGlobalClassNames, theme);\n\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: {\n [`.${IsFocusVisibleClassName} &, :host(.${IsFocusVisibleClassName}) &`]: {\n selectors: {\n [`.${classNames.closeButton}`]: {\n display: 'block',\n background: semanticColors.menuItemBackgroundPressed,\n },\n },\n },\n ':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 },\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: {\n [HighContrastSelector]: {\n color: 'WindowText',\n selectors: {\n ':hover': {\n background: 'Highlight',\n color: 'HighlightText',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\n ':hover': {\n color: semanticColors.menuItemTextHovered,\n },\n },\n },\n suggested && [\n classNames.isSuggested,\n {\n background: semanticColors.menuItemBackgroundPressed,\n selectors: {\n ':hover': {\n background: semanticColors.menuDivider,\n },\n [HighContrastSelector]: {\n background: 'Highlight',\n color: 'HighlightText',\n ...getHighContrastNoAdjustStyle(),\n },\n },\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: {\n ':hover, :active': {\n background: palette.neutralTertiaryAlt,\n color: palette.neutralDark,\n },\n [HighContrastSelector]: {\n color: 'WindowText',\n },\n },\n },\n suggested && {\n [`.${IsFocusVisibleClassName} &, :host(.${IsFocusVisibleClassName}) &`]: {\n selectors: {\n ':hover, :active': {\n background: palette.neutralTertiary,\n },\n },\n },\n selectors: {\n ':hover, :active': {\n background: palette.neutralTertiary,\n color: palette.neutralPrimary,\n },\n },\n },\n ],\n };\n}\n","import * as React from 'react';\n\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';\nimport type { IStyleFunctionOrObject } from '../../../Utilities';\nimport type { IProcessedStyleSet } from '../../../Styling';\nimport type { IButton } from '../../../Button';\nimport type { ISpinnerStyleProps, ISpinnerStyles } from '../../../Spinner';\nimport type { ISuggestionsProps, ISuggestionsStyleProps, ISuggestionsStyles } from './Suggestions.types';\nimport type { ISuggestionItemProps, ISuggestionsItemStyleProps, ISuggestionsItemStyles } from './SuggestionsItem.types';\n\nconst legacyStyles: any = stylesImport;\n\nconst getClassNames = classNamesFunction();\n\nexport interface ISuggestionsState {\n selectedActionType: SuggestionActionType;\n}\n\nconst StyledSuggestionsItem = styled, ISuggestionsItemStyleProps, ISuggestionsItemStyles>(\n SuggestionsItem,\n suggestionsItemStyles,\n undefined,\n {\n scope: 'SuggestionItem',\n },\n);\n\n/**\n * {@docCategory Pickers}\n */\nexport class Suggestions extends React.Component, ISuggestionsState> {\n protected _forceResolveButton = React.createRef();\n protected _searchForMoreButton = React.createRef();\n protected _selectedElement = React.createRef();\n protected _scrollContainer = React.createRef();\n private activeSelectedElement: HTMLDivElement | null;\n private _classNames: Partial>;\n\n constructor(suggestionsProps: ISuggestionsProps) {\n super(suggestionsProps);\n\n initializeComponentRef(this);\n\n this.state = {\n selectedActionType: SuggestionActionType.none,\n };\n }\n\n public componentDidMount(): void {\n this.scrollSelected();\n this.activeSelectedElement = this._selectedElement ? this._selectedElement.current : null;\n }\n\n public componentDidUpdate(): void {\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\n public render(): JSX.Element {\n const {\n forceResolveText,\n mostRecentlyUsedHeaderText,\n searchForMoreIcon,\n searchForMoreText,\n className,\n moreSuggestionsAvailable,\n noResultsFoundText,\n suggestions,\n isLoading,\n isSearching,\n loadingText,\n onRenderNoResultFound,\n searchingText,\n isMostRecentlyUsedVisible,\n resultsMaximumNumber,\n resultsFooterFull,\n resultsFooter,\n isResultsFooterVisible = true,\n suggestionsHeaderText,\n suggestionsClassName,\n theme,\n styles,\n suggestionsListId,\n suggestionsContainerAriaLabel,\n } = this.props;\n\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,\n 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, {\n ['is-selected ' + legacyStyles.buttonSelected]:\n this.state.selectedActionType === SuggestionActionType.searchMore,\n }),\n forceResolveButton: css('ms-forceResolve-button', legacyStyles.actionButton, {\n ['is-selected ' + legacyStyles.buttonSelected]:\n this.state.selectedActionType === SuggestionActionType.forceResolve,\n }),\n suggestionsAvailable: css('ms-Suggestions-suggestionsAvailable', legacyStyles.suggestionsAvailable),\n suggestionsContainer: css(\n 'ms-Suggestions-container',\n legacyStyles.suggestionsContainer,\n suggestionsClassName,\n ),\n noSuggestions: css('ms-Suggestions-none', legacyStyles.suggestionsNone),\n };\n\n const spinnerStyles = this._classNames.subComponentStyles\n ? (this._classNames.subComponentStyles.spinner as IStyleFunctionOrObject)\n : undefined;\n\n // TODO: cleanup after refactor of pickers to composition pattern and remove SASS support.\n const spinnerClassNameOrStyles = styles\n ? { styles: spinnerStyles }\n : {\n className: css('ms-Suggestions-spinner', legacyStyles.suggestionsSpinner),\n };\n\n const noResults = () => {\n const defaultRender = () => {\n return
    {noResultsFoundText}
    ;\n };\n\n return (\n // This ID can be used by the parent to set aria-activedescendant to this\n
    \n {onRenderNoResultFound ? onRenderNoResultFound(undefined, defaultRender) : defaultRender()}\n
    \n );\n };\n\n // MostRecently Used text should supercede the header text if it's there and available.\n let headerText: string | undefined = suggestionsHeaderText;\n if (isMostRecentlyUsedVisible && mostRecentlyUsedHeaderText) {\n headerText = mostRecentlyUsedHeaderText;\n }\n\n let footerTitle: ((props: ISuggestionsProps) => JSX.Element) | undefined = undefined;\n if (isResultsFooterVisible) {\n footerTitle = suggestions.length >= (resultsMaximumNumber as number) ? resultsFooterFull : resultsFooter;\n }\n\n const hasNoSuggestions = (!suggestions || !suggestions.length) && !isLoading;\n\n const forceResolveId =\n this.state.selectedActionType === SuggestionActionType.forceResolve ? 'sug-selectedAction' : undefined;\n const searchForMoreId =\n this.state.selectedActionType === SuggestionActionType.searchMore ? 'sug-selectedAction' : undefined;\n\n return (\n \n \n\n {headerText ?
    {headerText}
    : null}\n {forceResolveText && this._shouldShowForceResolve() && (\n \n {forceResolveText}\n \n )}\n {isLoading && }\n {hasNoSuggestions ? noResults() : this._renderSuggestions()}\n {searchForMoreText && moreSuggestionsAvailable && (\n \n {searchForMoreText}\n \n )}\n {isSearching ? : null}\n {footerTitle && !moreSuggestionsAvailable && !isMostRecentlyUsedVisible && !isSearching ? (\n
    {footerTitle(this.props)}
    \n ) : null}\n
    \n );\n }\n\n /**\n * Returns true if the event was handled, false otherwise\n */\n public tryHandleKeyDown = (keyCode: number, currentSuggestionIndex: number): boolean => {\n let isEventHandled = false;\n let newSelectedActionType = null;\n const currentSelectedAction = this.state.selectedActionType;\n const 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 } else if (this._searchForMoreButton.current) {\n newSelectedActionType = SuggestionActionType.searchMore;\n } else {\n newSelectedActionType = SuggestionActionType.forceResolve;\n }\n break;\n case SuggestionActionType.searchMore:\n if (this._forceResolveButton.current) {\n newSelectedActionType = SuggestionActionType.forceResolve;\n } else if (suggestionLength > 0) {\n this._refocusOnSuggestions(keyCode);\n newSelectedActionType = SuggestionActionType.none;\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 } else if (keyCode === KeyCodes.up) {\n switch (currentSelectedAction) {\n case SuggestionActionType.forceResolve:\n if (this._searchForMoreButton.current) {\n newSelectedActionType = SuggestionActionType.searchMore;\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 } 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\n if (newSelectedActionType !== null) {\n this.setState({ selectedActionType: newSelectedActionType });\n isEventHandled = true;\n }\n\n return isEventHandled;\n };\n\n public hasSuggestedAction(): boolean {\n return !!this._searchForMoreButton.current || !!this._forceResolveButton.current;\n }\n\n public hasSuggestedActionSelected(): boolean {\n return this.state.selectedActionType !== SuggestionActionType.none;\n }\n\n public executeSelectedAction(): void {\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\n public focusAboveSuggestions(): void {\n if (this._forceResolveButton.current) {\n this.setState({ selectedActionType: SuggestionActionType.forceResolve });\n } else if (this._searchForMoreButton.current) {\n this.setState({ selectedActionType: SuggestionActionType.searchMore });\n }\n }\n\n public focusBelowSuggestions(): void {\n if (this._searchForMoreButton.current) {\n this.setState({ selectedActionType: SuggestionActionType.searchMore });\n } else if (this._forceResolveButton.current) {\n this.setState({ selectedActionType: SuggestionActionType.forceResolve });\n }\n }\n\n public focusSearchForMoreButton(): void {\n if (this._searchForMoreButton.current) {\n this._searchForMoreButton.current.focus();\n }\n }\n\n public scrollSelected(): void {\n if (\n this._selectedElement.current &&\n this._scrollContainer.current &&\n this._scrollContainer.current.scrollTo !== undefined\n ) {\n const { offsetHeight, offsetTop } = this._selectedElement.current;\n const { offsetHeight: parentOffsetHeight, scrollTop } = this._scrollContainer.current;\n\n const isAbove = offsetTop < scrollTop;\n const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\n\n if (isAbove) {\n this._scrollContainer.current.scrollTo(0, offsetTop);\n } else if (isBelow) {\n this._scrollContainer.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight);\n }\n }\n }\n\n private _getAlertText = () => {\n const {\n isLoading,\n isSearching,\n suggestions,\n suggestionsAvailableAlertText,\n noResultsFoundText,\n isExtendedLoading,\n loadingText,\n } = this.props;\n\n if (!isLoading && !isSearching) {\n if (suggestions.length > 0) {\n return suggestionsAvailableAlertText || '';\n }\n if (noResultsFoundText) {\n return noResultsFoundText;\n }\n } else if (isLoading && isExtendedLoading) {\n return loadingText || '';\n }\n return '';\n };\n\n private _renderSuggestions(): JSX.Element | null {\n const {\n onRenderSuggestion,\n removeSuggestionAriaLabel,\n suggestionsItemClassName,\n resultsMaximumNumber,\n showRemoveButtons,\n removeButtonIconProps,\n } = this.props;\n\n let { suggestions } = this.props;\n\n const StyledTypedSuggestionsItem: React.FunctionComponent> = StyledSuggestionsItem;\n\n let selectedIndex = -1;\n suggestions.some((element, index) => {\n if (element.selected) {\n selectedIndex = index;\n return true;\n }\n return false;\n });\n\n if (resultsMaximumNumber) {\n suggestions =\n selectedIndex >= resultsMaximumNumber\n ? suggestions.slice(selectedIndex - resultsMaximumNumber + 1, selectedIndex + 1)\n : suggestions.slice(0, resultsMaximumNumber);\n }\n\n if (suggestions.length === 0) {\n return null;\n }\n\n return (\n
    \n {suggestions.map((suggestion, index) => (\n \n \n
    \n ))}\n \n );\n }\n\n private _getMoreResults = (): void => {\n if (this.props.onGetMoreResults) {\n this.props.onGetMoreResults();\n\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\n private _forceResolve = (): void => {\n if (this.props.createGenericItem) {\n this.props.createGenericItem();\n }\n };\n\n private _shouldShowForceResolve = (): boolean => {\n return this.props.showForceResolve ? this.props.showForceResolve() : false;\n };\n\n private _onClickTypedSuggestionsItem = (item: T, index: number): ((ev: React.MouseEvent) => void) => {\n return (ev: React.MouseEvent): void => {\n this.props.onSuggestionClick(ev, item, index);\n };\n };\n\n private _refocusOnSuggestions = (keyCode: number): void => {\n if (typeof this.props.refocusSuggestions === 'function') {\n this.props.refocusSuggestions(keyCode);\n }\n };\n\n private _onRemoveTypedSuggestionsItem = (item: T, index: number): ((ev: React.MouseEvent) => void) => {\n return (ev: React.MouseEvent): void => {\n const onSuggestionRemove = this.props.onSuggestionRemove!;\n onSuggestionRemove(ev, item, index);\n ev.stopPropagation();\n };\n };\n}\n","import {\n getGlobalClassNames,\n getHighContrastNoAdjustStyle,\n HighContrastSelector,\n hiddenContentStyle,\n} from '../../../Styling';\nimport type { IStyle } from '../../../Styling';\nimport type { ISuggestionsStyleProps, ISuggestionsStyles } from './Suggestions.types';\n\nconst 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};\n\nexport function getStyles(props: ISuggestionsStyleProps): ISuggestionsStyles {\n const { className, suggestionsClassName, theme, forceResolveButtonSelected, searchForMoreButtonSelected } = props;\n\n const { palette, semanticColors, fonts } = theme;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n const actionButtonStyles: IStyle = {\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\n const actionButtonSelectedStyles: IStyle = {\n backgroundColor: palette.themeLight,\n selectors: {\n [HighContrastSelector]: {\n backgroundColor: 'Highlight',\n borderColor: 'Highlight',\n color: 'HighlightText',\n ...getHighContrastNoAdjustStyle(),\n },\n ':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 },\n };\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","import type { ISuggestionModel } from './Suggestions.types';\n\n/**\n * {@docCategory Pickers}\n */\nexport class SuggestionsController {\n public currentIndex: number;\n public currentSuggestion: ISuggestionModel | undefined;\n public suggestions: ISuggestionModel[];\n\n constructor() {\n this.suggestions = [];\n this.currentIndex = -1;\n }\n\n public updateSuggestions(newSuggestions: T[], selectedIndex?: number, maxCount?: number): void {\n if (newSuggestions && newSuggestions.length > 0) {\n if (maxCount && newSuggestions.length > maxCount) {\n const startIndex = selectedIndex && selectedIndex > maxCount ? selectedIndex + 1 - maxCount : 0;\n newSuggestions = newSuggestions.slice(startIndex, startIndex + maxCount - 1);\n }\n this.suggestions = this.convertSuggestionsToSuggestionItems(newSuggestions);\n this.currentIndex = selectedIndex ? selectedIndex : 0;\n if (selectedIndex! === -1) {\n this.currentSuggestion = undefined;\n } else if (selectedIndex !== undefined) {\n this.suggestions[selectedIndex].selected = true;\n this.currentSuggestion = this.suggestions[selectedIndex];\n }\n } else {\n this.suggestions = [];\n this.currentIndex = -1;\n this.currentSuggestion = undefined;\n }\n }\n\n /**\n * Increments the suggestion index and gets the next suggestion in the list.\n */\n public nextSuggestion(): boolean {\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 } else if (this.currentIndex === this.suggestions.length - 1) {\n this.setSelectedSuggestion(0);\n return true;\n }\n }\n\n return false;\n }\n\n /**\n * Decrements the suggestion index and gets the previous suggestion in the list.\n */\n public previousSuggestion(): boolean {\n if (this.suggestions && this.suggestions.length) {\n if (this.currentIndex > 0) {\n this.setSelectedSuggestion(this.currentIndex - 1);\n return true;\n } else if (this.currentIndex === 0) {\n this.setSelectedSuggestion(this.suggestions.length - 1);\n return true;\n }\n }\n\n return false;\n }\n\n public getSuggestions(): ISuggestionModel[] {\n return this.suggestions;\n }\n\n public getCurrentItem(): ISuggestionModel {\n return this.currentSuggestion!;\n }\n\n public getSuggestionAtIndex(index: number): ISuggestionModel {\n return this.suggestions[index];\n }\n\n public hasSelectedSuggestion(): boolean {\n return this.currentSuggestion ? true : false;\n }\n\n public removeSuggestion(index: number): void {\n this.suggestions.splice(index, 1);\n }\n\n public createGenericSuggestion(itemToConvert: ISuggestionModel | T) {\n const itemToAdd = this.convertSuggestionsToSuggestionItems([itemToConvert])[0];\n this.currentSuggestion = itemToAdd;\n }\n\n public convertSuggestionsToSuggestionItems(suggestions: Array | T>): ISuggestionModel[] {\n return Array.isArray(suggestions) ? suggestions.map(this._ensureSuggestionModel) : [];\n }\n\n public deselectAllSuggestions(): void {\n if (this.currentIndex > -1) {\n this.suggestions[this.currentIndex].selected = false;\n this.currentIndex = -1;\n }\n }\n\n public setSelectedSuggestion(index: number): void {\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 } 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\n private _isSuggestionModel = (value: ISuggestionModel | T): value is ISuggestionModel => {\n return (>value).item !== undefined;\n };\n\n private _ensureSuggestionModel = (suggestion: ISuggestionModel | T): ISuggestionModel => {\n if (this._isSuggestionModel(suggestion)) {\n return suggestion as ISuggestionModel;\n } else {\n return {\n item: suggestion,\n selected: false,\n ariaLabel: (suggestion).ariaLabel,\n } as ISuggestionModel;\n }\n };\n}\n","import * as React from 'react';\nimport { Autofill } from '../../Autofill';\nimport type { IPickerItemProps } from './PickerItem.types';\nimport type { IReactProps, IRefObject, IStyleFunctionOrObject } from '../../Utilities';\nimport type { ISuggestionModel, ISuggestionsProps } from './Suggestions/Suggestions.types';\nimport type { ICalloutProps } from '../../Callout';\nimport type { ITheme, IStyle } from '../../Styling';\nimport type { ISuggestionItemProps } from '../pickers/Suggestions/SuggestionsItem.types';\nimport { IIconProps } from '../Icon/Icon.types';\n\n/**\n * BasePicker component.\n * {@docCategory Pickers}\n */\nexport interface IBasePicker {\n /** Gets the current value of the input. */\n items: T[] | undefined;\n\n /** Sets focus to the focus zone. */\n focus: () => void;\n\n /** Set focus to the input */\n focusInput: () => void;\n\n /**\n * When called, will take the currently selected suggestion and complete it.\n * If called with forceComplete true, it will attempt to force the current suggestion\n * to complete, must provide both createGenericSuggestion, so the text can be turned into\n * an object in the right shape, and onValidateInput, so the object knows if it's correct or not.\n */\n completeSuggestion: (forceComplete?: boolean) => void;\n}\n\n/**\n * Type T is the type of the item that is displayed\n * and searched for by the picker. For example, if the picker is\n * displaying persona's then type T could either be of Persona or IPersona props\n * {@docCategory Pickers}\n */\nexport interface IBasePickerProps extends IReactProps {\n /**\n * Optional callback to access the IBasePicker interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject>;\n\n /**\n * Function that specifies how the selected item will appear.\n */\n onRenderItem?: (props: IPickerItemProps) => JSX.Element;\n\n /**\n * Function that specifies how an individual suggestion item will appear.\n */\n onRenderSuggestionsItem?: (props: T, itemProps: ISuggestionItemProps) => JSX.Element;\n\n /**\n * A callback for what should happen when a person types text into the input.\n * Returns the already selected items so the resolver can filter them out.\n * If used in conjunction with resolveDelay this will only kick off after the delay throttle.\n */\n onResolveSuggestions: (filter: string, selectedItems?: T[]) => T[] | PromiseLike;\n\n /**\n * The delay time in ms before resolving suggestions, which is kicked off when input has been changed.\n * e.g. If a second input change happens within the resolveDelay time, the timer will start over.\n * Only until after the timer completes will onResolveSuggestions be called.\n */\n resolveDelay?: number;\n\n /**\n * A callback for what should happen when a user clicks within the input area.\n * @deprecated Please use `onEmptyResolveSuggestions` instead, as the suggestions aren't about\n * setting focus as they are about resolving suggestions when there is no input.\n */\n onEmptyInputFocus?: (selectedItems?: T[]) => T[] | PromiseLike;\n\n /**\n * A callback for what should happen when suggestions are shown without\n * input provided.\n * Returns the already selected items so the resolver can filter them out.\n * If used in conjunction with resolveDelay this will only kick off after the delay throttle.\n */\n onEmptyResolveSuggestions?: (selectedItems?: T[]) => T[] | PromiseLike;\n\n /**\n * Initial items that have already been selected and should appear in the people picker.\n */\n defaultSelectedItems?: T[];\n\n /**\n * A callback for when the selected list of items changes.\n */\n onChange?: (items?: T[]) => void;\n\n /**\n * A callback for when the user put focus on the picker\n * @deprecated Use `inputProps.onFocus` instead\n */\n onFocus?: React.FocusEventHandler;\n\n /**\n * A callback for when the user moves the focus away from the picker\n */\n onBlur?: React.FocusEventHandler;\n\n /**\n * A callback to get text from an item. Used to autofill text in the pickers.\n */\n getTextFromItem?: (item: T, currentValue?: string) => string;\n\n /**\n * A callback that gets the rest of the results when a user clicks get more results.\n */\n onGetMoreResults?: (filter: string, selectedItems?: T[]) => T[] | PromiseLike;\n\n /**\n * ClassName for the picker.\n */\n className?: string;\n\n /**\n * The properties that will get passed to the Suggestions component.\n */\n pickerSuggestionsProps?: IBasePickerSuggestionsProps;\n\n /**\n * The properties that will get passed to the Callout component.\n */\n pickerCalloutProps?: ICalloutProps;\n\n /**\n * AutoFill input native props\n * @defaultvalue undefined\n */\n inputProps?: IInputProps;\n\n /**\n * A callback for when an item is removed from the suggestion list\n */\n onRemoveSuggestion?: (item: T) => void;\n\n /**\n * A function used to validate if raw text entered into the well can be added into the selected items list\n */\n onValidateInput?: (input: string) => ValidationState;\n\n /**\n * The text to display while searching for more results in a limited suggestions list\n */\n searchingText?: ((props: { input: string }) => string) | string;\n\n /**\n * Flag for disabling the picker.\n * @defaultvalue false\n */\n disabled?: boolean;\n\n /**\n * Restrict the amount of selectable items.\n * @defaultvalue undefined\n */\n itemLimit?: number;\n\n /**\n * Function that specifies how arbitrary text entered into the well is handled.\n */\n createGenericItem?: (input: string, ValidationState: ValidationState) => ISuggestionModel | T;\n\n /**\n * Aria label for the \"X\" button in the selected item component.\n * @defaultvalue ''\n */\n removeButtonAriaLabel?: string;\n\n /**\n * The text that will be announced when a suggestion is removed. A default value is only provided for English.\n * @default 'removed \\{0\\}'\n */\n suggestionRemovedText?: string;\n\n /**\n * Optional aria-label that will be placed on the element that has the role \"combobox\"\n * attached. Additionally aria-labelled by will get added to the supporting input element contained\n * with in the combobox container\n */\n ['aria-label']?: string;\n\n /**\n * A callback to process a selection after the user selects something from the picker. If the callback returns null,\n * the item will not be added to the picker.\n */\n onItemSelected?: (selectedItem?: T) => T | PromiseLike | null;\n\n /**\n * The items that the base picker should currently display as selected.\n * If this is provided then the picker will act as a controlled component.\n */\n selectedItems?: T[];\n\n /**\n * Aria label for the displayed selection. A good value would be something like \"Selected Contacts\".\n * @defaultvalue ''\n */\n selectionAriaLabel?: string;\n\n /**\n * Override the role used for the element containing selected items.\n * Update this if onRenderItem does not return elements with role=\"listitem\".\n * A good alternative would be 'group'.\n * @defaultvalue 'list'\n */\n selectionRole?: string;\n\n /**\n * A callback used to modify the input string.\n */\n onInputChange?: (input: string) => string;\n\n /**\n * A callback to override the default behavior of adding the selected suggestion on dismiss. If it returns true or\n * nothing, the selected item will be added on dismiss. If false, the selected item will not be added on dismiss.\n *\n */\n onDismiss?: (ev?: any, selectedItem?: T) => boolean | void;\n\n /**\n * Adds an additional alert for the currently selected suggestion. This prop should be set to true for IE11 and below,\n * as it enables proper screen reader behavior for each suggestion (since aria-activedescendant does not work\n * with IE11). It should not be set for modern browsers (Edge, Chrome).\n * @defaultvalue false\n */\n enableSelectedSuggestionAlert?: boolean;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject;\n\n /**\n * Theme provided by styled() function.\n */\n theme?: ITheme;\n\n /**\n * Props for the icon used in the item's remove button.\n * @defaultvalue `{ iconName:'Cancel' }`\n */\n removeButtonIconProps?: IIconProps;\n}\n\n/**\n * Subset of picker options that may be legally passed through a picker to its\n * internal Suggestions component.\n * {@docCategory Pickers}\n */\nexport interface IBasePickerSuggestionsProps\n extends Pick<\n ISuggestionsProps,\n | 'onRenderNoResultFound'\n | 'suggestionsHeaderText'\n | 'mostRecentlyUsedHeaderText'\n | 'noResultsFoundText'\n | 'className'\n | 'suggestionsClassName'\n | 'suggestionsItemClassName'\n | 'searchForMoreIcon'\n | 'searchForMoreText'\n | 'forceResolveText'\n | 'loadingText'\n | 'searchingText'\n | 'resultsFooterFull'\n | 'resultsFooter'\n | 'resultsMaximumNumber'\n | 'showRemoveButtons'\n | 'suggestionsAvailableAlertText'\n | 'suggestionsContainerAriaLabel'\n | 'showForceResolve'\n | 'removeButtonIconProps'\n > {}\n\n/**\n * Validation state of the user's input.\n * {@docCategory Pickers}\n */\nexport enum ValidationState {\n /** User input is valid. */\n valid,\n\n /** User input could be valid or invalid, its state is not known yet. */\n warning,\n\n /** User input is invalid. */\n invalid,\n}\n\n/**\n * Pickers' input props interface\n * {@docCategory Pickers}\n */\nexport interface IInputProps extends React.InputHTMLAttributes {\n /**\n * Screen reader label to apply to an input element.\n */\n 'aria-label'?: string;\n\n /**\n * The default value to be visible when the autofill first created.\n * This is different than placeholder text because the placeholder text will disappear and re-appear. This\n * text persists until deleted or changed.\n */\n defaultVisibleValue?: string;\n}\n\n/**\n * The props needed to construct styles.\n * {@docCategory Pickers}\n */\nexport type IBasePickerStyleProps = Pick, 'theme' | 'className' | 'disabled'> & {\n /** Whether text style area is focused */\n isFocused?: boolean;\n\n /** Optional pickerInput className */\n inputClassName?: string;\n};\n\n/**\n * Represents the stylable areas of the control.\n * {@docCategory Pickers}\n */\nexport interface IBasePickerStyles {\n /** Root element of any picker extending from BasePicker (wraps all the elements). */\n root: IStyle;\n\n /**\n * Refers to the elements already selected (picked) wrapped by `itemsWrapper` along with the input to type\n * a new selection.\n */\n text: IStyle;\n\n /** Refers to the items already selected (picked). */\n itemsWrapper: IStyle;\n\n /** Refers to the input were to type new selections (picks). */\n input: IStyle;\n\n /** Refers to helper element used for accessibility tools (hidden from view on screen). */\n screenReaderText: IStyle;\n}\n","/* eslint-disable */\nimport { loadStyles } from '@microsoft/load-themed-styles';\nloadStyles([{\"rawString\":\".picker_94f06b16{position:relative}.pickerText_94f06b16{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_94f06b16:hover{border-color:\"},{\"theme\":\"inputBorderHovered\",\"defaultValue\":\"#323130\"},{\"rawString\":\"}.pickerText_94f06b16.inputFocused_94f06b16{position:relative;border-color:\"},{\"theme\":\"inputFocusBorderAlt\",\"defaultValue\":\"#0078d4\"},{\"rawString\":\"}.pickerText_94f06b16.inputFocused_94f06b16: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),screen and (forced-colors:active){.pickerText_94f06b16.inputDisabled_94f06b16{position:relative;border-color:GrayText}.pickerText_94f06b16.inputDisabled_94f06b16:after{pointer-events:none;content:\\\"\\\";position:absolute;left:0;top:0;bottom:0;right:0;background-color:Window}}.pickerInput_94f06b16{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_94f06b16{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%}.screenReaderOnly_94f06b16{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\"}]);\nexport const picker = \"picker_94f06b16\";\nexport const pickerText = \"pickerText_94f06b16\";\nexport const inputFocused = \"inputFocused_94f06b16\";\nexport const inputDisabled = \"inputDisabled_94f06b16\";\nexport const pickerInput = \"pickerInput_94f06b16\";\nexport const pickerItems = \"pickerItems_94f06b16\";\nexport const screenReaderOnly = \"screenReaderOnly_94f06b16\";","import * as React from 'react';\nimport {\n Async,\n KeyCodes,\n css,\n elementContains,\n format,\n getId,\n classNamesFunction,\n styled,\n initializeComponentRef,\n} 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';\nimport type { IProcessedStyleSet } from '../../Styling';\nimport type {\n ISuggestions,\n ISuggestionsProps,\n ISuggestionsStyleProps,\n ISuggestionsStyles,\n} from './Suggestions/Suggestions.types';\nimport type { IBasePicker, IBasePickerProps, IBasePickerStyleProps, IBasePickerStyles } from './BasePicker.types';\nimport type { IAutofill } from '../Autofill/index';\nimport type { IPickerItemProps } from './PickerItem.types';\nimport { WindowContext } from '@fluentui/react-window-provider';\nimport { getDocumentEx } from '../../utilities/dom';\n\nconst legacyStyles: any = stylesImport;\n\nconst EXTENDED_LOAD_TIME = 3000;\n\nexport interface IBasePickerState {\n items?: any;\n suggestedDisplayValue?: string;\n moreSuggestionsAvailable?: boolean;\n isFocused?: boolean;\n isSearching?: boolean;\n isMostRecentlyUsedVisible?: boolean;\n suggestionsVisible?: boolean;\n suggestionsLoading?: boolean;\n suggestionsExtendedLoading?: boolean;\n isResultsFooterVisible?: boolean;\n selectedIndices?: number[];\n selectionRemoved?: T;\n}\n\n/**\n * Aria id's for internal picker components\n * {@docCategory Pickers}\n */\nexport type IPickerAriaIds = {\n /**\n * Aria id for selected suggestion alert component\n */\n selectedSuggestionAlert: string;\n /**\n * Aria id for selected items container component\n */\n selectedItems: string;\n /**\n * Aria id for suggestions list component\n */\n suggestionList: string;\n /**\n * Aria id for element with role=combobox\n */\n combobox: string;\n};\n\nconst getClassNames = classNamesFunction();\n\n/**\n * Should be removed once new picker without inheritance is created\n */\nfunction getStyledSuggestions(suggestionsType: new (props: ISuggestionsProps) => Suggestions) {\n return styled, ISuggestionsStyleProps, ISuggestionsStyles>(\n suggestionsType,\n suggestionsStyles,\n undefined,\n {\n scope: 'Suggestions',\n },\n );\n}\n\n/**\n * {@docCategory Pickers}\n */\nexport class BasePicker>\n extends React.Component>\n implements IBasePicker\n{\n public static contextType = WindowContext;\n\n // Refs\n protected root = React.createRef();\n protected input = React.createRef();\n protected suggestionElement = React.createRef>();\n protected selection: Selection;\n protected suggestionStore: SuggestionsController;\n /**\n * @deprecated this is no longer necessary as typescript now supports generic elements\n */\n protected SuggestionOfProperType = Suggestions as new (props: ISuggestionsProps) => Suggestions;\n protected currentPromise: PromiseLike | undefined;\n protected _ariaMap: IPickerAriaIds;\n // eslint-disable-next-line deprecation/deprecation\n private _styledSuggestions = getStyledSuggestions(this.SuggestionOfProperType);\n private _id: string;\n private _async: Async;\n private _onResolveSuggestionsDebounced: (updatedValue: string) => void;\n private _overrideScrollDismiss = false;\n private _overrideScrollDimissTimeout: number;\n\n public static getDerivedStateFromProps(newProps: IBasePickerProps) {\n if (newProps.selectedItems) {\n return { items: newProps.selectedItems };\n }\n return null;\n }\n\n constructor(basePickerProps: P) {\n super(basePickerProps);\n\n initializeComponentRef(this);\n\n const items: T[] = basePickerProps.selectedItems || basePickerProps.defaultSelectedItems || [];\n\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: () => this.onSelectionChange() });\n this.selection.setItems(items);\n this.state = {\n items,\n suggestedDisplayValue: '',\n isMostRecentlyUsedVisible: false,\n moreSuggestionsAvailable: false,\n isFocused: false,\n isSearching: false,\n selectedIndices: [],\n selectionRemoved: undefined,\n };\n }\n\n public get items(): T[] {\n return this.state.items;\n }\n\n public componentDidMount(): void {\n this._async = new Async(this);\n this.selection.setItems(this.state.items);\n this._onResolveSuggestionsDebounced = this._async.debounce(this._onResolveSuggestions, this.props.resolveDelay);\n }\n\n public componentDidUpdate(oldProps: P, oldState: IBasePickerState) {\n if (this.state.items && this.state.items !== oldState.items) {\n const 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 // handle dismiss buffer after suggestions are opened\n if (this.state.suggestionsVisible && !oldState.suggestionsVisible) {\n this._overrideScrollDismiss = true;\n this._async.clearTimeout(this._overrideScrollDimissTimeout);\n this._overrideScrollDimissTimeout = this._async.setTimeout(() => {\n this._overrideScrollDismiss = false;\n }, 100);\n }\n }\n\n public componentWillUnmount(): void {\n if (this.currentPromise) {\n this.currentPromise = undefined;\n }\n this._async.dispose();\n }\n\n public focus() {\n if (this.input.current) {\n this.input.current.focus();\n }\n }\n\n public focusInput() {\n if (this.input.current) {\n this.input.current.focus();\n }\n }\n\n public dismissSuggestions = (ev?: any): void => {\n const selectItemFunction = () => {\n let addItemOnDismiss: boolean | void = true;\n if (this.props.onDismiss) {\n addItemOnDismiss = this.props.onDismiss(\n ev,\n this.suggestionStore.currentSuggestion ? this.suggestionStore.currentSuggestion.item : undefined,\n );\n }\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 (\n addItemOnDismiss !== false &&\n this.canAddItems() &&\n this.suggestionStore.hasSelectedSuggestion() &&\n this.state.suggestedDisplayValue\n ) {\n this.addItemByIndex(0);\n }\n }\n };\n\n if (this.currentPromise) {\n this.currentPromise.then(() => selectItemFunction());\n } else {\n selectItemFunction();\n }\n\n this.setState({ suggestionsVisible: false });\n };\n\n public completeSuggestion(forceComplete?: boolean) {\n if (this.suggestionStore.hasSelectedSuggestion() && this.input.current) {\n this.completeSelection(this.suggestionStore.currentSuggestion!.item);\n } else if (forceComplete) {\n this._completeGenericSuggestion();\n }\n }\n\n public refocusSuggestions = (keyCode: KeyCodes): void => {\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 } else if (keyCode === KeyCodes.down) {\n this.suggestionStore.setSelectedSuggestion(0);\n }\n }\n };\n\n public render(): JSX.Element {\n const { suggestedDisplayValue, isFocused, items } = this.state;\n const { className, inputProps, disabled, selectionAriaLabel, selectionRole = 'list', theme, styles } = this.props;\n\n const suggestionsVisible = !!this.state.suggestionsVisible;\n const suggestionsAvailable = suggestionsVisible ? this._ariaMap.suggestionList : undefined;\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 const classNames: Partial> = styles\n ? getClassNames(styles, {\n theme,\n className,\n isFocused,\n 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\n const comboLabel = this.props['aria-label'] || inputProps?.['aria-label'];\n\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 (\n \n {this.renderCustomAlert(classNames.screenReaderText)}\n \n \n
    \n {items.length > 0 && (\n \n {this.renderItems()}\n \n )}\n {this.canAddItems() && (\n 0 ? this._ariaMap.selectedItems : undefined}\n aria-expanded={suggestionsVisible}\n aria-haspopup=\"listbox\"\n aria-label={comboLabel}\n role=\"combobox\"\n disabled={disabled}\n onInputChange={this.props.onInputChange}\n />\n )}\n
    \n
    \n {this.renderSuggestions()}\n \n );\n }\n\n protected canAddItems(): boolean {\n const { items } = this.state;\n const { itemLimit } = this.props;\n return itemLimit === undefined || items.length < itemLimit;\n }\n\n protected renderSuggestions(): JSX.Element | null {\n const StyledTypedSuggestions: React.FunctionComponent> = this._styledSuggestions;\n\n return this.state.suggestionsVisible && this.input ? (\n this._preventDismissOnScrollOrResize(ev)}\n {...this.props.pickerCalloutProps}\n >\n \n \n ) : null;\n }\n\n protected renderItems(): JSX.Element[] {\n const { disabled, removeButtonAriaLabel, removeButtonIconProps } = this.props;\n const onRenderItem = this.props.onRenderItem as (props: IPickerItemProps) => JSX.Element;\n\n const { items, selectedIndices } = this.state;\n return items.map((item: any, index: number) =>\n onRenderItem({\n item,\n index,\n key: item.key ? item.key : index,\n selected: selectedIndices!.indexOf(index) !== -1,\n onRemoveItem: () => this.removeItem(item),\n disabled,\n onItemChange: this.onItemChange,\n removeButtonAriaLabel,\n removeButtonIconProps,\n }),\n );\n }\n\n protected resetFocus(index?: number) {\n const { items } = this.state;\n\n if (items.length) {\n // default to focusing the last item\n index = index ?? items.length - 1;\n const newEl: HTMLElement | null =\n this.root.current &&\n (this.root.current.querySelectorAll('[data-selection-index] > button')[\n Math.min(index!, items.length - 1)\n ] as HTMLElement | null);\n if (newEl) {\n newEl.focus();\n }\n } else {\n if (this.input.current) {\n this.input.current.focus();\n }\n }\n }\n\n protected onSuggestionSelect() {\n if (this.suggestionStore.currentSuggestion) {\n const currentValue: string = this.input.current ? this.input.current.value : '';\n const itemValue: string = this._getTextFromItem(this.suggestionStore.currentSuggestion.item, currentValue);\n this.setState({ suggestedDisplayValue: itemValue });\n }\n }\n\n protected onSelectionChange() {\n this.setState({\n selectedIndices: this.selection.getSelectedIndices(),\n });\n }\n\n protected updateSuggestions(suggestions: any[]) {\n const maxSuggestionsCount = this.props.pickerSuggestionsProps?.resultsMaximumNumber;\n this.suggestionStore.updateSuggestions(suggestions, 0, maxSuggestionsCount);\n this.forceUpdate();\n }\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 protected onEmptyInputFocus() {\n const emptyResolveSuggestions = this.props.onEmptyResolveSuggestions\n ? this.props.onEmptyResolveSuggestions\n : // eslint-disable-next-line deprecation/deprecation\n this.props.onEmptyInputFocus;\n\n // Only attempt to resolve suggestions if it exists\n if (emptyResolveSuggestions) {\n const suggestions = emptyResolveSuggestions(this.state.items);\n\n this.updateSuggestionsList(suggestions);\n\n this.setState({\n isMostRecentlyUsedVisible: true,\n suggestionsVisible: true,\n moreSuggestionsAvailable: false,\n });\n }\n }\n\n protected updateValue(updatedValue: string) {\n this._onResolveSuggestionsDebounced(updatedValue);\n }\n\n protected updateSuggestionsList(suggestions: T[] | PromiseLike, updatedValue?: string) {\n // Check to see if the returned value is an array, if it is then just pass it into the next function .\n // If the returned value is not an array then check to see if it's a promise or PromiseLike.\n // If it is then resolve it asynchronously.\n if (Array.isArray(suggestions)) {\n this._updateAndResolveValue(updatedValue, suggestions);\n } else if (suggestions && (suggestions as PromiseLike).then) {\n this.setState({\n suggestionsLoading: true,\n });\n this._startLoadTimer();\n\n // Clear suggestions\n this.suggestionStore.updateSuggestions([]);\n\n if (updatedValue !== undefined) {\n this.setState({\n suggestionsVisible: this._getShowSuggestions(),\n });\n } else {\n this.setState({\n suggestionsVisible:\n this.input.current! && this.input.current!.inputElement === getDocumentEx(this.context)?.activeElement,\n });\n }\n\n // Ensure that the promise will only use the callback if it was the most recent one.\n this.currentPromise = suggestions;\n suggestions.then((newSuggestions: T[]) => {\n if (suggestions === this.currentPromise) {\n this._updateAndResolveValue(updatedValue, newSuggestions);\n }\n });\n }\n }\n\n protected resolveNewValue(updatedValue: string, suggestions: T[]) {\n this.updateSuggestions(suggestions);\n let itemValue: string | undefined = undefined;\n\n if (this.suggestionStore.currentSuggestion) {\n itemValue = this._getTextFromItem(this.suggestionStore.currentSuggestion.item, updatedValue);\n }\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 {\n suggestedDisplayValue: itemValue,\n suggestionsVisible: this._getShowSuggestions(),\n },\n () => this.setState({ suggestionsLoading: false, suggestionsExtendedLoading: false }),\n );\n }\n\n protected onChange(items?: T[]) {\n if (this.props.onChange) {\n (this.props.onChange as any)(items);\n }\n }\n\n protected onInputChange = (value: string): void => {\n this.updateValue(value);\n this.setState({\n moreSuggestionsAvailable: true,\n isMostRecentlyUsedVisible: false,\n });\n };\n\n protected onSuggestionClick = (ev: React.MouseEvent, item: any, index: number): void => {\n this.addItemByIndex(index);\n };\n\n protected onSuggestionRemove = (ev: React.MouseEvent, item: T, index: number): void => {\n if (this.props.onRemoveSuggestion) {\n this.props.onRemoveSuggestion(item);\n }\n this.suggestionStore.removeSuggestion(index);\n };\n\n protected onInputFocus = (ev: React.FocusEvent): void => {\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\n if (this.props.inputProps && this.props.inputProps.onFocus) {\n this.props.inputProps.onFocus(ev as React.FocusEvent);\n }\n }\n };\n\n protected onInputBlur = (ev: React.FocusEvent): void => {\n if (this.props.inputProps && this.props.inputProps.onBlur) {\n this.props.inputProps.onBlur(ev as React.FocusEvent);\n }\n };\n\n protected onBlur = (ev: React.FocusEvent): void => {\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 let relatedTarget: EventTarget | null = ev.relatedTarget;\n\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 = getDocumentEx(this.context)!.activeElement;\n }\n if (relatedTarget && !elementContains(this.root.current!, relatedTarget as HTMLElement)) {\n this.setState({ isFocused: false });\n if (this.props.onBlur) {\n this.props.onBlur(ev as React.FocusEvent);\n }\n }\n }\n };\n\n /**\n * Resets focus to last element in wrapper div if clicking back into Picker that has hit item limit\n */\n protected onWrapperClick = (ev: React.MouseEvent): void => {\n if (this.state.items.length && !this.canAddItems()) {\n this.resetFocus(this.state.items.length - 1);\n }\n };\n\n /**\n * Reveals suggestions any time the user clicks on the input element\n * without shifting focus.\n */\n protected onClick = (ev: React.MouseEvent): void => {\n if (this.props.inputProps !== undefined && this.props.inputProps.onClick !== undefined) {\n this.props.inputProps.onClick(ev);\n }\n\n // Only primary (left) clicks show suggestions.\n if (ev.button === 0) {\n this._userTriggeredSuggestions();\n }\n };\n\n protected onFocus = () => {\n if (!this.state.isFocused) {\n this.setState({ isFocused: true });\n }\n };\n\n protected onKeyDown = (ev: React.KeyboardEvent): void => {\n // eslint-disable-next-line deprecation/deprecation\n const 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\n case KeyCodes.tab:\n case KeyCodes.enter:\n if (this.suggestionElement.current && this.suggestionElement.current.hasSuggestedActionSelected()) {\n this.suggestionElement.current.executeSelectedAction();\n } else if (!ev.shiftKey && this.suggestionStore.hasSelectedSuggestion() && this.state.suggestionsVisible) {\n this.completeSuggestion();\n ev.preventDefault();\n ev.stopPropagation();\n } else {\n this._completeGenericSuggestion();\n }\n\n break;\n\n case KeyCodes.backspace:\n if (!this.props.disabled) {\n this.onBackspace(ev);\n }\n ev.stopPropagation();\n break;\n\n case KeyCodes.del:\n if (!this.props.disabled) {\n if (\n this.input.current &&\n ev.target === this.input.current.inputElement &&\n this.state.suggestionsVisible &&\n this.suggestionStore.currentIndex !== -1\n ) {\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 } else {\n this.onBackspace(ev);\n }\n }\n ev.stopPropagation();\n break;\n\n case KeyCodes.up:\n if (this.input.current && ev.target === this.input.current.inputElement && this.state.suggestionsVisible) {\n if (\n this.suggestionElement.current &&\n this.suggestionElement.current.tryHandleKeyDown(keyCode, this.suggestionStore.currentIndex)\n ) {\n ev.preventDefault();\n ev.stopPropagation();\n this.forceUpdate();\n } else {\n if (\n this.suggestionElement.current &&\n this.suggestionElement.current.hasSuggestedAction() &&\n this.suggestionStore.currentIndex === 0\n ) {\n ev.preventDefault();\n ev.stopPropagation();\n this.suggestionElement.current.focusAboveSuggestions();\n this.suggestionStore.deselectAllSuggestions();\n this.forceUpdate();\n } else {\n if (this.suggestionStore.previousSuggestion()) {\n ev.preventDefault();\n ev.stopPropagation();\n this.onSuggestionSelect();\n }\n }\n }\n }\n break;\n\n case KeyCodes.down:\n if (this.input.current && ev.target === this.input.current.inputElement && this.state.suggestionsVisible) {\n if (\n this.suggestionElement.current &&\n this.suggestionElement.current.tryHandleKeyDown(keyCode, this.suggestionStore.currentIndex)\n ) {\n ev.preventDefault();\n ev.stopPropagation();\n this.forceUpdate();\n } else {\n if (\n this.suggestionElement.current &&\n this.suggestionElement.current.hasSuggestedAction() &&\n this.suggestionStore.currentIndex + 1 === this.suggestionStore.suggestions.length\n ) {\n ev.preventDefault();\n ev.stopPropagation();\n this.suggestionElement.current.focusBelowSuggestions();\n this.suggestionStore.deselectAllSuggestions();\n this.forceUpdate();\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\n protected onItemChange = (changedItem: T, index: number): void => {\n const { items } = this.state;\n\n if (index >= 0) {\n const newItems: T[] = items;\n newItems[index] = changedItem;\n\n this._updateSelectedItems(newItems);\n }\n };\n\n protected onGetMoreResults = (): void => {\n this.setState(\n {\n isSearching: true,\n },\n () => {\n if (this.props.onGetMoreResults && this.input.current) {\n const suggestions: T[] | PromiseLike = (this.props.onGetMoreResults as any)(\n this.input.current.value,\n this.state.items,\n );\n const suggestionsArray: T[] = suggestions as T[];\n const suggestionsPromiseLike: PromiseLike = suggestions as PromiseLike;\n\n if (Array.isArray(suggestionsArray)) {\n this.updateSuggestions(suggestionsArray);\n this.setState({ isSearching: false });\n } else if (suggestionsPromiseLike.then) {\n suggestionsPromiseLike.then((newSuggestions: T[]) => {\n this.updateSuggestions(newSuggestions);\n this.setState({ isSearching: false });\n });\n }\n } else {\n this.setState({ isSearching: false });\n }\n\n if (this.input.current) {\n this.input.current.focus();\n }\n\n this.setState({\n moreSuggestionsAvailable: false,\n isResultsFooterVisible: true,\n });\n },\n );\n };\n\n protected completeSelection = (item: T) => {\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\n protected addItemByIndex = (index: number): void => {\n this.completeSelection(this.suggestionStore.getSuggestionAtIndex(index).item);\n };\n\n protected addItem = (item: T): void => {\n const processedItem: T | PromiseLike | null = this.props.onItemSelected\n ? (this.props.onItemSelected as any)(item)\n : item;\n\n if (processedItem === null) {\n return;\n }\n\n const processedItemObject: T = processedItem as T;\n const processedItemPromiseLike: PromiseLike = processedItem as PromiseLike;\n\n if (processedItemPromiseLike && processedItemPromiseLike.then) {\n processedItemPromiseLike.then((resolvedProcessedItem: T) => {\n const newItems: T[] = this.state.items.concat([resolvedProcessedItem]);\n this._updateSelectedItems(newItems);\n });\n } else {\n const newItems: T[] = this.state.items.concat([processedItemObject]);\n this._updateSelectedItems(newItems);\n }\n this.setState({ suggestedDisplayValue: '', selectionRemoved: undefined });\n };\n\n protected removeItem = (item: T): void => {\n const { items } = this.state;\n const index: number = items.indexOf(item);\n\n if (index >= 0) {\n const newItems: T[] = items.slice(0, index).concat(items.slice(index + 1));\n this.setState({ selectionRemoved: item });\n this._updateSelectedItems(newItems);\n\n // reset selection removed text after a timeout so it isn't reached by screen reader virtual cursor.\n // the exact timing isn't important, the live region will fully read even if the text is removed.\n this._async.setTimeout(() => {\n this.setState({ selectionRemoved: undefined });\n }, 1000);\n }\n };\n\n protected removeItems = (itemsToRemove: any[]): void => {\n const { items } = this.state;\n const newItems: T[] = items.filter((item: any) => itemsToRemove.indexOf(item) === -1);\n\n this._updateSelectedItems(newItems);\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 protected onBackspace(ev: React.KeyboardEvent) {\n if (\n (this.state.items.length && !this.input.current) ||\n (this.input.current && !this.input.current.isValueSelected && this.input.current.cursorLocation === 0)\n ) {\n if (this.selection.getSelectedCount() > 0) {\n this.removeItems(this.selection.getSelection());\n } else {\n this.removeItem(this.state.items[this.state.items.length - 1]);\n }\n }\n }\n\n /**\n * @deprecated this is no longer necessary as focuszone has been removed\n */\n protected _shouldFocusZoneEnterInnerZone = (ev: React.KeyboardEvent): boolean => {\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\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n return true;\n }\n\n return false;\n };\n\n protected getActiveDescendant() {\n if (this.state.suggestionsLoading) {\n return undefined;\n }\n\n const currentIndex = this.suggestionStore.currentIndex;\n\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 (this.suggestionElement.current?.hasSuggestedAction()) {\n return 'sug-selectedAction';\n }\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\n return undefined;\n } else {\n return `sug-${currentIndex}`;\n }\n }\n\n /** @deprecated use renderCustomAlert instead */\n protected getSuggestionsAlert(suggestionAlertClassName: string = legacyStyles.screenReaderOnly) {\n const currentIndex = this.suggestionStore.currentIndex;\n if (this.props.enableSelectedSuggestionAlert) {\n const selectedSuggestion =\n currentIndex > -1 ? this.suggestionStore.getSuggestionAtIndex(this.suggestionStore.currentIndex) : undefined;\n const selectedSuggestionAlertText = selectedSuggestion ? selectedSuggestion.ariaLabel : undefined;\n // keeping the id/className here for legacy support\n return (\n
    \n {`${selectedSuggestionAlertText} `}\n
    \n );\n }\n }\n\n protected renderCustomAlert(alertClassName: string = legacyStyles.screenReaderOnly) {\n const { suggestionRemovedText = 'removed {0}' } = this.props;\n let removedItemText = '';\n\n if (this.state.selectionRemoved) {\n const itemName = this._getTextFromItem(this.state.selectionRemoved, '');\n removedItemText = format(suggestionRemovedText, itemName);\n }\n\n return (\n
    \n {\n // eslint-disable-next-line deprecation/deprecation\n this.getSuggestionsAlert(alertClassName)\n }\n {removedItemText}\n
    \n );\n }\n\n // do not dismiss if the window resizes or scrolls within 100ms of opening\n // this prevents the Android issue where pickers immediately dismiss on open, because the keyboard appears\n private _preventDismissOnScrollOrResize(ev: Event) {\n if (this._overrideScrollDismiss && (ev.type === 'scroll' || ev.type === 'resize')) {\n return true;\n }\n\n return false;\n }\n\n /** If suggestions are still loading after a predefined amount of time, set state to show user alert */\n private _startLoadTimer() {\n this._async.setTimeout(() => {\n if (this.state.suggestionsLoading) {\n this.setState({ suggestionsExtendedLoading: true });\n }\n }, EXTENDED_LOAD_TIME);\n }\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 private _updateAndResolveValue(updatedValue: string | undefined, newSuggestions: T[]) {\n if (updatedValue !== undefined) {\n this.resolveNewValue(updatedValue, newSuggestions);\n } else {\n const maxSuggestionsCount = this.props.pickerSuggestionsProps?.resultsMaximumNumber;\n this.suggestionStore.updateSuggestions(newSuggestions, -1, maxSuggestionsCount);\n if (this.state.suggestionsLoading) {\n this.setState({\n suggestionsLoading: false,\n suggestionsExtendedLoading: false,\n });\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 private _updateSelectedItems(items: T[]): void {\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 } else {\n this.setState({ items }, () => {\n this._onSelectedItemsUpdated(items);\n });\n }\n }\n\n private _onSelectedItemsUpdated(items?: T[]): void {\n this.onChange(items);\n }\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 private _getShowSuggestions(): boolean {\n const areSuggestionsVisible =\n this.input.current !== undefined &&\n this.input.current !== null &&\n this.input.current.inputElement === getDocumentEx(this.context)?.activeElement &&\n this.input.current.value !== '';\n\n return areSuggestionsVisible;\n }\n\n private _onResolveSuggestions = (updatedValue: string): void => {\n const suggestions: T[] | PromiseLike | null = this.props.onResolveSuggestions(updatedValue, this.state.items);\n\n if (suggestions !== null) {\n this.updateSuggestionsList(suggestions, updatedValue);\n }\n };\n\n private _completeGenericSuggestion = (): void => {\n if (\n this.props.onValidateInput &&\n this.input.current &&\n (this.props.onValidateInput as any)(this.input.current.value) !== ValidationState.invalid &&\n this.props.createGenericItem\n ) {\n const itemToConvert = this.props.createGenericItem(\n this.input.current.value,\n this.props.onValidateInput(this.input.current.value),\n );\n this.suggestionStore.createGenericSuggestion(itemToConvert);\n this.completeSuggestion();\n }\n };\n\n private _getTextFromItem(item: T, currentValue?: string): string {\n if (this.props.getTextFromItem) {\n return (this.props.getTextFromItem as any)(item, currentValue);\n } else {\n return '';\n }\n }\n\n /**\n * This should be called when the user does something other than use text entry to trigger suggestions.\n *\n */\n private _userTriggeredSuggestions = () => {\n if (!this.state.suggestionsVisible) {\n const input = this.input.current ? this.input.current.value : '';\n if (!input) {\n this.onEmptyInputFocus();\n } else {\n if (this.suggestionStore.suggestions.length === 0) {\n this._onResolveSuggestionsDebounced(input);\n } else {\n this.setState({\n isMostRecentlyUsedVisible: false,\n suggestionsVisible: true,\n });\n }\n }\n }\n };\n}\n\nexport class BasePickerListBelow> extends BasePicker {\n public render(): JSX.Element {\n const { suggestedDisplayValue, isFocused } = this.state;\n const { className, inputProps, disabled, selectionAriaLabel, selectionRole = 'list', theme, styles } = this.props;\n\n const suggestionsVisible = !!this.state.suggestionsVisible;\n\n const suggestionsAvailable: string | undefined = suggestionsVisible ? this._ariaMap.suggestionList : undefined;\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 const classNames: Partial> = styles\n ? getClassNames(styles, {\n theme,\n className,\n isFocused,\n inputClassName: inputProps && inputProps.className,\n })\n : {\n root: css('ms-BasePicker', legacyStyles.picker, className ? className : ''),\n text: css(\n 'ms-BasePicker-text',\n legacyStyles.pickerText,\n this.state.isFocused && legacyStyles.inputFocused,\n disabled && legacyStyles.inputDisabled,\n ),\n itemsWrapper: legacyStyles.pickerItems,\n input: css('ms-BasePicker-input', legacyStyles.pickerInput, inputProps && inputProps.className),\n screenReaderText: legacyStyles.screenReaderOnly,\n };\n\n const comboLabel = this.props['aria-label'] || inputProps?.['aria-label'];\n\n return (\n
    \n
    \n {this.renderCustomAlert(classNames.screenReaderText)}\n \n
    \n 0 ? this._ariaMap.selectedItems : undefined}\n role=\"combobox\"\n id={inputProps?.id ? inputProps.id : this._ariaMap.combobox}\n disabled={disabled}\n onInputChange={this.props.onInputChange}\n />\n
    \n
    \n {this.renderSuggestions()}\n \n \n {this.renderItems()}\n
    \n
    \n \n );\n }\n\n protected onBackspace(ev: React.KeyboardEvent) {\n // override the existing backspace method to not do anything because the list items appear below.\n }\n}\n","import {\n getGlobalClassNames,\n getInputFocusStyle,\n getPlaceholderStyles,\n hiddenContentStyle,\n HighContrastSelector,\n} from '../../Styling';\nimport type { IBasePickerStyleProps, IBasePickerStyles } from './BasePicker.types';\nimport type { IStyle } from '../../Styling';\n\nconst GlobalClassNames = {\n root: 'ms-BasePicker',\n text: 'ms-BasePicker-text',\n itemsWrapper: 'ms-BasePicker-itemsWrapper',\n input: 'ms-BasePicker-input',\n};\n\nexport function getStyles(props: IBasePickerStyleProps): IBasePickerStyles {\n const { className, theme, isFocused, inputClassName, disabled } = props;\n\n if (!theme) {\n throw new Error('theme is undefined or null in base BasePicker getStyles function.');\n }\n const { semanticColors, effects, fonts } = theme;\n const { inputBorder, inputBorderHovered, inputFocusBorderAlt } = semanticColors;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n // placeholder style constants\n const placeholderStyles: IStyle = [\n fonts.medium,\n {\n color: semanticColors.inputPlaceholderText,\n opacity: 1,\n selectors: {\n [HighContrastSelector]: {\n color: 'GrayText',\n },\n },\n },\n ];\n\n const disabledPlaceholderStyles: IStyle = {\n color: semanticColors.disabledText,\n selectors: {\n [HighContrastSelector]: {\n color: 'GrayText',\n },\n },\n };\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 const disabledOverlayColor = 'rgba(218, 218, 218, 0.29)';\n\n return {\n root: [classNames.root, className, { position: 'relative' }],\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: {\n ':after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n background: disabledOverlayColor,\n },\n [HighContrastSelector]: {\n borderColor: 'GrayText',\n selectors: {\n ':after': {\n background: 'none',\n },\n },\n },\n },\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 '&:placeholder-shown': {\n textOverflow: 'ellipsis',\n },\n },\n },\n getPlaceholderStyles(placeholderStyles),\n disabled && getPlaceholderStyles(disabledPlaceholderStyles),\n inputClassName,\n ],\n screenReaderText: hiddenContentStyle,\n };\n}\n","import { getGlobalClassNames, getFocusStyle, HighContrastSelector } from '../../../Styling';\nimport { ButtonGlobalClassNames } from '../../Button/BaseButton.classNames';\nimport { getRTL } from '../../../Utilities';\nimport type { ITagItemStyleProps, ITagItemStyles } from './TagPicker.types';\n\nconst GlobalClassNames = {\n root: 'ms-TagItem',\n text: 'ms-TagItem-text',\n close: 'ms-TagItem-close',\n isSelected: 'is-selected',\n};\n\nconst TAG_HEIGHT = 26;\n\nexport function getStyles(props: ITagItemStyleProps): ITagItemStyles {\n const { className, theme, selected, disabled } = props;\n\n const { palette, effects, fonts, semanticColors } = theme;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\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, // needed to prevent long tags from overflowing container\n borderRadius: effects.roundedCorner2,\n color: semanticColors.inputText,\n background: palette.neutralLighter,\n selectors: {\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 [HighContrastSelector]: {\n border: `1px solid ${!selected ? 'WindowText' : 'WindowFrame'}`,\n },\n },\n },\n disabled && {\n selectors: {\n [HighContrastSelector]: {\n borderColor: 'GrayText',\n },\n },\n },\n selected &&\n !disabled && [\n classNames.isSelected,\n {\n ':focus-within': {\n background: palette.themePrimary,\n color: palette.white,\n },\n },\n ],\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: {\n [HighContrastSelector]: {\n color: 'GrayText',\n },\n },\n },\n ],\n close: [\n classNames.close,\n getFocusStyle(theme, { borderColor: 'transparent', inset: 1, outlineColor: palette.white }),\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 [`.${classNames.isSelected} &: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: {\n [`.${ButtonGlobalClassNames.msButtonIcon}`]: {\n color: palette.neutralSecondary,\n },\n },\n },\n ],\n };\n}\n","import * as React from 'react';\n\nimport { styled, classNamesFunction } from '../../../Utilities';\nimport { IconButton, IButton } from '../../../Button';\nimport { getStyles } from './TagItem.styles';\nimport { useId } from '@fluentui/react-hooks';\nimport type { ITagItemProps, ITagItemStyleProps, ITagItemStyles } from './TagPicker.types';\n\nconst getClassNames = classNamesFunction();\n\n/**\n * {@docCategory TagPicker}\n */\nexport const TagItemBase = (props: ITagItemProps) => {\n const {\n theme,\n styles,\n selected,\n disabled,\n enableTagFocusInDisabledPicker,\n children,\n className,\n index,\n onRemoveItem,\n removeButtonAriaLabel,\n title = typeof props.children === 'string' ? props.children : props.item.name,\n removeButtonIconProps,\n } = props;\n\n const buttonRef = React.createRef();\n\n const handleClick: React.MouseEventHandler = () => {\n buttonRef.current?.focus();\n };\n\n const classNames = getClassNames(styles, {\n theme: theme!,\n className,\n selected,\n disabled,\n });\n\n const itemId = useId();\n\n const disabledAttrs = enableTagFocusInDisabledPicker\n ? {\n 'aria-disabled': disabled,\n tabindex: 0,\n }\n : {\n disabled,\n };\n\n return (\n
    \n \n {children}\n \n \n \n
    \n );\n};\n\nexport const TagItem = styled(TagItemBase, getStyles, undefined, {\n scope: 'TagItem',\n});\n","import { getGlobalClassNames } from '../../../Styling';\nimport type { ITagItemSuggestionStyleProps, ITagItemSuggestionStyles } from './TagPicker.types';\n\nconst GlobalClassNames = {\n suggestionTextOverflow: 'ms-TagItem-TextOverflow',\n};\n\nexport function getStyles(props: ITagItemSuggestionStyleProps): ITagItemSuggestionStyles {\n const { className, theme } = props;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\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","import * as React from 'react';\n\nimport { classNamesFunction, styled } from '../../../Utilities';\nimport { getStyles } from './TagItemSuggestion.styles';\nimport type {\n ITagItemSuggestionProps,\n ITagItemSuggestionStyleProps,\n ITagItemSuggestionStyles,\n} from './TagPicker.types';\n\nconst getClassNames = classNamesFunction();\n\n/**\n * {@docCategory TagPicker}\n */\nexport const TagItemSuggestionBase = (props: ITagItemSuggestionProps) => {\n const { styles, theme, children } = props;\n\n const classNames = getClassNames(styles, {\n theme: theme!,\n });\n\n return
    {children}
    ;\n};\n\nexport const TagItemSuggestion = styled<\n ITagItemSuggestionProps,\n ITagItemSuggestionStyleProps,\n ITagItemSuggestionStyles\n>(TagItemSuggestionBase, getStyles, undefined, { scope: 'TagItemSuggestion' });\n","import * as React from 'react';\nimport { styled } from '../../../Utilities';\nimport { BasePicker } from '../BasePicker';\nimport { getStyles } from '../BasePicker.styles';\nimport { TagItem } from './TagItem';\nimport { TagItemSuggestion } from './TagItemSuggestion';\nimport type { IBasePickerStyleProps, IBasePickerStyles } from '../BasePicker.types';\nimport type { ITagPickerProps, ITag, ITagItemProps } from './TagPicker.types';\n\n/**\n * {@docCategory TagPicker}\n */\nexport class TagPickerBase extends BasePicker {\n public static defaultProps = {\n onRenderItem: (props: ITagItemProps) => {props.item.name},\n onRenderSuggestionsItem: (props: ITag) => {props.name},\n };\n}\n\nexport const TagPicker = styled(\n TagPickerBase,\n getStyles,\n undefined,\n {\n scope: 'TagPicker',\n },\n);\n","// 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\n\nimport { IIconOptions, IIconSubset, registerIcons } from '@fluentui/style-utilities';\n\nexport function initializeIcons(baseUrl: string = '', options?: IIconOptions): void {\n const subset: IIconSubset = {\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('${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\n registerIcons(subset, options);\n}\n"," // 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\n\nimport {\n IIconOptions,\n IIconSubset,\n registerIcons\n} from '@fluentui/style-utilities';\n\nexport function initializeIcons(\n baseUrl: string = '',\n options?: IIconOptions\n): void {\n const subset: IIconSubset = {\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('${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\n registerIcons(subset, options);\n}\n"," // 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\n\nimport {\n IIconOptions,\n IIconSubset,\n registerIcons\n} from '@fluentui/style-utilities';\n\nexport function initializeIcons(\n baseUrl: string = '',\n options?: IIconOptions\n): void {\n const subset: IIconSubset = {\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('${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\n registerIcons(subset, options);\n}\n"," // 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\n\nimport {\n IIconOptions,\n IIconSubset,\n registerIcons\n} from '@fluentui/style-utilities';\n\nexport function initializeIcons(\n baseUrl: string = '',\n options?: IIconOptions\n): void {\n const subset: IIconSubset = {\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('${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\n registerIcons(subset, options);\n}\n"," // 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\n\nimport {\n IIconOptions,\n IIconSubset,\n registerIcons\n} from '@fluentui/style-utilities';\n\nexport function initializeIcons(\n baseUrl: string = '',\n options?: IIconOptions\n): void {\n const subset: IIconSubset = {\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('${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\n registerIcons(subset, options);\n}\n"," // 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\n\nimport {\n IIconOptions,\n IIconSubset,\n registerIcons\n} from '@fluentui/style-utilities';\n\nexport function initializeIcons(\n baseUrl: string = '',\n options?: IIconOptions\n): void {\n const subset: IIconSubset = {\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('${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\n registerIcons(subset, options);\n}\n"," // 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\n\nimport {\n IIconOptions,\n IIconSubset,\n registerIcons\n} from '@fluentui/style-utilities';\n\nexport function initializeIcons(\n baseUrl: string = '',\n options?: IIconOptions\n): void {\n const subset: IIconSubset = {\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('${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\n registerIcons(subset, options);\n}\n"," // 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\n\nimport {\n IIconOptions,\n IIconSubset,\n registerIcons\n} from '@fluentui/style-utilities';\n\nexport function initializeIcons(\n baseUrl: string = '',\n options?: IIconOptions\n): void {\n const subset: IIconSubset = {\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('${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\n registerIcons(subset, options);\n}\n"," // 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\n\nimport {\n IIconOptions,\n IIconSubset,\n registerIcons\n} from '@fluentui/style-utilities';\n\nexport function initializeIcons(\n baseUrl: string = '',\n options?: IIconOptions\n): void {\n const subset: IIconSubset = {\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('${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\n registerIcons(subset, options);\n}\n"," // 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\n\nimport {\n IIconOptions,\n IIconSubset,\n registerIcons\n} from '@fluentui/style-utilities';\n\nexport function initializeIcons(\n baseUrl: string = '',\n options?: IIconOptions\n): void {\n const subset: IIconSubset = {\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('${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\n registerIcons(subset, options);\n}\n"," // 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\n\nimport {\n IIconOptions,\n IIconSubset,\n registerIcons\n} from '@fluentui/style-utilities';\n\nexport function initializeIcons(\n baseUrl: string = '',\n options?: IIconOptions\n): void {\n const subset: IIconSubset = {\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('${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\n registerIcons(subset, options);\n}\n"," // 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\n\nimport {\n IIconOptions,\n IIconSubset,\n registerIcons\n} from '@fluentui/style-utilities';\n\nexport function initializeIcons(\n baseUrl: string = '',\n options?: IIconOptions\n): void {\n const subset: IIconSubset = {\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('${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\n registerIcons(subset, options);\n}\n"," // 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\n\nimport {\n IIconOptions,\n IIconSubset,\n registerIcons\n} from '@fluentui/style-utilities';\n\nexport function initializeIcons(\n baseUrl: string = '',\n options?: IIconOptions\n): void {\n const subset: IIconSubset = {\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('${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\n registerIcons(subset, options);\n}\n"," // 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\n\nimport {\n IIconOptions,\n IIconSubset,\n registerIcons\n} from '@fluentui/style-utilities';\n\nexport function initializeIcons(\n baseUrl: string = '',\n options?: IIconOptions\n): void {\n const subset: IIconSubset = {\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('${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\n registerIcons(subset, options);\n}\n"," // 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\n\nimport {\n IIconOptions,\n IIconSubset,\n registerIcons\n} from '@fluentui/style-utilities';\n\nexport function initializeIcons(\n baseUrl: string = '',\n options?: IIconOptions\n): void {\n const subset: IIconSubset = {\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('${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\n registerIcons(subset, options);\n}\n"," // 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\n\nimport {\n IIconOptions,\n IIconSubset,\n registerIcons\n} from '@fluentui/style-utilities';\n\nexport function initializeIcons(\n baseUrl: string = '',\n options?: IIconOptions\n): void {\n const subset: IIconSubset = {\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('${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\n registerIcons(subset, options);\n}\n"," // 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\n\nimport {\n IIconOptions,\n IIconSubset,\n registerIcons\n} from '@fluentui/style-utilities';\n\nexport function initializeIcons(\n baseUrl: string = '',\n options?: IIconOptions\n): void {\n const subset: IIconSubset = {\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('${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\n registerIcons(subset, options);\n}\n"," // 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\n\nimport {\n IIconOptions,\n IIconSubset,\n registerIcons\n} from '@fluentui/style-utilities';\n\nexport function initializeIcons(\n baseUrl: string = '',\n options?: IIconOptions\n): void {\n const subset: IIconSubset = {\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('${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\n registerIcons(subset, options);\n}\n"," // 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\n\nimport {\n IIconOptions,\n IIconSubset,\n registerIcons\n} from '@fluentui/style-utilities';\n\nexport function initializeIcons(\n baseUrl: string = '',\n options?: IIconOptions\n): void {\n const subset: IIconSubset = {\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('${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\n registerIcons(subset, options);\n}\n","import { registerIconAlias } from '@fluentui/style-utilities';\n\nexport const registerIconAliases = () => {\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};\n\nexport default registerIconAliases;\n","// 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.55');","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 { IIconOptions, FLUENT_CDN_BASE_URL } from '@fluentui/style-utilities';\nimport { registerIconAliases } from './iconAliases';\nimport { getWindow } from '@fluentui/utilities';\n\nconst DEFAULT_BASE_URL = `${FLUENT_CDN_BASE_URL}/assets/icons/`;\n\n/*\n * The Window variable has the iconBaseUrl prop in order to allow for users to redirect icon font downloads to a new\n * URL. The config can be burned on the page to ensure there are no race conditions which might load resources on\n * script load.\n */\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/naming-convention\n interface Window {\n /**\n * The FabricConfig options can be burned on the page prior to script load to provide\n * alternative defaults at script load time. This helps avoid race conditions by calling\n * `initializeIcons` too late, or in cases where you can't control the `initializeIcons` call,\n * such as using the pre-created Fluent bundle.\n */\n FabricConfig?: {\n /**\n * Controls the base url of the font files. This is useful for scenarios where the fonts\n * are stored on a private CDN other than the default SharePoint CDN.\n */\n fontBaseUrl?: string;\n\n /**\n * Controls the base url of the icon font files. This is useful for scenarios where the icons\n * are stored on a private CDN other than the default SharePoint CDN. Note that in prior\n * iterations, `fontBaseUrl` was used to control both font and icon base urls. While you can\n * still use `fontBaseUrl` to provide a single base url for both, the `iconBaseUrl` will be\n * used first if available.\n */\n iconBaseUrl?: string;\n };\n }\n}\n\nconst win = getWindow();\n\nexport function initializeIcons(\n baseUrl: string = win?.FabricConfig?.iconBaseUrl || win?.FabricConfig?.fontBaseUrl || DEFAULT_BASE_URL,\n options?: IIconOptions,\n): void {\n [i, i0, i1, i2, i3, i4, i5, i6, i7, i8, i9, i10, i11, i12, i13, i14, i15, i16, i17].forEach(\n (initialize: (url: string, options?: IIconOptions) => void) => initialize(baseUrl, options),\n );\n\n registerIconAliases();\n}\n\n/* eslint-disable deprecation/deprecation */\nexport type { IconNamesInput } from './IconNames';\nexport { IconNames } from './IconNames';\n/* eslint-enable deprecation/deprecation */\n\nimport './version';\n","import * as React from 'react';\nimport { BaseButton, Button, IButtonProps } from '../../Button';\nimport type { ITheme, IStyle } from '../../Styling';\nimport type { IRefObject, IStyleFunctionOrObject } from '../../Utilities';\nimport type { IIconProps } from '../../Icon';\n\n/**\n * {@docCategory MessageBar}\n */\nexport interface IMessageBar {}\n\n/**\n * {@docCategory MessageBar}\n */\nexport interface IMessageBarProps extends React.HTMLAttributes, React.RefAttributes {\n /**\n * Optional callback to access the IMessageBar interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject;\n\n /**\n * The type of MessageBar to render.\n * @defaultvalue MessageBarType.info\n */\n messageBarType?: MessageBarType;\n\n /**\n * The actions you want to show on the other side.\n */\n actions?: JSX.Element;\n\n /**\n * A description of the message bar for the benefit of screen readers.\n * @deprecated Use native prop `aria-label` instead.\n */\n ariaLabel?: string;\n\n /**\n * Whether the message bar has a dismiss button and its callback.\n * If null, we don't show a dismiss button.\n * @defaultvalue null\n */\n // eslint-disable-next-line deprecation/deprecation\n onDismiss?: (ev?: React.MouseEvent) => any;\n\n /**\n * Determines if the message bar is multi lined.\n * If false, and the text overflows over buttons or to another line, it is clipped.\n * @defaultvalue true\n */\n isMultiline?: boolean;\n\n /**\n * Aria label on dismiss button if onDismiss is defined.\n */\n dismissButtonAriaLabel?: string;\n\n /**\n * Determines if the message bar text is truncated.\n * If true, a button will render to toggle between a single line view and multiline view.\n * This prop is for single line message bars with no buttons only in a limited space scenario.\n * @defaultvalue false\n */\n truncated?: boolean;\n\n /**\n * Aria label on overflow button if truncated is defined.\n * @deprecated Use `expandButtonProps` instead.\n */\n overflowButtonAriaLabel?: string;\n\n /**\n * Additional CSS class(es) to apply to the MessageBar.\n */\n className?: string;\n\n /**\n * Theme (provided through customization.)\n */\n theme?: ITheme;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject;\n\n /**\n * Custom icon prop to replace the dismiss icon.\n * If unset, default will be the Fabric Clear icon.\n */\n dismissIconProps?: IIconProps;\n\n /**\n * Custom icon prop to replace the message bar icon.\n * If unset, default will be the icon set by messageBarType.\n */\n messageBarIconProps?: IIconProps;\n\n /**\n * Button props that can be applied to the expand button of the MessageBar.\n */\n expandButtonProps?: IButtonProps;\n\n /**\n * Callback to execute when expand button is toggled\n * @returns\n */\n onExpandButtonToggled?: (expandSingleLine: boolean) => void;\n\n /**\n * Custom role to apply to the MessageBar.\n * @defaultvalue `alert` if `messageBarType` is `error`, `blocked`, or `severeWarning`;\n * or `status` otherwise\n */\n role?: 'alert' | 'status' | 'none';\n\n /**\n * By default, MessageBar delay-renders its content within an internal live region to help ensure\n * it's announced by screen readers. You can disable that behavior by setting this prop to `false`.\n *\n * If you set this prop to `false`, to ensure proper announcement you should either:\n * - If appropriate, ensure that the `role` prop is set to `alert` (this will be done by default\n * if `messageBarType` is `error`, `blocked`, or `severeWarning`), OR\n * - Set the `role` prop to `none` (to avoid nested `status` regions), wrap the whole MessageBar\n * in a `
    ` which is always rendered, and ensure that the MessageBar is\n * rendered either conditionally or with a delay.\n * @default true\n */\n delayedRender?: boolean;\n\n /**\n * An optional override to show the expand/collapse icon. It will only be shown by default for\n * single-line truncated MessageBars that do not have actions.\n * @defaultvalue false\n */\n showExpandButton?: boolean;\n}\n\n/**\n * {@docCategory MessageBar}\n */\nexport interface IMessageBarStyleProps {\n /**\n * Theme (provided through customization).\n */\n theme: ITheme;\n\n /**\n * Additional CSS class(es).\n */\n className?: string;\n\n /**\n * Type of the MessageBar.\n */\n messageBarType?: MessageBarType;\n\n /**\n * Whether the MessageBar contains a dismiss button.\n */\n onDismiss?: boolean;\n\n /**\n * Whether the text is truncated.\n */\n truncated?: boolean;\n\n /**\n * Whether the MessageBar is rendered in multi line (as opposed to single line) mode.\n */\n isMultiline?: boolean;\n\n /**\n * Whether the single line MessageBar is being expanded.\n */\n expandSingleLine?: boolean;\n\n /**\n * Whether the MessageBar contains any action elements.\n */\n actions?: boolean;\n}\n\n/**\n * {@docCategory MessageBar}\n */\nexport interface IMessageBarStyles {\n /**\n * Style set for the root element.\n */\n root?: IStyle;\n\n /**\n * Style set for the element containing the icon, text, and optional dismiss button.\n */\n content?: IStyle;\n\n /**\n * Style set for the element containing the icon.\n */\n iconContainer?: IStyle;\n\n /**\n * Style set for the icon.\n */\n icon?: IStyle;\n\n /**\n * Style set for the element containing the text.\n */\n text?: IStyle;\n\n /**\n * Style set for the text.\n */\n innerText?: IStyle;\n\n /**\n * Style set for the optional dismiss button.\n */\n dismissal?: IStyle;\n\n /**\n * Style set for the icon used to expand and collapse the MessageBar.\n */\n expand?: IStyle;\n\n /**\n * Style set for the element containing the dismiss button.\n */\n dismissSingleLine?: IStyle;\n\n /**\n * Style set for the element containing the expand icon.\n */\n expandSingleLine?: IStyle;\n\n /**\n * Style set for the optional element containing the action elements.\n */\n actions?: IStyle;\n}\n\n/**\n * {@docCategory MessageBar}\n */\nexport enum MessageBarType {\n /** Info styled MessageBar */\n info = 0,\n /** Error styled MessageBar */\n error = 1,\n /** Blocked styled MessageBar */\n blocked = 2,\n /** SevereWarning styled MessageBar */\n severeWarning = 3,\n /** Success styled MessageBar */\n success = 4,\n /** Warning styled MessageBar */\n warning = 5,\n}\n","import * 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';\nimport type { IMessageBarProps, IMessageBarStyleProps, IMessageBarStyles } from './MessageBar.types';\n\nconst ICON_MAP = {\n [MessageBarType.info]: 'Info',\n [MessageBarType.warning]: 'Info',\n [MessageBarType.error]: 'ErrorBadge',\n [MessageBarType.blocked]: 'Blocked2',\n [MessageBarType.severeWarning]: 'Warning',\n [MessageBarType.success]: 'Completed',\n};\n\nconst COMPONENT_NAME = 'MessageBar';\n\nconst getClassNames = classNamesFunction();\n\nconst getAnnouncementPriority = (messageBarType: MessageBarType): 'assertive' | 'polite' => {\n switch (messageBarType) {\n case MessageBarType.blocked:\n case MessageBarType.error:\n case MessageBarType.severeWarning:\n return 'assertive';\n }\n return 'polite';\n};\n\nconst getRole = (messageBarType: MessageBarType): 'alert' | 'status' => {\n switch (messageBarType) {\n case MessageBarType.blocked:\n case MessageBarType.error:\n case MessageBarType.severeWarning:\n return 'alert';\n }\n return 'status';\n};\n\nexport const MessageBarBase: React.FunctionComponent = React.forwardRef<\n HTMLDivElement,\n IMessageBarProps\n>((props, ref) => {\n const [expandSingleLine, { toggle: toggleExpandSingleLine }] = useBoolean(false);\n const labelId = useId('MessageBar');\n\n const {\n actions,\n className,\n children,\n // eslint-disable-next-line deprecation/deprecation\n overflowButtonAriaLabel,\n dismissIconProps,\n styles,\n theme,\n messageBarType = MessageBarType.info,\n onDismiss = undefined,\n isMultiline = true,\n truncated,\n dismissButtonAriaLabel,\n messageBarIconProps,\n role,\n delayedRender = true,\n expandButtonProps,\n onExpandButtonToggled = undefined,\n showExpandButton,\n } = props;\n\n // Wrap 'toggleExpandSingleLine' to execute the 'onExpandButtonToggled' callback whenever the expand button toggles\n const handleToggleExpandSingleLine = React.useCallback(() => {\n toggleExpandSingleLine();\n if (onExpandButtonToggled) {\n // We use the opposite of 'expandSingleLine' here because at this point the useBoolean's\n // useState hasn't been updated yet.\n onExpandButtonToggled(!expandSingleLine);\n }\n }, [expandSingleLine, onExpandButtonToggled, toggleExpandSingleLine]);\n\n const nativeProps = getNativeProps>(props, htmlElementProperties, [\n 'className',\n 'role',\n ]);\n\n const classNames: { [key in keyof IMessageBarStyles]: string } = getClassNames(styles, {\n theme: theme!,\n messageBarType: messageBarType || MessageBarType.info,\n onDismiss: onDismiss !== undefined,\n actions: actions !== undefined,\n truncated,\n isMultiline,\n expandSingleLine,\n className,\n });\n\n const expandIconProps = { iconName: expandSingleLine ? 'DoubleChevronUp' : 'DoubleChevronDown' };\n const regionProps = actions || onDismiss ? { 'aria-describedby': labelId, role: 'region' } : {};\n const actionsDiv = actions ?
    {actions}
    : null;\n\n const dismissButton = onDismiss ? (\n \n ) : null;\n\n return (\n
    \n
    \n
    \n {messageBarIconProps ? (\n \n ) : (\n \n )}\n
    \n \n \n {delayedRender ? (\n \n {children}\n \n ) : (\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 {children}\n )}\n \n
    \n {\n /* singleline expand/collapse button */ (showExpandButton || (!isMultiline && !actionsDiv && truncated)) && (\n
    \n \n
    \n )\n }\n {/* singleline actions */ !isMultiline && actionsDiv}\n {\n /* singleline dismiss */ !isMultiline && dismissButton && (\n
    {dismissButton}
    \n )\n }\n {/* multiline dismiss */ isMultiline && dismissButton}\n
    \n {/* multiline actions */ isMultiline && actionsDiv}\n
    \n );\n});\nMessageBarBase.displayName = COMPONENT_NAME;\n","import {\n HighContrastSelector,\n HighContrastSelectorWhite,\n ScreenWidthMaxSmall,\n getScreenSelector,\n getGlobalClassNames,\n getFocusStyle,\n IconFontSizes,\n getHighContrastNoAdjustStyle,\n} from '../../Styling';\nimport { MessageBarType } from './MessageBar.types';\nimport type { IStyle, ISemanticColors } from '../../Styling';\nimport type { IMessageBarStyleProps, IMessageBarStyles } from './MessageBar.types';\n\nconst 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};\n\nconst backgroundColor: { [key: string]: keyof ISemanticColors } = {\n [MessageBarType.error]: 'errorBackground',\n [MessageBarType.blocked]: 'errorBackground',\n [MessageBarType.success]: 'successBackground',\n [MessageBarType.warning]: 'warningBackground',\n [MessageBarType.severeWarning]: 'severeWarningBackground',\n [MessageBarType.info]: 'infoBackground',\n};\n\nconst iconColor: { [key: string]: keyof ISemanticColors } = {\n [MessageBarType.error]: 'errorIcon',\n [MessageBarType.blocked]: 'errorIcon',\n [MessageBarType.success]: 'successIcon',\n [MessageBarType.warning]: 'warningIcon',\n [MessageBarType.severeWarning]: 'severeWarningIcon',\n [MessageBarType.info]: 'infoIcon',\n};\n\nconst highContrastBorderColor: { [key: string]: string } = {\n [MessageBarType.error]: '#ff0000',\n [MessageBarType.blocked]: '#ff0000',\n [MessageBarType.success]: '#bad80a',\n [MessageBarType.warning]: '#fff100',\n [MessageBarType.severeWarning]: '#ff0000',\n [MessageBarType.info]: 'WindowText',\n};\n\nconst highContrastWhiteBorderColor: { [key: string]: string } = {\n [MessageBarType.error]: '#e81123',\n [MessageBarType.blocked]: '#e81123',\n [MessageBarType.success]: '#107c10',\n [MessageBarType.warning]: '#966400',\n [MessageBarType.severeWarning]: '#d83b01',\n [MessageBarType.info]: 'WindowText',\n};\n\nexport const getStyles = (props: IMessageBarStyleProps): IMessageBarStyles => {\n const {\n theme,\n className,\n onDismiss,\n truncated,\n isMultiline,\n expandSingleLine,\n messageBarType = MessageBarType.info,\n } = props;\n const { semanticColors, fonts } = theme;\n\n const SmallScreenSelector = getScreenSelector(0, ScreenWidthMaxSmall);\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n const dismissalAndExpandIconStyle: IStyle = {\n fontSize: IconFontSizes.xSmall,\n height: 10,\n lineHeight: '10px',\n color: semanticColors.messageText,\n selectors: {\n [HighContrastSelector]: {\n ...getHighContrastNoAdjustStyle(),\n color: 'WindowText',\n },\n },\n };\n\n const dismissalAndExpandStyle: IStyle = [\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\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 boxSizing: 'border-box',\n color: semanticColors.messageText,\n minHeight: 32,\n width: '100%',\n display: 'flex',\n wordBreak: 'break-word',\n selectors: {\n '.ms-Link': {\n color: semanticColors.messageLink,\n selectors: {\n ':hover': {\n color: semanticColors.messageLinkHovered,\n },\n },\n },\n [HighContrastSelector]: {\n ...getHighContrastNoAdjustStyle(),\n background: 'transparent',\n border: `1px solid ${highContrastBorderColor[messageBarType]}`,\n color: 'WindowText',\n },\n [HighContrastSelectorWhite]: {\n border: `1px solid ${highContrastWhiteBorderColor[messageBarType]}`,\n },\n },\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 [SmallScreenSelector]: {\n display: 'grid',\n gridTemplateColumns: 'auto 1fr auto',\n gridTemplateRows: '1fr auto',\n gridTemplateAreas: `\n \"icon text close\"\n \"action action action\"\n `,\n },\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 [SmallScreenSelector]: {\n gridArea: 'icon',\n },\n },\n ],\n icon: {\n color: semanticColors[iconColor[messageBarType]],\n selectors: {\n [HighContrastSelector]: {\n ...getHighContrastNoAdjustStyle(),\n color: 'WindowText',\n },\n },\n },\n text: [\n classNames.text,\n {\n minWidth: 0,\n display: 'flex',\n flexGrow: 1,\n margin: 8,\n ...fonts.small,\n [SmallScreenSelector]: {\n gridArea: 'text',\n },\n selectors: {\n [HighContrastSelector]: {\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\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: {\n [SmallScreenSelector]: {\n overflow: 'visible',\n whiteSpace: 'pre-wrap',\n },\n },\n },\n expandSingleLine && {\n overflow: 'visible',\n whiteSpace: 'pre-wrap',\n },\n ],\n dismissSingleLine: [\n classNames.dismissSingleLine,\n {\n [SmallScreenSelector]: {\n gridArea: 'close',\n },\n },\n ],\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 // reset forced colors to browser control for inner actions\n forcedColorAdjust: 'auto',\n MsHighContrastAdjust: 'auto',\n [SmallScreenSelector]: {\n gridArea: 'action',\n marginRight: 8,\n marginBottom: 8,\n },\n selectors: {\n '& button:nth-child(n+2)': {\n marginLeft: 8,\n [SmallScreenSelector]: {\n marginBottom: 0,\n },\n },\n },\n },\n isMultiline && {\n marginBottom: 8,\n },\n onDismiss &&\n !isMultiline && {\n marginRight: 0,\n },\n ],\n };\n};\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { MessageBarBase } from './MessageBar.base';\nimport { getStyles } from './MessageBar.styles';\nimport type { IMessageBarProps, IMessageBarStyleProps, IMessageBarStyles } from './MessageBar.types';\n\nexport const MessageBar: React.FunctionComponent = styled<\n IMessageBarProps,\n IMessageBarStyleProps,\n IMessageBarStyles\n>(MessageBarBase, getStyles, undefined, {\n scope: 'MessageBar',\n});\n","import {\n AnimationClassNames,\n getFocusStyle,\n ZIndexes,\n getGlobalClassNames,\n HighContrastSelector,\n FontWeights,\n} from '../../Styling';\nimport type { INavStyleProps, INavStyles } from './Nav.types';\nimport type { IButtonStyles } from '../../Button';\n\nconst 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};\n\nexport const buttonStyles: IButtonStyles = {\n textContainer: {\n overflow: 'hidden',\n },\n label: {\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n },\n};\n\nexport const getStyles = (props: INavStyleProps): INavStyles => {\n const {\n className,\n theme,\n isOnTop,\n isExpanded,\n isGroup,\n isLink,\n isSelected,\n isDisabled,\n isButtonEntry,\n navHeight = 44,\n position,\n leftPadding = 20,\n leftPaddingExpanded = 28,\n rightPadding = 20,\n } = props;\n\n const { palette, semanticColors, fonts } = theme;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\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: {\n [HighContrastSelector]: {\n border: 0,\n selectors: {\n ':focus': {\n border: '1px solid WindowText',\n },\n },\n },\n },\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, // todo: get from theme\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 ],\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, // remove default
      styles\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","import * 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';\nimport type { IFocusZone } from '../../FocusZone';\nimport type {\n INav,\n INavLink,\n INavLinkGroup,\n INavProps,\n INavStyleProps,\n INavStyles,\n IRenderGroupHeaderProps,\n} from './Nav.types';\nimport { WindowContext } from '@fluentui/react-window-provider';\nimport { getDocumentEx } from '../../utilities/dom';\n\n// The number pixels per indentation level for Nav links.\nconst _indentationSize = 14;\n\n// The number of pixels of left margin\nconst _baseIndent = 3;\n\n// global var used in _isLinkSelectedKey\nlet _urlResolver: HTMLAnchorElement | undefined;\n\nexport function isRelativeUrl(url: string): boolean {\n // A URL is relative if it has no protocol.\n return !!url && !/^[a-z0-9+-.]+:\\/\\//i.test(url);\n}\n\nconst getClassNames = classNamesFunction();\n\nexport interface INavState {\n isGroupCollapsed: { [key: string]: boolean };\n isLinkExpandStateChanged?: boolean;\n selectedKey?: string;\n}\n\nexport class NavBase extends React.Component implements INav {\n public static defaultProps: INavProps = {\n groups: null,\n };\n\n public static contextType = WindowContext;\n\n private _focusZone = React.createRef();\n constructor(props: INavProps) {\n super(props);\n initializeComponentRef(this);\n this.state = {\n isGroupCollapsed: {},\n isLinkExpandStateChanged: false,\n selectedKey: props.initialSelectedKey || props.selectedKey,\n };\n }\n\n public render(): JSX.Element | null {\n const { styles, groups, className, isOnTop, role = 'navigation', theme } = this.props;\n\n if (!groups) {\n return null;\n }\n\n const groupElements: React.ReactElement<{}>[] = groups.map(this._renderGroup);\n\n const classNames = getClassNames(styles!, { theme: theme!, className, isOnTop, groups });\n\n return (\n \n \n \n );\n }\n\n public get selectedKey(): string | undefined {\n return this.state.selectedKey;\n }\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 public focus(forceIntoFirstElement: boolean = false): boolean {\n if (this._focusZone && this._focusZone.current) {\n return this._focusZone.current.focus(forceIntoFirstElement);\n }\n return false;\n }\n\n private _onRenderLink = (link: INavLink): JSX.Element => {\n const { styles, groups, theme } = this.props;\n const classNames = getClassNames(styles!, { theme: theme!, groups });\n return
      {link.name}
      ;\n };\n\n private _renderNavLink(link: INavLink, linkIndex: number, nestingLevel: number): JSX.Element {\n const { styles, groups, theme } = this.props;\n const isLinkWithIcon = link.icon || link.iconProps;\n const isSelectedLink = this._isLinkSelected(link);\n const { ariaCurrent = 'page' } = link;\n const 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,\n });\n\n // Prevent hijacking of the parent window if link.target is defined\n const rel = link.url && link.target && !isRelativeUrl(link.url) ? 'noopener noreferrer' : undefined;\n\n const LinkAs = this.props.linkAs ? composeComponentAs(this.props.linkAs, ActionButton) : ActionButton;\n const onRenderLink = this.props.onRenderLink\n ? composeRenderFunction(this.props.onRenderLink, this._onRenderLink)\n : this._onRenderLink;\n\n return (\n \n {onRenderLink(link)}\n \n );\n }\n\n private _renderCompositeLink(link: INavLink, linkIndex: number, nestingLevel: number): React.ReactElement<{}> {\n const divProps: React.HTMLProps = { ...getNativeProps(link, divProperties, ['onClick']) };\n // eslint-disable-next-line deprecation/deprecation\n const { expandButtonAriaLabel, styles, groups, theme } = this.props;\n const 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,\n });\n\n let finalExpandBtnAriaLabel = '';\n if (link.links && link.links.length > 0) {\n if (link.collapseAriaLabel || link.expandAriaLabel) {\n // still respect link.collapseAriaLabel, even though it's deprecated in favor of expandAriaLabel\n const collapseAriaLabel = link.collapseAriaLabel ?? link.expandAriaLabel;\n\n finalExpandBtnAriaLabel = link.isExpanded ? collapseAriaLabel! : link.expandAriaLabel!;\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\n return (\n
      \n {link.links && link.links.length > 0 ? (\n \n \n \n ) : null}\n {this._renderNavLink(link, linkIndex, nestingLevel)}\n
      \n );\n }\n\n private _renderLink(link: INavLink, linkIndex: number, nestingLevel: number): React.ReactElement<{}> {\n const { styles, groups, theme } = this.props;\n const classNames = getClassNames(styles!, { theme: theme!, groups });\n\n return (\n
    • \n {this._renderCompositeLink(link, linkIndex, nestingLevel)}\n {link.isExpanded ? this._renderLinks(link.links, ++nestingLevel) : null}\n
    • \n );\n }\n\n private _renderLinks(links: INavLink[] | undefined, nestingLevel: number): React.ReactElement<{}> | null {\n if (!links || !links.length) {\n return null;\n }\n const linkElements: React.ReactElement<{}>[] = links.map((link: INavLink, linkIndex: number) =>\n this._renderLink(link, linkIndex, nestingLevel),\n );\n\n const { styles, groups, theme } = this.props;\n const classNames = getClassNames(styles!, { theme: theme!, groups });\n\n return (\n
        \n {linkElements}\n
      \n );\n }\n\n private _renderGroup = (group: INavLinkGroup, groupIndex: number): React.ReactElement<{}> => {\n const { styles, groups, theme, onRenderGroupHeader = this._renderGroupHeader } = this.props;\n\n const isExpanded = this._isGroupExpanded(group);\n\n const classNames = getClassNames(styles!, {\n theme: theme!,\n isGroup: true,\n isExpanded,\n groups,\n });\n\n const finalOnHeaderClick = (\n ev?: React.MouseEvent | undefined,\n isCollapsing?: boolean | undefined,\n ) => {\n this._onGroupHeaderClicked(group, ev);\n };\n\n const groupProps: IRenderGroupHeaderProps = {\n ...group,\n isExpanded,\n onHeaderClick: finalOnHeaderClick,\n };\n\n return (\n
      \n {groupProps.name ? onRenderGroupHeader(groupProps, this._renderGroupHeader) : null}\n
      {this._renderLinks(groupProps.links, 0 /* nestingLevel */)}
      \n
      \n );\n };\n\n private _renderGroupHeader = (group: IRenderGroupHeaderProps): React.ReactElement<{}> => {\n // eslint-disable-next-line deprecation/deprecation\n const { styles, groups, theme, expandButtonAriaLabel } = this.props;\n\n const { isExpanded } = group;\n\n const classNames = getClassNames(styles!, {\n theme: theme!,\n isGroup: true,\n isExpanded,\n groups,\n });\n\n // respect deprecated collapseAriaLabel, but default to expandAriaLabel for both states\n // eslint-disable-next-line deprecation/deprecation\n const collapseAriaLabel = group.collapseAriaLabel ?? group.expandAriaLabel;\n const label = (isExpanded ? collapseAriaLabel : group.expandAriaLabel) || expandButtonAriaLabel;\n\n const { onHeaderClick } = group;\n\n const onClick = onHeaderClick\n ? (ev?: React.MouseEvent | undefined) => {\n onHeaderClick(ev, isExpanded);\n }\n : undefined;\n\n return (\n \n );\n };\n\n private _onGroupHeaderClicked(group: INavLinkGroup, ev?: React.MouseEvent): void {\n if (group.onHeaderClick) {\n group.onHeaderClick(ev, this._isGroupExpanded(group));\n }\n\n if (group.isExpanded === undefined) {\n this._toggleCollapsed(group);\n }\n\n if (ev) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n\n private _onLinkExpandClicked(link: INavLink, ev: React.MouseEvent): void {\n const { onLinkExpandClick } = this.props;\n\n if (onLinkExpandClick) {\n onLinkExpandClick(ev, link);\n }\n\n if (!ev.defaultPrevented) {\n link.isExpanded = !link.isExpanded;\n this.setState({ isLinkExpandStateChanged: true });\n }\n\n ev.preventDefault();\n ev.stopPropagation();\n }\n\n private _preventBounce(link: INavLink, ev: React.MouseEvent): void {\n if (!link.url && link.forceAnchor) {\n ev.preventDefault();\n }\n }\n\n private _onNavAnchorLinkClicked(link: INavLink, ev: React.MouseEvent): void {\n // If the href is \"#\" we should call preventDefault to prevent scrolling to the top of the page\n this._preventBounce(link, ev);\n\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\n this.setState({ selectedKey: link.key });\n }\n\n private _onNavButtonLinkClicked(link: INavLink, ev: React.MouseEvent): void {\n // If the href is \"#\" we should call preventDefault to prevent scrolling to the top of the page\n this._preventBounce(link, ev);\n\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\n this.setState({ selectedKey: link.key });\n }\n\n private _isLinkSelected(link: INavLink): boolean {\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 } else if (this.state.selectedKey !== undefined) {\n return link.key === this.state.selectedKey;\n } else if (typeof getWindow() === 'undefined' || !link.url) {\n // resolve is not supported for ssr\n return false;\n } else {\n const doc = getDocumentEx(this.context)!; // there is an SSR check above so this is safe\n // If selectedKey is undefined in props and state, then check URL\n _urlResolver = _urlResolver || doc.createElement('a');\n\n _urlResolver.href = link.url || '';\n const target: string = _urlResolver.href;\n\n if (location.href === target) {\n return true;\n }\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\n if (location.hash) {\n // Match the hash to the url.\n if (location.hash === link.url) {\n return true;\n }\n\n // Match a rebased url. (e.g. #foo becomes http://hostname/foo)\n _urlResolver.href = location.hash.substring(1);\n\n return _urlResolver.href === target;\n }\n }\n\n return false;\n }\n\n private _isGroupExpanded(group: INavLinkGroup): boolean {\n if (group.isExpanded !== undefined) {\n return group.isExpanded;\n }\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\n private _toggleCollapsed(group: INavLinkGroup): void {\n if (group.name) {\n const newGroupCollapsed = {\n ...this.state.isGroupCollapsed, // Make a copy in order to not modify state\n [group.name]: this._isGroupExpanded(group), // sic - presently open will be collapsed after setState\n };\n this.setState({ isGroupCollapsed: newGroupCollapsed });\n }\n }\n}\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { NavBase } from './Nav.base';\nimport { getStyles } from './Nav.styles';\nimport type { INavProps, INavStyleProps, INavStyles } from './Nav.types';\n\nexport const Nav: React.FunctionComponent = styled(\n NavBase,\n getStyles,\n undefined,\n {\n scope: 'Nav',\n },\n);\n","import * 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';\nimport type { ISearchBoxProps, ISearchBoxStyleProps, ISearchBoxStyles, ISearchBox } from './SearchBox.types';\nimport type { IButtonProps, IButtonStyles } from '../../Button';\nimport type { IIconProps } from '../../Icon';\n\nconst COMPONENT_NAME = 'SearchBox';\nconst iconButtonStyles: Partial = { root: { height: 'auto' }, icon: { fontSize: '12px' } };\nconst iconButtonProps: IIconProps = { iconName: 'Clear' };\nconst defaultClearButtonProps: IButtonProps = { ariaLabel: 'Clear text' };\n\nconst getClassNames = classNamesFunction();\n\nconst useComponentRef = (\n componentRef: React.Ref | undefined,\n inputElementRef: React.RefObject,\n hasFocus: boolean,\n) => {\n React.useImperativeHandle(\n componentRef,\n () => ({\n focus: () => inputElementRef.current?.focus(),\n blur: () => inputElementRef.current?.blur(),\n hasFocus: () => hasFocus,\n }),\n [inputElementRef, hasFocus],\n );\n};\n\nexport const SearchBoxBase: React.FunctionComponent = React.forwardRef<\n HTMLDivElement,\n ISearchBoxProps\n>((props, forwardedRef) => {\n const {\n ariaLabel,\n className,\n defaultValue = '',\n disabled,\n underlined,\n styles,\n // eslint-disable-next-line deprecation/deprecation\n labelText,\n // eslint-disable-next-line deprecation/deprecation\n placeholder = labelText,\n theme,\n clearButtonProps = defaultClearButtonProps,\n disableAnimation = false,\n showIcon = false,\n onClear: customOnClear,\n onBlur: customOnBlur,\n onEscape: customOnEscape,\n onSearch: customOnSearch,\n onKeyDown: customOnKeyDown,\n iconProps,\n role,\n onChange,\n // eslint-disable-next-line deprecation/deprecation\n onChanged,\n } = props;\n\n const [hasFocus, setHasFocus] = React.useState(false);\n\n const prevChangeTimestamp = React.useRef();\n const [uncastValue, setValue] = useControllableValue(\n props.value,\n defaultValue,\n (ev: React.ChangeEvent | undefined, newValue: string) => {\n if (ev && ev.timeStamp === prevChangeTimestamp.current) {\n // For historical reasons, SearchBox handles both onInput and onChange (we can't modify this\n // outside a major version due to potential to break partners' tests and possibly apps).\n // Only call props.onChange for one of the events.\n return;\n }\n prevChangeTimestamp.current = ev?.timeStamp;\n onChange?.(ev, newValue);\n onChanged?.(newValue);\n },\n );\n const value = String(uncastValue);\n\n const rootElementRef = React.useRef(null);\n const inputElementRef = React.useRef(null);\n const mergedRootRef = useMergedRefs(rootElementRef, forwardedRef);\n const id = useId(COMPONENT_NAME, props.id);\n\n const { onClick: customOnClearClick } = clearButtonProps;\n\n const classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n underlined,\n hasFocus,\n disabled,\n hasInput: value.length > 0,\n disableAnimation,\n showIcon,\n });\n\n const nativeProps = getNativeProps>(props, inputProperties, [\n 'className',\n 'placeholder',\n 'onFocus',\n 'onBlur',\n 'value',\n 'role',\n ]);\n\n const onClear = React.useCallback(\n (ev: React.MouseEvent | React.KeyboardEvent) => {\n customOnClear?.(ev);\n if (!ev.defaultPrevented) {\n setValue('');\n inputElementRef.current?.focus();\n ev.stopPropagation();\n ev.preventDefault();\n }\n },\n [customOnClear, setValue],\n );\n\n const onClearClick = React.useCallback(\n (ev: React.MouseEvent) => {\n customOnClearClick?.(ev);\n if (!ev.defaultPrevented) {\n onClear(ev);\n }\n },\n [customOnClearClick, onClear],\n );\n\n const onFocusCapture = (ev: React.FocusEvent) => {\n setHasFocus(true);\n props.onFocus?.(ev as React.FocusEvent);\n };\n\n const onClickFocus = () => {\n if (inputElementRef.current) {\n inputElementRef.current.focus();\n inputElementRef.current.selectionStart = inputElementRef.current.selectionEnd = 0;\n }\n };\n\n const onBlur = React.useCallback(\n (ev: React.FocusEvent): void => {\n setHasFocus(false);\n customOnBlur?.(ev);\n },\n [customOnBlur],\n );\n\n const onInputChange = (ev: React.ChangeEvent) => {\n setValue(ev.target.value, ev);\n };\n\n const onKeyDown = (ev: React.KeyboardEvent) => {\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.escape:\n 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\n case KeyCodes.enter:\n if (customOnSearch) {\n customOnSearch(value);\n ev.preventDefault();\n ev.stopPropagation();\n }\n break;\n\n default:\n // REVIEW: Why aren't we calling customOnKeyDown for Escape or Enter?\n 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\n useDebugWarning(props);\n useComponentRef(props.componentRef, inputElementRef, hasFocus);\n\n return (\n
      \n
      \n \n
      \n \n {value!.length > 0 && (\n
      \n \n
      \n )}\n
      \n );\n});\nSearchBoxBase.displayName = COMPONENT_NAME;\n\nfunction useDebugWarning(props: ISearchBoxProps) {\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,\n deprecations: { labelText: 'placeholder' },\n });\n }\n}\n","import {\n HighContrastSelector,\n AnimationVariables,\n normalize,\n getPlaceholderStyles,\n getGlobalClassNames,\n getInputFocusStyle,\n} from '../../Styling';\nimport { getRTL } from '../../Utilities';\nimport type { IStyle } from '../../Styling';\nimport type { ISearchBoxStyleProps, ISearchBoxStyles } from './SearchBox.types';\n\nconst 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};\n\nexport function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles {\n const { theme, underlined, disabled, hasFocus, className, hasInput, disableAnimation, showIcon } = props;\n const { palette, fonts, semanticColors, effects } = theme;\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n // placeholder style constants\n const placeholderStyles: IStyle = {\n color: semanticColors.inputPlaceholderText,\n opacity: 1,\n };\n\n const inputIconAlt = palette.neutralSecondary;\n const inputIconAltHovered = palette.neutralPrimary;\n const inputBorderDisabled = palette.neutralLighter;\n const inputBackgroundHovered = palette.neutralLighter;\n const inputBackgroundDisabled = palette.neutralLighter;\n\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: {\n [HighContrastSelector]: {\n borderColor: 'WindowText',\n },\n ':hover': {\n borderColor: semanticColors.inputBorderHovered,\n selectors: {\n [HighContrastSelector]: {\n borderColor: 'Highlight',\n },\n },\n },\n [`:hover .${classNames.iconContainer}`]: {\n color: semanticColors.inputIconHovered,\n },\n },\n },\n !hasFocus &&\n hasInput && {\n selectors: {\n [`:hover .${classNames.iconContainer}`]: {\n width: 4,\n },\n [`:hover .${classNames.icon}`]: {\n opacity: 0,\n pointerEvents: 'none',\n },\n },\n },\n hasFocus && [\n 'is-active',\n {\n position: 'relative',\n },\n getInputFocusStyle(\n semanticColors.inputFocusBorderAlt,\n underlined ? 0 : effects.roundedCorner2,\n underlined ? 'borderBottom' : 'border',\n ),\n ],\n showIcon && [\n {\n selectors: {\n [`:hover .${classNames.iconContainer}`]: {\n width: 32,\n },\n [`:hover .${classNames.icon}`]: {\n opacity: 1,\n },\n },\n },\n ],\n disabled && [\n 'is-disabled',\n {\n borderColor: inputBorderDisabled,\n backgroundColor: inputBackgroundDisabled,\n pointerEvents: 'none',\n cursor: 'default',\n selectors: {\n [HighContrastSelector]: {\n borderColor: 'GrayText',\n },\n },\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","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { SearchBoxBase } from './SearchBox.base';\nimport { getStyles } from './SearchBox.styles';\nimport type { ISearchBoxProps, ISearchBoxStyleProps, ISearchBoxStyles } from './SearchBox.types';\n\nexport const SearchBox: React.FunctionComponent = styled<\n ISearchBoxProps,\n ISearchBoxStyleProps,\n ISearchBoxStyles\n>(SearchBoxBase, getStyles, undefined, { scope: 'SearchBox' });\n","import {\n keyframes,\n getGlobalClassNames,\n hiddenContentStyle,\n HighContrastSelector,\n getHighContrastNoAdjustStyle,\n} from '../../Styling';\nimport { getRTL, memoizeFunction } from '../../Utilities';\nimport type { IShimmerStyleProps, IShimmerStyles } from './Shimmer.types';\n\nconst GlobalClassNames = {\n root: 'ms-Shimmer-container',\n shimmerWrapper: 'ms-Shimmer-shimmerWrapper',\n shimmerGradient: 'ms-Shimmer-shimmerGradient',\n dataWrapper: 'ms-Shimmer-dataWrapper',\n};\n\nconst BACKGROUND_OFF_SCREEN_POSITION = '100%';\n\nconst shimmerAnimation = memoizeFunction(() =>\n keyframes({\n '0%': {\n transform: `translateX(-${BACKGROUND_OFF_SCREEN_POSITION})`,\n },\n '100%': {\n transform: `translateX(${BACKGROUND_OFF_SCREEN_POSITION})`,\n },\n }),\n);\n\nconst shimmerAnimationRTL = memoizeFunction(() =>\n keyframes({\n '100%': {\n transform: `translateX(-${BACKGROUND_OFF_SCREEN_POSITION})`,\n },\n '0%': {\n transform: `translateX(${BACKGROUND_OFF_SCREEN_POSITION})`,\n },\n }),\n);\n\nexport function getStyles(props: IShimmerStyleProps): IShimmerStyles {\n const {\n isDataLoaded,\n className,\n theme,\n transitionAnimationInterval,\n shimmerColor,\n shimmerWaveColor,\n improveCSSPerformance,\n } = props;\n\n const { semanticColors } = theme;\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n const isRTL = getRTL(theme);\n\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n {\n position: 'relative',\n height: 'auto',\n },\n className,\n ],\n shimmerWrapper: [\n classNames.shimmerWrapper,\n {\n position: 'relative',\n overflow: 'hidden',\n transform: 'translateZ(0)',\n backgroundColor: shimmerColor || semanticColors.disabledBackground,\n transition: `opacity ${transitionAnimationInterval}ms`,\n selectors: {\n [HighContrastSelector]: {\n background: `WindowText\n linear-gradient(\n to right,\n transparent 0%,\n Window 50%,\n transparent 100%)\n 0 0 / 90% 100%\n no-repeat`,\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\n isDataLoaded && {\n opacity: '0',\n position: 'absolute',\n top: '0',\n bottom: '0',\n left: '0',\n right: '0',\n },\n improveCSSPerformance\n ? {\n selectors: {\n '> div:last-child': {\n transform: 'translateZ(0)',\n },\n },\n }\n : {\n selectors: {\n '> *': {\n transform: 'translateZ(0)',\n },\n },\n },\n ],\n shimmerGradient: [\n classNames.shimmerGradient,\n {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n background: `${shimmerColor || semanticColors.disabledBackground}\n linear-gradient(\n to right,\n ${shimmerColor || semanticColors.disabledBackground} 0%,\n ${shimmerWaveColor || semanticColors.bodyDivider} 50%,\n ${shimmerColor || semanticColors.disabledBackground} 100%)\n 0 0 / 90% 100%\n no-repeat`,\n transform: `translateX(-${BACKGROUND_OFF_SCREEN_POSITION})`,\n animationDuration: '2s',\n animationTimingFunction: 'ease-in-out',\n animationDirection: 'normal',\n animationIterationCount: 'infinite',\n animationName: isRTL ? shimmerAnimationRTL() : shimmerAnimation(),\n },\n ],\n dataWrapper: [\n classNames.dataWrapper,\n {\n position: 'absolute',\n top: '0',\n bottom: '0',\n left: '0',\n right: '0',\n opacity: '0',\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n transition: `opacity ${transitionAnimationInterval}ms`,\n },\n isDataLoaded && {\n opacity: '1',\n position: 'static',\n },\n ],\n screenReaderText: hiddenContentStyle,\n };\n}\n","import * as React from 'react';\nimport type { IStyle, ITheme } from '../../Styling';\nimport type { IStyleFunctionOrObject } from '../../Utilities';\n\n/**\n * Shimmer component props.\n * {@docCategory Shimmer}\n */\nexport interface IShimmerProps extends React.AllHTMLAttributes, React.RefAttributes {\n /**\n * Sets the width value of the shimmer wave wrapper.\n * @defaultvalue 100%\n */\n width?: number | string;\n\n /**\n * Controls when the shimmer is swapped with actual data through an animated transition.\n * @defaultvalue false\n */\n isDataLoaded?: boolean;\n\n /**\n * Elements to render in one line of the Shimmer.\n */\n shimmerElements?: IShimmerElement[];\n\n /**\n * Custom elements when necessary to build complex placeholder skeletons.\n */\n customElementsGroup?: React.ReactNode;\n\n /**\n * Localized string of the status label for screen reader\n */\n ariaLabel?: string;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject;\n\n /**\n * Additional CSS class(es) to apply to the Shimmer container.\n */\n className?: string;\n\n /**\n * Theme provided by High-Order Component.\n */\n theme?: ITheme;\n\n /**\n * Defines an object with possible colors to pass for Shimmer customization used on different backgrounds.\n */\n shimmerColors?: IShimmerColors;\n\n /**\n * Only use if `customElementsGroup` has a single parent `div`. If a custom element is not provided, defaults to true.\n */\n improveCSSPerformance?: boolean;\n}\n\n/**\n * Shimmer Elements Interface representing all common properties between Gap, Circle and Line.\n * {@docCategory Shimmer}\n */\nexport interface IShimmerElement {\n /**\n * Represents the possible type of the shimmer elements: Gap, Circle, Line.\n * Required for every element you intend to use.\n */\n type: ShimmerElementType;\n\n /**\n * Sets the height of the element (ICircle, ILine, IGap) in pixels.\n * Read more details for each specific element.\n */\n height?: number;\n\n /**\n * Sets the width value of the element (ILine, IGap) in pixels.\n * Read more details for each specific element.\n */\n width?: number | string;\n\n /**\n * Sets vertical alignment of the element (ICircle, ILine).\n * @defaultvalue center\n */\n verticalAlign?: 'top' | 'center' | 'bottom';\n}\n\n/**\n * Line element interface\n * {@docCategory Shimmer}\n */\nexport interface ILine extends IShimmerElement {\n /**\n * Sets the height of the shimmer line in pixels.\n * @defaultvalue 16px\n */\n height?: number;\n\n /**\n * Line width value.\n * @defaultvalue 100%\n */\n width?: number | string;\n}\n\n/**\n * Circle element interface\n * {@docCategory Shimmer}\n */\nexport interface ICircle extends IShimmerElement {\n /**\n * Sets the height of the shimmer circle in pixels.\n * Minimum supported 10px.\n * @defaultvalue 24px\n */\n height?: number;\n}\n\n/**\n * Gap element interface\n * {@docCategory Shimmer}\n */\nexport interface IGap extends IShimmerElement {\n /**\n * Sets the height of the shimmer gap in pixels.\n * @defaultvalue 16px\n */\n height?: number;\n\n /**\n * Gap width value.\n * @defaultvalue 10px\n */\n width?: number | string;\n}\n\n/**\n * Defines props needed to construct styles.\n * This represents the simplified set of immutable things which control the class names.\n * {@docCategory Shimmer}\n */\nexport interface IShimmerStyleProps {\n /** Boolean flag to trigger fadeIn/fadeOut transition animation when content is loaded. */\n isDataLoaded?: boolean;\n\n /** Optional CSS class name for the component attached to the root stylable area. */\n className?: string;\n\n /** Theme provided by High-Order Component. */\n theme: ITheme;\n\n /** Interval in milliseconds for the adeIn/fadeOut transition animation. */\n transitionAnimationInterval?: number;\n\n /** Color to be used as the main background color of Shimmer when not animating. */\n shimmerColor?: string;\n\n /** Tip color of the shimmer wave which gradually gets from and to `shimmerColor`. */\n shimmerWaveColor?: string;\n\n /** Boolean flag to apply a more efficient CSS selector */\n improveCSSPerformance?: boolean;\n}\n\n/**\n * Represents the stylable areas of the control.\n * {@docCategory Shimmer}\n */\nexport interface IShimmerStyles {\n /** Refers to the root wrapper element. */\n root?: IStyle;\n\n /** Refers to wrapper element of the shimmer only. */\n shimmerWrapper?: IStyle;\n\n /** Refers to gradient element of the shimmer animation only. */\n shimmerGradient?: IStyle;\n\n /** Refers to wrapper element of the children only. */\n dataWrapper?: IStyle;\n\n /** Styles for the hidden helper element to aid with screen readers. */\n screenReaderText?: IStyle;\n}\n\n/**\n * Describes the possible types for shimmer elements used.\n * {@docCategory Shimmer}\n */\nexport enum ShimmerElementType {\n /**\n * Line element type\n */\n line = 1,\n\n /**\n * Circle element type\n */\n circle = 2,\n\n /**\n * Gap element type\n */\n gap = 3,\n}\n\n/**\n * Describes the default heights for shimmer elements when omitted in implementation.\n * {@docCategory Shimmer}\n */\nexport enum ShimmerElementsDefaultHeights {\n /**\n * Default height of the line element when not provided by user: 16px\n */\n line = 16,\n\n /**\n * Default height of the gap element when not provided by user: 16px\n */\n gap = 16,\n\n /**\n * Default height of the circle element when not provided by user: 24px\n */\n circle = 24,\n}\n\n/**\n * Interface describing the possible color customizations of Shimmer.\n * {@docCategory Shimmer}\n */\nexport interface IShimmerColors {\n /**\n * Defines the main background color which is the color you see when the wave is not animating.\n * @defaultvalue theme.palette.neutralLight\n */\n shimmer?: string;\n\n /**\n * Defines the tip color of the shimmer wave which gradually gets from and to `shimmer` color.\n * @defaultvalue theme.palette.neutralLighter\n */\n shimmerWave?: string;\n\n /**\n * Defines the background color of the space in between and around shimmer elements (borders, gaps and\n * rounded corners).\n * @defaultvalue theme.palette.white\n */\n background?: string;\n}\n","import * as React from 'react';\nimport { classNamesFunction } from '../../../Utilities';\nimport type { IShimmerLineProps, IShimmerLineStyleProps, IShimmerLineStyles } from './ShimmerLine.types';\n\nconst getClassNames = classNamesFunction();\n\n/**\n * {@docCategory Shimmer}\n */\nexport const ShimmerLineBase: React.FunctionComponent = props => {\n // eslint-disable-next-line deprecation/deprecation\n const { height, styles, width = '100%', borderStyle, theme } = props;\n\n const classNames = getClassNames(styles!, {\n theme: theme!,\n height,\n borderStyle,\n });\n\n return (\n
      \n \n \n \n \n \n \n \n \n \n \n \n \n
      \n );\n};\n","import { getGlobalClassNames, HighContrastSelector } from '../../../Styling';\nimport type { IShimmerLineStyleProps, IShimmerLineStyles } from './ShimmerLine.types';\nimport type { IRawStyle } from '../../../Styling';\n\nconst GlobalClassNames = {\n root: 'ms-ShimmerLine-root',\n topLeftCorner: 'ms-ShimmerLine-topLeftCorner',\n topRightCorner: 'ms-ShimmerLine-topRightCorner',\n bottomLeftCorner: 'ms-ShimmerLine-bottomLeftCorner',\n bottomRightCorner: 'ms-ShimmerLine-bottomRightCorner',\n};\n\nexport function getStyles(props: IShimmerLineStyleProps): IShimmerLineStyles {\n // eslint-disable-next-line deprecation/deprecation\n const { height, borderStyle, theme } = props;\n\n const { semanticColors } = theme;\n const globalClassNames = getGlobalClassNames(GlobalClassNames, theme);\n\n const borderStyles: IRawStyle = borderStyle || {};\n\n const sharedCornerStyles: IRawStyle = {\n position: 'absolute',\n fill: semanticColors.bodyBackground,\n };\n\n return {\n root: [\n globalClassNames.root,\n theme.fonts.medium,\n {\n height: `${height}px`,\n boxSizing: 'content-box',\n position: 'relative',\n borderTopStyle: 'solid',\n borderBottomStyle: 'solid',\n borderColor: semanticColors.bodyBackground,\n borderWidth: 0,\n selectors: {\n [HighContrastSelector]: {\n borderColor: 'Window',\n selectors: {\n '> *': {\n fill: 'Window',\n },\n },\n },\n },\n },\n borderStyles,\n ],\n topLeftCorner: [\n globalClassNames.topLeftCorner,\n {\n top: '0',\n left: '0',\n },\n sharedCornerStyles,\n ],\n topRightCorner: [\n globalClassNames.topRightCorner,\n {\n top: '0',\n right: '0',\n },\n sharedCornerStyles,\n ],\n bottomRightCorner: [\n globalClassNames.bottomRightCorner,\n {\n bottom: '0',\n right: '0',\n },\n sharedCornerStyles,\n ],\n bottomLeftCorner: [\n globalClassNames.bottomLeftCorner,\n {\n bottom: '0',\n left: '0',\n },\n sharedCornerStyles,\n ],\n };\n}\n","import * as React from 'react';\nimport { styled } from '../../../Utilities';\nimport { ShimmerLineBase } from './ShimmerLine.base';\nimport { getStyles } from './ShimmerLine.styles';\nimport type { IShimmerLineProps, IShimmerLineStyleProps, IShimmerLineStyles } from './ShimmerLine.types';\n\nexport const ShimmerLine: React.FunctionComponent = styled<\n IShimmerLineProps,\n IShimmerLineStyleProps,\n IShimmerLineStyles\n>(ShimmerLineBase, getStyles, undefined, {\n scope: 'ShimmerLine',\n});\n","import * as React from 'react';\nimport { classNamesFunction } from '../../../Utilities';\nimport type { IShimmerGapProps, IShimmerGapStyleProps, IShimmerGapStyles } from './ShimmerGap.types';\n\nconst getClassNames = classNamesFunction();\n\n/**\n * {@docCategory Shimmer}\n */\nexport const ShimmerGapBase: React.FunctionComponent = props => {\n // eslint-disable-next-line deprecation/deprecation\n const { height, styles, width = '10px', borderStyle, theme } = props;\n\n const classNames = getClassNames(styles!, {\n theme: theme!,\n height,\n borderStyle,\n });\n\n return (\n
      \n );\n};\n","import { getGlobalClassNames, HighContrastSelector } from '../../../Styling';\nimport type { IShimmerGapStyleProps, IShimmerGapStyles } from './ShimmerGap.types';\nimport type { IRawStyle } from '../../../Styling';\n\nconst GlobalClassNames = {\n root: 'ms-ShimmerGap-root',\n};\n\nexport function getStyles(props: IShimmerGapStyleProps): IShimmerGapStyles {\n // eslint-disable-next-line deprecation/deprecation\n const { height, borderStyle, theme } = props;\n\n const { semanticColors } = theme;\n const globalClassNames = getGlobalClassNames(GlobalClassNames, theme);\n\n const borderStyles: IRawStyle = borderStyle || {};\n\n return {\n root: [\n globalClassNames.root,\n theme.fonts.medium,\n {\n backgroundColor: semanticColors.bodyBackground,\n height: `${height}px`,\n boxSizing: 'content-box',\n borderTopStyle: 'solid',\n borderBottomStyle: 'solid',\n borderColor: semanticColors.bodyBackground,\n selectors: {\n [HighContrastSelector]: {\n backgroundColor: 'Window',\n borderColor: 'Window',\n },\n },\n },\n borderStyles,\n ],\n };\n}\n","import * as React from 'react';\nimport { styled } from '../../../Utilities';\nimport { ShimmerGapBase } from './ShimmerGap.base';\nimport { getStyles } from './ShimmerGap.styles';\nimport type { IShimmerGapProps, IShimmerGapStyleProps, IShimmerGapStyles } from './ShimmerGap.types';\n\nexport const ShimmerGap: React.FunctionComponent = styled<\n IShimmerGapProps,\n IShimmerGapStyleProps,\n IShimmerGapStyles\n>(ShimmerGapBase, getStyles, undefined, {\n scope: 'ShimmerGap',\n});\n","import { getGlobalClassNames, HighContrastSelector } from '../../../Styling';\nimport type { IShimmerCircleStyleProps, IShimmerCircleStyles } from './ShimmerCircle.types';\nimport type { IRawStyle } from '../../../Styling';\n\nconst GlobalClassNames = {\n root: 'ms-ShimmerCircle-root',\n svg: 'ms-ShimmerCircle-svg',\n};\n\nexport function getStyles(props: IShimmerCircleStyleProps): IShimmerCircleStyles {\n // eslint-disable-next-line deprecation/deprecation\n const { height, borderStyle, theme } = props;\n\n const { semanticColors } = theme;\n const globalClassNames = getGlobalClassNames(GlobalClassNames, theme);\n\n const borderStyles: IRawStyle = borderStyle || {};\n\n return {\n root: [\n globalClassNames.root,\n theme.fonts.medium,\n {\n width: `${height}px`,\n height: `${height}px`,\n minWidth: `${height}px`, // Fix for IE11 flex items\n boxSizing: 'content-box',\n borderTopStyle: 'solid',\n borderBottomStyle: 'solid',\n borderColor: semanticColors.bodyBackground,\n selectors: {\n [HighContrastSelector]: {\n borderColor: 'Window',\n },\n },\n },\n borderStyles,\n ],\n svg: [\n globalClassNames.svg,\n {\n display: 'block',\n fill: semanticColors.bodyBackground,\n selectors: {\n [HighContrastSelector]: {\n fill: 'Window',\n },\n },\n },\n ],\n };\n}\n","import * as React from 'react';\nimport { classNamesFunction } from '../../../Utilities';\nimport type { IShimmerCircleProps, IShimmerCircleStyleProps, IShimmerCircleStyles } from './ShimmerCircle.types';\n\nconst getClassNames = classNamesFunction();\n\nexport const ShimmerCircleBase: React.FunctionComponent = props => {\n // eslint-disable-next-line deprecation/deprecation\n const { height, styles, borderStyle, theme } = props;\n const classNames = getClassNames(styles!, {\n theme: theme!,\n height,\n borderStyle,\n });\n\n return (\n
      \n \n \n \n
      \n );\n};\n","import * as React from 'react';\nimport { styled } from '../../../Utilities';\nimport { getStyles } from './ShimmerCircle.styles';\nimport { ShimmerCircleBase } from './ShimmerCircle.base';\nimport type { IShimmerCircleProps, IShimmerCircleStyleProps, IShimmerCircleStyles } from './ShimmerCircle.types';\n\nexport const ShimmerCircle: React.FunctionComponent = styled<\n IShimmerCircleProps,\n IShimmerCircleStyleProps,\n IShimmerCircleStyles\n>(ShimmerCircleBase, getStyles, undefined, { scope: 'ShimmerCircle' });\n","import * as React from 'react';\nimport { classNamesFunction, memoizeFunction } from '../../../Utilities';\nimport { ShimmerElementType, ShimmerElementsDefaultHeights } from '../Shimmer.types';\nimport { ShimmerLine } from '../ShimmerLine/ShimmerLine';\nimport { ShimmerGap } from '../ShimmerGap/ShimmerGap';\nimport { ShimmerCircle } from '../ShimmerCircle/ShimmerCircle';\nimport type { IRawStyle } from '../../../Styling';\nimport type {\n IShimmerElementsGroupProps,\n IShimmerElementsGroupStyleProps,\n IShimmerElementsGroupStyles,\n} from './ShimmerElementsGroup.types';\nimport type { IShimmerElement } from '../Shimmer.types';\nimport type { IShimmerLineStyles } from '../ShimmerLine/ShimmerLine.types';\nimport type { IShimmerGapStyles } from '../ShimmerGap/ShimmerGap.types';\nimport type { IShimmerCircleStyles } from '../ShimmerCircle/ShimmerCircle.types';\n\nconst getClassNames = classNamesFunction();\n\n/**\n * {@docCategory Shimmer}\n */\nexport const ShimmerElementsGroupBase: React.FunctionComponent = props => {\n const {\n styles,\n width = 'auto',\n shimmerElements,\n rowHeight = findMaxElementHeight(shimmerElements || []),\n flexWrap = false,\n theme,\n backgroundColor,\n } = props;\n\n const classNames = getClassNames(styles!, {\n theme: theme!,\n flexWrap,\n });\n\n return (\n
      \n {getRenderedElements(shimmerElements, backgroundColor, rowHeight)}\n
      \n );\n};\n\nfunction getRenderedElements(\n shimmerElements?: IShimmerElement[],\n backgroundColor?: string,\n rowHeight?: number,\n): React.ReactNode {\n const renderedElements: React.ReactNode = shimmerElements ? (\n shimmerElements.map(\n // false positive\n // eslint-disable-next-line array-callback-return\n (element: IShimmerElement, index: number): JSX.Element => {\n const { type, ...filteredElem } = element;\n const { verticalAlign, height } = filteredElem;\n const styles = getElementStyles(verticalAlign, type, height, backgroundColor, rowHeight);\n\n switch (element.type) {\n case ShimmerElementType.circle:\n return ;\n case ShimmerElementType.gap:\n return ;\n case ShimmerElementType.line:\n return ;\n }\n },\n )\n ) : (\n \n );\n\n return renderedElements;\n}\n\nconst getElementStyles = memoizeFunction(\n (\n verticalAlign: 'center' | 'bottom' | 'top' | undefined,\n elementType: ShimmerElementType,\n elementHeight: number | undefined,\n backgroundColor?: string,\n rowHeight?: number,\n ): IShimmerCircleStyles | IShimmerGapStyles | IShimmerLineStyles => {\n const dif: number = rowHeight && elementHeight ? rowHeight - elementHeight : 0;\n\n let borderStyle: IRawStyle | undefined;\n\n if (!verticalAlign || verticalAlign === 'center') {\n borderStyle = {\n borderBottomWidth: `${dif ? Math.floor(dif / 2) : 0}px`,\n borderTopWidth: `${dif ? Math.ceil(dif / 2) : 0}px`,\n };\n } else if (verticalAlign && verticalAlign === 'top') {\n borderStyle = {\n borderBottomWidth: `${dif}px`,\n borderTopWidth: `0px`,\n };\n } else if (verticalAlign && verticalAlign === 'bottom') {\n borderStyle = {\n borderBottomWidth: `0px`,\n borderTopWidth: `${dif}px`,\n };\n }\n\n if (backgroundColor) {\n switch (elementType) {\n case ShimmerElementType.circle:\n return {\n root: { ...borderStyle, borderColor: backgroundColor },\n svg: { fill: backgroundColor },\n };\n case ShimmerElementType.gap:\n return {\n root: { ...borderStyle, borderColor: backgroundColor, backgroundColor },\n };\n case ShimmerElementType.line:\n return {\n root: { ...borderStyle, borderColor: backgroundColor },\n topLeftCorner: { fill: backgroundColor },\n topRightCorner: { fill: backgroundColor },\n bottomLeftCorner: { fill: backgroundColor },\n bottomRightCorner: { fill: backgroundColor },\n };\n }\n }\n\n return {\n root: borderStyle,\n };\n },\n);\n\n/**\n * User should not worry to provide which of the elements is the highest so we do the calculation for him.\n * Plus if user forgot to specify the height we assign their defaults.\n */\nfunction findMaxElementHeight(shimmerElements: IShimmerElement[]): number {\n const shimmerElementsDefaulted: IShimmerElement[] = shimmerElements.map(\n (element: IShimmerElement): IShimmerElement => {\n switch (element.type) {\n case ShimmerElementType.circle:\n if (!element.height) {\n element.height = ShimmerElementsDefaultHeights.circle;\n }\n break;\n case ShimmerElementType.line:\n if (!element.height) {\n element.height = ShimmerElementsDefaultHeights.line;\n }\n break;\n case ShimmerElementType.gap:\n if (!element.height) {\n element.height = ShimmerElementsDefaultHeights.gap;\n }\n break;\n }\n return element;\n },\n );\n\n const rowHeight = shimmerElementsDefaulted.reduce((acc: number, next: IShimmerElement): number => {\n return next.height ? (next.height > acc ? next.height : acc) : acc;\n }, 0);\n\n return rowHeight;\n}\n","import { getGlobalClassNames } from '../../../Styling';\nimport type { IShimmerElementsGroupStyleProps, IShimmerElementsGroupStyles } from './ShimmerElementsGroup.types';\n\nconst GlobalClassNames = {\n root: 'ms-ShimmerElementsGroup-root',\n};\n\nexport function getStyles(props: IShimmerElementsGroupStyleProps): IShimmerElementsGroupStyles {\n const { flexWrap, theme } = props;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n {\n display: 'flex',\n alignItems: 'center',\n flexWrap: flexWrap ? 'wrap' : 'nowrap',\n position: 'relative',\n },\n ],\n };\n}\n","import * as React from 'react';\nimport { styled } from '../../../Utilities';\nimport { ShimmerElementsGroupBase } from './ShimmerElementsGroup.base';\nimport { getStyles } from './ShimmerElementsGroup.styles';\nimport type {\n IShimmerElementsGroupProps,\n IShimmerElementsGroupStyleProps,\n IShimmerElementsGroupStyles,\n} from './ShimmerElementsGroup.types';\n\nexport const ShimmerElementsGroup: React.FunctionComponent = styled<\n IShimmerElementsGroupProps,\n IShimmerElementsGroupStyleProps,\n IShimmerElementsGroupStyles\n>(ShimmerElementsGroupBase, getStyles, undefined, { scope: 'ShimmerElementsGroup' });\n","import * as React from 'react';\nimport { classNamesFunction, DelayedRender, getNativeProps, divProperties } from '../../Utilities';\nimport { ShimmerElementsGroup } from './ShimmerElementsGroup/ShimmerElementsGroup';\nimport { useSetTimeout, useConst } from '@fluentui/react-hooks';\nimport type { IShimmerProps, IShimmerStyleProps, IShimmerStyles } from './Shimmer.types';\n\nconst TRANSITION_ANIMATION_INTERVAL = 200; /* ms */\nconst COMPONENT_NAME = 'Shimmer';\n\nconst getClassNames = classNamesFunction();\n\n/**\n * {@docCategory Shimmer}\n */\nexport const ShimmerBase: React.FunctionComponent = React.forwardRef(\n (props, ref) => {\n const {\n styles,\n shimmerElements,\n children,\n width,\n className,\n customElementsGroup,\n theme,\n ariaLabel,\n shimmerColors,\n isDataLoaded = false,\n improveCSSPerformance,\n } = props;\n\n const divProps = getNativeProps>(props, divProperties);\n\n const classNames: { [key in keyof IShimmerStyles]: string } = getClassNames(styles!, {\n theme: theme!,\n isDataLoaded,\n className,\n transitionAnimationInterval: TRANSITION_ANIMATION_INTERVAL,\n shimmerColor: shimmerColors && shimmerColors.shimmer,\n shimmerWaveColor: shimmerColors && shimmerColors.shimmerWave,\n improveCSSPerformance: improveCSSPerformance || !customElementsGroup,\n });\n\n const internalState = useConst({\n lastTimeoutId: 0,\n });\n\n const { setTimeout, clearTimeout } = useSetTimeout();\n\n /**\n * Flag for knowing when to remove the shimmerWrapper from the DOM.\n */\n const [contentLoaded, setContentLoaded] = React.useState(isDataLoaded);\n\n const divStyleProp = { width: width ? width : '100%' };\n\n React.useEffect(() => {\n if (isDataLoaded !== contentLoaded) {\n if (isDataLoaded) {\n internalState.lastTimeoutId = setTimeout(() => {\n setContentLoaded(true);\n }, TRANSITION_ANIMATION_INTERVAL);\n\n return () => clearTimeout(internalState.lastTimeoutId);\n } else {\n setContentLoaded(false);\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- Should only run when isDataLoaded changes.\n }, [isDataLoaded]);\n\n return (\n
      \n {!contentLoaded && (\n
      \n
      \n {customElementsGroup ? (\n customElementsGroup\n ) : (\n \n )}\n
      \n )}\n {children &&
      {children}
      }\n {ariaLabel && !isDataLoaded && (\n
      \n \n
      {ariaLabel}
      \n
      \n
      \n )}\n
      \n );\n },\n);\nShimmerBase.displayName = COMPONENT_NAME;\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { getStyles } from './Shimmer.styles';\nimport { ShimmerBase } from './Shimmer.base';\nimport type { IShimmerProps, IShimmerStyleProps, IShimmerStyles } from './Shimmer.types';\n\nexport const Shimmer: React.FunctionComponent = styled<\n IShimmerProps,\n IShimmerStyleProps,\n IShimmerStyles\n>(ShimmerBase, getStyles, undefined, {\n scope: 'Shimmer',\n});\n","/******************************************************************************\nCopyright (c) Microsoft Corporation.\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\nPERFORMANCE OF THIS SOFTWARE.\n***************************************************************************** */\n/* global Reflect, Promise, SuppressedError, Symbol, Iterator */\n\nvar extendStatics = function(d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n};\n\nexport function __extends(d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n}\n\nexport var __assign = function() {\n __assign = Object.assign || function __assign(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n return t;\n }\n return __assign.apply(this, arguments);\n}\n\nexport function __rest(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}\n\nexport function __decorate(decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n}\n\nexport function __param(paramIndex, decorator) {\n return function (target, key) { decorator(target, key, paramIndex); }\n}\n\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\n function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\n var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\n var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\n var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\n var _, done = false;\n for (var i = decorators.length - 1; i >= 0; i--) {\n var context = {};\n for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\n for (var p in contextIn.access) context.access[p] = contextIn.access[p];\n context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\n var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\n if (kind === \"accessor\") {\n if (result === void 0) continue;\n if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\n if (_ = accept(result.get)) descriptor.get = _;\n if (_ = accept(result.set)) descriptor.set = _;\n if (_ = accept(result.init)) initializers.unshift(_);\n }\n else if (_ = accept(result)) {\n if (kind === \"field\") initializers.unshift(_);\n else descriptor[key] = _;\n }\n }\n if (target) Object.defineProperty(target, contextIn.name, descriptor);\n done = true;\n};\n\nexport function __runInitializers(thisArg, initializers, value) {\n var useValue = arguments.length > 2;\n for (var i = 0; i < initializers.length; i++) {\n value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\n }\n return useValue ? value : void 0;\n};\n\nexport function __propKey(x) {\n return typeof x === \"symbol\" ? x : \"\".concat(x);\n};\n\nexport function __setFunctionName(f, name, prefix) {\n if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\n return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\n};\n\nexport function __metadata(metadataKey, metadataValue) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\n}\n\nexport function __awaiter(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}\n\nexport function __generator(thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === \"function\" ? Iterator : Object).prototype);\n return g.next = verb(0), g[\"throw\"] = verb(1), g[\"return\"] = verb(2), typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (g && (g = 0, op[0] && (_ = 0)), _) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n}\n\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n});\n\nexport function __exportStar(m, o) {\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\n}\n\nexport function __values(o) {\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\n if (m) return m.call(o);\n if (o && typeof o.length === \"number\") return {\n next: function () {\n if (o && i >= o.length) o = void 0;\n return { value: o && o[i++], done: !o };\n }\n };\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\n}\n\nexport function __read(o, n) {\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\n if (!m) return o;\n var i = m.call(o), r, ar = [], e;\n try {\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\n }\n catch (error) { e = { error: error }; }\n finally {\n try {\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\n }\n finally { if (e) throw e.error; }\n }\n return ar;\n}\n\n/** @deprecated */\nexport function __spread() {\n for (var ar = [], i = 0; i < arguments.length; i++)\n ar = ar.concat(__read(arguments[i]));\n return ar;\n}\n\n/** @deprecated */\nexport function __spreadArrays() {\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\n r[k] = a[j];\n return r;\n}\n\nexport function __spreadArray(to, from, pack) {\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n if (ar || !(i in from)) {\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n ar[i] = from[i];\n }\n }\n return to.concat(ar || Array.prototype.slice.call(from));\n}\n\nexport function __await(v) {\n return this instanceof __await ? (this.v = v, this) : new __await(v);\n}\n\nexport function __asyncGenerator(thisArg, _arguments, generator) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\n return i = Object.create((typeof AsyncIterator === \"function\" ? AsyncIterator : Object).prototype), verb(\"next\"), verb(\"throw\"), verb(\"return\", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;\n function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }\n function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\n function fulfill(value) { resume(\"next\", value); }\n function reject(value) { resume(\"throw\", value); }\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\n}\n\nexport function __asyncDelegator(o) {\n var i, p;\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\n}\n\nexport function __asyncValues(o) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var m = o[Symbol.asyncIterator], i;\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\n}\n\nexport function __makeTemplateObject(cooked, raw) {\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\n return cooked;\n};\n\nvar __setModuleDefault = Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n};\n\nvar ownKeys = function(o) {\n ownKeys = Object.getOwnPropertyNames || function (o) {\n var ar = [];\n for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;\n return ar;\n };\n return ownKeys(o);\n};\n\nexport function __importStar(mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== \"default\") __createBinding(result, mod, k[i]);\n __setModuleDefault(result, mod);\n return result;\n}\n\nexport function __importDefault(mod) {\n return (mod && mod.__esModule) ? mod : { default: mod };\n}\n\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n}\n\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\n}\n\nexport function __classPrivateFieldIn(state, receiver) {\n if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\n return typeof state === \"function\" ? receiver === state : state.has(receiver);\n}\n\nexport function __addDisposableResource(env, value, async) {\n if (value !== null && value !== void 0) {\n if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\n var dispose, inner;\n if (async) {\n if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\n dispose = value[Symbol.asyncDispose];\n }\n if (dispose === void 0) {\n if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\n dispose = value[Symbol.dispose];\n if (async) inner = dispose;\n }\n if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\n if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };\n env.stack.push({ value: value, dispose: dispose, async: async });\n }\n else if (async) {\n env.stack.push({ async: true });\n }\n return value;\n}\n\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\n var e = new Error(message);\n return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\n};\n\nexport function __disposeResources(env) {\n function fail(e) {\n env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\n env.hasError = true;\n }\n var r, s = 0;\n function next() {\n while (r = env.stack.pop()) {\n try {\n if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);\n if (r.dispose) {\n var result = r.dispose.call(r.value);\n if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\n }\n else s |= 1;\n }\n catch (e) {\n fail(e);\n }\n }\n if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();\n if (env.hasError) throw env.error;\n }\n return next();\n}\n\nexport function __rewriteRelativeImportExtension(path, preserveJsx) {\n if (typeof path === \"string\" && /^\\.\\.?\\//.test(path)) {\n return path.replace(/\\.(tsx)$|((?:\\.d)?)((?:\\.[^./]+?)?)\\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {\n return tsx ? preserveJsx ? \".jsx\" : \".js\" : d && (!ext || !cm) ? m : (d + ext + \".\" + cm.toLowerCase() + \"js\");\n });\n }\n return path;\n}\n\nexport default {\n __extends,\n __assign,\n __rest,\n __decorate,\n __param,\n __esDecorate,\n __runInitializers,\n __propKey,\n __setFunctionName,\n __metadata,\n __awaiter,\n __generator,\n __createBinding,\n __exportStar,\n __values,\n __read,\n __spread,\n __spreadArrays,\n __spreadArray,\n __await,\n __asyncGenerator,\n __asyncDelegator,\n __asyncValues,\n __makeTemplateObject,\n __importStar,\n __importDefault,\n __classPrivateFieldGet,\n __classPrivateFieldSet,\n __classPrivateFieldIn,\n __addDisposableResource,\n __disposeResources,\n __rewriteRelativeImportExtension,\n};\n","import { __assign } from 'tslib';\nexport const assign = __assign;\n","import * as React from 'react';\nimport { mergeCss } from '@fluentui/merge-styles';\nimport { IStyle, ITheme } from '@fluentui/style-utilities';\nimport { getRTL, memoizeFunction } from '@fluentui/utilities';\nimport { assign } from './utilities';\nimport { IFactoryOptions } from './IComponent';\nimport {\n ISlottableReactType,\n ISlot,\n ISlots,\n ISlotDefinition,\n ISlotFactory,\n ISlotProp,\n ISlottableProps,\n ISlotOptions,\n IDefaultSlotProps,\n IProcessedSlotProps,\n ValidProps,\n ValidShorthand,\n} from './ISlots';\n\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

      (\n type: ISlot

      | React.FunctionComponent

      | string,\n props?: (React.Attributes & P) | null,\n ...children: React.ReactNode[]\n): ReturnType> {\n const slotType = type as ISlot

      ;\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\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\n return slotType({ ...(props as any), children });\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(type, props, ...children);\n }\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(\n DefaultComponent: React.ComponentType,\n options: IFactoryOptions = {},\n): ISlotFactory {\n const { defaultProp = 'children' } = options;\n\n const result: ISlotFactory = (\n componentProps,\n userProps,\n userSlotOptions,\n defaultStyles,\n theme,\n ) => {\n // If they passed in raw JSX, just return that.\n if (React.isValidElement(userProps)) {\n return userProps;\n }\n\n const flattenedUserProps: TProps | undefined = _translateShorthand(defaultProp as string, userProps);\n const finalProps = _constructFinalProps(defaultStyles, theme, componentProps, flattenedUserProps);\n\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 const UserComponent = userSlotOptions.component as React.ComponentType;\n return ;\n }\n\n if (userSlotOptions.render) {\n return userSlotOptions.render(finalProps, DefaultComponent);\n }\n }\n\n return ;\n };\n\n return result;\n}\n\n/**\n * Default factory for components without explicit factories.\n */\nconst defaultFactory = memoizeFunction(type => createFactory(type));\n\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, TComponentSlots>(\n userProps: TComponentProps,\n slots: ISlotDefinition>,\n): ISlots> {\n const result: ISlots> = {} as ISlots>;\n\n // userProps already has default props mixed in by createComponent. Recast here to gain typing for this function.\n const mixedProps = userProps as TComponentProps & IDefaultSlotProps;\n\n for (const name in slots) {\n if (slots.hasOwnProperty(name)) {\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 const slot: ISlots>[keyof TComponentSlots] = (componentProps, ...args: any[]) => {\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(\n slots[name],\n // TODO: this cast to any is hiding a relationship issue between the first two args\n componentProps as any,\n mixedProps[name],\n mixedProps.slots && mixedProps.slots[name],\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],\n (mixedProps as any).theme,\n );\n };\n slot.isSlot = true;\n result[name] = slot;\n }\n }\n\n return result;\n}\n\n/**\n * Helper function that translates shorthand as needed.\n * @param defaultProp\n * @param slotProps\n */\nfunction _translateShorthand(\n defaultProp: string,\n slotProps: ISlotProp,\n): TProps | undefined {\n let transformedProps: TProps | undefined;\n\n if (typeof slotProps === 'string' || typeof slotProps === 'number' || typeof slotProps === 'boolean') {\n transformedProps = {\n [defaultProp]: slotProps as any,\n } as TProps;\n } else {\n transformedProps = slotProps as TProps;\n }\n\n return transformedProps;\n}\n\n/**\n * Helper function that constructs final styles and props given a series of props ordered by increasing priority.\n */\nfunction _constructFinalProps(\n defaultStyles: IStyle,\n theme?: ITheme,\n ...allProps: (TProps | undefined)[]\n): TProps {\n const finalProps: TProps = {} as any;\n const classNames: (string | undefined)[] = [];\n\n for (const props of allProps) {\n classNames.push(props && props.className);\n assign(finalProps, props);\n }\n\n finalProps.className = mergeCss([defaultStyles, classNames], { rtl: getRTL(theme) });\n\n return finalProps;\n}\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<\n TSlotComponent extends ISlottableReactType,\n TSlotProps extends ValidProps,\n TSlotShorthand extends ValidShorthand,\n>(\n ComponentType: TSlotComponent,\n componentProps: TSlotProps,\n userProps: ISlotProp,\n slotOptions: ISlotOptions | undefined,\n defaultStyles: IStyle,\n theme?: ITheme,\n): ReturnType {\n if (ComponentType.create !== undefined) {\n return ComponentType.create(componentProps, userProps, slotOptions, defaultStyles);\n } else {\n // TODO: need to resolve typing / generic issues passing through memoizeFunction. for now, cast to 'unknown'\n return (defaultFactory(ComponentType) as unknown as ISlotFactory)(\n componentProps,\n userProps,\n slotOptions,\n defaultStyles,\n theme,\n );\n }\n}\n","import * as React from 'react';\nimport { concatStyleSets, IStyleSetBase, ITheme } from '@fluentui/style-utilities';\nimport { Customizations, CustomizerContext, ICustomizerContext } from '@fluentui/utilities';\nimport { createFactory } from './slots';\nimport { assign } from './utilities';\n\nimport {\n IComponentOptions,\n ICustomizationProps,\n IStyleableComponentProps,\n IStylesFunctionOrObject,\n IToken,\n ITokenFunction,\n IViewComponent,\n} from './IComponent';\nimport { IDefaultSlotProps, ISlotCreator, ValidProps } from './ISlots';\n\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<\n TComponentProps extends ValidProps,\n TTokens,\n TStyleSet extends IStyleSetBase,\n TViewProps extends TComponentProps = TComponentProps,\n TStatics = {},\n>(\n view: IViewComponent,\n options: IComponentOptions = {},\n): React.FunctionComponent & TStatics {\n const { factoryOptions = {} } = options;\n const { defaultProp } = factoryOptions;\n\n const ResultComponent: React.FunctionComponent = (\n componentProps: TComponentProps & IStyleableComponentProps,\n ) => {\n const settings: ICustomizationProps = _getCustomizations(\n options.displayName,\n React.useContext(CustomizerContext),\n options.fields,\n );\n\n const stateReducer = options.state;\n\n if (stateReducer) {\n // Don't assume state will return all props, so spread useState result over component props.\n componentProps = {\n ...componentProps,\n ...stateReducer(componentProps),\n };\n }\n\n const theme = componentProps.theme || settings.theme;\n\n const tokens = _resolveTokens(componentProps, theme, options.tokens, settings.tokens, componentProps.tokens);\n const styles = _resolveStyles(\n componentProps,\n theme,\n tokens,\n options.styles,\n settings.styles,\n componentProps.styles,\n );\n\n const viewProps = {\n ...componentProps,\n styles,\n tokens,\n _defaultStyles: styles,\n theme,\n } as unknown as TViewProps & IDefaultSlotProps;\n\n return view(viewProps);\n };\n\n ResultComponent.displayName = options.displayName || view.name;\n\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 as ISlotCreator).create = createFactory(ResultComponent, { defaultProp });\n }\n\n assign(ResultComponent, options.statics);\n\n // Later versions of TypeSript should allow us to merge objects in a type safe way and avoid this cast.\n return ResultComponent as React.FunctionComponent & TStatics;\n}\n\n/**\n * Resolve all styles functions with both props and tokens and flatten results along with all styles objects.\n */\nfunction _resolveStyles(\n props: TProps,\n theme: ITheme,\n tokens: TTokens,\n ...allStyles: (IStylesFunctionOrObject | undefined)[]\n): ReturnType {\n return concatStyleSets(\n ...allStyles.map((styles: IStylesFunctionOrObject | undefined) =>\n typeof styles === 'function' ? styles(props, theme, tokens) : styles,\n ),\n );\n}\n\n/**\n * Resolve all tokens functions with props flatten results along with all tokens objects.\n */\nfunction _resolveTokens(\n props: TViewProps,\n theme: ITheme,\n ...allTokens: (IToken | false | null | undefined)[]\n): TTokens {\n const tokens = {};\n\n for (let currentTokens of allTokens) {\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 as ITokenFunction)(props, theme)\n : currentTokens;\n\n if (Array.isArray(currentTokens)) {\n currentTokens = _resolveTokens(props, theme, ...currentTokens);\n }\n\n assign(tokens, currentTokens);\n }\n }\n\n return tokens as TTokens;\n}\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(\n displayName: string | undefined,\n context: ICustomizerContext,\n fields?: string[],\n): ICustomizationProps {\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 const DefaultFields = ['theme', 'styles', 'tokens'];\n return Customizations.getSettings(fields || DefaultFields, displayName, context.customizations);\n}\n","import { getGlobalClassNames } from '../../../Styling';\nimport type { IStackItemComponent, IStackItemStyles, IStackItemStylesReturnType } from './StackItem.types';\n\nexport const GlobalClassNames = {\n root: 'ms-StackItem',\n};\n\nconst alignMap: { [key: string]: string } = {\n start: 'flex-start',\n end: 'flex-end',\n};\n\nexport const StackItemStyles: IStackItemComponent['styles'] = (props, theme, tokens): IStackItemStylesReturnType => {\n const { grow, shrink, disableShrink, align, verticalFill, order, className, basis = 'auto' } = props;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n return {\n root: [\n theme.fonts.medium,\n classNames.root,\n {\n flexBasis: basis,\n margin: tokens.margin,\n padding: tokens.padding,\n height: verticalFill ? '100%' : 'auto',\n width: 'auto',\n },\n grow && {\n flexGrow: grow === true ? 1 : grow,\n },\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,\n },\n className,\n ],\n // TODO: this cast may be hiding some potential issues with styling and name\n // lookups and should be removed\n } as IStackItemStyles;\n};\n","/** @jsxRuntime classic */\n/** @jsx withSlots */\nimport * as React from 'react';\nimport { withSlots, createComponent, getSlots } from '@fluentui/foundation-legacy';\nimport { getNativeProps, htmlElementProperties } from '../../../Utilities';\nimport { StackItemStyles as styles } from './StackItem.styles';\nimport type { IStackItemComponent, IStackItemProps, IStackItemSlots } from './StackItem.types';\n\nconst StackItemView: IStackItemComponent['view'] = props => {\n const { children } = props;\n const nativeProps = getNativeProps>(props, htmlElementProperties);\n // eslint-disable-next-line eqeqeq\n if (children == null) {\n return null;\n }\n\n const Slots = getSlots(props, {\n root: 'div',\n });\n\n return {children};\n};\n\nexport const StackItem: React.FunctionComponent = createComponent(StackItemView, {\n displayName: 'StackItem',\n styles,\n});\n\nexport default StackItem;\n","import type { ITheme } from '../../Styling';\nimport type { IStackProps } from './Stack.types';\n\n// Helper function that converts a themed spacing key (if given) to the corresponding themed spacing value.\nconst _getThemedSpacing = (space: string, theme: ITheme): string => {\n if (theme.spacing.hasOwnProperty(space)) {\n return theme.spacing[space as keyof typeof theme.spacing];\n }\n return space;\n};\n\n// Helper function that takes a gap as a string and converts it into a { value, unit } representation.\nconst _getValueUnitGap = (gap: string): { value: number; unit: string } => {\n const numericalPart = parseFloat(gap);\n const numericalValue = isNaN(numericalPart) ? 0 : numericalPart;\n const numericalString = isNaN(numericalPart) ? '' : numericalPart.toString();\n\n const unitPart = gap.substring(numericalString.toString().length);\n\n return {\n value: numericalValue,\n unit: unitPart || 'px',\n };\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 const parseGap = (\n gap: IStackProps['gap'],\n theme: ITheme,\n): { rowGap: { value: number; unit: string }; columnGap: { value: number; unit: string } } => {\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\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\n const splitGap = gap.split(' ');\n\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\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\n // Else, parse the numerical value and pass it as both the vertical and horizontal gap.\n const calculatedGap = _getValueUnitGap(_getThemedSpacing(gap, theme));\n\n return {\n rowGap: calculatedGap,\n columnGap: calculatedGap,\n };\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 const parsePadding = (padding: number | string | undefined, theme: ITheme): number | string | undefined => {\n if (padding === undefined || typeof padding === 'number' || padding === '') {\n return padding;\n }\n\n const paddingValues = padding.split(' ');\n if (paddingValues.length < 2) {\n return _getThemedSpacing(padding, theme);\n }\n\n return paddingValues.reduce((padding1: string, padding2: string) => {\n return _getThemedSpacing(padding1, theme) + ' ' + _getThemedSpacing(padding2, theme);\n });\n};\n","import { getGlobalClassNames } from '../../Styling';\nimport { GlobalClassNames as StackItemGlobalClassNames } from './StackItem/StackItem.styles';\nimport { parseGap, parsePadding } from './StackUtils';\nimport type { IStackComponent, IStackStyles, IStackStylesReturnType } from './Stack.types';\n\nconst nameMap: { [key: string]: string } = {\n start: 'flex-start',\n end: 'flex-end',\n};\n\nexport const GlobalClassNames = {\n root: 'ms-Stack',\n inner: 'ms-Stack-inner',\n child: 'ms-Stack-child',\n};\n\nexport const styles: IStackComponent['styles'] = (props, theme, tokens): IStackStylesReturnType => {\n const {\n className,\n disableShrink,\n enableScopedSelectors,\n grow,\n horizontal,\n horizontalAlign,\n reversed,\n verticalAlign,\n verticalFill,\n wrap,\n } = props;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n /* eslint-disable deprecation/deprecation */\n const childrenGap = tokens && tokens.childrenGap ? tokens.childrenGap : props.gap;\n const maxHeight = tokens && tokens.maxHeight ? tokens.maxHeight : props.maxHeight;\n const maxWidth = tokens && tokens.maxWidth ? tokens.maxWidth : props.maxWidth;\n const padding = tokens && tokens.padding ? tokens.padding : props.padding;\n /* eslint-enable deprecation/deprecation */\n\n const { rowGap, columnGap } = parseGap(childrenGap, theme);\n\n const horizontalMargin = `${-0.5 * columnGap.value}${columnGap.unit}`;\n const verticalMargin = `${-0.5 * rowGap.value}${rowGap.unit}`;\n\n // styles to be applied to all direct children regardless of wrap or direction\n const childStyles = {\n textOverflow: 'ellipsis',\n };\n\n const childSelector = '> ' + (enableScopedSelectors ? '.' + GlobalClassNames.child : '*');\n\n const disableShrinkStyles = {\n // flexShrink styles are applied by the StackItem\n [`${childSelector}:not(.${StackItemGlobalClassNames.root})`]: {\n flexShrink: 0,\n },\n };\n\n if (wrap) {\n return {\n root: [\n classNames.root,\n {\n flexWrap: 'wrap',\n maxWidth,\n maxHeight,\n width: 'auto',\n overflow: 'visible',\n height: '100%',\n },\n horizontalAlign && {\n [horizontal ? 'justifyContent' : 'alignItems']: nameMap[horizontalAlign] || horizontalAlign,\n },\n verticalAlign && {\n [horizontal ? 'alignItems' : 'justifyContent']: nameMap[verticalAlign] || verticalAlign,\n },\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\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\n [childSelector]: {\n margin: `${0.5 * rowGap.value}${rowGap.unit} ${0.5 * columnGap.value}${columnGap.unit}`,\n\n ...childStyles,\n },\n },\n disableShrink && disableShrinkStyles,\n horizontalAlign && {\n [horizontal ? 'justifyContent' : 'alignItems']: nameMap[horizontalAlign] || horizontalAlign,\n },\n verticalAlign && {\n [horizontal ? 'alignItems' : 'justifyContent']: nameMap[verticalAlign] || verticalAlign,\n },\n horizontal && {\n flexDirection: reversed ? 'row-reverse' : 'row',\n\n // avoid unnecessary calc() calls if vertical gap is 0\n height: rowGap.value === 0 ? '100%' : `calc(100% + ${rowGap.value}${rowGap.unit})`,\n\n [childSelector]: {\n maxWidth: columnGap.value === 0 ? '100%' : `calc(100% - ${columnGap.value}${columnGap.unit})`,\n },\n },\n !horizontal && {\n flexDirection: reversed ? 'column-reverse' : 'column',\n height: `calc(100% + ${rowGap.value}${rowGap.unit})`,\n\n [childSelector]: {\n maxHeight: rowGap.value === 0 ? '100%' : `calc(100% - ${rowGap.value}${rowGap.unit})`,\n },\n },\n ],\n } as IStackStyles;\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,\n maxHeight,\n padding: parsePadding(padding, theme),\n boxSizing: 'border-box',\n\n [childSelector]: childStyles,\n },\n disableShrink && disableShrinkStyles,\n grow && {\n flexGrow: grow === true ? 1 : grow,\n },\n\n horizontalAlign && {\n [horizontal ? 'justifyContent' : 'alignItems']: nameMap[horizontalAlign] || horizontalAlign,\n },\n verticalAlign && {\n [horizontal ? 'alignItems' : 'justifyContent']: nameMap[verticalAlign] || verticalAlign,\n },\n horizontal &&\n columnGap.value > 0 && {\n // apply gap margin to every direct child except the first direct child if the direction is not reversed,\n // and the last direct one if it is\n [reversed ? `${childSelector}:not(:last-child)` : `${childSelector}:not(:first-child)`]: {\n marginLeft: `${columnGap.value}${columnGap.unit}`,\n },\n },\n !horizontal &&\n rowGap.value > 0 && {\n // apply gap margin to every direct child except the first direct child if the direction is not reversed,\n // and the last direct one if it is\n [reversed ? `${childSelector}:not(:last-child)` : `${childSelector}:not(:first-child)`]: {\n marginTop: `${rowGap.value}${rowGap.unit}`,\n },\n },\n className,\n ],\n // TODO: this cast may be hiding some potential issues with styling and name\n // lookups and should be removed\n } as IStackStyles;\n};\n","/** @jsxRuntime classic */\n/** @jsx withSlots */\nimport * as React from 'react';\nimport { withSlots, createComponent, getSlots } from '@fluentui/foundation-legacy';\nimport { css, getNativeProps, htmlElementProperties, warnDeprecations } from '../../Utilities';\nimport { styles, GlobalClassNames as StackGlobalClassNames } from './Stack.styles';\nimport { StackItem } from './StackItem/StackItem';\nimport type { IStackComponent, IStackProps, IStackSlots } from './Stack.types';\nimport type { IStackItemProps } from './StackItem/StackItem.types';\n\nconst StackView: IStackComponent['view'] = props => {\n const {\n as: RootType = 'div',\n disableShrink = false,\n // eslint-disable-next-line deprecation/deprecation\n doNotRenderFalsyValues = false,\n enableScopedSelectors = false,\n wrap,\n ...rest\n } = props;\n\n warnDeprecations('Stack', props, {\n gap: 'tokens.childrenGap',\n maxHeight: 'tokens.maxHeight',\n maxWidth: 'tokens.maxWidth',\n padding: 'tokens.padding',\n });\n\n const stackChildren = _processStackChildren(props.children, {\n disableShrink,\n enableScopedSelectors,\n doNotRenderFalsyValues,\n });\n\n const nativeProps = getNativeProps>(rest, htmlElementProperties);\n\n const Slots = getSlots(props, {\n root: RootType,\n inner: 'div',\n });\n\n if (wrap) {\n return (\n \n {stackChildren}\n \n );\n }\n\n return {stackChildren};\n};\n\nfunction _processStackChildren(\n children: React.ReactNode,\n {\n disableShrink,\n enableScopedSelectors,\n doNotRenderFalsyValues,\n }: { disableShrink: boolean; enableScopedSelectors: boolean; doNotRenderFalsyValues: boolean },\n): (React.ReactChild | React.ReactFragment | React.ReactPortal)[] {\n let childrenArray = React.Children.toArray(children);\n\n childrenArray = React.Children.map(childrenArray, child => {\n if (!child) {\n return doNotRenderFalsyValues ? null : child;\n }\n\n // We need to allow children that aren't falsy values, but not valid elements since they could be\n // a string like {'sample string'}\n if (!React.isValidElement(child)) {\n return child;\n }\n\n if (child.type === React.Fragment) {\n return child.props.children\n ? _processStackChildren(child.props.children, { disableShrink, enableScopedSelectors, doNotRenderFalsyValues })\n : null;\n }\n\n const childAsReactElement = child as React.ReactElement;\n\n let defaultItemProps: IStackItemProps = {};\n if (_isStackItem(child)) {\n defaultItemProps = { shrink: !disableShrink };\n }\n const childClassName = childAsReactElement.props.className;\n\n return React.cloneElement(childAsReactElement, {\n ...defaultItemProps,\n ...childAsReactElement.props,\n ...(childClassName && { className: childClassName }),\n ...(enableScopedSelectors && { className: css(StackGlobalClassNames.child, childClassName) }),\n });\n });\n\n return childrenArray;\n}\n\nfunction _isStackItem(item: React.ReactNode): item is typeof StackItem {\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 (\n !!item &&\n typeof item === 'object' &&\n !!(item as React.ReactElement).type &&\n // StackItem is generated by createComponent, so we need to check its displayName instead of name\n ((item as React.ReactElement).type as React.ComponentType).displayName === StackItem.displayName\n );\n}\n\nconst StackStatics = {\n Item: StackItem,\n};\n\nexport const Stack: React.FunctionComponent & {\n Item: React.FunctionComponent;\n} = createComponent(StackView, {\n displayName: 'Stack',\n styles,\n statics: StackStatics,\n});\n\nexport default Stack;\n","/** @jsxRuntime classic */\n/** @jsx withSlots */\nimport { withSlots, getSlots } from '@fluentui/foundation-legacy';\nimport { getNativeProps, htmlElementProperties } from '../../Utilities';\nimport type { ITextComponent, ITextProps, ITextSlots } from './Text.types';\n\nexport const TextView: ITextComponent['view'] = props => {\n // eslint-disable-next-line eqeqeq\n if (props.children == null) {\n return null;\n }\n\n const { block, className, as: RootType = 'span', variant, nowrap, ...rest } = props;\n\n const Slots = getSlots(props, {\n root: RootType,\n });\n\n return ;\n};\n","import type { ITextComponent, ITextStyles, ITextStylesReturnType, ITextProps } from './Text.types';\nimport type { ITheme } from '../../Styling';\n\nexport const TextStyles: ITextComponent['styles'] = (props: ITextProps, theme: ITheme): ITextStylesReturnType => {\n const { as, className, block, nowrap, variant } = props;\n const { fonts, semanticColors } = theme;\n const variantObject = fonts[variant || 'medium'];\n\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 } as ITextStyles;\n};\n","import * as React from 'react';\nimport { createComponent } from '@fluentui/foundation-legacy';\nimport { TextView } from './Text.view';\nimport { TextStyles as styles } from './Text.styles';\nimport type { ITextProps } from './Text.types';\n\nexport const Text: React.FunctionComponent = createComponent(TextView, {\n displayName: 'Text',\n styles,\n});\n\nexport default Text;\n","import { getColorFromString } from '../../utilities/color/getColorFromString';\nimport { isValidShade, getShade, getBackgroundShade } from '../../utilities/color/shades';\nimport { format } from '../../Utilities';\nimport type { IColor } from '../../utilities/color/interfaces';\nimport type { IThemeSlotRule } from './IThemeSlotRule';\nimport type { IThemeRules } from './IThemeRules';\n\nexport class ThemeGenerator {\n /**\n * Sets an IThemeSlotRule to the given color and cascades it to the rest of the theme, updating other IThemeSlotRules\n * in the theme that inherit from that color.\n * @param isInverted - whether it's a dark theme or not, which affects the algorithm used to generate shades\n * @param isCustomization - should be true only if it's a user action, and indicates overwriting the slot's\n * inheritance (if any)\n * @param overwriteCustomColor - A slot could have a generated color based on its inheritance rules (isCustomized\n * is false), or a custom color based on user input (isCustomized is true). This bool tells us whether to override\n * existing customized colors.\n */\n public static setSlot(\n rule: IThemeSlotRule,\n color: string | IColor,\n isInverted = false,\n isCustomization = false,\n overwriteCustomColor = true,\n ) {\n if (!rule.color && rule.value) {\n // not a color rule\n return;\n }\n\n if (overwriteCustomColor) {\n let colorAsIColor: IColor;\n if (typeof color === 'string') {\n colorAsIColor = getColorFromString(color)!; // the ! is a lie here but we'll verify it in the next line\n if (!colorAsIColor) {\n throw new Error('color is invalid in setSlot(): ' + color);\n }\n } else {\n colorAsIColor = color;\n }\n ThemeGenerator._setSlot(rule, colorAsIColor, isInverted, isCustomization, overwriteCustomColor);\n } else if (rule.color) {\n ThemeGenerator._setSlot(rule, rule.color, isInverted, isCustomization, overwriteCustomColor);\n }\n }\n\n /**\n * Sets the color of each slot based on its rule. Slots that don't inherit must have a color already.\n * If this completes without error, then the theme is ready to use. (All slots will have a color.)\n * setSlot() can be called before this, but this must be called before getThemeAs*().\n * Does not override colors of rules where isCustomized is true (i.e. doesn't override existing customizations).\n */\n public static insureSlots(slotRules: IThemeRules, isInverted: boolean) {\n // Get all the \"root\" rules, the ones which don't inherit. Then \"set\" them to trigger updating dependent slots.\n for (const ruleName in slotRules) {\n if (slotRules.hasOwnProperty(ruleName)) {\n const rule: IThemeSlotRule = slotRules[ruleName];\n if (!rule.inherits && !rule.value) {\n if (!rule.color) {\n throw new Error('A color slot rule that does not inherit must provide its own color.');\n }\n ThemeGenerator._setSlot(rule, rule.color, isInverted, false, false);\n }\n }\n }\n }\n\n /**\n * Gets the JSON-formatted blob that describes the theme, usable with the REST request endpoints:\n * ```\n * { [theme slot name as string] : [color as string],\n * \"tokenName\": \"#f00f00\",\n * \"tokenName2\": \"#ba2ba2\",\n * ... }\n * ```\n */\n public static getThemeAsJson(slotRules: IThemeRules): any {\n const theme: any = {};\n for (const ruleName in slotRules) {\n if (slotRules.hasOwnProperty(ruleName)) {\n const rule: IThemeSlotRule = slotRules[ruleName];\n theme[rule.name] = rule.color ? rule.color.str : rule.value || '';\n }\n }\n return theme;\n }\n\n /**\n * Gets code-formatted load theme blob that can be copy and pasted.\n * Only used for the old theme designer, where loadTheme usage is acceptable,\n * unlike in the new theme designer.\n */\n public static getThemeAsCode(slotRules: IThemeRules): any {\n const output = 'loadTheme({\\n palette: {\\n';\n return ThemeGenerator._makeRemainingCode(output, slotRules);\n }\n\n /**\n * Gets code-formatted load theme blob, specifically for the new theme designer,\n * aka.ms/themedesigner. Shouldn't use loadTheme like the old theme designer since it's deprecated.\n * We want to use the theme object from createTheme and use the Customizations.applySettings API instead.\n */\n public static getThemeAsCodeWithCreateTheme(slotRules: IThemeRules): any {\n const output = 'const myTheme = createTheme({\\n palette: {\\n';\n return ThemeGenerator._makeRemainingCode(output, slotRules);\n }\n\n /**\n * Gets the theme as a list of SASS variables that can be used in code\n * ```\n * $tokenName: \"[theme:tokenName, default:#f00f00]\";\n * $tokenName2: \"[theme:tokenName2, default:#ba2ba2]\";\n * ...\n * ```\n */\n public static getThemeAsSass(slotRules: IThemeRules): any {\n const sassVarTemplate = '${0}Color: \"[theme: {1}, default: {2}]\";\\n';\n let output = '';\n\n for (const ruleName in slotRules) {\n if (slotRules.hasOwnProperty(ruleName)) {\n const rule: IThemeSlotRule = slotRules[ruleName];\n const camelCasedName = rule.name.charAt(0).toLowerCase() + rule.name.slice(1);\n output += format(\n sassVarTemplate,\n camelCasedName,\n camelCasedName,\n rule.color ? rule.color.str : rule.value || '',\n );\n }\n }\n return output;\n }\n\n /**\n * Gets the theme formatted for PowerShell scripts\n * ```\n * @{\n * \"tokenName\" = \"#f00f00\";\n * \"tokenName2\" = \"#ba2ba2\";\n * ...\n * }\n * ```\n */\n public static getThemeForPowerShell(slotRules: IThemeRules): any {\n const psVarTemplate = '\"{0}\" = \"{1}\";\\n';\n let output = '';\n\n for (const ruleName in slotRules) {\n if (slotRules.hasOwnProperty(ruleName)) {\n const rule: IThemeSlotRule = slotRules[ruleName];\n if (rule.value) {\n // skip this one, it's not a color\n continue;\n }\n const camelCasedName = rule.name.charAt(0).toLowerCase() + rule.name.slice(1);\n let outputColor = rule.color ? '#' + rule.color.hex : rule.value || '';\n // powershell endpoint uses the RGBA format\n if (rule.color && rule.color.a && rule.color.a !== 100) {\n outputColor += String(rule.color.a.toString(16));\n }\n output += format(psVarTemplate, camelCasedName, outputColor);\n }\n }\n return '@{\\n' + output + '}';\n }\n\n /**\n * Sets the given slot's color to the appropriate color, shading it if necessary.\n * Then, iterates through all other rules (that are this rule's dependents) to update them accordingly.\n * @param isCustomization - If true, it's a user-provided color, which should be to that raw color.\n * If false, the rule it's inheriting from changed, so updated using asShade.\n */\n private static _setSlot(\n rule: IThemeSlotRule,\n color: IColor,\n isInverted: boolean,\n isCustomization: boolean,\n overwriteCustomColor = true,\n ) {\n if (!rule.color && rule.value) {\n // not a color rule\n return;\n }\n\n if (overwriteCustomColor || !rule.color || !rule.isCustomized || !rule.inherits) {\n // set the rule's color under these conditions\n if (\n (overwriteCustomColor || !rule.isCustomized) &&\n !isCustomization &&\n rule.inherits &&\n isValidShade(rule.asShade)\n ) {\n // it's inheriting by shade\n if (rule.isBackgroundShade) {\n rule.color = getBackgroundShade(color, rule.asShade!, isInverted)!;\n } else {\n rule.color = getShade(color, rule.asShade!, isInverted)!;\n }\n rule.isCustomized = false;\n } else {\n rule.color = color;\n rule.isCustomized = true;\n }\n\n // then update dependent colors\n for (const ruleToUpdate of rule.dependentRules) {\n ThemeGenerator._setSlot(ruleToUpdate, rule.color, isInverted, false, overwriteCustomColor);\n }\n }\n }\n\n /**\n * Makes the rest of the code that's used for the load theme blob in the exported codepens of\n * both the older sharepoint-specific theme designer and the new theme designer. Takes in\n * theme rules and converts them to format fitting a list of palette colors and their values.\n * Resulting output looks like:\n * ```\n * const _theme = createTheme({\n * palette: {\n * themePrimary: '#0078d4',\n * themeLighterAlt: '#f3f9fd',\n * ...\n * }});\n * ```\n * The first line is loadTheme instead of createTheme for the old sharepoint theme designer.\n */\n private static _makeRemainingCode(output: string, slotRules: IThemeRules) {\n const attributeTemplate = \" {0}: '{1}',\\n\";\n for (const ruleName in slotRules) {\n if (slotRules.hasOwnProperty(ruleName)) {\n const rule: IThemeSlotRule = slotRules[ruleName];\n const camelCasedName = rule.name.charAt(0).toLowerCase() + rule.name.slice(1);\n const outputColor = rule.color ? '#' + rule.color.hex : rule.value || '';\n output += format(attributeTemplate, camelCasedName, outputColor);\n }\n }\n output += ' }});';\n return output;\n }\n}\n","import { Shade } from '../../utilities/color/shades';\nimport { getColorFromString } from '../../utilities/color/getColorFromString';\nimport { mapEnumByName } from '../../Utilities';\nimport type { IThemeRules } from './IThemeRules';\n\n/* This is the set of rules for our default theme.\n We start with three base slots, defining the background, foreground (text), and\n primary color (sometimes called theme color). Each Fabric slot is generated from\n shades (or tints) of one of those three, creating the Fabric palette.\n Then, we have semantic slots, the new thing intended to eventually replace the\n Fabric palette. The semantic slots inherit from the Fabric palette. */\n\n/* The most minimal set of slots we start with. All other ones can be generated based on rules.\n * This is not so much an enum as it is a list. The enum is used to insure \"type\"-safety.\n * For now, we are only dealing with color. */\nexport enum BaseSlots {\n primaryColor,\n backgroundColor,\n foregroundColor,\n}\n\n/* The original Fabric palette, only for back-compat. */\nexport enum FabricSlots {\n themePrimary, // BaseSlots.primaryColor, Shade[Shade.Unshaded]);\n themeLighterAlt, // BaseSlots.primaryColor, Shade[Shade.Shade1]);\n themeLighter, // BaseSlots.primaryColor, Shade[Shade.Shade2]);\n themeLight, // BaseSlots.primaryColor, Shade[Shade.Shade3]);\n themeTertiary, // BaseSlots.primaryColor, Shade[Shade.Shade4]);\n themeSecondary, // BaseSlots.primaryColor, Shade[Shade.Shade5]);\n themeDarkAlt, // BaseSlots.primaryColor, Shade[Shade.Shade6]);\n themeDark, // BaseSlots.primaryColor, Shade[Shade.Shade7]);\n themeDarker, // BaseSlots.primaryColor, Shade[Shade.Shade8]);\n\n neutralLighterAlt, // BaseSlots.backgroundColor, Shade[Shade.Shade1]);\n neutralLighter, // BaseSlots.backgroundColor, Shade[Shade.Shade2]);\n neutralLight, // BaseSlots.backgroundColor, Shade[Shade.Shade3]);\n neutralQuaternaryAlt, // BaseSlots.backgroundColor, Shade[Shade.Shade4]);\n neutralQuaternary, // BaseSlots.backgroundColor, Shade[Shade.Shade5]);\n neutralTertiaryAlt, // BaseSlots.backgroundColor, Shade[Shade.Shade6]); // bg6 or fg2\n neutralTertiary, // BaseSlots.foregroundColor, Shade[Shade.Shade3]);\n neutralSecondaryAlt, // BaseSlots.foregroundColor, Shade[Shade.Shade4]);\n neutralSecondary, // BaseSlots.foregroundColor, Shade[Shade.Shade5]);\n neutralPrimaryAlt, // BaseSlots.foregroundColor, Shade[Shade.Shade6]);\n neutralPrimary, // BaseSlots.foregroundColor, Shade[Shade.Unshaded]);\n neutralDark, // BaseSlots.foregroundColor, Shade[Shade.Shade7]);\n\n black, // BaseSlots.foregroundColor, Shade[Shade.Shade8]);\n white, // BaseSlots.backgroundColor, Shade[Shade.Unshaded]);\n}\n\n/* List of all the semantic color slots for this theme.\n * This is not so much an enum as it is a list. The enum is used to insure \"type\"-safety. */\nexport enum SemanticColorSlots {\n bodyBackground,\n bodyText,\n disabledBackground,\n disabledText,\n}\n\nexport function themeRulesStandardCreator(): IThemeRules {\n const slotRules: IThemeRules = {};\n\n /*** BASE COLORS and their SHADES */\n // iterate through each base slot and make the SlotRules for those\n mapEnumByName(BaseSlots, (baseSlot: string) => {\n // first make the SlotRule for the unshaded base Color\n slotRules[baseSlot] = {\n name: baseSlot,\n isCustomized: true,\n dependentRules: [],\n };\n\n // then make a rule for each shade of this base color, but skip unshaded\n mapEnumByName(Shade, (shadeName: string, shadeValue: Shade) => {\n if (shadeName === Shade[Shade.Unshaded]) {\n return;\n }\n const inherits = slotRules[baseSlot];\n const thisSlotRule = {\n name: baseSlot + shadeName,\n inherits: slotRules[baseSlot],\n asShade: shadeValue,\n isCustomized: false,\n isBackgroundShade: baseSlot === BaseSlots[BaseSlots.backgroundColor] ? true : false,\n dependentRules: [],\n };\n slotRules[baseSlot + shadeName] = thisSlotRule;\n inherits.dependentRules.push(thisSlotRule);\n\n return undefined;\n });\n\n return undefined;\n });\n\n // set default colors for the base colors\n slotRules[BaseSlots[BaseSlots.primaryColor]].color = getColorFromString('#0078d4');\n slotRules[BaseSlots[BaseSlots.backgroundColor]].color = getColorFromString('#ffffff');\n slotRules[BaseSlots[BaseSlots.foregroundColor]].color = getColorFromString('#323130');\n\n function _makeFabricSlotRule(\n slotName: string,\n inheritedBase: BaseSlots,\n inheritedShade: Shade,\n isBackgroundShade = false,\n ): void {\n const inherits = slotRules[BaseSlots[inheritedBase]];\n const thisSlotRule = {\n name: slotName,\n inherits,\n asShade: inheritedShade,\n isCustomized: false,\n isBackgroundShade,\n dependentRules: [],\n };\n slotRules[slotName] = thisSlotRule;\n inherits.dependentRules.push(thisSlotRule);\n }\n _makeFabricSlotRule(FabricSlots[FabricSlots.themePrimary], BaseSlots.primaryColor, Shade.Unshaded);\n _makeFabricSlotRule(FabricSlots[FabricSlots.themeLighterAlt], BaseSlots.primaryColor, Shade.Shade1);\n _makeFabricSlotRule(FabricSlots[FabricSlots.themeLighter], BaseSlots.primaryColor, Shade.Shade2);\n _makeFabricSlotRule(FabricSlots[FabricSlots.themeLight], BaseSlots.primaryColor, Shade.Shade3);\n _makeFabricSlotRule(FabricSlots[FabricSlots.themeTertiary], BaseSlots.primaryColor, Shade.Shade4);\n _makeFabricSlotRule(FabricSlots[FabricSlots.themeSecondary], BaseSlots.primaryColor, Shade.Shade5);\n _makeFabricSlotRule(FabricSlots[FabricSlots.themeDarkAlt], BaseSlots.primaryColor, Shade.Shade6);\n _makeFabricSlotRule(FabricSlots[FabricSlots.themeDark], BaseSlots.primaryColor, Shade.Shade7);\n _makeFabricSlotRule(FabricSlots[FabricSlots.themeDarker], BaseSlots.primaryColor, Shade.Shade8);\n\n _makeFabricSlotRule(FabricSlots[FabricSlots.neutralLighterAlt], BaseSlots.backgroundColor, Shade.Shade1, true);\n _makeFabricSlotRule(FabricSlots[FabricSlots.neutralLighter], BaseSlots.backgroundColor, Shade.Shade2, true);\n _makeFabricSlotRule(FabricSlots[FabricSlots.neutralLight], BaseSlots.backgroundColor, Shade.Shade3, true);\n _makeFabricSlotRule(FabricSlots[FabricSlots.neutralQuaternaryAlt], BaseSlots.backgroundColor, Shade.Shade4, true);\n _makeFabricSlotRule(FabricSlots[FabricSlots.neutralQuaternary], BaseSlots.backgroundColor, Shade.Shade5, true);\n // bg6 or fg2\n _makeFabricSlotRule(FabricSlots[FabricSlots.neutralTertiaryAlt], BaseSlots.backgroundColor, Shade.Shade6, true);\n _makeFabricSlotRule(FabricSlots[FabricSlots.neutralTertiary], BaseSlots.foregroundColor, Shade.Shade3);\n _makeFabricSlotRule(FabricSlots[FabricSlots.neutralSecondary], BaseSlots.foregroundColor, Shade.Shade4);\n _makeFabricSlotRule(FabricSlots[FabricSlots.neutralSecondaryAlt], BaseSlots.foregroundColor, Shade.Shade4);\n _makeFabricSlotRule(FabricSlots[FabricSlots.neutralPrimaryAlt], BaseSlots.foregroundColor, Shade.Shade5);\n _makeFabricSlotRule(FabricSlots[FabricSlots.neutralPrimary], BaseSlots.foregroundColor, Shade.Unshaded);\n _makeFabricSlotRule(FabricSlots[FabricSlots.neutralDark], BaseSlots.foregroundColor, Shade.Shade7);\n\n _makeFabricSlotRule(FabricSlots[FabricSlots.black], BaseSlots.foregroundColor, Shade.Shade8);\n _makeFabricSlotRule(FabricSlots[FabricSlots.white], BaseSlots.backgroundColor, Shade.Unshaded, true);\n\n slotRules[FabricSlots[FabricSlots.neutralLighterAlt]].color = getColorFromString('#faf9f8');\n slotRules[FabricSlots[FabricSlots.neutralLighter]].color = getColorFromString('#f3f2f1');\n slotRules[FabricSlots[FabricSlots.neutralLight]].color = getColorFromString('#edebe9');\n slotRules[FabricSlots[FabricSlots.neutralQuaternaryAlt]].color = getColorFromString('#e1dfdd');\n slotRules[FabricSlots[FabricSlots.neutralDark]].color = getColorFromString('#201f1e');\n slotRules[FabricSlots[FabricSlots.neutralTertiaryAlt]].color = getColorFromString('#c8c6c4');\n\n slotRules[FabricSlots[FabricSlots.black]].color = getColorFromString('#000000');\n slotRules[FabricSlots[FabricSlots.neutralDark]].color = getColorFromString('#201f1e');\n slotRules[FabricSlots[FabricSlots.neutralPrimaryAlt]].color = getColorFromString('#3b3a39');\n slotRules[FabricSlots[FabricSlots.neutralSecondary]].color = getColorFromString('#605e5c');\n slotRules[FabricSlots[FabricSlots.neutralSecondaryAlt]].color = getColorFromString('#8a8886');\n slotRules[FabricSlots[FabricSlots.neutralTertiary]].color = getColorFromString('#a19f9d');\n slotRules[FabricSlots[FabricSlots.white]].color = getColorFromString('#ffffff');\n\n slotRules[FabricSlots[FabricSlots.themeDarker]].color = getColorFromString('#004578');\n slotRules[FabricSlots[FabricSlots.themeDark]].color = getColorFromString('#005a9e');\n slotRules[FabricSlots[FabricSlots.themeDarkAlt]].color = getColorFromString('#106ebe');\n slotRules[FabricSlots[FabricSlots.themeSecondary]].color = getColorFromString('#2b88d8');\n slotRules[FabricSlots[FabricSlots.themeTertiary]].color = getColorFromString('#71afe5');\n slotRules[FabricSlots[FabricSlots.themeLight]].color = getColorFromString('#c7e0f4');\n slotRules[FabricSlots[FabricSlots.themeLighter]].color = getColorFromString('#deecf9');\n slotRules[FabricSlots[FabricSlots.themeLighterAlt]].color = getColorFromString('#eff6fc');\n\n slotRules[FabricSlots[FabricSlots.neutralLighterAlt]].isCustomized = true;\n slotRules[FabricSlots[FabricSlots.neutralLighter]].isCustomized = true;\n slotRules[FabricSlots[FabricSlots.neutralLight]].isCustomized = true;\n slotRules[FabricSlots[FabricSlots.neutralQuaternaryAlt]].isCustomized = true;\n slotRules[FabricSlots[FabricSlots.neutralDark]].isCustomized = true;\n slotRules[FabricSlots[FabricSlots.neutralTertiaryAlt]].isCustomized = true;\n\n slotRules[FabricSlots[FabricSlots.black]].isCustomized = true;\n slotRules[FabricSlots[FabricSlots.neutralDark]].isCustomized = true;\n slotRules[FabricSlots[FabricSlots.neutralPrimaryAlt]].isCustomized = true;\n slotRules[FabricSlots[FabricSlots.neutralSecondary]].isCustomized = true;\n slotRules[FabricSlots[FabricSlots.neutralSecondaryAlt]].isCustomized = true;\n slotRules[FabricSlots[FabricSlots.neutralTertiary]].isCustomized = true;\n slotRules[FabricSlots[FabricSlots.white]].isCustomized = true;\n\n slotRules[FabricSlots[FabricSlots.themeDarker]].isCustomized = true;\n slotRules[FabricSlots[FabricSlots.themeDark]].isCustomized = true;\n slotRules[FabricSlots[FabricSlots.themeDarkAlt]].isCustomized = true;\n slotRules[FabricSlots[FabricSlots.themePrimary]].isCustomized = true;\n slotRules[FabricSlots[FabricSlots.themeSecondary]].isCustomized = true;\n slotRules[FabricSlots[FabricSlots.themeTertiary]].isCustomized = true;\n slotRules[FabricSlots[FabricSlots.themeLight]].isCustomized = true;\n slotRules[FabricSlots[FabricSlots.themeLighter]].isCustomized = true;\n slotRules[FabricSlots[FabricSlots.themeLighterAlt]].isCustomized = true;\n\n return slotRules;\n}\n","import * as React from 'react';\nimport { KeyCodes } from '../../Utilities';\nimport {\n TimeConstants,\n addMinutes,\n formatTimeString,\n ceilMinuteToIncrement,\n getDateFromTimeSelection,\n} from '@fluentui/date-time-utilities';\nimport { ComboBox } from '../../ComboBox';\nimport { format } from '../../Utilities';\nimport type { IComboBox, IComboBoxOption } from '../../ComboBox';\nimport type { ITimePickerProps, ITimeRange, ITimePickerStrings } from './TimePicker.types';\nimport { useControllableValue, useConst } from '@fluentui/react-hooks';\n\nconst REGEX_SHOW_SECONDS_HOUR_12 = /^((1[0-2]|0?[1-9]):([0-5][0-9]):([0-5][0-9])\\s([AaPp][Mm]))$/;\nconst REGEX_HIDE_SECONDS_HOUR_12 = /^((1[0-2]|0?[1-9]):[0-5][0-9]\\s([AaPp][Mm]))$/;\nconst REGEX_SHOW_SECONDS_HOUR_24 = /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/;\nconst REGEX_HIDE_SECONDS_HOUR_24 = /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/;\n\nconst TIME_LOWER_BOUND = 0;\nconst TIME_UPPER_BOUND = 23;\n\nconst getDefaultStrings = (useHour12: boolean, showSeconds: boolean): ITimePickerStrings => {\n const hourUnits = useHour12 ? '12-hour' : '24-hour';\n const timeFormat = `hh:mm${showSeconds ? ':ss' : ''}${useHour12 ? ' AP' : ''}`;\n const invalidInputErrorMessage = `Enter a valid time in the ${hourUnits} format: ${timeFormat}`;\n const timeOutOfBoundsErrorMessage = `Please enter a time within the range of {0} and {1}`;\n\n return {\n invalidInputErrorMessage,\n timeOutOfBoundsErrorMessage,\n };\n};\n\n/**\n * {@docCategory TimePicker}\n */\nexport const TimePicker: React.FunctionComponent = ({\n label,\n increments = 30,\n showSeconds = false,\n allowFreeform = true,\n useHour12 = false,\n timeRange,\n strings = getDefaultStrings(useHour12, showSeconds),\n defaultValue,\n value,\n dateAnchor,\n onChange,\n onFormatDate,\n onValidateUserInput,\n onValidationResult,\n ...rest\n}: ITimePickerProps) => {\n const [comboBoxText, setComboBoxText] = React.useState('');\n const [selectedKey, setSelectedKey] = React.useState();\n const [errorMessage, setErrorMessage] = React.useState('');\n\n const fallbackDateAnchor = useConst(new Date());\n\n const [selectedTime, setSelectedTime] = useControllableValue(value, defaultValue);\n\n const optionsCount = getDropdownOptionsCount(increments, timeRange);\n\n const internalDateAnchor = dateAnchor || value || defaultValue || fallbackDateAnchor;\n\n const dateStartAnchor = React.useMemo(\n () => getDateAnchor(internalDateAnchor, 'start', increments, timeRange),\n [internalDateAnchor, increments, timeRange],\n );\n\n const dateEndAnchor = React.useMemo(\n () => getDateAnchor(internalDateAnchor, 'end', increments, timeRange),\n [internalDateAnchor, increments, timeRange],\n );\n\n const timePickerOptions: IComboBoxOption[] = React.useMemo(() => {\n const optionsList = Array(optionsCount);\n for (let i = 0; i < optionsCount; i++) {\n optionsList[i] = 0;\n }\n\n return optionsList.map((_, index) => {\n const option: Date = addMinutes(dateStartAnchor, increments * index);\n option.setSeconds(0);\n const formattedTimeString = formatTimeString(option, showSeconds, useHour12);\n const optionText = onFormatDate ? onFormatDate(option) : formattedTimeString;\n return {\n key: formattedTimeString,\n text: optionText,\n data: option,\n };\n });\n }, [dateStartAnchor, increments, optionsCount, showSeconds, onFormatDate, useHour12]);\n\n React.useEffect(() => {\n if (selectedTime && !isNaN(selectedTime.valueOf())) {\n const formattedTimeString = formatTimeString(selectedTime, showSeconds, useHour12);\n const comboboxOption = timePickerOptions.find((option: IComboBoxOption) => option.key === formattedTimeString);\n setSelectedKey(comboboxOption?.key);\n setComboBoxText(comboboxOption ? comboboxOption.text : formattedTimeString);\n } else {\n setSelectedKey(null);\n setComboBoxText('');\n }\n }, [selectedTime, timePickerOptions, onFormatDate, showSeconds, useHour12]);\n\n const onInputChange = React.useCallback(\n (ev: React.FormEvent, option?: IComboBoxOption, _index?: number, input?: string): void => {\n const validateUserInput = (userInput: string): string => {\n let errorMessageToDisplay = '';\n let regex: RegExp;\n if (useHour12) {\n regex = showSeconds ? REGEX_SHOW_SECONDS_HOUR_12 : REGEX_HIDE_SECONDS_HOUR_12;\n } else {\n regex = showSeconds ? REGEX_SHOW_SECONDS_HOUR_24 : REGEX_HIDE_SECONDS_HOUR_24;\n }\n if (!regex.test(userInput)) {\n errorMessageToDisplay = strings.invalidInputErrorMessage;\n } else if (timeRange && strings.timeOutOfBoundsErrorMessage) {\n const optionDate: Date = getDateFromTimeSelection(useHour12, dateStartAnchor, userInput);\n if (optionDate < dateStartAnchor || optionDate > dateEndAnchor) {\n errorMessageToDisplay = format(\n strings.timeOutOfBoundsErrorMessage,\n dateStartAnchor.toString(),\n dateEndAnchor.toString(),\n );\n }\n }\n return errorMessageToDisplay;\n };\n\n let errorMessageToDisplay = '';\n if (input) {\n if (allowFreeform && !option) {\n if (!onFormatDate) {\n // Validate only if user did not add onFormatDate\n errorMessageToDisplay = validateUserInput(input);\n } else {\n // Use user provided validation if onFormatDate is provided\n if (onValidateUserInput) {\n errorMessageToDisplay = onValidateUserInput(input);\n }\n }\n }\n }\n\n if (onValidationResult && errorMessage !== errorMessageToDisplay) {\n // only call onValidationResult if stored errorMessage state value is different from latest error message\n onValidationResult(ev, { errorMessage: errorMessageToDisplay });\n }\n\n let changedTime: Date;\n if (errorMessageToDisplay || (input !== undefined && !input.length)) {\n const timeSelection = input || option?.text || '';\n setComboBoxText(timeSelection);\n setSelectedTime(errorMessageToDisplay ? new Date('invalid') : undefined);\n changedTime = new Date('invalid');\n } else {\n let updatedTime;\n if (option?.data instanceof Date) {\n updatedTime = option.data;\n } else {\n const timeSelection = (option?.key as string) || input || '';\n updatedTime = getDateFromTimeSelection(useHour12, dateStartAnchor, timeSelection);\n }\n setSelectedTime(updatedTime);\n changedTime = updatedTime;\n }\n\n onChange?.(ev, changedTime);\n setErrorMessage(errorMessageToDisplay);\n },\n [\n timeRange,\n dateStartAnchor,\n dateEndAnchor,\n allowFreeform,\n onFormatDate,\n onValidateUserInput,\n showSeconds,\n useHour12,\n strings.invalidInputErrorMessage,\n strings.timeOutOfBoundsErrorMessage,\n setSelectedTime,\n onValidationResult,\n onChange,\n errorMessage,\n ],\n );\n\n const evaluatePressedKey = (event: React.KeyboardEvent) => {\n // eslint-disable-next-line deprecation/deprecation\n const charCode = event.charCode;\n if (\n !onFormatDate &&\n // Only permit input of digits, space, colon, A/P/M characters\n !(\n (charCode >= KeyCodes.zero && charCode <= KeyCodes.colon) ||\n charCode === KeyCodes.space ||\n charCode === KeyCodes.a ||\n charCode === KeyCodes.m ||\n charCode === KeyCodes.p\n )\n ) {\n event.preventDefault();\n }\n };\n\n return (\n \n );\n};\nTimePicker.displayName = 'TimePicker';\n\nconst getDateAnchor = (\n internalDateAnchor: Date,\n startEnd: 'start' | 'end',\n increments: number,\n timeRange?: ITimeRange,\n) => {\n const clampedDateAnchor = new Date(internalDateAnchor.getTime());\n if (timeRange) {\n const clampedTimeRange = clampTimeRange(timeRange);\n const timeRangeHours = startEnd === 'start' ? clampedTimeRange.start : clampedTimeRange.end;\n if (clampedDateAnchor.getHours() !== timeRangeHours) {\n clampedDateAnchor.setHours(timeRangeHours);\n }\n } else if (startEnd === 'end') {\n clampedDateAnchor.setDate(clampedDateAnchor.getDate() + 1);\n }\n clampedDateAnchor.setMinutes(0);\n clampedDateAnchor.setSeconds(0);\n clampedDateAnchor.setMilliseconds(0);\n\n return ceilMinuteToIncrement(clampedDateAnchor, increments);\n};\n\nconst clampTimeRange = (timeRange: ITimeRange): ITimeRange => {\n return {\n start: Math.min(Math.max(timeRange.start, TIME_LOWER_BOUND), TIME_UPPER_BOUND),\n end: Math.min(Math.max(timeRange.end, TIME_LOWER_BOUND), TIME_UPPER_BOUND),\n };\n};\n\nconst getHoursInRange = (timeRange: ITimeRange | undefined) => {\n let hoursInRange = TimeConstants.HoursInOneDay;\n if (timeRange) {\n const clampedTimeRange = clampTimeRange(timeRange);\n if (clampedTimeRange.start > clampedTimeRange.end) {\n hoursInRange = TimeConstants.HoursInOneDay - timeRange.start - timeRange.end;\n } else if (timeRange.end > timeRange.start) {\n hoursInRange = timeRange.end - timeRange.start;\n }\n }\n\n return hoursInRange;\n};\n\nconst getDropdownOptionsCount = (increments: number, timeRange: ITimeRange | undefined) => {\n const hoursInRange = getHoursInRange(timeRange);\n return Math.floor((TimeConstants.MinutesInOneHour * hoursInRange) / increments);\n};\n","import * as React from 'react';\nimport { useControllableValue, useId, useWarnings } from '@fluentui/react-hooks';\nimport { classNamesFunction, getNativeProps, inputProperties, useFocusRects } from '@fluentui/utilities';\nimport { Label } from '../Label/Label';\nimport type { IToggleProps, IToggleStyleProps, IToggleStyles, IToggle } from './Toggle.types';\n\nconst getClassNames = classNamesFunction();\n\nconst COMPONENT_NAME = 'Toggle';\n\nexport const ToggleBase: React.FunctionComponent = React.forwardRef(\n (props, forwardedRef) => {\n const {\n as: RootType = 'div',\n ariaLabel,\n checked: controlledChecked,\n className,\n defaultChecked = false,\n disabled,\n inlineLabel,\n label,\n // eslint-disable-next-line deprecation/deprecation\n offAriaLabel,\n offText,\n // eslint-disable-next-line deprecation/deprecation\n onAriaLabel,\n onChange,\n // eslint-disable-next-line deprecation/deprecation\n onChanged,\n onClick: onToggleClick,\n onText,\n role,\n styles,\n theme,\n } = props;\n\n const [checked, setChecked] = useControllableValue(\n controlledChecked,\n defaultChecked,\n React.useCallback(\n (ev: React.MouseEvent, isChecked: boolean) => {\n onChange?.(ev, isChecked);\n onChanged?.(isChecked);\n },\n [onChange, onChanged],\n ),\n );\n\n const classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n disabled,\n checked,\n inlineLabel,\n onOffMissing: !onText && !offText,\n });\n const badAriaLabel = checked ? onAriaLabel : offAriaLabel;\n const id = useId(COMPONENT_NAME, props.id);\n const labelId = `${id}-label`;\n const stateTextId = `${id}-stateText`;\n const stateText = checked ? onText : offText;\n const toggleNativeProps = getNativeProps>(props, inputProperties, [\n 'defaultChecked',\n ]);\n\n // The following properties take priority for what Narrator should read:\n // 1. ariaLabel\n // 2. onAriaLabel (if checked) or offAriaLabel (if not checked)\n // 3. label, if existent\n\n let labelledById: string | undefined = undefined;\n if (!ariaLabel && !badAriaLabel) {\n if (label) {\n labelledById = labelId;\n }\n if (stateText && !labelledById) {\n labelledById = stateTextId;\n }\n }\n\n const toggleButton = React.useRef(null);\n useFocusRects(toggleButton);\n useComponentRef(props, checked, toggleButton);\n\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,\n deprecations: {\n offAriaLabel: undefined,\n onAriaLabel: 'ariaLabel',\n onChanged: 'onChange',\n },\n mutuallyExclusive: { checked: 'defaultChecked' },\n });\n }\n\n const onClick = (ev: React.MouseEvent) => {\n if (!disabled) {\n setChecked(!checked, ev);\n if (onToggleClick) {\n onToggleClick(ev);\n }\n }\n };\n\n const slotProps = {\n root: {\n className: classNames.root,\n hidden: toggleNativeProps.hidden,\n },\n label: {\n children: label,\n className: classNames.label,\n htmlFor: id,\n id: labelId,\n },\n container: {\n className: classNames.container,\n },\n pill: {\n ...toggleNativeProps,\n 'aria-disabled': disabled,\n 'aria-checked': checked,\n 'aria-label': ariaLabel ? ariaLabel : badAriaLabel,\n 'aria-labelledby': labelledById,\n className: classNames.pill,\n 'data-is-focusable': true,\n 'data-ktp-target': true,\n disabled,\n id,\n onClick,\n ref: toggleButton,\n role: role ? role : 'switch',\n type: 'button' as React.ButtonHTMLAttributes['type'],\n },\n thumb: {\n className: classNames.thumb,\n },\n stateText: {\n children: stateText,\n className: classNames.text,\n htmlFor: id,\n id: stateTextId,\n },\n };\n\n return (\n } {...slotProps.root}>\n {label &&

      \n \n {((checked && onText) || offText) &&
      \n \n );\n },\n);\n\nToggleBase.displayName = COMPONENT_NAME + 'Base';\n\nconst useComponentRef = (\n props: IToggleProps,\n isChecked: boolean | undefined,\n toggleButtonRef: React.RefObject,\n) => {\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n get checked() {\n return !!isChecked;\n },\n focus() {\n if (toggleButtonRef.current) {\n toggleButtonRef.current.focus();\n }\n },\n }),\n [isChecked, toggleButtonRef],\n );\n};\n","import {\n HighContrastSelector,\n getFocusStyle,\n FontWeights,\n getHighContrastNoAdjustStyle,\n} from '@fluentui/style-utilities';\nimport type { IToggleStyleProps, IToggleStyles } from './Toggle.types';\n\nconst DEFAULT_PILL_WIDTH = 40;\nconst DEFAULT_PILL_HEIGHT = 20;\nconst DEFAULT_THUMB_SIZE = 12;\n\nexport const getStyles = (props: IToggleStyleProps): IToggleStyles => {\n const { theme, className, disabled, checked, inlineLabel, onOffMissing } = props;\n const { semanticColors, palette } = theme;\n\n // Tokens\n const pillUncheckedBackground = semanticColors.bodyBackground;\n const pillCheckedBackground = semanticColors.inputBackgroundChecked;\n const pillCheckedHoveredBackground = semanticColors.inputBackgroundCheckedHovered;\n const thumbUncheckedHoveredBackground = palette.neutralDark;\n const pillCheckedDisabledBackground = semanticColors.disabledBodySubtext;\n const thumbBackground = semanticColors.smallInputBorder;\n const thumbCheckedBackground = semanticColors.inputForegroundChecked;\n const thumbDisabledBackground = semanticColors.disabledBodySubtext;\n const thumbCheckedDisabledBackground = semanticColors.disabledBackground;\n const pillBorderColor = semanticColors.smallInputBorder;\n const pillBorderHoveredColor = semanticColors.inputBorderHovered;\n const pillBorderDisabledColor = semanticColors.disabledBodySubtext;\n const textDisabledColor = semanticColors.disabledText;\n\n return {\n root: [\n 'ms-Toggle',\n checked && 'is-checked',\n !disabled && 'is-enabled',\n disabled && 'is-disabled',\n theme.fonts.medium,\n {\n marginBottom: '8px',\n },\n inlineLabel && {\n display: 'flex',\n alignItems: 'center',\n },\n className,\n ],\n\n label: [\n 'ms-Toggle-label',\n { display: 'inline-block' },\n disabled && {\n color: textDisabledColor,\n selectors: {\n [HighContrastSelector]: {\n color: 'GrayText',\n },\n },\n },\n inlineLabel &&\n !onOffMissing && {\n marginRight: 16,\n },\n onOffMissing &&\n inlineLabel && {\n order: 1,\n marginLeft: 16,\n },\n inlineLabel && { wordBreak: 'break-word' },\n ],\n\n container: [\n 'ms-Toggle-innerContainer',\n {\n display: 'flex',\n position: 'relative',\n },\n ],\n\n pill: [\n 'ms-Toggle-background',\n getFocusStyle(theme, { inset: -3 }),\n {\n fontSize: '20px',\n boxSizing: 'border-box',\n width: DEFAULT_PILL_WIDTH,\n height: DEFAULT_PILL_HEIGHT,\n borderRadius: DEFAULT_PILL_HEIGHT / 2,\n transition: 'all 0.1s ease',\n border: `1px solid ${pillBorderColor}`,\n background: pillUncheckedBackground,\n cursor: 'pointer',\n display: 'flex',\n alignItems: 'center',\n padding: '0 3px',\n overflow: 'visible',\n },\n !disabled && [\n !checked && {\n selectors: {\n ':hover': [\n {\n borderColor: pillBorderHoveredColor,\n },\n ],\n ':hover .ms-Toggle-thumb': [\n {\n backgroundColor: thumbUncheckedHoveredBackground,\n selectors: {\n [HighContrastSelector]: {\n borderColor: 'Highlight',\n },\n },\n },\n ],\n },\n },\n checked && [\n {\n background: pillCheckedBackground,\n borderColor: 'transparent',\n justifyContent: 'flex-end',\n },\n {\n selectors: {\n ':hover': [\n {\n backgroundColor: pillCheckedHoveredBackground,\n borderColor: 'transparent',\n selectors: {\n [HighContrastSelector]: {\n backgroundColor: 'Highlight',\n },\n },\n },\n ],\n [HighContrastSelector]: {\n backgroundColor: 'Highlight',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\n ],\n ],\n disabled && [\n {\n cursor: 'default',\n },\n !checked && [\n {\n borderColor: pillBorderDisabledColor,\n },\n ],\n checked && [\n {\n backgroundColor: pillCheckedDisabledBackground,\n borderColor: 'transparent',\n justifyContent: 'flex-end',\n },\n ],\n ],\n !disabled && {\n selectors: {\n '&:hover': {\n selectors: {\n [HighContrastSelector]: {\n borderColor: 'Highlight',\n },\n },\n },\n },\n },\n ],\n\n thumb: [\n 'ms-Toggle-thumb',\n {\n display: 'block',\n width: DEFAULT_THUMB_SIZE,\n height: DEFAULT_THUMB_SIZE,\n borderRadius: '50%',\n transition: 'all 0.1s ease',\n backgroundColor: thumbBackground,\n /* Border is added to handle high contrast mode for Firefox */\n borderColor: 'transparent',\n borderWidth: DEFAULT_THUMB_SIZE / 2,\n borderStyle: 'solid',\n boxSizing: 'border-box',\n },\n !disabled &&\n checked && [\n {\n backgroundColor: thumbCheckedBackground,\n selectors: {\n [HighContrastSelector]: {\n backgroundColor: 'Window',\n borderColor: 'Window',\n },\n },\n },\n ],\n disabled && [\n !checked && [\n {\n backgroundColor: thumbDisabledBackground,\n },\n ],\n checked && [\n {\n backgroundColor: thumbCheckedDisabledBackground,\n },\n ],\n ],\n ],\n\n text: [\n 'ms-Toggle-stateText',\n {\n selectors: {\n // Workaround: make rules more specific than Label rules.\n '&&': {\n padding: '0',\n margin: '0 8px',\n userSelect: 'none',\n fontWeight: FontWeights.regular,\n },\n },\n },\n disabled && {\n selectors: {\n '&&': {\n color: textDisabledColor,\n selectors: {\n [HighContrastSelector]: {\n color: 'GrayText',\n },\n },\n },\n },\n },\n ],\n };\n};\n","import * as React from 'react';\nimport { styled } from '@fluentui/utilities';\nimport { ToggleBase } from './Toggle.base';\nimport { getStyles } from './Toggle.styles';\nimport type { IToggleProps, IToggleStyleProps, IToggleStyles } from './Toggle.types';\n\nexport const Toggle: React.FunctionComponent = styled(\n ToggleBase,\n getStyles,\n undefined,\n {\n scope: 'Toggle',\n },\n);\n","import * as React from 'react';\nimport type { Theme } from '@fluentui/theme';\n\nexport const ThemeContext = React.createContext(undefined);\n","import { useContext } from 'react';\nimport { useCustomizationSettings } from '@fluentui/utilities';\nimport { createTheme } from '@fluentui/theme';\nimport { ThemeContext } from './ThemeContext';\nimport type { ITheme, Theme } from '@fluentui/theme';\n\n/**\n * Get theme from CustomizerContext or Customizations singleton.\n */\nfunction useCompatTheme(): ITheme | undefined {\n return useCustomizationSettings(['theme']).theme;\n}\n\n/**\n * React hook for programmatically accessing the theme.\n */\nexport const useTheme = (): Theme => {\n const theme = useContext(ThemeContext);\n const legacyTheme = useCompatTheme();\n\n return theme || legacyTheme || createTheme({});\n};\n","import {\n Stylesheet,\n mergeCssSets,\n fontFace as mergeFontFace,\n keyframes as mergeKeyframes,\n} from '@fluentui/merge-styles';\nimport type { StyleRenderer } from './types';\n\nlet _seed = 0;\n\nexport const mergeStylesRenderer: StyleRenderer = {\n reset: () => {\n // If the stylesheet reset call is made, invalidate the cache keys.\n Stylesheet.getInstance().onReset(() => _seed++);\n },\n\n getId: () => _seed,\n\n renderStyles: (styleSet, options) => {\n return mergeCssSets((Array.isArray(styleSet) ? styleSet : [styleSet]) as any, options) as any;\n },\n\n renderFontFace: (fontFace, options) => {\n return mergeFontFace(fontFace);\n },\n\n renderKeyframes: keyframes => {\n return mergeKeyframes(keyframes as any);\n },\n};\n","import { useTheme } from './useTheme';\nimport { getId } from '@fluentui/utilities';\nimport { useWindow } from '@fluentui/react-window-provider';\nimport { mergeStylesRenderer } from './styleRenderers/mergeStylesRenderer';\nimport type { IStyle } from '@fluentui/style-utilities';\nimport type { Theme } from '@fluentui/theme';\nimport { useEffect } from 'react';\n\ntype GraphPath = readonly [windowId: string | undefined, id: number, theme: Theme | undefined];\nexport type StylesClassMapping = {\n [key in keyof TStyleSet]: string;\n};\ntype Graph = Map<\n string | undefined,\n Map; refCount: number }>>\n>;\n\nconst graphGet = (\n graphNode: Graph,\n [windowId, id, theme]: GraphPath,\n): StylesClassMapping | undefined => {\n return graphNode.get(windowId)?.get(id)?.get(theme)?.classMap;\n};\n\nconst graphSet = (\n graphNode: Graph,\n [windowId, id, theme]: GraphPath,\n classMap: StylesClassMapping,\n) => {\n const windowNode =\n graphNode.get(windowId) ??\n new Map; refCount: number }>>();\n graphNode.set(windowId, windowNode);\n\n const idNode =\n windowNode.get(id) ?? new Map; refCount: number }>();\n windowNode.set(id, idNode);\n\n idNode.set(theme, { classMap, refCount: 0 });\n};\n\nfunction graphRef(\n graphNode: Graph,\n [windowId, id, theme]: GraphPath,\n) {\n const node = graphNode.get(windowId)?.get(id)?.get(theme);\n if (node) {\n node.refCount++;\n }\n}\n\nfunction graphDeref(\n graphNode: Graph,\n [windowId, id, theme]: GraphPath,\n) {\n const node = graphNode.get(windowId)?.get(id)?.get(theme);\n if (node) {\n node.refCount--;\n\n if (node.refCount === 0) {\n graphNode.get(windowId)?.get(id)?.delete(theme);\n\n if (graphNode.get(windowId)?.get(id)?.size === 0) {\n graphNode.get(windowId)?.delete(id);\n\n if (graphNode.get(windowId)?.size === 0) {\n graphNode.delete(windowId);\n }\n }\n }\n }\n}\n\n/**\n * Options that can be provided to the hook generated by `makeStyles`.\n * @deprecated Only used in deprecated `makeStyles` implementation below.\n */\nexport type UseStylesOptions = {\n theme?: Theme;\n};\n\ntype WindowWithId = Window & {\n __id__: string;\n};\n\n/**\n * Registers a css object, optionally as a function of the theme.\n *\n * @param styleOrFunction - Either a css javascript object, or a function which takes in `ITheme`\n * and returns a css javascript object.\n *\n * @deprecated Use `mergeStyles` instead for v8 related code. We will be using a new implementation of `makeStyles` in\n * future versions of the library.\n */\nexport function makeStyles(\n styleOrFunction: TStyleSet | ((theme: Theme) => TStyleSet),\n // eslint-disable-next-line deprecation/deprecation\n): (options?: UseStylesOptions) => StylesClassMapping {\n // Create graph of inputs to map to output.\n const graph: Graph = new Map();\n // Retain a dictionary of window ids we're tracking\n const allWindows = new Set();\n\n // cleanupMapEntries will\n // 1. remove all the graph branches for the window,\n // 2. remove the event listener,\n // 3. delete the allWindows entry.\n const cleanupMapEntries = (ev: PageTransitionEvent) => {\n const win = ev.currentTarget as WindowWithId;\n const winId = win.__id__;\n graph.delete(winId);\n win.removeEventListener('unload', cleanupMapEntries);\n allWindows.delete(winId);\n };\n\n // eslint-disable-next-line deprecation/deprecation\n return (options: UseStylesOptions = {}): StylesClassMapping => {\n let { theme } = options;\n let winId: string | undefined;\n const win = useWindow() as WindowWithId | undefined;\n if (win) {\n win.__id__ = win.__id__ || getId();\n winId = win.__id__;\n if (!allWindows.has(winId)) {\n allWindows.add(winId);\n win.addEventListener('unload', cleanupMapEntries);\n }\n }\n\n const contextualTheme = useTheme();\n\n theme = theme || contextualTheme;\n const renderer = mergeStylesRenderer;\n\n const id = renderer.getId();\n const path: GraphPath = [winId, id, theme] as const;\n let value = graphGet(graph, path);\n\n // Don't keep around unused styles\n useEffect(() => {\n graphRef(graph, [winId, id, theme]);\n\n return () => graphDeref(graph, [winId, id, theme]);\n }, [winId, id, theme]);\n\n if (!value) {\n const styles = isStyleFunction(styleOrFunction)\n ? (styleOrFunction as (theme: Theme) => TStyleSet)(theme!)\n : styleOrFunction;\n\n value = mergeStylesRenderer.renderStyles(styles, { targetWindow: win, rtl: !!theme!.rtl });\n graphSet(graph, path, value);\n }\n\n return value;\n };\n}\n\nfunction isStyleFunction(\n styleOrFunction: TStyleSet | ((theme: Theme) => TStyleSet),\n): styleOrFunction is (theme: Theme) => TStyleSet {\n return typeof styleOrFunction === 'function';\n}\n","import * as React from 'react';\nimport { css } from '@fluentui/utilities';\nimport { useDocument } from '@fluentui/react-window-provider';\nimport { makeStyles } from './makeStyles';\nimport type { ThemeProviderState } from './ThemeProvider.types';\nimport type { Theme } from '@fluentui/theme';\n\n// eslint-disable-next-line deprecation/deprecation\nconst useThemeProviderStyles = makeStyles((theme: Theme) => {\n const { semanticColors, fonts } = theme;\n\n return {\n body: [\n {\n color: semanticColors.bodyText,\n background: semanticColors.bodyBackground,\n fontFamily: fonts.medium.fontFamily,\n fontWeight: fonts.medium.fontWeight,\n fontSize: fonts.medium.fontSize,\n MozOsxFontSmoothing: fonts.medium.MozOsxFontSmoothing,\n WebkitFontSmoothing: fonts.medium.WebkitFontSmoothing,\n },\n ],\n } as Record;\n});\n\n/**\n * Hook to add class to body element.\n */\nfunction useApplyClassToBody(state: ThemeProviderState, classesToApply: string[]): void {\n const { applyTo } = state;\n\n const applyToBody = applyTo === 'body';\n const body = useDocument()?.body;\n\n React.useEffect(() => {\n if (!applyToBody || !body) {\n return;\n }\n\n for (const classToApply of classesToApply) {\n if (classToApply) {\n body.classList.add(classToApply);\n }\n }\n\n return () => {\n if (!applyToBody || !body) {\n return;\n }\n\n for (const classToApply of classesToApply) {\n if (classToApply) {\n body.classList.remove(classToApply);\n }\n }\n };\n }, [applyToBody, body, classesToApply]);\n}\n\nexport function useThemeProviderClasses(state: ThemeProviderState): void {\n const classes = useThemeProviderStyles(state);\n const { className, applyTo } = state;\n\n useApplyClassToBody(state, [classes.root, classes.body]);\n\n state.className = css(className, classes.root, applyTo === 'element' && classes.body);\n}\n","import * as React from 'react';\nimport { CustomizerContext, FocusRectsProvider, getNativeElementProps, omit } from '@fluentui/utilities';\nimport { ThemeContext } from './ThemeContext';\nimport type { ThemeProviderState } from './ThemeProvider.types';\n\nexport const renderThemeProvider = (state: ThemeProviderState) => {\n const { customizerContext, ref, theme } = state;\n const Root = state.as || 'div';\n const rootProps =\n typeof state.as === 'string'\n ? getNativeElementProps(state.as, state)\n : state.as === React.Fragment\n ? { children: state.children }\n : omit(state, ['as']);\n\n return (\n \n \n \n \n \n \n \n );\n};\n","import { mergeThemes } from '@fluentui/theme';\nimport * as React from 'react';\nimport { useTheme } from './useTheme';\nimport { getId } from '@fluentui/utilities';\nimport type { PartialTheme, Theme } from '@fluentui/theme';\nimport type { ThemeProviderState } from './ThemeProvider.types';\nimport type { ICustomizerContext } from '@fluentui/utilities';\n\nconst themeToIdMap = new Map();\n\nconst getThemeId = (...themes: (Theme | PartialTheme | undefined)[]) => {\n const ids: string[] = [];\n\n for (const theme of themes) {\n if (theme) {\n let id = (theme as Theme).id || themeToIdMap.get(theme);\n\n if (!id) {\n id = getId('');\n themeToIdMap.set(theme, id);\n }\n ids.push(id);\n }\n }\n\n return ids.join('-');\n};\n\nexport const useThemeProviderState = (draftState: ThemeProviderState) => {\n const userTheme: PartialTheme = draftState.theme;\n\n // Pull contextual theme.\n const parentTheme = useTheme();\n\n // Update the incoming theme with a memoized version of the merged theme.\n const theme = (draftState.theme = React.useMemo(() => {\n const mergedTheme: Theme = mergeThemes(parentTheme, userTheme);\n\n mergedTheme.id = getThemeId(parentTheme, userTheme);\n\n return mergedTheme;\n }, [parentTheme, userTheme]));\n\n draftState.customizerContext = React.useMemo(\n () => ({\n customizations: {\n inCustomizerContext: true,\n settings: { theme },\n scopedSettings: theme.components || {},\n },\n }),\n [theme],\n );\n\n if (draftState.theme.rtl !== parentTheme.rtl) {\n draftState.dir = draftState.theme.rtl ? 'rtl' : 'ltr';\n }\n};\n","import { renderThemeProvider as render } from './renderThemeProvider';\nimport { useThemeProviderState } from './useThemeProviderState';\nimport { getPropsWithDefaults } from '@fluentui/utilities';\nimport type { ThemeProviderProps, ThemeProviderState } from './ThemeProvider.types';\n\n/**\n * Returns the ThemeProvider render function and calculated state, given user input, ref, and\n * a set of default prop values.\n */\nexport const useThemeProvider = (props: ThemeProviderProps, defaultProps: ThemeProviderProps) => {\n const state = getPropsWithDefaults(defaultProps, props) as ThemeProviderState;\n\n // Apply changes to state.\n useThemeProviderState(state);\n\n return {\n state,\n render,\n };\n};\n","import * as React from 'react';\nimport { useThemeProviderClasses } from './useThemeProviderClasses';\nimport { useThemeProvider } from './useThemeProvider';\nimport { useMergedRefs } from '@fluentui/react-hooks';\nimport type { ThemeProviderProps } from './ThemeProvider.types';\n\n/**\n * ThemeProvider, used for providing css variables and registering stylesheets.\n */\nexport const ThemeProvider: React.FunctionComponent = React.forwardRef<\n HTMLDivElement,\n ThemeProviderProps\n>((props: ThemeProviderProps, ref: React.Ref) => {\n const rootRef = useMergedRefs(ref, React.useRef(null));\n const { render, state } = useThemeProvider(props, {\n ref: rootRef,\n as: 'div',\n applyTo: 'element',\n });\n\n // Render styles.\n useThemeProviderClasses(state);\n\n // Return the rendered content.\n return render(state);\n});\n\nThemeProvider.displayName = 'ThemeProvider';\n","/* !!! DO NOT EDIT !!! */ /* This file has been generated by the token pipeline */ export const grey = {\n '2': '#050505',\n '4': '#0a0a0a',\n '6': '#0f0f0f',\n '8': '#141414',\n '10': '#1a1a1a',\n '12': '#1f1f1f',\n '14': '#242424',\n '16': '#292929',\n '18': '#2e2e2e',\n '20': '#333333',\n '22': '#383838',\n '24': '#3d3d3d',\n '26': '#424242',\n '28': '#474747',\n '30': '#4d4d4d',\n '32': '#525252',\n '34': '#575757',\n '36': '#5c5c5c',\n '38': '#616161',\n '40': '#666666',\n '42': '#6b6b6b',\n '44': '#707070',\n '46': '#757575',\n '48': '#7a7a7a',\n '50': '#808080',\n '52': '#858585',\n '54': '#8a8a8a',\n '56': '#8f8f8f',\n '58': '#949494',\n '60': '#999999',\n '62': '#9e9e9e',\n '64': '#a3a3a3',\n '66': '#a8a8a8',\n '68': '#adadad',\n '70': '#b3b3b3',\n '72': '#b8b8b8',\n '74': '#bdbdbd',\n '76': '#c2c2c2',\n '78': '#c7c7c7',\n '80': '#cccccc',\n '82': '#d1d1d1',\n '84': '#d6d6d6',\n '86': '#dbdbdb',\n '88': '#e0e0e0',\n '90': '#e6e6e6',\n '92': '#ebebeb',\n '94': '#f0f0f0',\n '96': '#f5f5f5',\n '98': '#fafafa'\n};\nexport const whiteAlpha = {\n '5': 'rgba(255, 255, 255, 0.05)',\n '10': 'rgba(255, 255, 255, 0.1)',\n '20': 'rgba(255, 255, 255, 0.2)',\n '30': 'rgba(255, 255, 255, 0.3)',\n '40': 'rgba(255, 255, 255, 0.4)',\n '50': 'rgba(255, 255, 255, 0.5)',\n '60': 'rgba(255, 255, 255, 0.6)',\n '70': 'rgba(255, 255, 255, 0.7)',\n '80': 'rgba(255, 255, 255, 0.8)',\n '90': 'rgba(255, 255, 255, 0.9)'\n};\nexport const blackAlpha = {\n '5': 'rgba(0, 0, 0, 0.05)',\n '10': 'rgba(0, 0, 0, 0.1)',\n '20': 'rgba(0, 0, 0, 0.2)',\n '30': 'rgba(0, 0, 0, 0.3)',\n '40': 'rgba(0, 0, 0, 0.4)',\n '50': 'rgba(0, 0, 0, 0.5)',\n '60': 'rgba(0, 0, 0, 0.6)',\n '70': 'rgba(0, 0, 0, 0.7)',\n '80': 'rgba(0, 0, 0, 0.8)',\n '90': 'rgba(0, 0, 0, 0.9)'\n};\nexport const grey10Alpha = {\n '5': 'rgba(26, 26, 26, 0.05)',\n '10': 'rgba(26, 26, 26, 0.1)',\n '20': 'rgba(26, 26, 26, 0.2)',\n '30': 'rgba(26, 26, 26, 0.3)',\n '40': 'rgba(26, 26, 26, 0.4)',\n '50': 'rgba(26, 26, 26, 0.5)',\n '60': 'rgba(26, 26, 26, 0.6)',\n '70': 'rgba(26, 26, 26, 0.7)',\n '80': 'rgba(26, 26, 26, 0.8)',\n '90': 'rgba(26, 26, 26, 0.9)'\n};\nexport const grey12Alpha = {\n '5': 'rgba(31, 31, 31, 0.05)',\n '10': 'rgba(31, 31, 31, 0.1)',\n '20': 'rgba(31, 31, 31, 0.2)',\n '30': 'rgba(31, 31, 31, 0.3)',\n '40': 'rgba(31, 31, 31, 0.4)',\n '50': 'rgba(31, 31, 31, 0.5)',\n '60': 'rgba(31, 31, 31, 0.6)',\n '70': 'rgba(31, 31, 31, 0.7)',\n '80': 'rgba(31, 31, 31, 0.8)',\n '90': 'rgba(31, 31, 31, 0.9)'\n};\nexport const grey14Alpha = {\n '5': 'rgba(36, 36, 36, 0.05)',\n '10': 'rgba(36, 36, 36, 0.1)',\n '20': 'rgba(36, 36, 36, 0.2)',\n '30': 'rgba(36, 36, 36, 0.3)',\n '40': 'rgba(36, 36, 36, 0.4)',\n '50': 'rgba(36, 36, 36, 0.5)',\n '60': 'rgba(36, 36, 36, 0.6)',\n '70': 'rgba(36, 36, 36, 0.7)',\n '80': 'rgba(36, 36, 36, 0.8)',\n '90': 'rgba(36, 36, 36, 0.9)'\n};\nexport const white = '#ffffff';\nexport const black = '#000000';\nexport const hcHyperlink = '#ffff00';\nexport const hcHighlight = '#1aebff';\nexport const hcDisabled = '#3ff23f';\nexport const hcCanvas = '#000000';\nexport const hcCanvasText = '#ffffff';\nexport const hcHighlightText = '#000000';\nexport const hcButtonText = '#000000';\nexport const hcButtonFace = '#ffffff';\nexport const darkRed = {\n shade50: '#130204',\n shade40: '#230308',\n shade30: '#420610',\n shade20: '#590815',\n shade10: '#690a19',\n primary: '#750b1c',\n tint10: '#861b2c',\n tint20: '#962f3f',\n tint30: '#ac4f5e',\n tint40: '#d69ca5',\n tint50: '#e9c7cd',\n tint60: '#f9f0f2'\n};\nexport const burgundy = {\n shade50: '#1a0607',\n shade40: '#310b0d',\n shade30: '#5c1519',\n shade20: '#7d1d21',\n shade10: '#942228',\n primary: '#a4262c',\n tint10: '#af393e',\n tint20: '#ba4d52',\n tint30: '#c86c70',\n tint40: '#e4afb2',\n tint50: '#f0d3d4',\n tint60: '#fbf4f4'\n};\nexport const cranberry = {\n shade50: '#200205',\n shade40: '#3b0509',\n shade30: '#6e0811',\n shade20: '#960b18',\n shade10: '#b10e1c',\n primary: '#c50f1f',\n tint10: '#cc2635',\n tint20: '#d33f4c',\n tint30: '#dc626d',\n tint40: '#eeacb2',\n tint50: '#f6d1d5',\n tint60: '#fdf3f4'\n};\nexport const red = {\n shade50: '#210809',\n shade40: '#3f1011',\n shade30: '#751d1f',\n shade20: '#9f282b',\n shade10: '#bc2f32',\n primary: '#d13438',\n tint10: '#d7494c',\n tint20: '#dc5e62',\n tint30: '#e37d80',\n tint40: '#f1bbbc',\n tint50: '#f8dadb',\n tint60: '#fdf6f6'\n};\nexport const darkOrange = {\n shade50: '#230900',\n shade40: '#411200',\n shade30: '#7a2101',\n shade20: '#a62d01',\n shade10: '#c43501',\n primary: '#da3b01',\n tint10: '#de501c',\n tint20: '#e36537',\n tint30: '#e9835e',\n tint40: '#f4bfab',\n tint50: '#f9dcd1',\n tint60: '#fdf6f3'\n};\nexport const bronze = {\n shade50: '#1b0a01',\n shade40: '#321303',\n shade30: '#5e2405',\n shade20: '#7f3107',\n shade10: '#963a08',\n primary: '#a74109',\n tint10: '#b2521e',\n tint20: '#bc6535',\n tint30: '#ca8057',\n tint40: '#e5bba4',\n tint50: '#f1d9cc',\n tint60: '#fbf5f2'\n};\nexport const pumpkin = {\n shade50: '#200d03',\n shade40: '#3d1805',\n shade30: '#712d09',\n shade20: '#9a3d0c',\n shade10: '#b6480e',\n primary: '#ca5010',\n tint10: '#d06228',\n tint20: '#d77440',\n tint30: '#df8e64',\n tint40: '#efc4ad',\n tint50: '#f7dfd2',\n tint60: '#fdf7f4'\n};\nexport const orange = {\n shade50: '#271002',\n shade40: '#4a1e04',\n shade30: '#8a3707',\n shade20: '#bc4b09',\n shade10: '#de590b',\n primary: '#f7630c',\n tint10: '#f87528',\n tint20: '#f98845',\n tint30: '#faa06b',\n tint40: '#fdcfb4',\n tint50: '#fee5d7',\n tint60: '#fff9f5'\n};\nexport const peach = {\n shade50: '#291600',\n shade40: '#4d2a00',\n shade30: '#8f4e00',\n shade20: '#c26a00',\n shade10: '#e67e00',\n primary: '#ff8c00',\n tint10: '#ff9a1f',\n tint20: '#ffa83d',\n tint30: '#ffba66',\n tint40: '#ffddb3',\n tint50: '#ffedd6',\n tint60: '#fffaf5'\n};\nexport const marigold = {\n shade50: '#251a00',\n shade40: '#463100',\n shade30: '#835b00',\n shade20: '#b27c00',\n shade10: '#d39300',\n primary: '#eaa300',\n tint10: '#edad1c',\n tint20: '#efb839',\n tint30: '#f2c661',\n tint40: '#f9e2ae',\n tint50: '#fcefd3',\n tint60: '#fefbf4'\n};\nexport const yellow = {\n shade50: '#282400',\n shade40: '#4c4400',\n shade30: '#817400',\n shade20: '#c0ad00',\n shade10: '#e4cc00',\n primary: '#fde300',\n tint10: '#fde61e',\n tint20: '#fdea3d',\n tint30: '#feee66',\n tint40: '#fef7b2',\n tint50: '#fffad6',\n tint60: '#fffef5'\n};\nexport const gold = {\n shade50: '#1f1900',\n shade40: '#3a2f00',\n shade30: '#6c5700',\n shade20: '#937700',\n shade10: '#ae8c00',\n primary: '#c19c00',\n tint10: '#c8a718',\n tint20: '#d0b232',\n tint30: '#dac157',\n tint40: '#ecdfa5',\n tint50: '#f5eece',\n tint60: '#fdfbf2'\n};\nexport const brass = {\n shade50: '#181202',\n shade40: '#2e2103',\n shade30: '#553e06',\n shade20: '#745408',\n shade10: '#89640a',\n primary: '#986f0b',\n tint10: '#a47d1e',\n tint20: '#b18c34',\n tint30: '#c1a256',\n tint40: '#e0cea2',\n tint50: '#efe4cb',\n tint60: '#fbf8f2'\n};\nexport const brown = {\n shade50: '#170e07',\n shade40: '#2b1a0e',\n shade30: '#50301a',\n shade20: '#6c4123',\n shade10: '#804d29',\n primary: '#8e562e',\n tint10: '#9c663f',\n tint20: '#a97652',\n tint30: '#bb8f6f',\n tint40: '#ddc3b0',\n tint50: '#edded3',\n tint60: '#faf7f4'\n};\nexport const darkBrown = {\n shade50: '#0c0704',\n shade40: '#170c08',\n shade30: '#2b1710',\n shade20: '#3a1f15',\n shade10: '#452519',\n primary: '#4d291c',\n tint10: '#623a2b',\n tint20: '#784d3e',\n tint30: '#946b5c',\n tint40: '#caada3',\n tint50: '#e3d2cb',\n tint60: '#f8f3f2'\n};\nexport const lime = {\n shade50: '#121b06',\n shade40: '#23330b',\n shade30: '#405f14',\n shade20: '#57811b',\n shade10: '#689920',\n primary: '#73aa24',\n tint10: '#81b437',\n tint20: '#90be4c',\n tint30: '#a4cc6c',\n tint40: '#cfe5af',\n tint50: '#e5f1d3',\n tint60: '#f8fcf4'\n};\nexport const forest = {\n shade50: '#0c1501',\n shade40: '#162702',\n shade30: '#294903',\n shade20: '#376304',\n shade10: '#427505',\n primary: '#498205',\n tint10: '#599116',\n tint20: '#6ba02b',\n tint30: '#85b44c',\n tint40: '#bdd99b',\n tint50: '#dbebc7',\n tint60: '#f6faf0'\n};\nexport const seafoam = {\n shade50: '#002111',\n shade40: '#003d20',\n shade30: '#00723b',\n shade20: '#009b51',\n shade10: '#00b85f',\n primary: '#00cc6a',\n tint10: '#19d279',\n tint20: '#34d889',\n tint30: '#5ae0a0',\n tint40: '#a8f0cd',\n tint50: '#cff7e4',\n tint60: '#f3fdf8'\n};\nexport const lightGreen = {\n shade50: '#031a02',\n shade40: '#063004',\n shade30: '#0b5a08',\n shade20: '#0e7a0b',\n shade10: '#11910d',\n primary: '#13a10e',\n tint10: '#27ac22',\n tint20: '#3db838',\n tint30: '#5ec75a',\n tint40: '#a7e3a5',\n tint50: '#cef0cd',\n tint60: '#f2fbf2'\n};\nexport const green = {\n shade50: '#031403',\n shade40: '#052505',\n shade30: '#094509',\n shade20: '#0c5e0c',\n shade10: '#0e700e',\n primary: '#107c10',\n tint10: '#218c21',\n tint20: '#359b35',\n tint30: '#54b054',\n tint40: '#9fd89f',\n tint50: '#c9eac9',\n tint60: '#f1faf1'\n};\nexport const darkGreen = {\n shade50: '#021102',\n shade40: '#032003',\n shade30: '#063b06',\n shade20: '#085108',\n shade10: '#0a5f0a',\n primary: '#0b6a0b',\n tint10: '#1a7c1a',\n tint20: '#2d8e2d',\n tint30: '#4da64d',\n tint40: '#9ad29a',\n tint50: '#c6e7c6',\n tint60: '#f0f9f0'\n};\nexport const lightTeal = {\n shade50: '#001d1f',\n shade40: '#00373a',\n shade30: '#00666d',\n shade20: '#008b94',\n shade10: '#00a5af',\n primary: '#00b7c3',\n tint10: '#18bfca',\n tint20: '#32c8d1',\n tint30: '#58d3db',\n tint40: '#a6e9ed',\n tint50: '#cef3f5',\n tint60: '#f2fcfd'\n};\nexport const teal = {\n shade50: '#001516',\n shade40: '#012728',\n shade30: '#02494c',\n shade20: '#026467',\n shade10: '#037679',\n primary: '#038387',\n tint10: '#159195',\n tint20: '#2aa0a4',\n tint30: '#4cb4b7',\n tint40: '#9bd9db',\n tint50: '#c7ebec',\n tint60: '#f0fafa'\n};\nexport const darkTeal = {\n shade50: '#001010',\n shade40: '#001f1f',\n shade30: '#003939',\n shade20: '#004e4e',\n shade10: '#005c5c',\n primary: '#006666',\n tint10: '#0e7878',\n tint20: '#218b8b',\n tint30: '#41a3a3',\n tint40: '#92d1d1',\n tint50: '#c2e7e7',\n tint60: '#eff9f9'\n};\nexport const cyan = {\n shade50: '#00181e',\n shade40: '#002e38',\n shade30: '#005669',\n shade20: '#00748f',\n shade10: '#008aa9',\n primary: '#0099bc',\n tint10: '#18a4c4',\n tint20: '#31afcc',\n tint30: '#56bfd7',\n tint40: '#a4deeb',\n tint50: '#cdedf4',\n tint60: '#f2fafc'\n};\nexport const steel = {\n shade50: '#000f12',\n shade40: '#001b22',\n shade30: '#00333f',\n shade20: '#004555',\n shade10: '#005265',\n primary: '#005b70',\n tint10: '#0f6c81',\n tint20: '#237d92',\n tint30: '#4496a9',\n tint40: '#94c8d4',\n tint50: '#c3e1e8',\n tint60: '#eff7f9'\n};\nexport const lightBlue = {\n shade50: '#091823',\n shade40: '#112d42',\n shade30: '#20547c',\n shade20: '#2c72a8',\n shade10: '#3487c7',\n primary: '#3a96dd',\n tint10: '#4fa1e1',\n tint20: '#65ade5',\n tint30: '#83bdeb',\n tint40: '#bfddf5',\n tint50: '#dcedfa',\n tint60: '#f6fafe'\n};\nexport const blue = {\n shade50: '#001322',\n shade40: '#002440',\n shade30: '#004377',\n shade20: '#005ba1',\n shade10: '#006cbf',\n primary: '#0078d4',\n tint10: '#1a86d9',\n tint20: '#3595de',\n tint30: '#5caae5',\n tint40: '#a9d3f2',\n tint50: '#d0e7f8',\n tint60: '#f3f9fd'\n};\nexport const royalBlue = {\n shade50: '#000c16',\n shade40: '#00172a',\n shade30: '#002c4e',\n shade20: '#003b6a',\n shade10: '#00467e',\n primary: '#004e8c',\n tint10: '#125e9a',\n tint20: '#286fa8',\n tint30: '#4a89ba',\n tint40: '#9abfdc',\n tint50: '#c7dced',\n tint60: '#f0f6fa'\n};\nexport const darkBlue = {\n shade50: '#000910',\n shade40: '#00111f',\n shade30: '#002039',\n shade20: '#002b4e',\n shade10: '#00335c',\n primary: '#003966',\n tint10: '#0e4a78',\n tint20: '#215c8b',\n tint30: '#4178a3',\n tint40: '#92b5d1',\n tint50: '#c2d6e7',\n tint60: '#eff4f9'\n};\nexport const cornflower = {\n shade50: '#0d1126',\n shade40: '#182047',\n shade30: '#2c3c85',\n shade20: '#3c51b4',\n shade10: '#4760d5',\n primary: '#4f6bed',\n tint10: '#637cef',\n tint20: '#778df1',\n tint30: '#93a4f4',\n tint40: '#c8d1fa',\n tint50: '#e1e6fc',\n tint60: '#f7f9fe'\n};\nexport const navy = {\n shade50: '#00061d',\n shade40: '#000c36',\n shade30: '#001665',\n shade20: '#001e89',\n shade10: '#0023a2',\n primary: '#0027b4',\n tint10: '#173bbd',\n tint20: '#3050c6',\n tint30: '#546fd2',\n tint40: '#a3b2e8',\n tint50: '#ccd5f3',\n tint60: '#f2f4fc'\n};\nexport const lavender = {\n shade50: '#120f25',\n shade40: '#221d46',\n shade30: '#3f3682',\n shade20: '#5649b0',\n shade10: '#6656d1',\n primary: '#7160e8',\n tint10: '#8172eb',\n tint20: '#9184ee',\n tint30: '#a79cf1',\n tint40: '#d2ccf8',\n tint50: '#e7e4fb',\n tint60: '#f9f8fe'\n};\nexport const purple = {\n shade50: '#0f0717',\n shade40: '#1c0e2b',\n shade30: '#341a51',\n shade20: '#46236e',\n shade10: '#532982',\n primary: '#5c2e91',\n tint10: '#6b3f9e',\n tint20: '#7c52ab',\n tint30: '#9470bd',\n tint40: '#c6b1de',\n tint50: '#e0d3ed',\n tint60: '#f7f4fb'\n};\nexport const darkPurple = {\n shade50: '#0a0411',\n shade40: '#130820',\n shade30: '#240f3c',\n shade20: '#311552',\n shade10: '#3a1861',\n primary: '#401b6c',\n tint10: '#512b7e',\n tint20: '#633e8f',\n tint30: '#7e5ca7',\n tint40: '#b9a3d3',\n tint50: '#d8cce7',\n tint60: '#f5f2f9'\n};\nexport const orchid = {\n shade50: '#16101d',\n shade40: '#281e37',\n shade30: '#4c3867',\n shade20: '#674c8c',\n shade10: '#795aa6',\n primary: '#8764b8',\n tint10: '#9373c0',\n tint20: '#a083c9',\n tint30: '#b29ad4',\n tint40: '#d7caea',\n tint50: '#e9e2f4',\n tint60: '#f9f8fc'\n};\nexport const grape = {\n shade50: '#160418',\n shade40: '#29072e',\n shade30: '#4c0d55',\n shade20: '#671174',\n shade10: '#7a1589',\n primary: '#881798',\n tint10: '#952aa4',\n tint20: '#a33fb1',\n tint30: '#b55fc1',\n tint40: '#d9a7e0',\n tint50: '#eaceef',\n tint60: '#faf2fb'\n};\nexport const berry = {\n shade50: '#1f091d',\n shade40: '#3a1136',\n shade30: '#6d2064',\n shade20: '#932b88',\n shade10: '#af33a1',\n primary: '#c239b3',\n tint10: '#c94cbc',\n tint20: '#d161c4',\n tint30: '#da7ed0',\n tint40: '#edbbe7',\n tint50: '#f5daf2',\n tint60: '#fdf5fc'\n};\nexport const lilac = {\n shade50: '#1c0b1f',\n shade40: '#35153a',\n shade30: '#63276d',\n shade20: '#863593',\n shade10: '#9f3faf',\n primary: '#b146c2',\n tint10: '#ba58c9',\n tint20: '#c36bd1',\n tint30: '#cf87da',\n tint40: '#e6bfed',\n tint50: '#f2dcf5',\n tint60: '#fcf6fd'\n};\nexport const pink = {\n shade50: '#24091b',\n shade40: '#441232',\n shade30: '#80215d',\n shade20: '#ad2d7e',\n shade10: '#cd3595',\n primary: '#e43ba6',\n tint10: '#e750b0',\n tint20: '#ea66ba',\n tint30: '#ef85c8',\n tint40: '#f7c0e3',\n tint50: '#fbddf0',\n tint60: '#fef6fb'\n};\nexport const hotPink = {\n shade50: '#240016',\n shade40: '#44002a',\n shade30: '#7f004e',\n shade20: '#ad006a',\n shade10: '#cc007e',\n primary: '#e3008c',\n tint10: '#e61c99',\n tint20: '#ea38a6',\n tint30: '#ee5fb7',\n tint40: '#f7adda',\n tint50: '#fbd2eb',\n tint60: '#fef4fa'\n};\nexport const magenta = {\n shade50: '#1f0013',\n shade40: '#390024',\n shade30: '#6b0043',\n shade20: '#91005a',\n shade10: '#ac006b',\n primary: '#bf0077',\n tint10: '#c71885',\n tint20: '#ce3293',\n tint30: '#d957a8',\n tint40: '#eca5d1',\n tint50: '#f5cee6',\n tint60: '#fcf2f9'\n};\nexport const plum = {\n shade50: '#13000c',\n shade40: '#240017',\n shade30: '#43002b',\n shade20: '#5a003b',\n shade10: '#6b0045',\n primary: '#77004d',\n tint10: '#87105d',\n tint20: '#98246f',\n tint30: '#ad4589',\n tint40: '#d696c0',\n tint50: '#e9c4dc',\n tint60: '#faf0f6'\n};\nexport const beige = {\n shade50: '#141313',\n shade40: '#252323',\n shade30: '#444241',\n shade20: '#5d5958',\n shade10: '#6e6968',\n primary: '#7a7574',\n tint10: '#8a8584',\n tint20: '#9a9594',\n tint30: '#afabaa',\n tint40: '#d7d4d4',\n tint50: '#eae8e8',\n tint60: '#faf9f9'\n};\nexport const mink = {\n shade50: '#0f0e0e',\n shade40: '#1c1b1a',\n shade30: '#343231',\n shade20: '#474443',\n shade10: '#54514f',\n primary: '#5d5a58',\n tint10: '#706d6b',\n tint20: '#84817e',\n tint30: '#9e9b99',\n tint40: '#cecccb',\n tint50: '#e5e4e3',\n tint60: '#f8f8f8'\n};\nexport const silver = {\n shade50: '#151818',\n shade40: '#282d2e',\n shade30: '#4a5356',\n shade20: '#657174',\n shade10: '#78868a',\n primary: '#859599',\n tint10: '#92a1a5',\n tint20: '#a0aeb1',\n tint30: '#b3bfc2',\n tint40: '#d8dfe0',\n tint50: '#eaeeef',\n tint60: '#fafbfb'\n};\nexport const platinum = {\n shade50: '#111314',\n shade40: '#1f2426',\n shade30: '#3b4447',\n shade20: '#505c60',\n shade10: '#5f6d71',\n primary: '#69797e',\n tint10: '#79898d',\n tint20: '#89989d',\n tint30: '#a0adb2',\n tint40: '#cdd6d8',\n tint50: '#e4e9ea',\n tint60: '#f8f9fa'\n};\nexport const anchor = {\n shade50: '#090a0b',\n shade40: '#111315',\n shade30: '#202427',\n shade20: '#2b3135',\n shade10: '#333a3f',\n primary: '#394146',\n tint10: '#4d565c',\n tint20: '#626c72',\n tint30: '#808a90',\n tint40: '#bcc3c7',\n tint50: '#dbdfe1',\n tint60: '#f6f7f8'\n};\nexport const charcoal = {\n shade50: '#090909',\n shade40: '#111111',\n shade30: '#202020',\n shade20: '#2b2b2b',\n shade10: '#333333',\n primary: '#393939',\n tint10: '#515151',\n tint20: '#686868',\n tint30: '#888888',\n tint40: '#c4c4c4',\n tint50: '#dfdfdf',\n tint60: '#f7f7f7'\n};\n","import { red, green, darkOrange, yellow, berry, lightGreen, marigold, darkRed, cranberry, pumpkin, peach, gold, brass, brown, forest, seafoam, darkGreen, lightTeal, teal, steel, blue, royalBlue, cornflower, navy, lavender, purple, grape, lilac, pink, magenta, plum, beige, mink, platinum, anchor, orange } from \"./colors.js\";\nexport const statusSharedColors = {\n red,\n green,\n darkOrange,\n yellow,\n berry,\n lightGreen,\n marigold\n};\nexport const personaSharedColors = {\n darkRed,\n cranberry,\n pumpkin,\n peach,\n gold,\n brass,\n brown,\n forest,\n seafoam,\n darkGreen,\n lightTeal,\n teal,\n steel,\n blue,\n royalBlue,\n cornflower,\n navy,\n lavender,\n purple,\n grape,\n lilac,\n pink,\n magenta,\n plum,\n beige,\n mink,\n platinum,\n anchor\n};\nexport const mappedStatusColors = {\n cranberry,\n green,\n orange\n};\n","/* Names of colors used in shared color palette alias tokens for status. */ export const statusSharedColorNames = [\n 'red',\n 'green',\n 'darkOrange',\n 'yellow',\n 'berry',\n 'lightGreen',\n 'marigold'\n];\n/* Names of colors used in shared color palette alias tokens for persona. */ export const personaSharedColorNames = [\n 'darkRed',\n 'cranberry',\n 'pumpkin',\n 'peach',\n 'gold',\n 'brass',\n 'brown',\n 'forest',\n 'seafoam',\n 'darkGreen',\n 'lightTeal',\n 'teal',\n 'steel',\n 'blue',\n 'royalBlue',\n 'cornflower',\n 'navy',\n 'lavender',\n 'purple',\n 'grape',\n 'lilac',\n 'pink',\n 'magenta',\n 'plum',\n 'beige',\n 'mink',\n 'platinum',\n 'anchor'\n];\n/* List of global colors which semantic alias status tokens map to */ export const mappedStatusColorNames = [\n 'cranberry',\n 'green',\n 'orange'\n];\n/* Names of colors not used in alias tokens but produced by token pipeline as global color tokens. */ export const unusedSharedColorNames = [\n 'burgundy',\n 'bronze',\n 'orange',\n 'darkBrown',\n 'lime',\n 'darkTeal',\n 'cyan',\n 'lightBlue',\n 'darkBlue',\n 'darkPurple',\n 'orchid',\n 'hotPink',\n 'silver',\n 'charcoal'\n];\n","export const statusColorMapping = {\n success: 'green',\n warning: 'orange',\n danger: 'cranberry'\n};\n","import { statusSharedColors, personaSharedColors, mappedStatusColors } from \"../global/colorPalette.js\";\nimport { statusSharedColorNames, personaSharedColorNames } from \"../sharedColorNames.js\";\nimport { statusColorMapping } from \"../statusColorMapping.js\";\nconst statusColorPaletteTokens = statusSharedColorNames.reduce((acc, sharedColor)=>{\n const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1);\n const sharedColorTokens = {\n [`colorPalette${color}Background1`]: statusSharedColors[sharedColor].tint60,\n [`colorPalette${color}Background2`]: statusSharedColors[sharedColor].tint40,\n [`colorPalette${color}Background3`]: statusSharedColors[sharedColor].primary,\n [`colorPalette${color}Foreground1`]: statusSharedColors[sharedColor].shade10,\n [`colorPalette${color}Foreground2`]: statusSharedColors[sharedColor].shade30,\n [`colorPalette${color}Foreground3`]: statusSharedColors[sharedColor].primary,\n [`colorPalette${color}BorderActive`]: statusSharedColors[sharedColor].primary,\n [`colorPalette${color}Border1`]: statusSharedColors[sharedColor].tint40,\n [`colorPalette${color}Border2`]: statusSharedColors[sharedColor].primary\n };\n return Object.assign(acc, sharedColorTokens);\n}, {});\n// one-off patch for yellow\nstatusColorPaletteTokens.colorPaletteYellowForeground1 = statusSharedColors.yellow.shade30;\nstatusColorPaletteTokens.colorPaletteRedForegroundInverted = statusSharedColors.red.tint20;\nstatusColorPaletteTokens.colorPaletteGreenForegroundInverted = statusSharedColors.green.tint20;\nstatusColorPaletteTokens.colorPaletteYellowForegroundInverted = statusSharedColors.yellow.tint40;\nconst personaColorPaletteTokens = personaSharedColorNames.reduce((acc, sharedColor)=>{\n const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1);\n const sharedColorTokens = {\n [`colorPalette${color}Background2`]: personaSharedColors[sharedColor].tint40,\n [`colorPalette${color}Foreground2`]: personaSharedColors[sharedColor].shade30,\n [`colorPalette${color}BorderActive`]: personaSharedColors[sharedColor].primary\n };\n return Object.assign(acc, sharedColorTokens);\n}, {});\nexport const colorPaletteTokens = {\n ...statusColorPaletteTokens,\n ...personaColorPaletteTokens\n};\nexport const colorStatusTokens = Object.entries(statusColorMapping).reduce((acc, [statusColor, sharedColor])=>{\n const color = statusColor.slice(0, 1).toUpperCase() + statusColor.slice(1);\n // TODO: double check the mapping with design\n const statusColorTokens = {\n [`colorStatus${color}Background1`]: mappedStatusColors[sharedColor].tint60,\n [`colorStatus${color}Background2`]: mappedStatusColors[sharedColor].tint40,\n [`colorStatus${color}Background3`]: mappedStatusColors[sharedColor].primary,\n [`colorStatus${color}Foreground1`]: mappedStatusColors[sharedColor].shade10,\n [`colorStatus${color}Foreground2`]: mappedStatusColors[sharedColor].shade30,\n [`colorStatus${color}Foreground3`]: mappedStatusColors[sharedColor].primary,\n [`colorStatus${color}ForegroundInverted`]: mappedStatusColors[sharedColor].tint30,\n [`colorStatus${color}BorderActive`]: mappedStatusColors[sharedColor].primary,\n [`colorStatus${color}Border1`]: mappedStatusColors[sharedColor].tint40,\n [`colorStatus${color}Border2`]: mappedStatusColors[sharedColor].primary\n };\n return Object.assign(acc, statusColorTokens);\n}, {});\n// one-off overrides for colorStatus tokens\ncolorStatusTokens.colorStatusDangerBackground3Hover = mappedStatusColors[statusColorMapping.danger].shade10;\ncolorStatusTokens.colorStatusDangerBackground3Pressed = mappedStatusColors[statusColorMapping.danger].shade20;\ncolorStatusTokens.colorStatusWarningForeground1 = mappedStatusColors[statusColorMapping.warning].shade20;\ncolorStatusTokens.colorStatusWarningForeground3 = mappedStatusColors[statusColorMapping.warning].shade20;\ncolorStatusTokens.colorStatusWarningBorder2 = mappedStatusColors[statusColorMapping.warning].shade20;\n","/* !!! DO NOT EDIT !!! */ /* This file has been generated by the token pipeline */ import { black, blackAlpha, grey, white, whiteAlpha } from \"../global/colors.js\";\nexport const generateColorTokens = (brand)=>({\n colorNeutralForeground1: grey[14],\n colorNeutralForeground1Hover: grey[14],\n colorNeutralForeground1Pressed: grey[14],\n colorNeutralForeground1Selected: grey[14],\n colorNeutralForeground2: grey[26],\n colorNeutralForeground2Hover: grey[14],\n colorNeutralForeground2Pressed: grey[14],\n colorNeutralForeground2Selected: grey[14],\n colorNeutralForeground2BrandHover: brand[80],\n colorNeutralForeground2BrandPressed: brand[70],\n colorNeutralForeground2BrandSelected: brand[80],\n colorNeutralForeground3: grey[38],\n colorNeutralForeground3Hover: grey[26],\n colorNeutralForeground3Pressed: grey[26],\n colorNeutralForeground3Selected: grey[26],\n colorNeutralForeground3BrandHover: brand[80],\n colorNeutralForeground3BrandPressed: brand[70],\n colorNeutralForeground3BrandSelected: brand[80],\n colorNeutralForeground4: grey[44],\n colorNeutralForegroundDisabled: grey[74],\n colorNeutralForegroundInvertedDisabled: whiteAlpha[40],\n colorBrandForegroundLink: brand[70],\n colorBrandForegroundLinkHover: brand[60],\n colorBrandForegroundLinkPressed: brand[40],\n colorBrandForegroundLinkSelected: brand[70],\n colorNeutralForeground2Link: grey[26],\n colorNeutralForeground2LinkHover: grey[14],\n colorNeutralForeground2LinkPressed: grey[14],\n colorNeutralForeground2LinkSelected: grey[14],\n colorCompoundBrandForeground1: brand[80],\n colorCompoundBrandForeground1Hover: brand[70],\n colorCompoundBrandForeground1Pressed: brand[60],\n colorBrandForeground1: brand[80],\n colorBrandForeground2: brand[70],\n colorBrandForeground2Hover: brand[60],\n colorBrandForeground2Pressed: brand[30],\n colorNeutralForeground1Static: grey[14],\n colorNeutralForegroundStaticInverted: white,\n colorNeutralForegroundInverted: white,\n colorNeutralForegroundInvertedHover: white,\n colorNeutralForegroundInvertedPressed: white,\n colorNeutralForegroundInvertedSelected: white,\n colorNeutralForegroundInverted2: white,\n colorNeutralForegroundOnBrand: white,\n colorNeutralForegroundInvertedLink: white,\n colorNeutralForegroundInvertedLinkHover: white,\n colorNeutralForegroundInvertedLinkPressed: white,\n colorNeutralForegroundInvertedLinkSelected: white,\n colorBrandForegroundInverted: brand[100],\n colorBrandForegroundInvertedHover: brand[110],\n colorBrandForegroundInvertedPressed: brand[100],\n colorBrandForegroundOnLight: brand[80],\n colorBrandForegroundOnLightHover: brand[70],\n colorBrandForegroundOnLightPressed: brand[50],\n colorBrandForegroundOnLightSelected: brand[60],\n colorNeutralBackground1: white,\n colorNeutralBackground1Hover: grey[96],\n colorNeutralBackground1Pressed: grey[88],\n colorNeutralBackground1Selected: grey[92],\n colorNeutralBackground2: grey[98],\n colorNeutralBackground2Hover: grey[94],\n colorNeutralBackground2Pressed: grey[86],\n colorNeutralBackground2Selected: grey[90],\n colorNeutralBackground3: grey[96],\n colorNeutralBackground3Hover: grey[92],\n colorNeutralBackground3Pressed: grey[84],\n colorNeutralBackground3Selected: grey[88],\n colorNeutralBackground4: grey[94],\n colorNeutralBackground4Hover: grey[98],\n colorNeutralBackground4Pressed: grey[96],\n colorNeutralBackground4Selected: white,\n colorNeutralBackground5: grey[92],\n colorNeutralBackground5Hover: grey[96],\n colorNeutralBackground5Pressed: grey[94],\n colorNeutralBackground5Selected: grey[98],\n colorNeutralBackground6: grey[90],\n colorNeutralBackgroundInverted: grey[16],\n colorNeutralBackgroundStatic: grey[20],\n colorNeutralBackgroundAlpha: whiteAlpha[50],\n colorNeutralBackgroundAlpha2: whiteAlpha[80],\n colorSubtleBackground: 'transparent',\n colorSubtleBackgroundHover: grey[96],\n colorSubtleBackgroundPressed: grey[88],\n colorSubtleBackgroundSelected: grey[92],\n colorSubtleBackgroundLightAlphaHover: whiteAlpha[70],\n colorSubtleBackgroundLightAlphaPressed: whiteAlpha[50],\n colorSubtleBackgroundLightAlphaSelected: 'transparent',\n colorSubtleBackgroundInverted: 'transparent',\n colorSubtleBackgroundInvertedHover: blackAlpha[10],\n colorSubtleBackgroundInvertedPressed: blackAlpha[30],\n colorSubtleBackgroundInvertedSelected: blackAlpha[20],\n colorTransparentBackground: 'transparent',\n colorTransparentBackgroundHover: 'transparent',\n colorTransparentBackgroundPressed: 'transparent',\n colorTransparentBackgroundSelected: 'transparent',\n colorNeutralBackgroundDisabled: grey[94],\n colorNeutralBackgroundInvertedDisabled: whiteAlpha[10],\n colorNeutralStencil1: grey[90],\n colorNeutralStencil2: grey[98],\n colorNeutralStencil1Alpha: blackAlpha[10],\n colorNeutralStencil2Alpha: blackAlpha[5],\n colorBackgroundOverlay: blackAlpha[40],\n colorScrollbarOverlay: blackAlpha[50],\n colorBrandBackground: brand[80],\n colorBrandBackgroundHover: brand[70],\n colorBrandBackgroundPressed: brand[40],\n colorBrandBackgroundSelected: brand[60],\n colorCompoundBrandBackground: brand[80],\n colorCompoundBrandBackgroundHover: brand[70],\n colorCompoundBrandBackgroundPressed: brand[60],\n colorBrandBackgroundStatic: brand[80],\n colorBrandBackground2: brand[160],\n colorBrandBackground2Hover: brand[150],\n colorBrandBackground2Pressed: brand[130],\n colorBrandBackground3Static: brand[60],\n colorBrandBackground4Static: brand[40],\n colorBrandBackgroundInverted: white,\n colorBrandBackgroundInvertedHover: brand[160],\n colorBrandBackgroundInvertedPressed: brand[140],\n colorBrandBackgroundInvertedSelected: brand[150],\n colorNeutralCardBackground: grey[98],\n colorNeutralCardBackgroundHover: white,\n colorNeutralCardBackgroundPressed: grey[96],\n colorNeutralCardBackgroundSelected: grey[92],\n colorNeutralCardBackgroundDisabled: grey[94],\n colorNeutralStrokeAccessible: grey[38],\n colorNeutralStrokeAccessibleHover: grey[34],\n colorNeutralStrokeAccessiblePressed: grey[30],\n colorNeutralStrokeAccessibleSelected: brand[80],\n colorNeutralStroke1: grey[82],\n colorNeutralStroke1Hover: grey[78],\n colorNeutralStroke1Pressed: grey[70],\n colorNeutralStroke1Selected: grey[74],\n colorNeutralStroke2: grey[88],\n colorNeutralStroke3: grey[94],\n colorNeutralStrokeSubtle: grey[88],\n colorNeutralStrokeOnBrand: white,\n colorNeutralStrokeOnBrand2: white,\n colorNeutralStrokeOnBrand2Hover: white,\n colorNeutralStrokeOnBrand2Pressed: white,\n colorNeutralStrokeOnBrand2Selected: white,\n colorBrandStroke1: brand[80],\n colorBrandStroke2: brand[140],\n colorBrandStroke2Hover: brand[120],\n colorBrandStroke2Pressed: brand[80],\n colorBrandStroke2Contrast: brand[140],\n colorCompoundBrandStroke: brand[80],\n colorCompoundBrandStrokeHover: brand[70],\n colorCompoundBrandStrokePressed: brand[60],\n colorNeutralStrokeDisabled: grey[88],\n colorNeutralStrokeInvertedDisabled: whiteAlpha[40],\n colorTransparentStroke: 'transparent',\n colorTransparentStrokeInteractive: 'transparent',\n colorTransparentStrokeDisabled: 'transparent',\n colorNeutralStrokeAlpha: blackAlpha[5],\n colorNeutralStrokeAlpha2: whiteAlpha[20],\n colorStrokeFocus1: white,\n colorStrokeFocus2: black,\n colorNeutralShadowAmbient: 'rgba(0,0,0,0.12)',\n colorNeutralShadowKey: 'rgba(0,0,0,0.14)',\n colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.06)',\n colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.07)',\n colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.20)',\n colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.24)',\n colorBrandShadowAmbient: 'rgba(0,0,0,0.30)',\n colorBrandShadowKey: 'rgba(0,0,0,0.25)'\n });\n","export const borderRadius = {\n borderRadiusNone: '0',\n borderRadiusSmall: '2px',\n borderRadiusMedium: '4px',\n borderRadiusLarge: '6px',\n borderRadiusXLarge: '8px',\n borderRadiusCircular: '10000px'\n};\n","export const curves = {\n curveAccelerateMax: 'cubic-bezier(0.9,0.1,1,0.2)',\n curveAccelerateMid: 'cubic-bezier(1,0,1,1)',\n curveAccelerateMin: 'cubic-bezier(0.8,0,0.78,1)',\n curveDecelerateMax: 'cubic-bezier(0.1,0.9,0.2,1)',\n curveDecelerateMid: 'cubic-bezier(0,0,0,1)',\n curveDecelerateMin: 'cubic-bezier(0.33,0,0.1,1)',\n curveEasyEaseMax: 'cubic-bezier(0.8,0,0.2,1)',\n curveEasyEase: 'cubic-bezier(0.33,0,0.67,1)',\n curveLinear: 'cubic-bezier(0,0,1,1)'\n};\n","export const durations = {\n durationUltraFast: '50ms',\n durationFaster: '100ms',\n durationFast: '150ms',\n durationNormal: '200ms',\n durationGentle: '250ms',\n durationSlow: '300ms',\n durationSlower: '400ms',\n durationUltraSlow: '500ms'\n};\n","export const fontSizes = {\n fontSizeBase100: '10px',\n fontSizeBase200: '12px',\n fontSizeBase300: '14px',\n fontSizeBase400: '16px',\n fontSizeBase500: '20px',\n fontSizeBase600: '24px',\n fontSizeHero700: '28px',\n fontSizeHero800: '32px',\n fontSizeHero900: '40px',\n fontSizeHero1000: '68px'\n};\nexport const lineHeights = {\n lineHeightBase100: '14px',\n lineHeightBase200: '16px',\n lineHeightBase300: '20px',\n lineHeightBase400: '22px',\n lineHeightBase500: '28px',\n lineHeightBase600: '32px',\n lineHeightHero700: '36px',\n lineHeightHero800: '40px',\n lineHeightHero900: '52px',\n lineHeightHero1000: '92px'\n};\nexport const fontWeights = {\n fontWeightRegular: 400,\n fontWeightMedium: 500,\n fontWeightSemibold: 600,\n fontWeightBold: 700\n};\nexport const fontFamilies = {\n fontFamilyBase: // eslint-disable-next-line @fluentui/max-len\n \"'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif\",\n fontFamilyMonospace: \"Consolas, 'Courier New', Courier, monospace\",\n fontFamilyNumeric: // eslint-disable-next-line @fluentui/max-len\n \"Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif\"\n};\n","// Intentionally not exported! Use horizontalSpacings and verticalSpacings instead.\nconst spacings = {\n none: '0',\n xxs: '2px',\n xs: '4px',\n sNudge: '6px',\n s: '8px',\n mNudge: '10px',\n m: '12px',\n l: '16px',\n xl: '20px',\n xxl: '24px',\n xxxl: '32px'\n};\nexport const horizontalSpacings = {\n spacingHorizontalNone: spacings.none,\n spacingHorizontalXXS: spacings.xxs,\n spacingHorizontalXS: spacings.xs,\n spacingHorizontalSNudge: spacings.sNudge,\n spacingHorizontalS: spacings.s,\n spacingHorizontalMNudge: spacings.mNudge,\n spacingHorizontalM: spacings.m,\n spacingHorizontalL: spacings.l,\n spacingHorizontalXL: spacings.xl,\n spacingHorizontalXXL: spacings.xxl,\n spacingHorizontalXXXL: spacings.xxxl\n};\nexport const verticalSpacings = {\n spacingVerticalNone: spacings.none,\n spacingVerticalXXS: spacings.xxs,\n spacingVerticalXS: spacings.xs,\n spacingVerticalSNudge: spacings.sNudge,\n spacingVerticalS: spacings.s,\n spacingVerticalMNudge: spacings.mNudge,\n spacingVerticalM: spacings.m,\n spacingVerticalL: spacings.l,\n spacingVerticalXL: spacings.xl,\n spacingVerticalXXL: spacings.xxl,\n spacingVerticalXXXL: spacings.xxxl\n};\n","export const strokeWidths = {\n strokeWidthThin: '1px',\n strokeWidthThick: '2px',\n strokeWidthThicker: '3px',\n strokeWidthThickest: '4px'\n};\n","export function createShadowTokens(ambientColor, keyColor, tokenSuffix = '') {\n return {\n [`shadow2${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 1px 2px ${keyColor}`,\n [`shadow4${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 2px 4px ${keyColor}`,\n [`shadow8${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 4px 8px ${keyColor}`,\n [`shadow16${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 8px 16px ${keyColor}`,\n [`shadow28${tokenSuffix}`]: `0 0 8px ${ambientColor}, 0 14px 28px ${keyColor}`,\n [`shadow64${tokenSuffix}`]: `0 0 8px ${ambientColor}, 0 32px 64px ${keyColor}`\n };\n}\n","import { colorPaletteTokens, colorStatusTokens } from \"../alias/lightColorPalette.js\";\nimport { generateColorTokens } from \"../alias/lightColor.js\";\nimport { borderRadius, fontSizes, lineHeights, fontFamilies, strokeWidths, fontWeights } from \"../global/index.js\";\nimport { createShadowTokens } from \"./shadows.js\";\nimport { durations } from \"../global/durations.js\";\nimport { curves } from \"../global/curves.js\";\nimport { horizontalSpacings, verticalSpacings } from \"../global/spacings.js\";\nexport const createLightTheme = (brand)=>{\n const colorTokens = generateColorTokens(brand);\n return {\n ...borderRadius,\n ...fontSizes,\n ...lineHeights,\n ...fontFamilies,\n ...fontWeights,\n ...strokeWidths,\n ...horizontalSpacings,\n ...verticalSpacings,\n ...durations,\n ...curves,\n ...colorTokens,\n ...colorPaletteTokens,\n ...colorStatusTokens,\n ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),\n ...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')\n };\n};\n","export const brandWeb = {\n 10: `#061724`,\n 20: `#082338`,\n 30: `#0a2e4a`,\n 40: `#0c3b5e`,\n 50: `#0e4775`,\n 60: `#0f548c`,\n 70: `#115ea3`,\n 80: `#0f6cbd`,\n 90: `#2886de`,\n 100: `#479ef5`,\n 110: `#62abf5`,\n 120: `#77b7f7`,\n 130: `#96c6fa`,\n 140: `#b4d6fa`,\n 150: `#cfe4fa`,\n 160: `#ebf3fc`\n};\nexport const brandTeams = {\n 10: `#2b2b40`,\n 20: `#2f2f4a`,\n 30: `#333357`,\n 40: `#383966`,\n 50: `#3d3e78`,\n 60: `#444791`,\n 70: `#4f52b2`,\n 80: `#5b5fc7`,\n 90: `#7579eb`,\n 100: `#7f85f5`,\n 110: `#9299f7`,\n 120: `#aab1fa`,\n 130: `#b6bcfa`,\n 140: `#c5cbfa`,\n 150: `#dce0fa`,\n 160: `#e8ebfa`\n};\nexport const brandOffice = {\n 10: `#29130b`,\n 20: `#4d2415`,\n 30: `#792000`,\n 40: `#99482b`,\n 50: `#a52c00`,\n 60: `#c33400`,\n 70: `#e06a3f`,\n 80: `#d83b01`,\n 90: `#dd4f1b`,\n 100: `#fe7948`,\n 110: `#ff865a`,\n 120: `#ff9973`,\n 130: `#e8825d`,\n 140: `#ffb498`,\n 150: `#f4beaa`,\n 160: `#f9dcd1`\n};\n","import { createLightTheme } from \"../../utils/createLightTheme.js\";\nimport { brandWeb } from \"../../global/brandColors.js\";\nexport const webLightTheme = createLightTheme(brandWeb);\n","/**\n * Checks if a given element has a CSS class.\n * \n * @param element the element\n * @param className the CSS class name\n */\nexport default function hasClass(element, className) {\n if (element.classList) return !!className && element.classList.contains(className);\n return (\" \" + (element.className.baseVal || element.className) + \" \").indexOf(\" \" + className + \" \") !== -1;\n}","import hasClass from './hasClass';\n/**\n * Adds a CSS class to a given element.\n * \n * @param element the element\n * @param className the CSS class name\n */\n\nexport default function addClass(element, className) {\n if (element.classList) element.classList.add(className);else if (!hasClass(element, className)) if (typeof element.className === 'string') element.className = element.className + \" \" + className;else element.setAttribute('class', (element.className && element.className.baseVal || '') + \" \" + className);\n}","function replaceClassName(origClass, classToRemove) {\n return origClass.replace(new RegExp(\"(^|\\\\s)\" + classToRemove + \"(?:\\\\s|$)\", 'g'), '$1').replace(/\\s+/g, ' ').replace(/^\\s*|\\s*$/g, '');\n}\n/**\n * Removes a CSS class from a given element.\n * \n * @param element the element\n * @param className the CSS class name\n */\n\n\nexport default function removeClass(element, className) {\n if (element.classList) {\n element.classList.remove(className);\n } else if (typeof element.className === 'string') {\n element.className = replaceClassName(element.className, className);\n } else {\n element.setAttribute('class', replaceClassName(element.className && element.className.baseVal || '', className));\n }\n}","export default {\n disabled: false\n};","import React from 'react';\nexport default React.createContext(null);","export var forceReflow = function forceReflow(node) {\n return node.scrollTop;\n};","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _inheritsLoose from \"@babel/runtime/helpers/esm/inheritsLoose\";\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport config from './config';\nimport { timeoutsShape } from './utils/PropTypes';\nimport TransitionGroupContext from './TransitionGroupContext';\nimport { forceReflow } from './utils/reflow';\nexport var UNMOUNTED = 'unmounted';\nexport var EXITED = 'exited';\nexport var ENTERING = 'entering';\nexport var ENTERED = 'entered';\nexport var EXITING = 'exiting';\n/**\n * The Transition component lets you describe a transition from one component\n * state to another _over time_ with a simple declarative API. Most commonly\n * it's used to animate the mounting and unmounting of a component, but can also\n * be used to describe in-place transition states as well.\n *\n * ---\n *\n * **Note**: `Transition` is a platform-agnostic base component. If you're using\n * transitions in CSS, you'll probably want to use\n * [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)\n * instead. It inherits all the features of `Transition`, but contains\n * additional features necessary to play nice with CSS transitions (hence the\n * name of the component).\n *\n * ---\n *\n * By default the `Transition` component does not alter the behavior of the\n * component it renders, it only tracks \"enter\" and \"exit\" states for the\n * components. It's up to you to give meaning and effect to those states. For\n * example we can add styles to a component when it enters or exits:\n *\n * ```jsx\n * import { Transition } from 'react-transition-group';\n *\n * const duration = 300;\n *\n * const defaultStyle = {\n * transition: `opacity ${duration}ms ease-in-out`,\n * opacity: 0,\n * }\n *\n * const transitionStyles = {\n * entering: { opacity: 1 },\n * entered: { opacity: 1 },\n * exiting: { opacity: 0 },\n * exited: { opacity: 0 },\n * };\n *\n * const Fade = ({ in: inProp }) => (\n * \n * {state => (\n *
      \n * I'm a fade Transition!\n *
      \n * )}\n *
      \n * );\n * ```\n *\n * There are 4 main states a Transition can be in:\n * - `'entering'`\n * - `'entered'`\n * - `'exiting'`\n * - `'exited'`\n *\n * Transition state is toggled via the `in` prop. When `true` the component\n * begins the \"Enter\" stage. During this stage, the component will shift from\n * its current transition state, to `'entering'` for the duration of the\n * transition and then to the `'entered'` stage once it's complete. Let's take\n * the following example (we'll use the\n * [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):\n *\n * ```jsx\n * function App() {\n * const [inProp, setInProp] = useState(false);\n * return (\n *
      \n * \n * {state => (\n * // ...\n * )}\n * \n * \n *
      \n * );\n * }\n * ```\n *\n * When the button is clicked the component will shift to the `'entering'` state\n * and stay there for 500ms (the value of `timeout`) before it finally switches\n * to `'entered'`.\n *\n * When `in` is `false` the same thing happens except the state moves from\n * `'exiting'` to `'exited'`.\n */\n\nvar Transition = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(Transition, _React$Component);\n\n function Transition(props, context) {\n var _this;\n\n _this = _React$Component.call(this, props, context) || this;\n var parentGroup = context; // In the context of a TransitionGroup all enters are really appears\n\n var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;\n var initialStatus;\n _this.appearStatus = null;\n\n if (props.in) {\n if (appear) {\n initialStatus = EXITED;\n _this.appearStatus = ENTERING;\n } else {\n initialStatus = ENTERED;\n }\n } else {\n if (props.unmountOnExit || props.mountOnEnter) {\n initialStatus = UNMOUNTED;\n } else {\n initialStatus = EXITED;\n }\n }\n\n _this.state = {\n status: initialStatus\n };\n _this.nextCallback = null;\n return _this;\n }\n\n Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {\n var nextIn = _ref.in;\n\n if (nextIn && prevState.status === UNMOUNTED) {\n return {\n status: EXITED\n };\n }\n\n return null;\n } // getSnapshotBeforeUpdate(prevProps) {\n // let nextStatus = null\n // if (prevProps !== this.props) {\n // const { status } = this.state\n // if (this.props.in) {\n // if (status !== ENTERING && status !== ENTERED) {\n // nextStatus = ENTERING\n // }\n // } else {\n // if (status === ENTERING || status === ENTERED) {\n // nextStatus = EXITING\n // }\n // }\n // }\n // return { nextStatus }\n // }\n ;\n\n var _proto = Transition.prototype;\n\n _proto.componentDidMount = function componentDidMount() {\n this.updateStatus(true, this.appearStatus);\n };\n\n _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n var nextStatus = null;\n\n if (prevProps !== this.props) {\n var status = this.state.status;\n\n if (this.props.in) {\n if (status !== ENTERING && status !== ENTERED) {\n nextStatus = ENTERING;\n }\n } else {\n if (status === ENTERING || status === ENTERED) {\n nextStatus = EXITING;\n }\n }\n }\n\n this.updateStatus(false, nextStatus);\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.cancelNextCallback();\n };\n\n _proto.getTimeouts = function getTimeouts() {\n var timeout = this.props.timeout;\n var exit, enter, appear;\n exit = enter = appear = timeout;\n\n if (timeout != null && typeof timeout !== 'number') {\n exit = timeout.exit;\n enter = timeout.enter; // TODO: remove fallback for next major\n\n appear = timeout.appear !== undefined ? timeout.appear : enter;\n }\n\n return {\n exit: exit,\n enter: enter,\n appear: appear\n };\n };\n\n _proto.updateStatus = function updateStatus(mounting, nextStatus) {\n if (mounting === void 0) {\n mounting = false;\n }\n\n if (nextStatus !== null) {\n // nextStatus will always be ENTERING or EXITING.\n this.cancelNextCallback();\n\n if (nextStatus === ENTERING) {\n if (this.props.unmountOnExit || this.props.mountOnEnter) {\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749\n // With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`.\n // To make the animation happen, we have to separate each rendering and avoid being processed as batched.\n\n if (node) forceReflow(node);\n }\n\n this.performEnter(mounting);\n } else {\n this.performExit();\n }\n } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n this.setState({\n status: UNMOUNTED\n });\n }\n };\n\n _proto.performEnter = function performEnter(mounting) {\n var _this2 = this;\n\n var enter = this.props.enter;\n var appearing = this.context ? this.context.isMounting : mounting;\n\n var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing],\n maybeNode = _ref2[0],\n maybeAppearing = _ref2[1];\n\n var timeouts = this.getTimeouts();\n var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED\n // if we are mounting and running this it means appear _must_ be set\n\n if (!mounting && !enter || config.disabled) {\n this.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode);\n });\n return;\n }\n\n this.props.onEnter(maybeNode, maybeAppearing);\n this.safeSetState({\n status: ENTERING\n }, function () {\n _this2.props.onEntering(maybeNode, maybeAppearing);\n\n _this2.onTransitionEnd(enterTimeout, function () {\n _this2.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode, maybeAppearing);\n });\n });\n });\n };\n\n _proto.performExit = function performExit() {\n var _this3 = this;\n\n var exit = this.props.exit;\n var timeouts = this.getTimeouts();\n var maybeNode = this.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); // no exit animation skip right to EXITED\n\n if (!exit || config.disabled) {\n this.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n return;\n }\n\n this.props.onExit(maybeNode);\n this.safeSetState({\n status: EXITING\n }, function () {\n _this3.props.onExiting(maybeNode);\n\n _this3.onTransitionEnd(timeouts.exit, function () {\n _this3.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n });\n });\n };\n\n _proto.cancelNextCallback = function cancelNextCallback() {\n if (this.nextCallback !== null) {\n this.nextCallback.cancel();\n this.nextCallback = null;\n }\n };\n\n _proto.safeSetState = function safeSetState(nextState, callback) {\n // This shouldn't be necessary, but there are weird race conditions with\n // setState callbacks and unmounting in testing, so always make sure that\n // we can cancel any pending setState callbacks after we unmount.\n callback = this.setNextCallback(callback);\n this.setState(nextState, callback);\n };\n\n _proto.setNextCallback = function setNextCallback(callback) {\n var _this4 = this;\n\n var active = true;\n\n this.nextCallback = function (event) {\n if (active) {\n active = false;\n _this4.nextCallback = null;\n callback(event);\n }\n };\n\n this.nextCallback.cancel = function () {\n active = false;\n };\n\n return this.nextCallback;\n };\n\n _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {\n this.setNextCallback(handler);\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);\n var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n\n if (!node || doesNotHaveTimeoutOrListener) {\n setTimeout(this.nextCallback, 0);\n return;\n }\n\n if (this.props.addEndListener) {\n var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],\n maybeNode = _ref3[0],\n maybeNextCallback = _ref3[1];\n\n this.props.addEndListener(maybeNode, maybeNextCallback);\n }\n\n if (timeout != null) {\n setTimeout(this.nextCallback, timeout);\n }\n };\n\n _proto.render = function render() {\n var status = this.state.status;\n\n if (status === UNMOUNTED) {\n return null;\n }\n\n var _this$props = this.props,\n children = _this$props.children,\n _in = _this$props.in,\n _mountOnEnter = _this$props.mountOnEnter,\n _unmountOnExit = _this$props.unmountOnExit,\n _appear = _this$props.appear,\n _enter = _this$props.enter,\n _exit = _this$props.exit,\n _timeout = _this$props.timeout,\n _addEndListener = _this$props.addEndListener,\n _onEnter = _this$props.onEnter,\n _onEntering = _this$props.onEntering,\n _onEntered = _this$props.onEntered,\n _onExit = _this$props.onExit,\n _onExiting = _this$props.onExiting,\n _onExited = _this$props.onExited,\n _nodeRef = _this$props.nodeRef,\n childProps = _objectWithoutPropertiesLoose(_this$props, [\"children\", \"in\", \"mountOnEnter\", \"unmountOnExit\", \"appear\", \"enter\", \"exit\", \"timeout\", \"addEndListener\", \"onEnter\", \"onEntering\", \"onEntered\", \"onExit\", \"onExiting\", \"onExited\", \"nodeRef\"]);\n\n return (\n /*#__PURE__*/\n // allows for nested Transitions\n React.createElement(TransitionGroupContext.Provider, {\n value: null\n }, typeof children === 'function' ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps))\n );\n };\n\n return Transition;\n}(React.Component);\n\nTransition.contextType = TransitionGroupContext;\nTransition.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * A React reference to DOM element that need to transition:\n * https://stackoverflow.com/a/51127130/4671932\n *\n * - When `nodeRef` prop is used, `node` is not passed to callback functions\n * (e.g. `onEnter`) because user already has direct access to the node.\n * - When changing `key` prop of `Transition` in a `TransitionGroup` a new\n * `nodeRef` need to be provided to `Transition` with changed `key` prop\n * (see\n * [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).\n */\n nodeRef: PropTypes.shape({\n current: typeof Element === 'undefined' ? PropTypes.any : function (propValue, key, componentName, location, propFullName, secret) {\n var value = propValue[key];\n return PropTypes.instanceOf(value && 'ownerDocument' in value ? value.ownerDocument.defaultView.Element : Element)(propValue, key, componentName, location, propFullName, secret);\n }\n }),\n\n /**\n * A `function` child can be used instead of a React element. This function is\n * called with the current transition status (`'entering'`, `'entered'`,\n * `'exiting'`, `'exited'`), which can be used to apply context\n * specific props to a component.\n *\n * ```jsx\n * \n * {state => (\n * \n * )}\n * \n * ```\n */\n children: PropTypes.oneOfType([PropTypes.func.isRequired, PropTypes.element.isRequired]).isRequired,\n\n /**\n * Show the component; triggers the enter or exit states\n */\n in: PropTypes.bool,\n\n /**\n * By default the child component is mounted immediately along with\n * the parent `Transition` component. If you want to \"lazy mount\" the component on the\n * first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay\n * mounted, even on \"exited\", unless you also specify `unmountOnExit`.\n */\n mountOnEnter: PropTypes.bool,\n\n /**\n * By default the child component stays mounted after it reaches the `'exited'` state.\n * Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.\n */\n unmountOnExit: PropTypes.bool,\n\n /**\n * By default the child component does not perform the enter transition when\n * it first mounts, regardless of the value of `in`. If you want this\n * behavior, set both `appear` and `in` to `true`.\n *\n * > **Note**: there are no special appear states like `appearing`/`appeared`, this prop\n * > only adds an additional enter transition. However, in the\n * > `` component that first enter transition does result in\n * > additional `.appear-*` classes, that way you can choose to style it\n * > differently.\n */\n appear: PropTypes.bool,\n\n /**\n * Enable or disable enter transitions.\n */\n enter: PropTypes.bool,\n\n /**\n * Enable or disable exit transitions.\n */\n exit: PropTypes.bool,\n\n /**\n * The duration of the transition, in milliseconds.\n * Required unless `addEndListener` is provided.\n *\n * You may specify a single timeout for all transitions:\n *\n * ```jsx\n * timeout={500}\n * ```\n *\n * or individually:\n *\n * ```jsx\n * timeout={{\n * appear: 500,\n * enter: 300,\n * exit: 500,\n * }}\n * ```\n *\n * - `appear` defaults to the value of `enter`\n * - `enter` defaults to `0`\n * - `exit` defaults to `0`\n *\n * @type {number | { enter?: number, exit?: number, appear?: number }}\n */\n timeout: function timeout(props) {\n var pt = timeoutsShape;\n if (!props.addEndListener) pt = pt.isRequired;\n\n for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n\n return pt.apply(void 0, [props].concat(args));\n },\n\n /**\n * Add a custom transition end trigger. Called with the transitioning\n * DOM node and a `done` callback. Allows for more fine grained transition end\n * logic. Timeouts are still used as a fallback if provided.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * ```jsx\n * addEndListener={(node, done) => {\n * // use the css transitionend event to mark the finish of a transition\n * node.addEventListener('transitionend', done, false);\n * }}\n * ```\n */\n addEndListener: PropTypes.func,\n\n /**\n * Callback fired before the \"entering\" status is applied. An extra parameter\n * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement, isAppearing: bool) -> void\n */\n onEnter: PropTypes.func,\n\n /**\n * Callback fired after the \"entering\" status is applied. An extra parameter\n * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement, isAppearing: bool)\n */\n onEntering: PropTypes.func,\n\n /**\n * Callback fired after the \"entered\" status is applied. An extra parameter\n * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement, isAppearing: bool) -> void\n */\n onEntered: PropTypes.func,\n\n /**\n * Callback fired before the \"exiting\" status is applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExit: PropTypes.func,\n\n /**\n * Callback fired after the \"exiting\" status is applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExiting: PropTypes.func,\n\n /**\n * Callback fired after the \"exited\" status is applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExited: PropTypes.func\n} : {}; // Name the function so it is clearer in the documentation\n\nfunction noop() {}\n\nTransition.defaultProps = {\n in: false,\n mountOnEnter: false,\n unmountOnExit: false,\n appear: false,\n enter: true,\n exit: true,\n onEnter: noop,\n onEntering: noop,\n onEntered: noop,\n onExit: noop,\n onExiting: noop,\n onExited: noop\n};\nTransition.UNMOUNTED = UNMOUNTED;\nTransition.EXITED = EXITED;\nTransition.ENTERING = ENTERING;\nTransition.ENTERED = ENTERED;\nTransition.EXITING = EXITING;\nexport default Transition;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _inheritsLoose from \"@babel/runtime/helpers/esm/inheritsLoose\";\nimport PropTypes from 'prop-types';\nimport addOneClass from 'dom-helpers/addClass';\nimport removeOneClass from 'dom-helpers/removeClass';\nimport React from 'react';\nimport Transition from './Transition';\nimport { classNamesShape } from './utils/PropTypes';\nimport { forceReflow } from './utils/reflow';\n\nvar _addClass = function addClass(node, classes) {\n return node && classes && classes.split(' ').forEach(function (c) {\n return addOneClass(node, c);\n });\n};\n\nvar removeClass = function removeClass(node, classes) {\n return node && classes && classes.split(' ').forEach(function (c) {\n return removeOneClass(node, c);\n });\n};\n/**\n * A transition component inspired by the excellent\n * [ng-animate](https://docs.angularjs.org/api/ngAnimate) library, you should\n * use it if you're using CSS transitions or animations. It's built upon the\n * [`Transition`](https://reactcommunity.org/react-transition-group/transition)\n * component, so it inherits all of its props.\n *\n * `CSSTransition` applies a pair of class names during the `appear`, `enter`,\n * and `exit` states of the transition. The first class is applied and then a\n * second `*-active` class in order to activate the CSS transition. After the\n * transition, matching `*-done` class names are applied to persist the\n * transition state.\n *\n * ```jsx\n * function App() {\n * const [inProp, setInProp] = useState(false);\n * return (\n *
      \n * \n *
      \n * {\"I'll receive my-node-* classes\"}\n *
      \n *
      \n * \n *
      \n * );\n * }\n * ```\n *\n * When the `in` prop is set to `true`, the child component will first receive\n * the class `example-enter`, then the `example-enter-active` will be added in\n * the next tick. `CSSTransition` [forces a\n * reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)\n * between before adding the `example-enter-active`. This is an important trick\n * because it allows us to transition between `example-enter` and\n * `example-enter-active` even though they were added immediately one after\n * another. Most notably, this is what makes it possible for us to animate\n * _appearance_.\n *\n * ```css\n * .my-node-enter {\n * opacity: 0;\n * }\n * .my-node-enter-active {\n * opacity: 1;\n * transition: opacity 200ms;\n * }\n * .my-node-exit {\n * opacity: 1;\n * }\n * .my-node-exit-active {\n * opacity: 0;\n * transition: opacity 200ms;\n * }\n * ```\n *\n * `*-active` classes represent which styles you want to animate **to**, so it's\n * important to add `transition` declaration only to them, otherwise transitions\n * might not behave as intended! This might not be obvious when the transitions\n * are symmetrical, i.e. when `*-enter-active` is the same as `*-exit`, like in\n * the example above (minus `transition`), but it becomes apparent in more\n * complex transitions.\n *\n * **Note**: If you're using the\n * [`appear`](http://reactcommunity.org/react-transition-group/transition#Transition-prop-appear)\n * prop, make sure to define styles for `.appear-*` classes as well.\n */\n\n\nvar CSSTransition = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(CSSTransition, _React$Component);\n\n function CSSTransition() {\n var _this;\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;\n _this.appliedClasses = {\n appear: {},\n enter: {},\n exit: {}\n };\n\n _this.onEnter = function (maybeNode, maybeAppearing) {\n var _this$resolveArgument = _this.resolveArguments(maybeNode, maybeAppearing),\n node = _this$resolveArgument[0],\n appearing = _this$resolveArgument[1];\n\n _this.removeClasses(node, 'exit');\n\n _this.addClass(node, appearing ? 'appear' : 'enter', 'base');\n\n if (_this.props.onEnter) {\n _this.props.onEnter(maybeNode, maybeAppearing);\n }\n };\n\n _this.onEntering = function (maybeNode, maybeAppearing) {\n var _this$resolveArgument2 = _this.resolveArguments(maybeNode, maybeAppearing),\n node = _this$resolveArgument2[0],\n appearing = _this$resolveArgument2[1];\n\n var type = appearing ? 'appear' : 'enter';\n\n _this.addClass(node, type, 'active');\n\n if (_this.props.onEntering) {\n _this.props.onEntering(maybeNode, maybeAppearing);\n }\n };\n\n _this.onEntered = function (maybeNode, maybeAppearing) {\n var _this$resolveArgument3 = _this.resolveArguments(maybeNode, maybeAppearing),\n node = _this$resolveArgument3[0],\n appearing = _this$resolveArgument3[1];\n\n var type = appearing ? 'appear' : 'enter';\n\n _this.removeClasses(node, type);\n\n _this.addClass(node, type, 'done');\n\n if (_this.props.onEntered) {\n _this.props.onEntered(maybeNode, maybeAppearing);\n }\n };\n\n _this.onExit = function (maybeNode) {\n var _this$resolveArgument4 = _this.resolveArguments(maybeNode),\n node = _this$resolveArgument4[0];\n\n _this.removeClasses(node, 'appear');\n\n _this.removeClasses(node, 'enter');\n\n _this.addClass(node, 'exit', 'base');\n\n if (_this.props.onExit) {\n _this.props.onExit(maybeNode);\n }\n };\n\n _this.onExiting = function (maybeNode) {\n var _this$resolveArgument5 = _this.resolveArguments(maybeNode),\n node = _this$resolveArgument5[0];\n\n _this.addClass(node, 'exit', 'active');\n\n if (_this.props.onExiting) {\n _this.props.onExiting(maybeNode);\n }\n };\n\n _this.onExited = function (maybeNode) {\n var _this$resolveArgument6 = _this.resolveArguments(maybeNode),\n node = _this$resolveArgument6[0];\n\n _this.removeClasses(node, 'exit');\n\n _this.addClass(node, 'exit', 'done');\n\n if (_this.props.onExited) {\n _this.props.onExited(maybeNode);\n }\n };\n\n _this.resolveArguments = function (maybeNode, maybeAppearing) {\n return _this.props.nodeRef ? [_this.props.nodeRef.current, maybeNode] // here `maybeNode` is actually `appearing`\n : [maybeNode, maybeAppearing];\n };\n\n _this.getClassNames = function (type) {\n var classNames = _this.props.classNames;\n var isStringClassNames = typeof classNames === 'string';\n var prefix = isStringClassNames && classNames ? classNames + \"-\" : '';\n var baseClassName = isStringClassNames ? \"\" + prefix + type : classNames[type];\n var activeClassName = isStringClassNames ? baseClassName + \"-active\" : classNames[type + \"Active\"];\n var doneClassName = isStringClassNames ? baseClassName + \"-done\" : classNames[type + \"Done\"];\n return {\n baseClassName: baseClassName,\n activeClassName: activeClassName,\n doneClassName: doneClassName\n };\n };\n\n return _this;\n }\n\n var _proto = CSSTransition.prototype;\n\n _proto.addClass = function addClass(node, type, phase) {\n var className = this.getClassNames(type)[phase + \"ClassName\"];\n\n var _this$getClassNames = this.getClassNames('enter'),\n doneClassName = _this$getClassNames.doneClassName;\n\n if (type === 'appear' && phase === 'done' && doneClassName) {\n className += \" \" + doneClassName;\n } // This is to force a repaint,\n // which is necessary in order to transition styles when adding a class name.\n\n\n if (phase === 'active') {\n if (node) forceReflow(node);\n }\n\n if (className) {\n this.appliedClasses[type][phase] = className;\n\n _addClass(node, className);\n }\n };\n\n _proto.removeClasses = function removeClasses(node, type) {\n var _this$appliedClasses$ = this.appliedClasses[type],\n baseClassName = _this$appliedClasses$.base,\n activeClassName = _this$appliedClasses$.active,\n doneClassName = _this$appliedClasses$.done;\n this.appliedClasses[type] = {};\n\n if (baseClassName) {\n removeClass(node, baseClassName);\n }\n\n if (activeClassName) {\n removeClass(node, activeClassName);\n }\n\n if (doneClassName) {\n removeClass(node, doneClassName);\n }\n };\n\n _proto.render = function render() {\n var _this$props = this.props,\n _ = _this$props.classNames,\n props = _objectWithoutPropertiesLoose(_this$props, [\"classNames\"]);\n\n return /*#__PURE__*/React.createElement(Transition, _extends({}, props, {\n onEnter: this.onEnter,\n onEntered: this.onEntered,\n onEntering: this.onEntering,\n onExit: this.onExit,\n onExiting: this.onExiting,\n onExited: this.onExited\n }));\n };\n\n return CSSTransition;\n}(React.Component);\n\nCSSTransition.defaultProps = {\n classNames: ''\n};\nCSSTransition.propTypes = process.env.NODE_ENV !== \"production\" ? _extends({}, Transition.propTypes, {\n /**\n * The animation classNames applied to the component as it appears, enters,\n * exits or has finished the transition. A single name can be provided, which\n * will be suffixed for each stage, e.g. `classNames=\"fade\"` applies:\n *\n * - `fade-appear`, `fade-appear-active`, `fade-appear-done`\n * - `fade-enter`, `fade-enter-active`, `fade-enter-done`\n * - `fade-exit`, `fade-exit-active`, `fade-exit-done`\n *\n * A few details to note about how these classes are applied:\n *\n * 1. They are _joined_ with the ones that are already defined on the child\n * component, so if you want to add some base styles, you can use\n * `className` without worrying that it will be overridden.\n *\n * 2. If the transition component mounts with `in={false}`, no classes are\n * applied yet. You might be expecting `*-exit-done`, but if you think\n * about it, a component cannot finish exiting if it hasn't entered yet.\n *\n * 2. `fade-appear-done` and `fade-enter-done` will _both_ be applied. This\n * allows you to define different behavior for when appearing is done and\n * when regular entering is done, using selectors like\n * `.fade-enter-done:not(.fade-appear-done)`. For example, you could apply\n * an epic entrance animation when element first appears in the DOM using\n * [Animate.css](https://daneden.github.io/animate.css/). Otherwise you can\n * simply use `fade-enter-done` for defining both cases.\n *\n * Each individual classNames can also be specified independently like:\n *\n * ```js\n * classNames={{\n * appear: 'my-appear',\n * appearActive: 'my-active-appear',\n * appearDone: 'my-done-appear',\n * enter: 'my-enter',\n * enterActive: 'my-active-enter',\n * enterDone: 'my-done-enter',\n * exit: 'my-exit',\n * exitActive: 'my-active-exit',\n * exitDone: 'my-done-exit',\n * }}\n * ```\n *\n * If you want to set these classes using CSS Modules:\n *\n * ```js\n * import styles from './styles.css';\n * ```\n *\n * you might want to use camelCase in your CSS file, that way could simply\n * spread them instead of listing them one by one:\n *\n * ```js\n * classNames={{ ...styles }}\n * ```\n *\n * @type {string | {\n * appear?: string,\n * appearActive?: string,\n * appearDone?: string,\n * enter?: string,\n * enterActive?: string,\n * enterDone?: string,\n * exit?: string,\n * exitActive?: string,\n * exitDone?: string,\n * }}\n */\n classNames: classNamesShape,\n\n /**\n * A `` callback fired immediately after the 'enter' or 'appear' class is\n * applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement, isAppearing: bool)\n */\n onEnter: PropTypes.func,\n\n /**\n * A `` callback fired immediately after the 'enter-active' or\n * 'appear-active' class is applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement, isAppearing: bool)\n */\n onEntering: PropTypes.func,\n\n /**\n * A `` callback fired immediately after the 'enter' or\n * 'appear' classes are **removed** and the `done` class is added to the DOM node.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement, isAppearing: bool)\n */\n onEntered: PropTypes.func,\n\n /**\n * A `` callback fired immediately after the 'exit' class is\n * applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed\n *\n * @type Function(node: HtmlElement)\n */\n onExit: PropTypes.func,\n\n /**\n * A `` callback fired immediately after the 'exit-active' is applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed\n *\n * @type Function(node: HtmlElement)\n */\n onExiting: PropTypes.func,\n\n /**\n * A `` callback fired immediately after the 'exit' classes\n * are **removed** and the `exit-done` class is added to the DOM node.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed\n *\n * @type Function(node: HtmlElement)\n */\n onExited: PropTypes.func\n}) : {};\nexport default CSSTransition;","export default function _assertThisInitialized(self) {\n if (self === void 0) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n return self;\n}","/**\n * These colors have been copied here from react-theme because they are not exported from that package.\n * They are necessary to build the theme shims.\n */ export const grey = {\n '0': '#000000',\n '2': '#050505',\n '4': '#0a0a0a',\n '6': '#0f0f0f',\n '8': '#141414',\n '10': '#1a1a1a',\n '12': '#1f1f1f',\n '14': '#242424',\n '16': '#292929',\n '18': '#2e2e2e',\n '20': '#333333',\n '22': '#383838',\n '24': '#3d3d3d',\n '26': '#424242',\n '28': '#474747',\n '30': '#4d4d4d',\n '32': '#525252',\n '34': '#575757',\n '36': '#5c5c5c',\n '38': '#616161',\n '40': '#666666',\n '42': '#6b6b6b',\n '44': '#707070',\n '46': '#757575',\n '48': '#7a7a7a',\n '50': '#808080',\n '52': '#858585',\n '54': '#8a8a8a',\n '56': '#8f8f8f',\n '58': '#949494',\n '60': '#999999',\n '62': '#9e9e9e',\n '64': '#a3a3a3',\n '66': '#a8a8a8',\n '68': '#adadad',\n '70': '#b3b3b3',\n '72': '#b8b8b8',\n '74': '#bdbdbd',\n '76': '#c2c2c2',\n '78': '#c7c7c7',\n '80': '#cccccc',\n '82': '#d1d1d1',\n '84': '#d6d6d6',\n '86': '#dbdbdb',\n '88': '#e0e0e0',\n '90': '#e6e6e6',\n '92': '#ebebeb',\n '94': '#f0f0f0',\n '96': '#f5f5f5',\n '98': '#fafafa',\n '100': '#ffffff'\n};\nexport const whiteAlpha = {\n '5': 'rgba(255, 255, 255, 0.05)',\n '10': 'rgba(255, 255, 255, 0.1)',\n '20': 'rgba(255, 255, 255, 0.2)',\n '30': 'rgba(255, 255, 255, 0.3)',\n '40': 'rgba(255, 255, 255, 0.4)',\n '50': 'rgba(255, 255, 255, 0.5)',\n '60': 'rgba(255, 255, 255, 0.6)',\n '70': 'rgba(255, 255, 255, 0.7)',\n '80': 'rgba(255, 255, 255, 0.8)',\n '90': 'rgba(255, 255, 255, 0.9)'\n};\nexport const blackAlpha = {\n '5': 'rgba(0, 0, 0, 0.05)',\n '10': 'rgba(0, 0, 0, 0.1)',\n '20': 'rgba(0, 0, 0, 0.2)',\n '30': 'rgba(0, 0, 0, 0.3)',\n '40': 'rgba(0, 0, 0, 0.4)',\n '50': 'rgba(0, 0, 0, 0.5)',\n '60': 'rgba(0, 0, 0, 0.6)',\n '70': 'rgba(0, 0, 0, 0.7)',\n '80': 'rgba(0, 0, 0, 0.8)',\n '90': 'rgba(0, 0, 0, 0.9)'\n};\nexport const grey10Alpha = {\n '5': 'rgba(26, 26, 26, 0.05)',\n '10': 'rgba(26, 26, 26, 0.1)',\n '20': 'rgba(26, 26, 26, 0.2)',\n '30': 'rgba(26, 26, 26, 0.3)',\n '40': 'rgba(26, 26, 26, 0.4)',\n '50': 'rgba(26, 26, 26, 0.5)',\n '60': 'rgba(26, 26, 26, 0.6)',\n '70': 'rgba(26, 26, 26, 0.7)',\n '80': 'rgba(26, 26, 26, 0.8)',\n '90': 'rgba(26, 26, 26, 0.9)'\n};\nexport const grey12Alpha = {\n '5': 'rgba(31, 31, 31, 0.05)',\n '10': 'rgba(31, 31, 31, 0.1)',\n '20': 'rgba(31, 31, 31, 0.2)',\n '30': 'rgba(31, 31, 31, 0.3)',\n '40': 'rgba(31, 31, 31, 0.4)',\n '50': 'rgba(31, 31, 31, 0.5)',\n '60': 'rgba(31, 31, 31, 0.6)',\n '70': 'rgba(31, 31, 31, 0.7)',\n '80': 'rgba(31, 31, 31, 0.8)',\n '90': 'rgba(31, 31, 31, 0.9)'\n};\nexport const grey14Alpha = {\n '5': 'rgba(36, 36, 36, 0.05)',\n '10': 'rgba(36, 36, 36, 0.1)',\n '20': 'rgba(36, 36, 36, 0.2)',\n '30': 'rgba(36, 36, 36, 0.3)',\n '40': 'rgba(36, 36, 36, 0.4)',\n '50': 'rgba(36, 36, 36, 0.5)',\n '60': 'rgba(36, 36, 36, 0.6)',\n '70': 'rgba(36, 36, 36, 0.7)',\n '80': 'rgba(36, 36, 36, 0.8)',\n '90': 'rgba(36, 36, 36, 0.9)'\n};\nexport const white = '#ffffff';\nexport const black = '#000000';\nexport const hcHyperlink = '#ffff00';\nexport const hcHighlight = '#1aebff';\nexport const hcDisabled = '#3ff23f';\nexport const hcCanvas = '#000000';\nexport const hcCanvasText = '#ffffff';\nexport const hcHighlightText = '#000000';\nexport const hcButtonText = '#000000';\nexport const hcButtonFace = '#ffffff';\nconst darkRed = {\n shade50: '#130204',\n shade40: '#230308',\n shade30: '#420610',\n shade20: '#590815',\n shade10: '#690a19',\n primary: '#750b1c',\n tint10: '#861b2c',\n tint20: '#962f3f',\n tint30: '#ac4f5e',\n tint40: '#d69ca5',\n tint50: '#e9c7cd',\n tint60: '#f9f0f2'\n};\nconst burgundy = {\n shade50: '#1a0607',\n shade40: '#310b0d',\n shade30: '#5c1519',\n shade20: '#7d1d21',\n shade10: '#942228',\n primary: '#a4262c',\n tint10: '#af393e',\n tint20: '#ba4d52',\n tint30: '#c86c70',\n tint40: '#e4afb2',\n tint50: '#f0d3d4',\n tint60: '#fbf4f4'\n};\nconst cranberry = {\n shade50: '#200205',\n shade40: '#3b0509',\n shade30: '#6e0811',\n shade20: '#960b18',\n shade10: '#b10e1c',\n primary: '#c50f1f',\n tint10: '#cc2635',\n tint20: '#d33f4c',\n tint30: '#dc626d',\n tint40: '#eeacb2',\n tint50: '#f6d1d5',\n tint60: '#fdf3f4'\n};\nconst red = {\n shade50: '#210809',\n shade40: '#3f1011',\n shade30: '#751d1f',\n shade20: '#9f282b',\n shade10: '#bc2f32',\n primary: '#d13438',\n tint10: '#d7494c',\n tint20: '#dc5e62',\n tint30: '#e37d80',\n tint40: '#f1bbbc',\n tint50: '#f8dadb',\n tint60: '#fdf6f6'\n};\nconst darkOrange = {\n shade50: '#230900',\n shade40: '#411200',\n shade30: '#7a2101',\n shade20: '#a62d01',\n shade10: '#c43501',\n primary: '#da3b01',\n tint10: '#de501c',\n tint20: '#e36537',\n tint30: '#e9835e',\n tint40: '#f4bfab',\n tint50: '#f9dcd1',\n tint60: '#fdf6f3'\n};\nconst bronze = {\n shade50: '#1b0a01',\n shade40: '#321303',\n shade30: '#5e2405',\n shade20: '#7f3107',\n shade10: '#963a08',\n primary: '#a74109',\n tint10: '#b2521e',\n tint20: '#bc6535',\n tint30: '#ca8057',\n tint40: '#e5bba4',\n tint50: '#f1d9cc',\n tint60: '#fbf5f2'\n};\nconst pumpkin = {\n shade50: '#200d03',\n shade40: '#3d1805',\n shade30: '#712d09',\n shade20: '#9a3d0c',\n shade10: '#b6480e',\n primary: '#ca5010',\n tint10: '#d06228',\n tint20: '#d77440',\n tint30: '#df8e64',\n tint40: '#efc4ad',\n tint50: '#f7dfd2',\n tint60: '#fdf7f4'\n};\nconst orange = {\n shade50: '#271002',\n shade40: '#4a1e04',\n shade30: '#8a3707',\n shade20: '#bc4b09',\n shade10: '#de590b',\n primary: '#f7630c',\n tint10: '#f87528',\n tint20: '#f98845',\n tint30: '#faa06b',\n tint40: '#fdcfb4',\n tint50: '#fee5d7',\n tint60: '#fff9f5'\n};\nconst peach = {\n shade50: '#291600',\n shade40: '#4d2a00',\n shade30: '#8f4e00',\n shade20: '#c26a00',\n shade10: '#e67e00',\n primary: '#ff8c00',\n tint10: '#ff9a1f',\n tint20: '#ffa83d',\n tint30: '#ffba66',\n tint40: '#ffddb3',\n tint50: '#ffedd6',\n tint60: '#fffaf5'\n};\nconst marigold = {\n shade50: '#251a00',\n shade40: '#463100',\n shade30: '#835b00',\n shade20: '#b27c00',\n shade10: '#d39300',\n primary: '#eaa300',\n tint10: '#edad1c',\n tint20: '#efb839',\n tint30: '#f2c661',\n tint40: '#f9e2ae',\n tint50: '#fcefd3',\n tint60: '#fefbf4'\n};\nconst yellow = {\n primary: '#fde300',\n shade10: '#e4cc00',\n shade20: '#c0ad00',\n shade30: '#817400',\n shade40: '#4c4400',\n shade50: '#282400',\n tint10: '#fde61e',\n tint20: '#fdea3d',\n tint30: '#feee66',\n tint40: '#fef7b2',\n tint50: '#fffad6',\n tint60: '#fffef5'\n};\nconst gold = {\n shade50: '#1f1900',\n shade40: '#3a2f00',\n shade30: '#6c5700',\n shade20: '#937700',\n shade10: '#ae8c00',\n primary: '#c19c00',\n tint10: '#c8a718',\n tint20: '#d0b232',\n tint30: '#dac157',\n tint40: '#ecdfa5',\n tint50: '#f5eece',\n tint60: '#fdfbf2'\n};\nconst brass = {\n shade50: '#181202',\n shade40: '#2e2103',\n shade30: '#553e06',\n shade20: '#745408',\n shade10: '#89640a',\n primary: '#986f0b',\n tint10: '#a47d1e',\n tint20: '#b18c34',\n tint30: '#c1a256',\n tint40: '#e0cea2',\n tint50: '#efe4cb',\n tint60: '#fbf8f2'\n};\nconst brown = {\n shade50: '#170e07',\n shade40: '#2b1a0e',\n shade30: '#50301a',\n shade20: '#6c4123',\n shade10: '#804d29',\n primary: '#8e562e',\n tint10: '#9c663f',\n tint20: '#a97652',\n tint30: '#bb8f6f',\n tint40: '#ddc3b0',\n tint50: '#edded3',\n tint60: '#faf7f4'\n};\nconst darkBrown = {\n shade50: '#0c0704',\n shade40: '#170c08',\n shade30: '#2b1710',\n shade20: '#3a1f15',\n shade10: '#452519',\n primary: '#4d291c',\n tint10: '#623a2b',\n tint20: '#784d3e',\n tint30: '#946b5c',\n tint40: '#caada3',\n tint50: '#e3d2cb',\n tint60: '#f8f3f2'\n};\nconst lime = {\n shade50: '#121b06',\n shade40: '#23330b',\n shade30: '#405f14',\n shade20: '#57811b',\n shade10: '#689920',\n primary: '#73aa24',\n tint10: '#81b437',\n tint20: '#90be4c',\n tint30: '#a4cc6c',\n tint40: '#cfe5af',\n tint50: '#e5f1d3',\n tint60: '#f8fcf4'\n};\nconst forest = {\n shade50: '#0c1501',\n shade40: '#162702',\n shade30: '#294903',\n shade20: '#376304',\n shade10: '#427505',\n primary: '#498205',\n tint10: '#599116',\n tint20: '#6ba02b',\n tint30: '#85b44c',\n tint40: '#bdd99b',\n tint50: '#dbebc7',\n tint60: '#f6faf0'\n};\nconst seafoam = {\n shade50: '#002111',\n shade40: '#003d20',\n shade30: '#00723b',\n shade20: '#009b51',\n shade10: '#00b85f',\n primary: '#00cc6a',\n tint10: '#19d279',\n tint20: '#34d889',\n tint30: '#5ae0a0',\n tint40: '#a8f0cd',\n tint50: '#cff7e4',\n tint60: '#f3fdf8'\n};\nconst lightGreen = {\n shade50: '#031a02',\n shade40: '#063004',\n shade30: '#0b5a08',\n shade20: '#0e7a0b',\n shade10: '#11910d',\n primary: '#13a10e',\n tint10: '#27ac22',\n tint20: '#3db838',\n tint30: '#5ec75a',\n tint40: '#a7e3a5',\n tint50: '#cef0cd',\n tint60: '#f2fbf2'\n};\nconst green = {\n shade50: '#031403',\n shade40: '#052505',\n shade30: '#094509',\n shade20: '#0c5e0c',\n shade10: '#0e700e',\n primary: '#107c10',\n tint10: '#218c21',\n tint20: '#359b35',\n tint30: '#54b054',\n tint40: '#9fd89f',\n tint50: '#c9eac9',\n tint60: '#f1faf1'\n};\nconst darkGreen = {\n shade50: '#021102',\n shade40: '#032003',\n shade30: '#063b06',\n shade20: '#085108',\n shade10: '#0a5f0a',\n primary: '#0b6a0b',\n tint10: '#1a7c1a',\n tint20: '#2d8e2d',\n tint30: '#4da64d',\n tint40: '#9ad29a',\n tint50: '#c6e7c6',\n tint60: '#f0f9f0'\n};\nconst lightTeal = {\n shade50: '#001d1f',\n shade40: '#00373a',\n shade30: '#00666d',\n shade20: '#008b94',\n shade10: '#00a5af',\n primary: '#00b7c3',\n tint10: '#18bfca',\n tint20: '#32c8d1',\n tint30: '#58d3db',\n tint40: '#a6e9ed',\n tint50: '#cef3f5',\n tint60: '#f2fcfd'\n};\nconst teal = {\n shade50: '#001516',\n shade40: '#012728',\n shade30: '#02494c',\n shade20: '#026467',\n shade10: '#037679',\n primary: '#038387',\n tint10: '#159195',\n tint20: '#2aa0a4',\n tint30: '#4cb4b7',\n tint40: '#9bd9db',\n tint50: '#c7ebec',\n tint60: '#f0fafa'\n};\nconst darkTeal = {\n shade50: '#001010',\n shade40: '#001f1f',\n shade30: '#003939',\n shade20: '#004e4e',\n shade10: '#005c5c',\n primary: '#006666',\n tint10: '#0e7878',\n tint20: '#218b8b',\n tint30: '#41a3a3',\n tint40: '#92d1d1',\n tint50: '#c2e7e7',\n tint60: '#eff9f9'\n};\nconst cyan = {\n shade50: '#00181e',\n shade40: '#002e38',\n shade30: '#005669',\n shade20: '#00748f',\n shade10: '#008aa9',\n primary: '#0099bc',\n tint10: '#18a4c4',\n tint20: '#31afcc',\n tint30: '#56bfd7',\n tint40: '#a4deeb',\n tint50: '#cdedf4',\n tint60: '#f2fafc'\n};\nconst steel = {\n shade50: '#000f12',\n shade40: '#001b22',\n shade30: '#00333f',\n shade20: '#004555',\n shade10: '#005265',\n primary: '#005b70',\n tint10: '#0f6c81',\n tint20: '#237d92',\n tint30: '#4496a9',\n tint40: '#94c8d4',\n tint50: '#c3e1e8',\n tint60: '#eff7f9'\n};\nconst lightBlue = {\n shade50: '#091823',\n shade40: '#112d42',\n shade30: '#20547c',\n shade20: '#2c72a8',\n shade10: '#3487c7',\n primary: '#3a96dd',\n tint10: '#4fa1e1',\n tint20: '#65ade5',\n tint30: '#83bdeb',\n tint40: '#bfddf5',\n tint50: '#dcedfa',\n tint60: '#f6fafe'\n};\nconst blue = {\n shade50: '#001322',\n shade40: '#002440',\n shade30: '#004377',\n shade20: '#005ba1',\n shade10: '#006cbf',\n primary: '#0078d4',\n tint10: '#1a86d9',\n tint20: '#3595de',\n tint30: '#5caae5',\n tint40: '#a9d3f2',\n tint50: '#d0e7f8',\n tint60: '#f3f9fd'\n};\nconst royalBlue = {\n shade50: '#000c16',\n shade40: '#00172a',\n shade30: '#002c4e',\n shade20: '#003b6a',\n shade10: '#00467e',\n primary: '#004e8c',\n tint10: '#125e9a',\n tint20: '#286fa8',\n tint30: '#4a89ba',\n tint40: '#9abfdc',\n tint50: '#c7dced',\n tint60: '#f0f6fa'\n};\nconst darkBlue = {\n shade50: '#000910',\n shade40: '#00111f',\n shade30: '#002039',\n shade20: '#002b4e',\n shade10: '#00335c',\n primary: '#003966',\n tint10: '#0e4a78',\n tint20: '#215c8b',\n tint30: '#4178a3',\n tint40: '#92b5d1',\n tint50: '#c2d6e7',\n tint60: '#eff4f9'\n};\nconst cornflower = {\n shade50: '#0d1126',\n shade40: '#182047',\n shade30: '#2c3c85',\n shade20: '#3c51b4',\n shade10: '#4760d5',\n primary: '#4f6bed',\n tint10: '#637cef',\n tint20: '#778df1',\n tint30: '#93a4f4',\n tint40: '#c8d1fa',\n tint50: '#e1e6fc',\n tint60: '#f7f9fe'\n};\nconst navy = {\n shade50: '#00061d',\n shade40: '#000c36',\n shade30: '#001665',\n shade20: '#001e89',\n shade10: '#0023a2',\n primary: '#0027b4',\n tint10: '#173bbd',\n tint20: '#3050c6',\n tint30: '#546fd2',\n tint40: '#a3b2e8',\n tint50: '#ccd5f3',\n tint60: '#f2f4fc'\n};\nconst lavender = {\n shade50: '#120f25',\n shade40: '#221d46',\n shade30: '#3f3682',\n shade20: '#5649b0',\n shade10: '#6656d1',\n primary: '#7160e8',\n tint10: '#8172eb',\n tint20: '#9184ee',\n tint30: '#a79cf1',\n tint40: '#d2ccf8',\n tint50: '#e7e4fb',\n tint60: '#f9f8fe'\n};\nconst purple = {\n shade50: '#0f0717',\n shade40: '#1c0e2b',\n shade30: '#341a51',\n shade20: '#46236e',\n shade10: '#532982',\n primary: '#5c2e91',\n tint10: '#6b3f9e',\n tint20: '#7c52ab',\n tint30: '#9470bd',\n tint40: '#c6b1de',\n tint50: '#e0d3ed',\n tint60: '#f7f4fb'\n};\nconst darkPurple = {\n shade50: '#0a0411',\n shade40: '#130820',\n shade30: '#240f3c',\n shade20: '#311552',\n shade10: '#3a1861',\n primary: '#401b6c',\n tint10: '#512b7e',\n tint20: '#633e8f',\n tint30: '#7e5ca7',\n tint40: '#b9a3d3',\n tint50: '#d8cce7',\n tint60: '#f5f2f9'\n};\nconst orchid = {\n shade50: '#16101d',\n shade40: '#281e37',\n shade30: '#4c3867',\n shade20: '#674c8c',\n shade10: '#795aa6',\n primary: '#8764b8',\n tint10: '#9373c0',\n tint20: '#a083c9',\n tint30: '#b29ad4',\n tint40: '#d7caea',\n tint50: '#e9e2f4',\n tint60: '#f9f8fc'\n};\nconst grape = {\n shade50: '#160418',\n shade40: '#29072e',\n shade30: '#4c0d55',\n shade20: '#671174',\n shade10: '#7a1589',\n primary: '#881798',\n tint10: '#952aa4',\n tint20: '#a33fb1',\n tint30: '#b55fc1',\n tint40: '#d9a7e0',\n tint50: '#eaceef',\n tint60: '#faf2fb'\n};\nconst berry = {\n shade50: '#1f091d',\n shade40: '#3a1136',\n shade30: '#6d2064',\n shade20: '#932b88',\n shade10: '#af33a1',\n primary: '#c239b3',\n tint10: '#c94cbc',\n tint20: '#d161c4',\n tint30: '#da7ed0',\n tint40: '#edbbe7',\n tint50: '#f5daf2',\n tint60: '#fdf5fc'\n};\nconst lilac = {\n shade50: '#1c0b1f',\n shade40: '#35153a',\n shade30: '#63276d',\n shade20: '#863593',\n shade10: '#9f3faf',\n primary: '#b146c2',\n tint10: '#ba58c9',\n tint20: '#c36bd1',\n tint30: '#cf87da',\n tint40: '#e6bfed',\n tint50: '#f2dcf5',\n tint60: '#fcf6fd'\n};\nconst pink = {\n shade50: '#24091b',\n shade40: '#441232',\n shade30: '#80215d',\n shade20: '#ad2d7e',\n shade10: '#cd3595',\n primary: '#e43ba6',\n tint10: '#e750b0',\n tint20: '#ea66ba',\n tint30: '#ef85c8',\n tint40: '#f7c0e3',\n tint50: '#fbddf0',\n tint60: '#fef6fb'\n};\nconst hotPink = {\n shade50: '#240016',\n shade40: '#44002a',\n shade30: '#7f004e',\n shade20: '#ad006a',\n shade10: '#cc007e',\n primary: '#e3008c',\n tint10: '#e61c99',\n tint20: '#ea38a6',\n tint30: '#ee5fb7',\n tint40: '#f7adda',\n tint50: '#fbd2eb',\n tint60: '#fef4fa'\n};\nconst magenta = {\n shade50: '#1f0013',\n shade40: '#390024',\n shade30: '#6b0043',\n shade20: '#91005a',\n shade10: '#ac006b',\n primary: '#bf0077',\n tint10: '#c71885',\n tint20: '#ce3293',\n tint30: '#d957a8',\n tint40: '#eca5d1',\n tint50: '#f5cee6',\n tint60: '#fcf2f9'\n};\nconst plum = {\n shade50: '#13000c',\n shade40: '#240017',\n shade30: '#43002b',\n shade20: '#5a003b',\n shade10: '#6b0045',\n primary: '#77004d',\n tint10: '#87105d',\n tint20: '#98246f',\n tint30: '#ad4589',\n tint40: '#d696c0',\n tint50: '#e9c4dc',\n tint60: '#faf0f6'\n};\nconst beige = {\n shade50: '#141313',\n shade40: '#252323',\n shade30: '#444241',\n shade20: '#5d5958',\n shade10: '#6e6968',\n primary: '#7a7574',\n tint10: '#8a8584',\n tint20: '#9a9594',\n tint30: '#afabaa',\n tint40: '#d7d4d4',\n tint50: '#eae8e8',\n tint60: '#faf9f9'\n};\nconst mink = {\n shade50: '#0f0e0e',\n shade40: '#1c1b1a',\n shade30: '#343231',\n shade20: '#474443',\n shade10: '#54514f',\n primary: '#5d5a58',\n tint10: '#706d6b',\n tint20: '#84817e',\n tint30: '#9e9b99',\n tint40: '#cecccb',\n tint50: '#e5e4e3',\n tint60: '#f8f8f8'\n};\nconst silver = {\n shade50: '#151818',\n shade40: '#282d2e',\n shade30: '#4a5356',\n shade20: '#657174',\n shade10: '#78868a',\n primary: '#859599',\n tint10: '#92a1a5',\n tint20: '#a0aeb1',\n tint30: '#b3bfc2',\n tint40: '#d8dfe0',\n tint50: '#eaeeef',\n tint60: '#fafbfb'\n};\nconst platinum = {\n shade50: '#111314',\n shade40: '#1f2426',\n shade30: '#3b4447',\n shade20: '#505c60',\n shade10: '#5f6d71',\n primary: '#69797e',\n tint10: '#79898d',\n tint20: '#89989d',\n tint30: '#a0adb2',\n tint40: '#cdd6d8',\n tint50: '#e4e9ea',\n tint60: '#f8f9fa'\n};\nconst anchor = {\n shade50: '#090a0b',\n shade40: '#111315',\n shade30: '#202427',\n shade20: '#2b3135',\n shade10: '#333a3f',\n primary: '#394146',\n tint10: '#4d565c',\n tint20: '#626c72',\n tint30: '#808a90',\n tint40: '#bcc3c7',\n tint50: '#dbdfe1',\n tint60: '#f6f7f8'\n};\nconst charcoal = {\n shade50: '#090909',\n shade40: '#111111',\n shade30: '#202020',\n shade20: '#2b2b2b',\n shade10: '#333333',\n primary: '#393939',\n tint10: '#515151',\n tint20: '#686868',\n tint30: '#888888',\n tint40: '#c4c4c4',\n tint50: '#dfdfdf',\n tint60: '#f7f7f7'\n};\nexport const sharedColors = {\n darkRed,\n burgundy,\n cranberry,\n red,\n darkOrange,\n bronze,\n pumpkin,\n orange,\n peach,\n marigold,\n yellow,\n gold,\n brass,\n brown,\n darkBrown,\n lime,\n forest,\n seafoam,\n lightGreen,\n green,\n darkGreen,\n lightTeal,\n teal,\n darkTeal,\n cyan,\n steel,\n lightBlue,\n blue,\n royalBlue,\n darkBlue,\n cornflower,\n navy,\n lavender,\n purple,\n darkPurple,\n orchid,\n grape,\n berry,\n lilac,\n pink,\n hotPink,\n magenta,\n plum,\n beige,\n mink,\n silver,\n platinum,\n anchor,\n charcoal\n};\nexport const brandWeb = {\n 10: `#061724`,\n 20: `#082338`,\n 30: `#0a2e4a`,\n 40: `#0c3b5e`,\n 50: `#0e4775`,\n 60: `#0f548c`,\n 70: `#115ea3`,\n 80: `#0f6cbd`,\n 90: `#2886de`,\n 100: `#479ef5`,\n 110: `#62abf5`,\n 120: `#77b7f7`,\n 130: `#96c6fa`,\n 140: `#b4d6fa`,\n 150: `#cfe4fa`,\n 160: `#ebf3fc`\n};\n","/******************************************************************************\nCopyright (c) Microsoft Corporation.\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\nPERFORMANCE OF THIS SOFTWARE.\n***************************************************************************** */\n/* global Reflect, Promise, SuppressedError, Symbol, Iterator */\n\nvar extendStatics = function(d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n};\n\nexport function __extends(d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n}\n\nexport var __assign = function() {\n __assign = Object.assign || function __assign(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n return t;\n }\n return __assign.apply(this, arguments);\n}\n\nexport function __rest(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}\n\nexport function __decorate(decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n}\n\nexport function __param(paramIndex, decorator) {\n return function (target, key) { decorator(target, key, paramIndex); }\n}\n\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\n function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\n var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\n var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\n var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\n var _, done = false;\n for (var i = decorators.length - 1; i >= 0; i--) {\n var context = {};\n for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\n for (var p in contextIn.access) context.access[p] = contextIn.access[p];\n context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\n var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\n if (kind === \"accessor\") {\n if (result === void 0) continue;\n if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\n if (_ = accept(result.get)) descriptor.get = _;\n if (_ = accept(result.set)) descriptor.set = _;\n if (_ = accept(result.init)) initializers.unshift(_);\n }\n else if (_ = accept(result)) {\n if (kind === \"field\") initializers.unshift(_);\n else descriptor[key] = _;\n }\n }\n if (target) Object.defineProperty(target, contextIn.name, descriptor);\n done = true;\n};\n\nexport function __runInitializers(thisArg, initializers, value) {\n var useValue = arguments.length > 2;\n for (var i = 0; i < initializers.length; i++) {\n value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\n }\n return useValue ? value : void 0;\n};\n\nexport function __propKey(x) {\n return typeof x === \"symbol\" ? x : \"\".concat(x);\n};\n\nexport function __setFunctionName(f, name, prefix) {\n if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\n return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\n};\n\nexport function __metadata(metadataKey, metadataValue) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\n}\n\nexport function __awaiter(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}\n\nexport function __generator(thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === \"function\" ? Iterator : Object).prototype);\n return g.next = verb(0), g[\"throw\"] = verb(1), g[\"return\"] = verb(2), typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (g && (g = 0, op[0] && (_ = 0)), _) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n}\n\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n});\n\nexport function __exportStar(m, o) {\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\n}\n\nexport function __values(o) {\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\n if (m) return m.call(o);\n if (o && typeof o.length === \"number\") return {\n next: function () {\n if (o && i >= o.length) o = void 0;\n return { value: o && o[i++], done: !o };\n }\n };\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\n}\n\nexport function __read(o, n) {\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\n if (!m) return o;\n var i = m.call(o), r, ar = [], e;\n try {\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\n }\n catch (error) { e = { error: error }; }\n finally {\n try {\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\n }\n finally { if (e) throw e.error; }\n }\n return ar;\n}\n\n/** @deprecated */\nexport function __spread() {\n for (var ar = [], i = 0; i < arguments.length; i++)\n ar = ar.concat(__read(arguments[i]));\n return ar;\n}\n\n/** @deprecated */\nexport function __spreadArrays() {\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\n r[k] = a[j];\n return r;\n}\n\nexport function __spreadArray(to, from, pack) {\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n if (ar || !(i in from)) {\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n ar[i] = from[i];\n }\n }\n return to.concat(ar || Array.prototype.slice.call(from));\n}\n\nexport function __await(v) {\n return this instanceof __await ? (this.v = v, this) : new __await(v);\n}\n\nexport function __asyncGenerator(thisArg, _arguments, generator) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\n return i = Object.create((typeof AsyncIterator === \"function\" ? AsyncIterator : Object).prototype), verb(\"next\"), verb(\"throw\"), verb(\"return\", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;\n function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }\n function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\n function fulfill(value) { resume(\"next\", value); }\n function reject(value) { resume(\"throw\", value); }\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\n}\n\nexport function __asyncDelegator(o) {\n var i, p;\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\n}\n\nexport function __asyncValues(o) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var m = o[Symbol.asyncIterator], i;\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\n}\n\nexport function __makeTemplateObject(cooked, raw) {\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\n return cooked;\n};\n\nvar __setModuleDefault = Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n};\n\nvar ownKeys = function(o) {\n ownKeys = Object.getOwnPropertyNames || function (o) {\n var ar = [];\n for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;\n return ar;\n };\n return ownKeys(o);\n};\n\nexport function __importStar(mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== \"default\") __createBinding(result, mod, k[i]);\n __setModuleDefault(result, mod);\n return result;\n}\n\nexport function __importDefault(mod) {\n return (mod && mod.__esModule) ? mod : { default: mod };\n}\n\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n}\n\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\n}\n\nexport function __classPrivateFieldIn(state, receiver) {\n if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\n return typeof state === \"function\" ? receiver === state : state.has(receiver);\n}\n\nexport function __addDisposableResource(env, value, async) {\n if (value !== null && value !== void 0) {\n if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\n var dispose, inner;\n if (async) {\n if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\n dispose = value[Symbol.asyncDispose];\n }\n if (dispose === void 0) {\n if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\n dispose = value[Symbol.dispose];\n if (async) inner = dispose;\n }\n if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\n if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };\n env.stack.push({ value: value, dispose: dispose, async: async });\n }\n else if (async) {\n env.stack.push({ async: true });\n }\n return value;\n}\n\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\n var e = new Error(message);\n return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\n};\n\nexport function __disposeResources(env) {\n function fail(e) {\n env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\n env.hasError = true;\n }\n var r, s = 0;\n function next() {\n while (r = env.stack.pop()) {\n try {\n if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);\n if (r.dispose) {\n var result = r.dispose.call(r.value);\n if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\n }\n else s |= 1;\n }\n catch (e) {\n fail(e);\n }\n }\n if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();\n if (env.hasError) throw env.error;\n }\n return next();\n}\n\nexport function __rewriteRelativeImportExtension(path, preserveJsx) {\n if (typeof path === \"string\" && /^\\.\\.?\\//.test(path)) {\n return path.replace(/\\.(tsx)$|((?:\\.d)?)((?:\\.[^./]+?)?)\\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {\n return tsx ? preserveJsx ? \".jsx\" : \".js\" : d && (!ext || !cm) ? m : (d + ext + \".\" + cm.toLowerCase() + \"js\");\n });\n }\n return path;\n}\n\nexport default {\n __extends,\n __assign,\n __rest,\n __decorate,\n __param,\n __esDecorate,\n __runInitializers,\n __propKey,\n __setFunctionName,\n __metadata,\n __awaiter,\n __generator,\n __createBinding,\n __exportStar,\n __values,\n __read,\n __spread,\n __spreadArrays,\n __spreadArray,\n __await,\n __asyncGenerator,\n __asyncDelegator,\n __asyncValues,\n __makeTemplateObject,\n __importStar,\n __importDefault,\n __classPrivateFieldGet,\n __classPrivateFieldSet,\n __classPrivateFieldIn,\n __addDisposableResource,\n __disposeResources,\n __rewriteRelativeImportExtension,\n};\n","import * as React from 'react';\nimport type { ITheme, IStyle } from '../../Styling';\nimport type { IRefObject, IStyleFunctionOrObject } from '../../Utilities';\n\n/**\n * {@docCategory Spinner}\n */\nexport interface ISpinner {}\n\n/**\n * Spinner component props.\n * {@docCategory Spinner}\n */\nexport interface ISpinnerProps extends React.HTMLAttributes {\n /**\n * Optional callback to access the ISpinner interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject;\n\n /**\n * @deprecated Use `size` instead. Will be removed at \\>= 2.0.0.\n */\n // eslint-disable-next-line deprecation/deprecation\n type?: SpinnerType;\n\n /**\n * The size of Spinner to render.\n * @defaultvalue SpinnerType.medium\n */\n size?: SpinnerSize;\n\n /**\n * The label to show next to the Spinner. Label updates will be announced to the screen readers.\n * Use ariaLive to control politeness level.\n */\n label?: string;\n\n /**\n * Additional CSS class(es) to apply to the Spinner.\n */\n className?: string;\n\n /**\n * Politeness setting for label update announcement.\n * @defaultvalue polite\n */\n ariaLive?: 'assertive' | 'polite' | 'off';\n\n /**\n * Alternative status label for screen reader\n */\n ariaLabel?: string;\n\n /**\n * Theme (provided through customization.)\n */\n theme?: ITheme;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject;\n\n /**\n * The position of the label in regards of the spinner animation.\n * @defaultvalue SpinnerLabelPosition.bottom\n */\n labelPosition?: SpinnerLabelPosition;\n}\n\n/**\n * Possible variations of the spinner circle size.\n * {@docCategory Spinner}\n */\nexport enum SpinnerSize {\n /**\n * 12px Spinner diameter\n */\n xSmall = 0,\n\n /**\n * 16px Spinner diameter\n */\n small = 1,\n\n /**\n * 20px Spinner diameter\n */\n medium = 2,\n\n /**\n * 28px Spinner diameter\n */\n large = 3,\n}\n\n/**\n * Possible locations of the label in regards to the spinner\n * {@docCategory Spinner}\n */\nexport type SpinnerLabelPosition = 'top' | 'right' | 'bottom' | 'left';\n\n/**\n * @deprecated Use `SpinnerSize` instead. Will be removed at \\>= 2.0.0.\n * {@docCategory Spinner}\n */\nexport enum SpinnerType {\n /**\n * @deprecated Use `SpinnerSize.medium` instead. Will be removed at \\>= 2.0.0.\n */\n normal = 0,\n\n /**\n * @deprecated Use `SpinnerSize.large` instead. Will be removed at \\>= 2.0.0.\n */\n large = 1,\n}\n\n/**\n * The props needed to construct styles.\n * This represents the simplified set of immutable things which control the class names.\n * {@docCategory Spinner}\n */\nexport interface ISpinnerStyleProps {\n /** Theme provided by High-Order Component. */\n theme: ITheme;\n\n /** Size of the spinner animation. */\n size?: SpinnerSize;\n\n /** CSS class name for the component attached to the root stylable area. */\n className?: string;\n\n /** Position of the label in regards to the spinner animation. */\n labelPosition?: SpinnerLabelPosition;\n}\n\n/**\n * Represents the stylable areas of the control.\n * {@docCategory Spinner}\n */\nexport interface ISpinnerStyles {\n /** Styles for the root element. Refers to the wrapper containing both the circle and the label. */\n root?: IStyle;\n\n /** Styles for the spinner circle animation. */\n circle?: IStyle;\n\n /** Styles for the label accompanying the circle. */\n label?: IStyle;\n\n /** Styles for the hidden helper element to aid with screen readers. */\n screenReaderText?: IStyle;\n}\n","import type { IBasePickerStyleProps, IBasePickerStyles, IStyleFunctionOrObject } from '@fluentui/react';\nimport { getInputFocusStyle } from '@fluentui/react';\n\nexport function getBasePickerStyles(\n props: IBasePickerStyleProps,\n): IStyleFunctionOrObject {\n const { theme, isFocused, disabled } = props;\n\n const focusBorderColor = theme?.semanticColors.inputFocusBorderAlt\n ? theme?.semanticColors.inputFocusBorderAlt\n : '#0f6cbd';\n const focusBorderRadius = theme?.effects.roundedCorner4 ? theme?.effects.roundedCorner4 : 4;\n\n const styles: Partial = {\n text: [\n { borderRadius: theme?.effects.roundedCorner4 },\n isFocused && !disabled && getInputFocusStyle(focusBorderColor, focusBorderRadius),\n ],\n };\n\n return styles;\n}\n","import type { IBreadcrumbStyleProps, IBreadcrumbStyles, IStyleFunctionOrObject } from '@fluentui/react';\n\nexport function getBreadcrumbStyles(\n props: IBreadcrumbStyleProps,\n): IStyleFunctionOrObject {\n const { theme } = props;\n const { effects } = theme;\n\n const styles: Partial = {\n itemLink: {\n borderRadius: effects.roundedCorner4,\n '.ms-Fabric--isFocusVisible &:focus::after': {\n borderRadius: effects.roundedCorner4,\n },\n },\n };\n\n return styles;\n}\n","import { IButtonProps, IButtonStyles, IStyle, IStyleFunctionOrObject, ITheme } from '@fluentui/react';\nimport { concatStyleSets } from '@fluentui/react';\n\ntype FocusStyleType = {\n '.ms-Fabric--isFocusVisible &:focus::after': {\n border: string;\n borderRadius: string;\n inset: string;\n outline: string;\n };\n};\n\nconst getFocusStyle = (borderColor: string, borderRadius: string, outlineColor: string): FocusStyleType => ({\n '.ms-Fabric--isFocusVisible &:focus::after': {\n border: `1px solid ${borderColor}`,\n borderRadius,\n inset: '1px',\n outline: `2px solid ${outlineColor}`,\n },\n});\n\nfunction getBaseButtonStyles(theme: ITheme): Partial {\n const { effects } = theme;\n\n return {\n root: {\n paddingLeft: '12px',\n paddingRight: '12px',\n borderRadius: effects.roundedCorner4,\n },\n };\n}\n\nexport function getStandardButtonStyles(theme: ITheme): Partial {\n const { effects, palette, semanticColors } = theme;\n\n const styles: Partial = {\n root: {\n borderColor: semanticColors.buttonBorder,\n color: semanticColors.buttonText,\n ...getFocusStyle('transparent', effects.roundedCorner2, semanticColors.focusBorder),\n },\n rootHovered: {\n backgroundColor: semanticColors.buttonBackgroundHovered,\n borderColor: palette.neutralTertiaryAlt,\n color: semanticColors.buttonTextHovered,\n },\n rootPressed: {\n backgroundColor: semanticColors.buttonBackgroundPressed,\n borderColor: palette.neutralTertiary,\n color: semanticColors.buttonTextPressed,\n },\n rootDisabled: {\n backgroundColor: semanticColors.buttonBackgroundDisabled,\n borderColor: semanticColors.buttonBorderDisabled,\n color: semanticColors.buttonTextDisabled,\n },\n };\n\n return styles;\n}\n\nexport function getPrimaryButtonStyles(theme: ITheme): Partial {\n const { effects, palette, semanticColors } = theme;\n\n const styles: Partial = {\n root: {\n backgroundColor: semanticColors.primaryButtonBackground,\n borderColor: semanticColors.primaryButtonBorder,\n color: semanticColors.primaryButtonText,\n ...getFocusStyle(palette.white, effects.roundedCorner2, semanticColors.focusBorder),\n },\n rootHovered: {\n backgroundColor: semanticColors.primaryButtonBackgroundHovered,\n borderColor: semanticColors.primaryButtonBackgroundHovered,\n color: semanticColors.primaryButtonTextHovered,\n },\n rootPressed: {\n backgroundColor: semanticColors.primaryButtonBackgroundPressed,\n borderColor: semanticColors.primaryButtonBackgroundPressed,\n color: semanticColors.primaryButtonTextPressed,\n },\n rootDisabled: {\n backgroundColor: semanticColors.primaryButtonBackgroundDisabled,\n borderColor: semanticColors.primaryButtonBackgroundDisabled,\n color: semanticColors.primaryButtonTextDisabled,\n },\n description: {\n color: semanticColors.primaryButtonText,\n },\n descriptionHovered: {\n color: semanticColors.primaryButtonText,\n },\n };\n\n return styles;\n}\n\nexport function getIconButtonStyles(props: IButtonProps): IStyleFunctionOrObject {\n const { theme } = props;\n const { effects, palette, semanticColors } = theme!;\n\n const styles: Partial = {\n root: {\n borderColor: 'transparent',\n borderRadius: effects.roundedCorner4,\n color: palette.neutralPrimaryAlt,\n ...getFocusStyle('transparent', effects.roundedCorner2, semanticColors.focusBorder),\n },\n rootHovered: {\n backgroundColor: palette.neutralLighter,\n borderColor: palette.neutralLighter,\n color: semanticColors.buttonTextHovered,\n },\n rootPressed: {\n backgroundColor: semanticColors.buttonBackgroundPressed,\n borderColor: semanticColors.buttonBackgroundPressed,\n color: semanticColors.buttonTextPressed,\n },\n rootDisabled: {\n backgroundColor: 'transparent',\n borderColor: 'transparent',\n color: semanticColors.buttonTextDisabled,\n },\n };\n\n return styles;\n}\n\nexport function getDefaultButtonStyles(props: IButtonProps): IStyleFunctionOrObject {\n const { theme, primary, split } = props;\n\n return concatStyleSets(\n getBaseButtonStyles(theme!),\n primary ? getPrimaryButtonStyles(theme!) : getStandardButtonStyles(theme!),\n split && getSplitButtonStyles(theme!),\n );\n}\n\nconst fluent2SplitButtonDividerStyles: IStyle = {\n position: 'relative',\n top: 'unset',\n bottom: 'unset',\n};\n\nexport function getSplitButtonStyles(theme: ITheme): Partial {\n const styles: Partial = {\n splitButtonMenuButton: {\n borderRadius: 'unset',\n borderTopRightRadius: theme?.effects.roundedCorner4,\n borderBottomRightRadius: theme?.effects.roundedCorner4,\n },\n splitButtonDivider: fluent2SplitButtonDividerStyles,\n splitButtonDividerDisabled: fluent2SplitButtonDividerStyles,\n };\n\n return styles;\n}\n","import type { ICalloutContentStyleProps, ICalloutContentStyles, IStyleFunctionOrObject } from '@fluentui/react';\n\nexport function getCalloutContentStyles(\n props: ICalloutContentStyleProps,\n): IStyleFunctionOrObject {\n const { theme } = props;\n const { effects } = theme;\n\n const styles: Partial = {\n root: {\n borderRadius: effects.roundedCorner4,\n },\n calloutMain: {\n borderRadius: effects.roundedCorner4,\n },\n beakCurtain: {\n borderRadius: effects.roundedCorner4,\n },\n };\n\n return styles;\n}\n","import type { ICheckboxStyleProps, ICheckboxStyles, IStyleFunctionOrObject } from '@fluentui/react';\n\nconst externalPadding = '3px';\n\nconst getTextColor = (props: ICheckboxStyleProps) => {\n const { theme, checked, disabled } = props;\n\n if (disabled) {\n return theme.semanticColors.disabledSubtext;\n }\n\n if (checked) {\n return theme.semanticColors.bodyTextChecked;\n }\n\n return theme.semanticColors.inputPlaceholderText;\n};\n\nconst getBorderColor = (props: ICheckboxStyleProps) => {\n const { theme, checked, disabled } = props;\n\n if (disabled) {\n return theme.semanticColors.disabledBorder;\n }\n\n if (checked) {\n return theme.semanticColors.inputBackgroundChecked;\n }\n\n return theme.semanticColors.inputPlaceholderText;\n};\n\nconst getBackgroundColor = (props: ICheckboxStyleProps) => {\n const { theme, checked, disabled } = props;\n\n if (disabled) {\n return checked ? theme.semanticColors.disabledBorder : theme.semanticColors.inputBackground;\n }\n\n if (checked) {\n return theme.semanticColors.inputBackgroundChecked;\n }\n\n return theme.semanticColors.inputBackground;\n};\n\nconst getHoveredBorderColor = (props: ICheckboxStyleProps) => {\n const { theme, checked, disabled } = props;\n\n if (disabled) {\n return theme.semanticColors.disabledBorder;\n }\n\n if (checked) {\n return theme.semanticColors.inputBackgroundCheckedHovered;\n }\n\n return theme.semanticColors.inputIconHovered;\n};\n\nconst getHoveredBackgroundColor = (props: ICheckboxStyleProps) => {\n const { theme, checked, disabled } = props;\n\n if (disabled) {\n return checked ? theme.semanticColors.disabledBorder : theme.semanticColors.inputBackground;\n }\n\n if (checked) {\n return theme.semanticColors.inputBackgroundCheckedHovered;\n }\n\n return theme.semanticColors.inputBackground;\n};\n\nconst getHoveredTextColor = (props: ICheckboxStyleProps) => {\n const { theme, disabled } = props;\n\n if (disabled) {\n return theme.semanticColors.disabledSubtext;\n }\n\n return theme.semanticColors.inputIconHovered;\n};\n\nconst getCheckmarkColor = (props: ICheckboxStyleProps) => {\n const { theme, disabled } = props;\n\n if (disabled) {\n return theme.semanticColors.buttonTextDisabled;\n }\n\n return undefined;\n};\n\nconst getHoveredCheckmarkColor = (props: ICheckboxStyleProps) => {\n const { theme, disabled, checked } = props;\n\n if (disabled) {\n return theme.semanticColors.buttonTextDisabled;\n }\n\n if (!checked) {\n return theme.semanticColors.inputBackground;\n }\n\n return undefined;\n};\n\nconst getDefaultCheckboxStyles = (props: ICheckboxStyleProps) => {\n return {\n root: {\n '&:hover .ms-Checkbox-checkbox': {\n borderColor: getHoveredBorderColor(props),\n background: getHoveredBackgroundColor(props),\n },\n '&:hover .ms-Checkbox-text': {\n color: getHoveredTextColor(props),\n },\n '&:hover .ms-Checkbox-checkmark': {\n color: getHoveredCheckmarkColor(props),\n },\n },\n label: {\n gap: '4px',\n padding: externalPadding,\n },\n checkbox: {\n margin: 0,\n backgroundColor: getBackgroundColor(props),\n borderColor: getBorderColor(props),\n },\n text: {\n margin: 0,\n color: getTextColor(props),\n },\n checkmark: {\n color: getCheckmarkColor(props),\n },\n };\n};\n\nexport function getCheckboxStyles(\n props: ICheckboxStyleProps,\n): IStyleFunctionOrObject {\n return getDefaultCheckboxStyles(props);\n}\n","import type { IChoiceGroupStyleProps, IChoiceGroupStyles, IStyleFunctionOrObject } from '@fluentui/react';\n\nconst getDefaultChoiceGroupStyles = (props: IChoiceGroupStyleProps) => {\n const { theme } = props;\n\n return {\n root: {},\n label: {\n color: theme.semanticColors.inputPlaceholderText,\n },\n flexContainer: {},\n };\n};\n\nexport function getChoiceGroupStyles(\n props: IChoiceGroupStyleProps,\n): IStyleFunctionOrObject {\n return getDefaultChoiceGroupStyles(props);\n}\n","import type { IChoiceGroupOptionStyleProps, IChoiceGroupOptionStyles, IStyleFunctionOrObject } from '@fluentui/react';\n\nconst getChoiceGroupOptionColor = (props: IChoiceGroupOptionStyleProps) => {\n const { theme, checked, disabled } = props;\n\n if (disabled) {\n return theme.semanticColors.disabledText;\n } else if (checked) {\n return theme.semanticColors.inputBackgroundChecked;\n } else {\n return theme.semanticColors.inputPlaceholderText;\n }\n};\n\nconst getChoiceGroupTextColor = (props: IChoiceGroupOptionStyleProps) => {\n const { theme, checked, disabled } = props;\n\n if (disabled) {\n return theme.semanticColors.disabledText;\n } else if (checked) {\n return theme.semanticColors.inputIconHovered;\n } else {\n return theme.semanticColors.inputPlaceholderText;\n }\n};\n\nconst getHoveredChoiceGroupOptionColor = (props: IChoiceGroupOptionStyleProps) => {\n const { theme, disabled } = props;\n\n if (disabled) {\n return theme.semanticColors.disabledText;\n } else {\n return theme.semanticColors.inputIconHovered;\n }\n};\n\nconst getInnerCircleColor = (props: IChoiceGroupOptionStyleProps, isHover: boolean) => {\n const { theme, checked, disabled } = props;\n\n if (disabled && checked) {\n return theme.semanticColors.disabledText;\n } else if (checked) {\n if (isHover) {\n return theme.semanticColors.inputBackgroundCheckedHovered;\n }\n\n return theme.semanticColors.inputBackgroundChecked;\n } else {\n return 'transparent';\n }\n};\n\nconst getOuterCircleColor = (props: IChoiceGroupOptionStyleProps, isHover: boolean) => {\n const { theme, checked, disabled } = props;\n\n if (disabled) {\n return theme.semanticColors.disabledText;\n } else if (checked) {\n if (isHover) {\n return theme.semanticColors.inputBackgroundCheckedHovered;\n }\n\n return theme.semanticColors.inputBackgroundChecked;\n } else {\n return theme.semanticColors.inputIconHovered;\n }\n};\n\nconst getTextHoverColor = (props: IChoiceGroupOptionStyleProps) => {\n const { theme, checked, disabled } = props;\n\n if (disabled) {\n return theme.semanticColors.disabledText;\n } else if (checked) {\n return getChoiceGroupTextColor(props);\n } else {\n return theme.semanticColors.inputIconHovered;\n }\n};\n\nexport const getDefaultChoiceGroupOptionStyles = (\n props: IChoiceGroupOptionStyleProps,\n): Partial => {\n return {\n field: {\n color: getChoiceGroupTextColor(props),\n '.ms-ChoiceFieldLabel': {\n color: getChoiceGroupTextColor(props),\n },\n '&:hover .ms-ChoiceFieldLabel': {\n color: getTextHoverColor(props),\n },\n selectors: {\n // The circle\n '::before': {\n borderColor: getChoiceGroupOptionColor(props),\n width: '17px',\n height: '17px',\n margin: '2px',\n },\n // the inner dot\n '::after': {\n width: '11px',\n height: '11px',\n background: getInnerCircleColor(props, false),\n borderColor: getInnerCircleColor(props, false),\n },\n ':hover': {\n color: getHoveredChoiceGroupOptionColor(props),\n },\n ':hover::before': {\n borderColor: getOuterCircleColor(props, true),\n },\n ':hover::after': {\n background: getInnerCircleColor(props, true),\n borderColor: getInnerCircleColor(props, true),\n },\n },\n },\n };\n};\n\nexport function getChoiceGroupOptionStyles(\n props: IChoiceGroupOptionStyleProps,\n): IStyleFunctionOrObject {\n return getDefaultChoiceGroupOptionStyles(props);\n}\n","import type {\n IColorPickerGridCellStyleProps,\n IColorPickerGridCellStyles,\n IStyleFunctionOrObject,\n} from '@fluentui/react';\nimport { IExtendedEffects } from '../types';\n\nexport function getColorPickerGridCellStyles(\n props: IColorPickerGridCellStyleProps,\n): IStyleFunctionOrObject {\n const { theme, circle, height, width } = props;\n const { effects } = theme;\n\n let borderRadiusStyle = { borderRadius: effects.roundedCorner2 };\n\n if ((height && height > 32 && height <= 64) || (width && width > 32 && width <= 64)) {\n borderRadiusStyle = { borderRadius: effects.roundedCorner4 };\n } else if ((height && height > 64) || (width && width > 64)) {\n const largestRadius = (effects as IExtendedEffects).roundedCorner8 ?? '8px';\n\n borderRadiusStyle = {\n borderRadius: largestRadius,\n };\n }\n\n const styles: Partial = {\n colorCell: [!circle && borderRadiusStyle],\n svg: [!circle && borderRadiusStyle],\n };\n\n return styles;\n}\n","import type { ICommandBarStyleProps, ICommandBarStyles, IStyleFunctionOrObject } from '@fluentui/react';\nimport { IExtendedEffects } from '../types';\n\nexport function getCommandBarStyles(\n props: ICommandBarStyleProps,\n): IStyleFunctionOrObject {\n const { theme } = props;\n const { effects } = theme;\n\n const styles: Partial = {\n root: {\n height: '48px',\n borderRadius: (effects as IExtendedEffects).roundedCorner8,\n alignItems: 'center',\n },\n primarySet: {\n height: '40px',\n },\n secondarySet: {\n height: '40px',\n },\n };\n\n return styles;\n}\n","import type { IButtonProps, IButtonStyles, IStyleFunctionOrObject, ITheme } from '@fluentui/react';\n\nexport function getCommandBarButtonStyles(props: IButtonProps): IStyleFunctionOrObject {\n const { theme } = props;\n const { semanticColors, effects } = theme!;\n\n const rightCorners = {\n borderRadius: 0,\n borderTopRightRadius: effects.roundedCorner4,\n borderBottomRightRadius: effects.roundedCorner4,\n };\n\n const leftCorners = {\n borderRadius: 0,\n borderTopLeftRadius: effects.roundedCorner4,\n borderBottomLeftRadius: effects.roundedCorner4,\n };\n\n const commandBarHeightPadding = {\n height: 32,\n paddingLeft: 4,\n paddingRight: 4,\n };\n\n const defaultSplitStyles: Partial = getSplitButtonStyles(theme!);\n\n const styles: Partial = {\n root: {\n backgroundColor: 'transparent',\n height: '100%',\n padding: '0px',\n margin: '0px 2px',\n borderRadius: effects.roundedCorner4,\n '.ms-Fabric--isFocusVisible &:focus::after': {\n top: 4,\n right: 0,\n bottom: 4,\n left: 0,\n outline: 'none',\n borderRadius: effects.roundedCorner4,\n border: `2px solid ${semanticColors.focusBorder}`,\n },\n },\n rootHovered: {\n backgroundColor: 'transparent',\n '.ms-Button-flexContainer': {\n backgroundColor: semanticColors.buttonBackgroundHovered,\n },\n },\n rootPressed: {\n backgroundColor: 'transparent',\n '.ms-Button-flexContainer': {\n backgroundColor: semanticColors.buttonBackgroundPressed,\n },\n },\n rootExpanded: {\n backgroundColor: 'transparent',\n color: 'inherit',\n '.ms-Button-flexContainer': {\n backgroundColor: 'transparent',\n },\n },\n rootChecked: {\n backgroundColor: 'transparent',\n '.ms-Button-flexContainer': {\n backgroundColor: semanticColors.buttonBackgroundChecked,\n },\n },\n rootCheckedHovered: {\n backgroundColor: 'transparent',\n '.ms-Button-flexContainer': {\n backgroundColor: semanticColors.buttonBackgroundCheckedHovered,\n },\n },\n rootCheckedPressed: {\n backgroundColor: 'transparent',\n '.ms-Button-flexContainer': {\n backgroundColor: semanticColors.buttonBackgroundPressed,\n },\n },\n rootExpandedHovered: {\n backgroundColor: 'transparent',\n '.ms-Button-flexContainer': {\n backgroundColor: semanticColors.buttonBackgroundHovered,\n },\n },\n flexContainer: {\n height: 32,\n paddingLeft: 4,\n paddingRight: 4,\n borderRadius: effects.roundedCorner4,\n },\n icon: {\n color: 'inherit',\n },\n menuIcon: {\n color: 'inherit',\n fontSize: '10px',\n },\n rootDisabled: {\n backgroundColor: 'transparent',\n },\n textContainer: {\n height: 16,\n },\n ...defaultSplitStyles,\n splitButtonContainer: {\n borderRadius: effects.roundedCorner4,\n color: semanticColors.buttonText,\n '.ms-Button:first-child': {\n '.ms-Button-flexContainer': {\n ...leftCorners,\n ...commandBarHeightPadding,\n },\n },\n },\n splitButtonMenuButton: {\n ...rightCorners,\n height: '100%',\n padding: '0px',\n width: 20,\n marginLeft: '-2px',\n backgroundColor: 'transparent',\n '.ms-Button-flexContainer': {\n ...rightCorners,\n ...commandBarHeightPadding,\n },\n '&:hover': {\n backgroundColor: 'transparent',\n '.ms-Button-flexContainer': {\n backgroundColor: semanticColors.buttonBackgroundHovered,\n },\n },\n },\n splitButtonContainerFocused: {\n ':focus::after': {\n inset: `4px 0px`,\n outline: `none`,\n borderRadius: effects.roundedCorner4,\n border: `2px solid ${semanticColors.focusBorder}`,\n },\n },\n splitButtonMenuButtonExpanded: {\n backgroundColor: 'transparent',\n '.ms-Button-flexContainer': {\n backgroundColor: semanticColors.buttonBackgroundChecked,\n },\n '&:hover': {\n backgroundColor: 'transparent',\n '.ms-Button-flexContainer': {\n backgroundColor: semanticColors.buttonBackgroundCheckedHovered,\n },\n },\n },\n splitButtonFlexContainer: {\n border: 'none',\n },\n };\n\n return styles;\n}\n\n// This function will be moved to Button.styles.ts in another PR to add default split button styling\nfunction getSplitButtonStyles(theme: ITheme): Partial {\n const { effects, semanticColors } = theme;\n\n const rightCorners = {\n borderRadius: 0,\n borderTopRightRadius: effects.roundedCorner4,\n borderBottomRightRadius: effects.roundedCorner4,\n };\n\n const leftCorners = {\n borderRadius: 0,\n borderTopLeftRadius: effects.roundedCorner4,\n borderBottomLeftRadius: effects.roundedCorner4,\n };\n\n const styles: Partial = {\n splitButtonContainer: {\n borderRadius: effects.roundedCorner4,\n color: semanticColors.buttonText,\n '.ms-Button:first-child': {\n ...leftCorners,\n height: '100%',\n },\n '.ms-Button--primary:hover': {\n border: `none`,\n },\n },\n splitButtonMenuButton: {\n ...rightCorners,\n height: '100%',\n padding: '0px',\n width: 20,\n },\n splitButtonContainerFocused: {\n ':focus::after': {\n inset: '0px',\n outline: `none`,\n borderRadius: effects.roundedCorner4,\n border: `2px solid ${semanticColors.focusBorder}`,\n },\n },\n splitButtonMenuFocused: {\n ':focus::after': {\n inset: '0px',\n outline: `none`,\n border: `2px solid ${semanticColors.focusBorder}`,\n ...rightCorners,\n },\n },\n splitButtonDivider: {\n right: 19,\n },\n splitButtonDividerDisabled: {\n right: 19,\n },\n };\n\n return styles;\n}\n","import type { IContextualMenuStyleProps, IContextualMenuStyles, IStyleFunctionOrObject } from '@fluentui/react';\n\nexport function getContextualMenuStyles(\n props: IContextualMenuStyleProps,\n): IStyleFunctionOrObject {\n const { theme } = props;\n const { effects } = theme;\n\n const styles: Partial = {\n root: {\n borderRadius: effects.roundedCorner4,\n boxShadow: effects.elevation8,\n },\n container: {\n borderRadius: effects.roundedCorner4,\n },\n list: {\n padding: '4px',\n },\n subComponentStyles: {\n callout: {},\n menuItem: {\n root: {\n borderRadius: effects.roundedCorner2,\n '&:after': {\n borderRadius: effects.roundedCorner2,\n },\n },\n divider: {\n margin: '4px',\n },\n icon: {\n color: 'inherit',\n },\n },\n },\n };\n\n return styles;\n}\n","import type {\n IDialogContentStyleProps,\n IDialogContentStyles,\n IDialogStyleProps,\n IDialogStyles,\n IStyleFunctionOrObject,\n} from '@fluentui/react';\nimport { IExtendedEffects } from '../types';\n\nexport function getDialogStyles(props: IDialogStyleProps): IStyleFunctionOrObject {\n const { theme } = props;\n const { effects } = theme;\n\n const styles: Partial = {\n main: {\n borderRadius: (effects as IExtendedEffects).roundedCorner8,\n boxShadow: effects.elevation64,\n },\n };\n\n return styles;\n}\n\nexport function getDialogContentStyles(\n props: IDialogContentStyleProps,\n): IStyleFunctionOrObject {\n const { theme } = props;\n const { effects } = theme;\n\n const styles: Partial = {\n topButton: {\n '&:hover': {\n '.ms-Dialog-button': {\n borderRadius: effects.roundedCorner4,\n },\n },\n },\n button: {\n borderRadius: effects.roundedCorner4,\n },\n };\n\n return styles;\n}\n","import { IRawStyle, ITheme } from '@fluentui/react';\nimport { IExtendedSemanticColors } from '../types';\n\nexport const getFluent2InputFocusStyles = (\n theme: ITheme,\n isUnderline: boolean = false,\n isError: boolean = false,\n): IRawStyle => {\n const { semanticColors } = theme;\n\n const bottomBorderFocusColor =\n (semanticColors as IExtendedSemanticColors)?.inputBottomBorderFocus ?? theme.palette.themePrimary;\n\n const focusBottomBorder = `2px solid ${isError ? semanticColors.errorText : bottomBorderFocusColor}`;\n\n return {\n borderColor: semanticColors.focusBorder,\n ':after': {\n borderColor: semanticColors.focusBorder,\n borderBottom: isUnderline ? 'unset' : focusBottomBorder,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n },\n };\n};\n\nexport const getFluent2InputDisabledStyles = (theme: ITheme): IRawStyle => {\n const { semanticColors } = theme;\n return {\n borderRadius: theme?.effects.roundedCorner4,\n border: `1px solid ${semanticColors.disabledBorder}`,\n color: semanticColors.disabledText,\n backgroundColor: 'unset',\n };\n};\n","import { IDropdownStyleProps, IDropdownStyles, IStyleFunctionOrObject } from '@fluentui/react';\nimport { FontWeights } from '@fluentui/react';\nimport { IExtendedSemanticColors } from '../types';\nimport { getFluent2InputDisabledStyles } from './inputStyleHelpers.utils';\n\nexport function getDropdownStyles(\n props: IDropdownStyleProps,\n): IStyleFunctionOrObject {\n const { theme, disabled } = props;\n const { semanticColors, palette } = theme!;\n\n const bottomBorderFocusColor =\n (semanticColors as IExtendedSemanticColors)?.inputBottomBorderFocus ?? palette.themePrimary;\n\n const focusBottomBorder = `2px solid ${bottomBorderFocusColor}`;\n\n return {\n dropdown: [\n disabled && getFluent2InputDisabledStyles(theme!),\n !disabled && {\n selectors: {\n '&:focus:after': [\n {\n borderRadius: theme?.effects.roundedCorner4,\n borderColor: semanticColors.focusBorder,\n borderBottom: focusBottomBorder,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n },\n ],\n },\n },\n ],\n title: [{ borderRadius: theme?.effects.roundedCorner4 }, disabled && { backgroundColor: 'unset' }],\n caretDown: { color: theme?.palette.neutralQuaternary },\n label: { fontWeight: FontWeights.regular },\n };\n}\n","import type { IMessageBarStyleProps, IMessageBarStyles } from '@fluentui/react';\n\nexport const fullWidthMessageBarStyle: Partial = {\n root: {\n borderRadius: '0',\n },\n};\n\nexport const getMessageBarStyles = (props: IMessageBarStyleProps): IMessageBarStyles => {\n const { theme } = props;\n const { effects } = theme;\n\n return {\n root: {\n borderRadius: effects.roundedCorner4,\n },\n };\n};\n","import type { IModalStyleProps, IModalStyles, IStyleFunctionOrObject } from '@fluentui/react';\nimport { IExtendedEffects } from '../types';\n\nexport function getModalStyles(props: IModalStyleProps): IStyleFunctionOrObject {\n const { theme } = props;\n const { effects } = theme;\n\n const styles: Partial = {\n main: {\n borderRadius: (effects as IExtendedEffects).roundedCorner8,\n boxShadow: effects.elevation64,\n },\n };\n\n return styles;\n}\n","import type { IPivotStyleProps, IPivotStyles, IStyleFunctionOrObject } from '@fluentui/react';\n\nexport function getPivotStyles(props: IPivotStyleProps): IStyleFunctionOrObject {\n const { theme } = props;\n const { effects, semanticColors } = theme;\n\n return {\n link: {\n backgroundColor: 'transparent',\n border: '2px solid transparent',\n borderRadius: effects.roundedCorner4,\n height: '44px',\n lineHeight: '20px',\n marginRight: 0,\n padding: '12px',\n '&:hover::before': {\n borderRadius: effects.roundedCorner4,\n height: '3px',\n // backgroundColor: rootIsTabs ? 'transparent' : palette.neutralQuaternary,\n },\n '&:hover': {\n '.ms-Pivot-icon': {\n // color: rootIsTabs ? semanticColors.primaryButtonText : palette.themePrimary,\n },\n },\n '.ms-Fabric--isFocusVisible &:focus': {\n border: `2px solid ${semanticColors.focusBorder}`,\n borderRadius: effects.roundedCorner4,\n inset: 0,\n outline: 'none',\n },\n },\n icon: {\n height: '14px',\n width: '14px',\n },\n linkIsSelected: {\n border: '2px solid transparent',\n borderRadius: effects.roundedCorner4,\n height: '44px',\n lineHeight: '20px',\n marginRight: 0,\n padding: '12px',\n '&::before': {\n borderRadius: effects.roundedCorner4,\n height: '3px',\n },\n '.ms-Fabric--isFocusVisible &:focus': {\n border: `2px solid ${semanticColors.focusBorder}`,\n borderRadius: effects.roundedCorner4,\n inset: 0,\n outline: 'none',\n },\n '.ms-Pivot-icon': {\n // color: rootIsTabs ? semanticColors.primaryButtonText : palette.themePrimary,\n },\n },\n };\n}\n","import type { ISearchBoxStyleProps, ISearchBoxStyles, IStyleFunctionOrObject } from '@fluentui/react';\nimport { getFluent2InputDisabledStyles, getFluent2InputFocusStyles } from './inputStyleHelpers.utils';\n\nexport function getSearchBoxStyles(\n props: ISearchBoxStyleProps,\n): IStyleFunctionOrObject {\n const { hasFocus, underlined, disabled, theme } = props;\n const { palette, semanticColors } = theme;\n\n const restBottomBorder = `1px solid ${palette.neutralPrimary}`;\n\n const styles: Partial = {\n root: [\n {\n borderRadius: underlined ? 0 : theme.effects.roundedCorner4,\n borderBottom: restBottomBorder,\n },\n\n hasFocus && [\n 'is-active',\n {\n position: 'relative',\n borderColor: 'unset',\n },\n getFluent2InputFocusStyles(theme),\n ],\n\n disabled && [\n 'is-disabled',\n getFluent2InputDisabledStyles(theme),\n { borderBottom: `1px solid ${semanticColors.disabledBorder}` },\n ],\n ],\n field: [\n disabled && {\n '::placeholder': {\n color: semanticColors.disabledText,\n },\n },\n ],\n iconContainer: [\n {\n color: theme.palette.neutralPrimary,\n },\n disabled && [\n 'is-disabled',\n {\n color: semanticColors.disabledText,\n },\n ],\n ],\n };\n\n return styles;\n}\n","import type { ISliderStyleProps, ISliderStyles, IStyleFunctionOrObject } from '@fluentui/react';\nimport { getRTL } from '@fluentui/react';\n\nexport const fluent2SliderThumbSize = 20;\n\nexport function getSliderStyles(props: ISliderStyleProps): IStyleFunctionOrObject {\n const { theme, vertical, disabled } = props;\n const { semanticColors } = theme;\n\n const slideBoxInactiveSectionStyles = !disabled\n ? {\n backgroundColor: semanticColors.smallInputBorder,\n }\n : undefined;\n\n const activeSectionStyles = !disabled\n ? {\n backgroundColor: semanticColors.primaryButtonBackgroundHovered,\n }\n : undefined;\n\n const thumbActiveStyles = !disabled\n ? {\n border: '1px solid ' + semanticColors.smallInputBorder,\n }\n : undefined;\n\n // since the thumb is now a little bigger,\n // we need to use margin to recenter it in the track\n const thumbMargin = -8;\n\n const styles: Partial = {\n thumb: [\n {\n background: !disabled ? semanticColors.primaryButtonBackground : semanticColors.disabledBorder,\n boxShadow: `0 0 0 4px ${semanticColors.buttonBackground} inset`,\n borderWidth: 1,\n borderColor: semanticColors.disabledBorder,\n height: fluent2SliderThumbSize,\n width: fluent2SliderThumbSize,\n ':hover': {\n backgroundColor: !disabled ? semanticColors.primaryButtonBackgroundHovered : semanticColors.disabledBorder,\n },\n },\n vertical\n ? {\n left: thumbMargin,\n margin: '0 auto',\n transform: 'translateY(8px)',\n }\n : {\n top: thumbMargin,\n transform: getRTL(theme) ? 'translateX(50%)' : 'translateX(-50%)',\n },\n ],\n activeSection: [\n {\n background: !disabled ? semanticColors.primaryButtonBackground : semanticColors.disabledBorder,\n },\n ],\n inactiveSection: {\n backgroundColor: !disabled ? semanticColors.smallInputBorder : semanticColors.buttonBackgroundDisabled,\n },\n slideBox: [\n {\n [`:active .ms-Slider-inactive`]: slideBoxInactiveSectionStyles,\n [`:hover .ms-Slider-inactive`]: slideBoxInactiveSectionStyles,\n [`:active .ms-Slider-active`]: activeSectionStyles,\n [`:hover .ms-Slider-active`]: activeSectionStyles,\n [':active .' + 'ms-Slider-thumb']: thumbActiveStyles,\n [':hover .' + 'ms-Slider-thumb']: thumbActiveStyles,\n },\n ],\n };\n\n return styles;\n}\n","import type { ISpinButtonStyleProps, ISpinButtonStyles, IStyleFunctionOrObject } from '@fluentui/react';\nimport { FontWeights } from '@fluentui/react';\n\nexport function getSpinButtonStyles(\n props: ISpinButtonStyleProps,\n): IStyleFunctionOrObject {\n const { theme, isFocused, disabled } = props;\n const { semanticColors } = theme;\n const SpinButtonRootBorderColorFocused = semanticColors.disabledBorder; // sorry for the broken semantics\n let SpinButtonRootBorderColor = semanticColors.inputBorder;\n let SpinButtonBorderBottomColor = isFocused ? theme.palette.themePrimary : theme.palette.neutralPrimary;\n\n if (disabled) {\n SpinButtonBorderBottomColor = semanticColors.disabledBorder;\n SpinButtonRootBorderColor = semanticColors.disabledBorder;\n }\n\n const styles: Partial = {\n label: {\n fontWeight: FontWeights.regular,\n },\n input: {\n backgroundColor: 'unset',\n },\n spinButtonWrapper: [\n {\n borderBottomColor: SpinButtonBorderBottomColor,\n backgroundColor: 'unset',\n },\n {\n // setting border using pseudo-element here in order to prevent:\n // input and chevron buttons to overlap 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: SpinButtonRootBorderColor,\n borderBottomColor: SpinButtonBorderBottomColor,\n borderRadius: theme.effects.roundedCorner4,\n },\n },\n !disabled && [\n {\n ':hover :': {\n ':after': {\n borderStyle: 'solid',\n borderColor: SpinButtonRootBorderColorFocused,\n borderBottom: theme.palette.themePrimary,\n borderWidth: '1px',\n },\n },\n },\n isFocused && [\n {\n ':hover:after, :after': {\n borderStyle: 'solid',\n borderColor: SpinButtonRootBorderColorFocused,\n borderBottomColor: SpinButtonBorderBottomColor,\n borderWidth: '1px',\n },\n },\n ],\n ],\n ],\n };\n\n return styles;\n}\n","import { ISpinnerStyleProps, ISpinnerStyles, IStyleFunctionOrObject, SpinnerSize } from '@fluentui/react';\nimport { FontWeights } from '@fluentui/react';\n\nexport function getSpinnerStyles(\n props: ISpinnerStyleProps,\n): IStyleFunctionOrObject {\n const { theme, size } = props;\n\n const styles: Partial = {\n label: [theme.fonts.mediumPlus, { color: theme.semanticColors.bodyText, fontWeight: FontWeights.semibold }],\n circle: [\n {\n borderWidth: 3,\n },\n size === SpinnerSize.large && {\n height: 36,\n width: 36,\n },\n size === SpinnerSize.medium && {\n // default\n height: 32,\n width: 32,\n },\n size === SpinnerSize.small && {\n height: 28,\n width: 28,\n },\n size === SpinnerSize.xSmall && {\n height: 24,\n width: 24,\n },\n ],\n };\n\n return styles;\n}\n","import type { IStyleFunctionOrObject, ITagItemStyleProps, ITagItemStyles } from '@fluentui/react';\n\nexport function getTagItemStyles(\n props: ITagItemStyleProps,\n): IStyleFunctionOrObject {\n const { theme } = props;\n\n return {\n root: {\n borderRadius: theme.effects.roundedCorner4,\n },\n };\n}\n","import type { IStyleFunctionOrObject, ITextFieldStyleProps, ITextFieldStyles } from '@fluentui/react';\nimport { FontWeights } from '@fluentui/react';\nimport { getFluent2InputDisabledStyles, getFluent2InputFocusStyles } from './inputStyleHelpers.utils';\n\nexport function getTextFieldStyles(\n props: ITextFieldStyleProps,\n): IStyleFunctionOrObject {\n const { theme, focused, borderless, underlined, hasErrorMessage, disabled } = props;\n const { effects, semanticColors, palette } = theme;\n\n const unsetBackgroundColor = { backgroundColor: 'unset' };\n\n const borderBottomColor = hasErrorMessage ? semanticColors.errorText : palette.neutralPrimary;\n\n const restBottomBorder = borderless || underlined ? 'unset' : `1px solid ${borderBottomColor}`;\n\n const styles: Partial = {\n subComponentStyles: {\n label: {\n root: {\n fontWeight: FontWeights.regular,\n },\n },\n },\n prefix: unsetBackgroundColor,\n suffix: unsetBackgroundColor,\n field: [\n focused && {\n border: 'unset',\n ':after': {\n border: 'unset',\n },\n },\n disabled && {\n backgroundColor: 'unset',\n },\n {\n borderRadius: effects.roundedCorner4,\n ':after': {\n borderRadius: effects.roundedCorner4,\n },\n },\n ],\n fieldGroup: [\n {\n borderBottom: restBottomBorder,\n borderRadius: effects.roundedCorner4,\n ':after': {\n borderRadius: effects.roundedCorner4,\n },\n },\n focused && getFluent2InputFocusStyles(theme, underlined, hasErrorMessage),\n disabled && getFluent2InputDisabledStyles(theme),\n disabled && { borderBottom: `1px solid ${semanticColors.disabledText}` },\n ],\n };\n\n return styles;\n}\n","import type { IToggleStyleProps, IToggleStyles } from '@fluentui/react';\n\nconst getPillBackgroundColor = (props: IToggleStyleProps) => {\n const { theme, checked, disabled } = props;\n const { semanticColors } = theme;\n\n if (checked) {\n return disabled ? semanticColors.buttonBackgroundDisabled : semanticColors.inputBackgroundChecked;\n } else if (!checked) {\n return semanticColors.primaryButtonBorder;\n }\n\n return undefined;\n};\n\nconst getHoveredPillBackgroundColor = (props: IToggleStyleProps) => {\n const { theme, checked, disabled } = props;\n const { semanticColors } = theme;\n\n if (checked) {\n return disabled ? semanticColors.buttonBackgroundDisabled : semanticColors.inputBackgroundCheckedHovered;\n } else if (!checked) {\n return semanticColors.primaryButtonBorder;\n }\n\n return undefined;\n};\n\nconst getPressedPillBackgroundColor = (props: IToggleStyleProps) => {\n const { theme, checked, disabled } = props;\n const { semanticColors } = theme;\n\n if (checked) {\n return disabled ? semanticColors.disabledBackground : semanticColors.primaryButtonBackgroundPressed;\n } else if (!checked) {\n return semanticColors.primaryButtonBorder;\n }\n\n return undefined;\n};\n\nconst getLabelColor = (props: IToggleStyleProps) => {\n const { theme, disabled } = props;\n const { semanticColors } = theme;\n\n return disabled ? semanticColors.disabledBodySubtext : semanticColors.inputText;\n};\n\nexport const getToggleStyles = (props: IToggleStyleProps): Partial => {\n const { theme, disabled } = props;\n const { semanticColors, effects } = theme;\n\n return {\n root: {},\n label: {\n color: getLabelColor(props),\n },\n thumb: {\n width: '14px',\n height: '14px',\n backgroundColor: disabled ? semanticColors.inputIconDisabled : undefined,\n },\n container: {},\n pill: {\n backgroundColor: getPillBackgroundColor(props),\n '&:hover': {\n backgroundColor: getHoveredPillBackgroundColor(props),\n },\n '&:active': {\n backgroundColor: getPressedPillBackgroundColor(props),\n },\n '&:focus&:after': {\n borderRadius: effects.roundedCorner4,\n outlineWidth: '2px',\n },\n },\n text: {},\n };\n};\n","import type { IDetailsRowCheckStyles } from '@fluentui/react';\n\nexport const getDetailsRowCheckStyles = (): Partial => ({\n check: [\n {\n opacity: 1,\n },\n ],\n});\n","import type { ICheckStyleProps, ICheckStyles } from '@fluentui/react';\nimport { FontWeights, warn } from '@fluentui/react';\n\nexport const getCheckStyles = ({ checked, theme }: ICheckStyleProps): Partial => {\n const extendedTheme = theme;\n\n if (!extendedTheme) {\n warn('Theme is undefined or null.');\n }\n\n return {\n root: [\n {\n cursor: 'pointer',\n width: '16px',\n height: '16px',\n '::before': {\n transition: 'all ease-in-out 200ms',\n // Because the ::before element is layering on top of CircleRing border, we are increasing the border\n // radius here to 3px, so it doesn’t compete. When both are 2px, the contour might look fuzzy.\n borderRadius: '3px',\n backgroundColor: 'transparent',\n inset: 0,\n height: '100%',\n width: '100%',\n },\n },\n checked && {\n ':hover': {\n '::before': {\n backgroundColor: theme.semanticColors.inputBackgroundCheckedHovered,\n },\n '[data-icon-name=\"CircleRing\"]': {\n borderColor: theme.semanticColors.inputBackgroundCheckedHovered,\n },\n },\n '::before': {\n backgroundColor: theme.semanticColors.inputBackgroundChecked,\n },\n '[data-icon-name=\"StatusCircleCheckmark\"]': {\n opacity: 1,\n },\n },\n ],\n check: [\n {\n fontSize: '18px',\n lineHeight: '16px',\n margin: '0',\n width: '16px',\n height: '16px',\n fontWeight: FontWeights.regular,\n transition: 'opacity ease-in-out 100ms',\n opacity: 0,\n boxSizing: 'border-box',\n },\n checked && {\n color: 'white', // Intended to be white in all themes (dark and light modes)\n },\n ],\n circle: [\n {\n fontSize: 0,\n width: '16px',\n height: '16px',\n borderRadius: 2,\n borderColor: theme.semanticColors.inputBorder,\n borderWidth: '1px',\n borderStyle: 'solid',\n transition: 'all ease-in-out 200ms',\n boxSizing: 'border-box',\n },\n checked && {\n color: theme.semanticColors.bodyTextChecked,\n borderColor: theme.semanticColors.inputBackgroundChecked,\n },\n ],\n };\n};\n","import type { ISettings } from '@fluentui/react';\n\nimport { getBasePickerStyles } from './componentStyles/BasePicker.styles';\nimport { getBreadcrumbStyles } from './componentStyles/Breadcrumb.styles';\nimport { getDefaultButtonStyles, getIconButtonStyles } from './componentStyles/Button.styles';\nimport { getCalloutContentStyles } from './componentStyles/Callout.styles';\nimport { getCheckboxStyles } from './componentStyles/Checkbox.styles';\nimport { getChoiceGroupStyles } from './componentStyles/ChoiceGroup.styles';\nimport { getChoiceGroupOptionStyles } from './componentStyles/ChoiceGroupOption.styles';\nimport { getColorPickerGridCellStyles } from './componentStyles/ColorPickerGridStyles.styles';\nimport { getCommandBarStyles } from './componentStyles/CommandBar.styles';\nimport { getCommandBarButtonStyles } from './componentStyles/CommandBarButton.styles';\nimport { getContextualMenuStyles } from './componentStyles/ContextualMenu.styles';\nimport { getDialogContentStyles, getDialogStyles } from './componentStyles/Dialog.styles';\nimport { getDropdownStyles } from './componentStyles/Dropdown.styles';\nimport { getMessageBarStyles } from './componentStyles/MessageBar.styles';\nimport { getModalStyles } from './componentStyles/Modal.styles';\nimport { getPivotStyles } from './componentStyles/Pivot.styles';\nimport { getSearchBoxStyles } from './componentStyles/SearchBox.styles';\nimport { getSliderStyles } from './componentStyles/Slider.styles';\nimport { getSpinButtonStyles } from './componentStyles/SpinButton.styles';\nimport { getSpinnerStyles } from './componentStyles/Spinner.styles';\nimport { getTagItemStyles } from './componentStyles/TagItem.styles';\nimport { getTextFieldStyles } from './componentStyles/TextField.styles';\nimport { getToggleStyles } from './componentStyles/Toggle.styles';\nimport { getDetailsRowCheckStyles } from './componentStyles/DetailsRowCheck.styles';\nimport { getCheckStyles } from './componentStyles/Check.styles';\nexport const fluent2ComponentStyles: { [key: string]: ISettings } = {\n Breadcrumb: {\n styles: getBreadcrumbStyles,\n },\n CalloutContent: {\n styles: getCalloutContentStyles,\n },\n Check: {\n styles: getCheckStyles,\n },\n Checkbox: {\n styles: getCheckboxStyles,\n },\n ChoiceGroup: {\n styles: getChoiceGroupStyles,\n },\n ChoiceGroupOption: {\n styles: getChoiceGroupOptionStyles,\n },\n ColorPickerGridCell: {\n styles: getColorPickerGridCellStyles,\n },\n CommandBar: {\n styles: getCommandBarStyles,\n },\n CommandBarButton: {\n styles: getCommandBarButtonStyles,\n },\n CompoundButton: {\n styles: getDefaultButtonStyles,\n },\n ContextualMenu: {\n styles: getContextualMenuStyles,\n },\n DefaultButton: {\n styles: getDefaultButtonStyles,\n },\n DetailRowCheck: {\n styles: getDetailsRowCheckStyles,\n },\n Dialog: {\n styles: getDialogStyles,\n },\n DialogContent: {\n styles: getDialogContentStyles,\n },\n Dropdown: {\n styles: getDropdownStyles,\n },\n IconButton: {\n styles: getIconButtonStyles,\n },\n MessageBar: {\n styles: getMessageBarStyles,\n },\n Modal: {\n styles: getModalStyles,\n },\n Pivot: {\n styles: getPivotStyles,\n },\n // People Pickers\n NormalPeoplePicker: {\n styles: getBasePickerStyles,\n },\n CompactPeoplePicker: {\n styles: getBasePickerStyles,\n },\n ListPeoplePickerBase: {\n styles: getBasePickerStyles,\n },\n SearchBox: {\n styles: getSearchBoxStyles,\n },\n Slider: {\n styles: getSliderStyles,\n },\n SpinButton: {\n styles: getSpinButtonStyles,\n },\n Spinner: {\n styles: getSpinnerStyles,\n },\n TagItem: {\n styles: getTagItemStyles,\n },\n TagPicker: {\n styles: getBasePickerStyles,\n },\n Tag: {\n styles: getTagItemStyles,\n },\n TextField: {\n styles: getTextFieldStyles,\n },\n Toggle: {\n styles: getToggleStyles,\n },\n};\n","import { createTheme, DefaultPalette } from '@fluentui/react';\nimport { fluent2ComponentStyles } from '@fluentui/fluent2-theme';\nimport { black, blackAlpha, grey, sharedColors, white, whiteAlpha } from './themeDuplicates';\nconst mappedNeutrals = {\n black,\n blackTranslucent40: blackAlpha[40],\n neutralDark: grey[8],\n neutralPrimary: grey[14],\n neutralPrimaryAlt: grey[22],\n neutralSecondary: grey[36],\n neutralSecondaryAlt: grey[52],\n neutralTertiary: grey[62],\n neutralTertiaryAlt: grey[78],\n neutralQuaternary: grey[82],\n neutralQuaternaryAlt: grey[88],\n neutralLight: grey[92],\n neutralLighter: grey[96],\n neutralLighterAlt: grey[98],\n white,\n whiteTranslucent40: whiteAlpha[40]\n};\nconst invertedMappedNeutrals = {\n black: white,\n blackTranslucent40: whiteAlpha[40],\n neutralDark: grey[98],\n neutralPrimary: grey[96],\n neutralPrimaryAlt: grey[84],\n neutralSecondary: grey[82],\n neutralSecondaryAlt: grey[74],\n neutralTertiary: grey[44],\n neutralTertiaryAlt: grey[26],\n neutralQuaternary: grey[24],\n neutralQuaternaryAlt: grey[18],\n neutralLight: grey[16],\n neutralLighter: grey[14],\n neutralLighterAlt: grey[10],\n white: black,\n whiteTranslucent40: blackAlpha[40]\n};\nconst mappedSharedColors = {\n yellowDark: sharedColors.marigold.shade10,\n yellow: sharedColors.yellow.primary,\n yellowLight: sharedColors.yellow.tint40,\n orange: sharedColors.orange.primary,\n orangeLight: sharedColors.orange.tint20,\n orangeLighter: sharedColors.orange.tint40,\n redDark: sharedColors.darkRed.primary,\n red: sharedColors.red.primary,\n magentaDark: sharedColors.magenta.shade30,\n magenta: sharedColors.magenta.primary,\n magentaLight: sharedColors.magenta.tint30,\n purpleDark: sharedColors.darkPurple.primary,\n purple: sharedColors.purple.primary,\n purpleLight: sharedColors.purple.tint40,\n blueDark: sharedColors.darkBlue.primary,\n blueMid: sharedColors.royalBlue.primary,\n blue: sharedColors.blue.primary,\n blueLight: sharedColors.lightBlue.primary,\n tealDark: sharedColors.darkTeal.primary,\n teal: sharedColors.teal.primary,\n tealLight: sharedColors.lightTeal.primary,\n greenDark: sharedColors.darkGreen.primary,\n green: sharedColors.green.primary,\n greenLight: sharedColors.lightGreen.primary\n};\n/**\n * Creates a v8 palette given a brand ramp\n */ const mapPalette = (brandColors, inverted)=>{\n const neutrals = inverted ? invertedMappedNeutrals : mappedNeutrals;\n const brands = inverted ? {\n themeDarker: brandColors[110],\n themeDark: brandColors[100],\n themeDarkAlt: brandColors[100],\n themePrimary: brandColors[90],\n themeSecondary: brandColors[90],\n themeTertiary: brandColors[60],\n themeLight: brandColors[50],\n themeLighter: brandColors[40],\n themeLighterAlt: brandColors[30]\n } : {\n themeDarker: brandColors[40],\n themeDark: brandColors[60],\n themeDarkAlt: brandColors[70],\n themePrimary: brandColors[80],\n themeSecondary: brandColors[90],\n themeTertiary: brandColors[120],\n themeLight: brandColors[140],\n themeLighter: brandColors[150],\n themeLighterAlt: brandColors[160]\n };\n return {\n ...DefaultPalette,\n ...neutrals,\n accent: brands.themePrimary,\n ...mappedSharedColors,\n ...brands\n };\n};\n/**\n * Returns v9 theme colors overlaid on a base set of v8 semantic colors\n */ const mapSemanticColors = (baseColors, theme)=>{\n return {\n ...baseColors,\n accentButtonBackground: theme.colorBrandBackground,\n accentButtonText: theme.colorNeutralForegroundOnBrand,\n actionLink: theme.colorNeutralForeground1,\n actionLinkHovered: theme.colorNeutralForeground1Hover,\n // blockingBackground,\n // blockingIcon,\n bodyBackground: theme.colorNeutralBackground1,\n bodyBackgroundChecked: theme.colorNeutralBackground1Selected,\n bodyBackgroundHovered: theme.colorNeutralBackground1Hover,\n bodyDivider: theme.colorNeutralStroke2,\n bodyFrameBackground: theme.colorNeutralBackground1,\n bodyFrameDivider: theme.colorNeutralStroke2,\n bodyStandoutBackground: theme.colorNeutralBackground2,\n bodySubtext: theme.colorNeutralForeground2,\n bodyText: theme.colorNeutralForeground1,\n bodyTextChecked: theme.colorNeutralForeground1Selected,\n buttonBackground: theme.colorNeutralBackground1,\n buttonBackgroundChecked: theme.colorNeutralBackground1Selected,\n buttonBackgroundCheckedHovered: theme.colorNeutralBackground1Hover,\n buttonBackgroundDisabled: theme.colorNeutralBackgroundDisabled,\n buttonBackgroundHovered: theme.colorNeutralBackground1Hover,\n buttonBackgroundPressed: theme.colorNeutralBackground1Pressed,\n buttonBorder: theme.colorNeutralStroke1,\n buttonBorderDisabled: theme.colorNeutralStrokeDisabled,\n buttonText: theme.colorNeutralForeground1,\n buttonTextChecked: theme.colorNeutralForeground1,\n buttonTextCheckedHovered: theme.colorNeutralForeground1,\n buttonTextDisabled: theme.colorNeutralForegroundDisabled,\n buttonTextHovered: theme.colorNeutralForeground1,\n buttonTextPressed: theme.colorNeutralForeground1,\n cardShadow: theme.shadow4,\n cardShadowHovered: theme.shadow8,\n cardStandoutBackground: theme.colorNeutralBackground1,\n defaultStateBackground: theme.colorNeutralBackground2,\n disabledBackground: theme.colorNeutralBackgroundDisabled,\n disabledBodySubtext: theme.colorNeutralForegroundDisabled,\n disabledBodyText: theme.colorNeutralForegroundDisabled,\n disabledBorder: theme.colorNeutralStrokeDisabled,\n disabledSubtext: theme.colorNeutralForegroundDisabled,\n disabledText: theme.colorNeutralForegroundDisabled,\n // errorBackground,\n // errorIcon,\n // errorText: ,\n focusBorder: theme.colorStrokeFocus2,\n // infoBackground,\n // infoIcon,\n inputBackground: theme.colorNeutralBackground1,\n inputBackgroundChecked: theme.colorBrandBackground,\n inputBackgroundCheckedHovered: theme.colorBrandBackgroundHover,\n inputBorder: theme.colorNeutralStrokeAccessible,\n inputBorderHovered: theme.colorNeutralStrokeAccessibleHover,\n inputFocusBorderAlt: theme.colorBrandStroke1,\n inputForegroundChecked: theme.colorNeutralForegroundOnBrand,\n inputIcon: theme.colorNeutralForeground3,\n inputIconDisabled: theme.colorNeutralForegroundDisabled,\n inputIconHovered: theme.colorNeutralForeground3,\n inputPlaceholderBackgroundChecked: theme.colorBrandBackgroundInvertedSelected,\n inputPlaceholderText: theme.colorNeutralForeground4,\n inputText: theme.colorNeutralForeground1,\n inputTextHovered: theme.colorNeutralForeground1Hover,\n link: theme.colorBrandForegroundLink,\n linkHovered: theme.colorBrandForegroundLinkHover,\n listBackground: theme.colorNeutralBackground1,\n listHeaderBackgroundHovered: theme.colorNeutralBackground1Hover,\n listHeaderBackgroundPressed: theme.colorNeutralBackground1Pressed,\n listItemBackgroundChecked: theme.colorNeutralBackground1Selected,\n listItemBackgroundCheckedHovered: theme.colorNeutralBackground1Selected,\n listItemBackgroundHovered: theme.colorNeutralBackground1Hover,\n listText: theme.colorNeutralForeground1,\n listTextColor: theme.colorNeutralForeground1,\n menuBackground: theme.colorNeutralBackground1,\n menuDivider: theme.colorNeutralStroke2,\n menuHeader: theme.colorNeutralForeground3,\n menuIcon: theme.colorNeutralForeground1,\n menuItemBackgroundChecked: theme.colorNeutralBackground1,\n menuItemBackgroundHovered: theme.colorNeutralBackground1Hover,\n menuItemBackgroundPressed: theme.colorNeutralBackground1Hover,\n menuItemText: theme.colorNeutralForeground1,\n menuItemTextHovered: theme.colorNeutralForeground1Hover,\n messageLink: theme.colorBrandForegroundLink,\n messageLinkHovered: theme.colorBrandForegroundLinkHover,\n messageText: theme.colorNeutralForeground1,\n primaryButtonBackground: theme.colorBrandBackground,\n primaryButtonBackgroundDisabled: theme.colorNeutralBackgroundDisabled,\n primaryButtonBackgroundHovered: theme.colorBrandBackgroundHover,\n primaryButtonBackgroundPressed: theme.colorBrandBackgroundPressed,\n primaryButtonBorder: theme.colorTransparentStroke,\n primaryButtonText: theme.colorNeutralForegroundOnBrand,\n primaryButtonTextDisabled: theme.colorNeutralForegroundDisabled,\n primaryButtonTextHovered: theme.colorNeutralForegroundOnBrand,\n primaryButtonTextPressed: theme.colorNeutralForegroundOnBrand\n };\n};\n/**\n * Overlays v9 fonts on a set of base v8 fonts.\n */ const mapFonts = (baseFonts, theme)=>{\n return {\n ...baseFonts,\n tiny: {\n ...baseFonts.tiny,\n fontFamily: theme.fontFamilyBase,\n fontSize: theme.fontSizeBase100,\n fontWeight: theme.fontWeightRegular\n },\n xSmall: {\n ...baseFonts.xSmall,\n fontFamily: theme.fontFamilyBase,\n fontSize: theme.fontSizeBase100,\n fontWeight: theme.fontWeightRegular\n },\n small: {\n ...baseFonts.small,\n fontFamily: theme.fontFamilyBase,\n fontSize: theme.fontSizeBase200,\n fontWeight: theme.fontWeightRegular\n },\n smallPlus: {\n ...baseFonts.smallPlus,\n fontFamily: theme.fontFamilyBase,\n fontSize: theme.fontSizeBase200,\n fontWeight: theme.fontWeightRegular\n },\n medium: {\n ...baseFonts.medium,\n fontFamily: theme.fontFamilyBase,\n fontSize: theme.fontSizeBase300,\n fontWeight: theme.fontWeightRegular\n },\n mediumPlus: {\n ...baseFonts.mediumPlus,\n fontFamily: theme.fontFamilyBase,\n fontSize: theme.fontSizeBase400,\n fontWeight: theme.fontWeightRegular\n },\n large: {\n ...baseFonts.large,\n fontFamily: theme.fontFamilyBase,\n fontSize: theme.fontSizeBase400,\n fontWeight: theme.fontWeightRegular\n },\n xLarge: {\n ...baseFonts.xxLarge,\n fontFamily: theme.fontFamilyBase,\n fontSize: theme.fontSizeBase500,\n fontWeight: theme.fontWeightSemibold\n },\n xxLarge: {\n ...baseFonts.xxLarge,\n fontFamily: theme.fontFamilyBase,\n fontSize: theme.fontSizeHero700,\n fontWeight: theme.fontWeightSemibold\n },\n superLarge: {\n ...baseFonts.superLarge,\n fontFamily: theme.fontFamilyBase,\n fontSize: theme.fontSizeHero900,\n fontWeight: theme.fontWeightSemibold\n },\n mega: {\n ...baseFonts.mega,\n fontFamily: theme.fontFamilyBase,\n fontSize: theme.fontSizeHero1000,\n fontWeight: theme.fontWeightSemibold\n }\n };\n};\n/**\n * Overlays v9 shadows and border radii on a base set of v8 effects.\n */ const mapEffects = (baseEffects, theme)=>{\n return {\n ...baseEffects,\n elevation4: theme.shadow4,\n elevation8: theme.shadow8,\n elevation16: theme.shadow16,\n elevation64: theme.shadow64,\n roundedCorner2: theme.borderRadiusSmall,\n roundedCorner4: theme.borderRadiusMedium,\n roundedCorner6: theme.borderRadiusLarge\n };\n};\n/**\n * Creates a v8 theme from v9 brand colors and theme.\n * You can optionally pass a v8 base theme.\n * Otherwise the default v8 theme is used.\n *\n * The v9 colors, fonts, and effects are applied on top of the v8 theme\n * to allow v8 components to look as much like v9 components as possible.\n */ export const createV8Theme = (brandColors, themeV9, isDarkTheme = false, themeV8)=>{\n const baseTheme = themeV8 || createTheme({\n isInverted: isDarkTheme\n });\n return {\n ...baseTheme,\n palette: mapPalette(brandColors, isDarkTheme),\n components: fluent2ComponentStyles,\n semanticColors: mapSemanticColors(baseTheme.semanticColors, themeV9),\n fonts: mapFonts(baseTheme.fonts, themeV9),\n effects: mapEffects(baseTheme.effects, themeV9),\n isInverted: isDarkTheme || (themeV8 === null || themeV8 === void 0 ? void 0 : themeV8.isInverted) === true\n };\n};\n","/**\n * Take input from [0, n] and return it as [0, 1]\n * @hidden\n */\nexport function bound01(n, max) {\n if (isOnePointZero(n)) {\n n = '100%';\n }\n var isPercent = isPercentage(n);\n n = max === 360 ? n : Math.min(max, Math.max(0, parseFloat(n)));\n // Automatically convert percentage into number\n if (isPercent) {\n n = parseInt(String(n * max), 10) / 100;\n }\n // Handle floating point rounding errors\n if (Math.abs(n - max) < 0.000001) {\n return 1;\n }\n // Convert into [0, 1] range if it isn't already\n if (max === 360) {\n // If n is a hue given in degrees,\n // wrap around out-of-range values into [0, 360] range\n // then convert into [0, 1].\n n = (n < 0 ? (n % max) + max : n % max) / parseFloat(String(max));\n }\n else {\n // If n not a hue given in degrees\n // Convert into [0, 1] range if it isn't already.\n n = (n % max) / parseFloat(String(max));\n }\n return n;\n}\n/**\n * Force a number between 0 and 1\n * @hidden\n */\nexport function clamp01(val) {\n return Math.min(1, Math.max(0, val));\n}\n/**\n * Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1\n * \n * @hidden\n */\nexport function isOnePointZero(n) {\n return typeof n === 'string' && n.indexOf('.') !== -1 && parseFloat(n) === 1;\n}\n/**\n * Check to see if string passed in is a percentage\n * @hidden\n */\nexport function isPercentage(n) {\n return typeof n === 'string' && n.indexOf('%') !== -1;\n}\n/**\n * Return a valid alpha value [0,1] with all invalid values being set to 1\n * @hidden\n */\nexport function boundAlpha(a) {\n a = parseFloat(a);\n if (isNaN(a) || a < 0 || a > 1) {\n a = 1;\n }\n return a;\n}\n/**\n * Replace a decimal with it's percentage value\n * @hidden\n */\nexport function convertToPercentage(n) {\n if (n <= 1) {\n return Number(n) * 100 + \"%\";\n }\n return n;\n}\n/**\n * Force a hex value to have 2 characters\n * @hidden\n */\nexport function pad2(c) {\n return c.length === 1 ? '0' + c : String(c);\n}\n","import { bound01, pad2 } from './util';\n// `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:\n// \n/**\n * Handle bounds / percentage checking to conform to CSS color spec\n * \n * *Assumes:* r, g, b in [0, 255] or [0, 1]\n * *Returns:* { r, g, b } in [0, 255]\n */\nexport function rgbToRgb(r, g, b) {\n return {\n r: bound01(r, 255) * 255,\n g: bound01(g, 255) * 255,\n b: bound01(b, 255) * 255,\n };\n}\n/**\n * Converts an RGB color value to HSL.\n * *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]\n * *Returns:* { h, s, l } in [0,1]\n */\nexport function rgbToHsl(r, g, b) {\n r = bound01(r, 255);\n g = bound01(g, 255);\n b = bound01(b, 255);\n var max = Math.max(r, g, b);\n var min = Math.min(r, g, b);\n var h = 0;\n var s = 0;\n var l = (max + min) / 2;\n if (max === min) {\n s = 0;\n h = 0; // achromatic\n }\n else {\n var d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n switch (max) {\n case r:\n h = (g - b) / d + (g < b ? 6 : 0);\n break;\n case g:\n h = (b - r) / d + 2;\n break;\n case b:\n h = (r - g) / d + 4;\n break;\n default:\n break;\n }\n h /= 6;\n }\n return { h: h, s: s, l: l };\n}\nfunction hue2rgb(p, q, t) {\n if (t < 0) {\n t += 1;\n }\n if (t > 1) {\n t -= 1;\n }\n if (t < 1 / 6) {\n return p + (q - p) * (6 * t);\n }\n if (t < 1 / 2) {\n return q;\n }\n if (t < 2 / 3) {\n return p + (q - p) * (2 / 3 - t) * 6;\n }\n return p;\n}\n/**\n * Converts an HSL color value to RGB.\n *\n * *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]\n * *Returns:* { r, g, b } in the set [0, 255]\n */\nexport function hslToRgb(h, s, l) {\n var r;\n var g;\n var b;\n h = bound01(h, 360);\n s = bound01(s, 100);\n l = bound01(l, 100);\n if (s === 0) {\n // achromatic\n g = l;\n b = l;\n r = l;\n }\n else {\n var q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n var p = 2 * l - q;\n r = hue2rgb(p, q, h + 1 / 3);\n g = hue2rgb(p, q, h);\n b = hue2rgb(p, q, h - 1 / 3);\n }\n return { r: r * 255, g: g * 255, b: b * 255 };\n}\n/**\n * Converts an RGB color value to HSV\n *\n * *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]\n * *Returns:* { h, s, v } in [0,1]\n */\nexport function rgbToHsv(r, g, b) {\n r = bound01(r, 255);\n g = bound01(g, 255);\n b = bound01(b, 255);\n var max = Math.max(r, g, b);\n var min = Math.min(r, g, b);\n var h = 0;\n var v = max;\n var d = max - min;\n var s = max === 0 ? 0 : d / max;\n if (max === min) {\n h = 0; // achromatic\n }\n else {\n switch (max) {\n case r:\n h = (g - b) / d + (g < b ? 6 : 0);\n break;\n case g:\n h = (b - r) / d + 2;\n break;\n case b:\n h = (r - g) / d + 4;\n break;\n default:\n break;\n }\n h /= 6;\n }\n return { h: h, s: s, v: v };\n}\n/**\n * Converts an HSV color value to RGB.\n *\n * *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]\n * *Returns:* { r, g, b } in the set [0, 255]\n */\nexport function hsvToRgb(h, s, v) {\n h = bound01(h, 360) * 6;\n s = bound01(s, 100);\n v = bound01(v, 100);\n var i = Math.floor(h);\n var f = h - i;\n var p = v * (1 - s);\n var q = v * (1 - f * s);\n var t = v * (1 - (1 - f) * s);\n var mod = i % 6;\n var r = [v, q, p, p, t, v][mod];\n var g = [t, v, v, q, p, p][mod];\n var b = [p, p, t, v, v, q][mod];\n return { r: r * 255, g: g * 255, b: b * 255 };\n}\n/**\n * Converts an RGB color to hex\n *\n * Assumes r, g, and b are contained in the set [0, 255]\n * Returns a 3 or 6 character hex\n */\nexport function rgbToHex(r, g, b, allow3Char) {\n var hex = [\n pad2(Math.round(r).toString(16)),\n pad2(Math.round(g).toString(16)),\n pad2(Math.round(b).toString(16)),\n ];\n // Return a 3 character hex if possible\n if (allow3Char &&\n hex[0].startsWith(hex[0].charAt(1)) &&\n hex[1].startsWith(hex[1].charAt(1)) &&\n hex[2].startsWith(hex[2].charAt(1))) {\n return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);\n }\n return hex.join('');\n}\n/**\n * Converts an RGBA color plus alpha transparency to hex\n *\n * Assumes r, g, b are contained in the set [0, 255] and\n * a in [0, 1]. Returns a 4 or 8 character rgba hex\n */\n// eslint-disable-next-line max-params\nexport function rgbaToHex(r, g, b, a, allow4Char) {\n var hex = [\n pad2(Math.round(r).toString(16)),\n pad2(Math.round(g).toString(16)),\n pad2(Math.round(b).toString(16)),\n pad2(convertDecimalToHex(a)),\n ];\n // Return a 4 character hex if possible\n if (allow4Char &&\n hex[0].startsWith(hex[0].charAt(1)) &&\n hex[1].startsWith(hex[1].charAt(1)) &&\n hex[2].startsWith(hex[2].charAt(1)) &&\n hex[3].startsWith(hex[3].charAt(1))) {\n return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);\n }\n return hex.join('');\n}\n/**\n * Converts an RGBA color to an ARGB Hex8 string\n * Rarely used, but required for \"toFilter()\"\n */\nexport function rgbaToArgbHex(r, g, b, a) {\n var hex = [\n pad2(convertDecimalToHex(a)),\n pad2(Math.round(r).toString(16)),\n pad2(Math.round(g).toString(16)),\n pad2(Math.round(b).toString(16)),\n ];\n return hex.join('');\n}\n/** Converts a decimal to a hex value */\nexport function convertDecimalToHex(d) {\n return Math.round(parseFloat(d) * 255).toString(16);\n}\n/** Converts a hex value to a decimal */\nexport function convertHexToDecimal(h) {\n return parseIntFromHex(h) / 255;\n}\n/** Parse a base-16 hex value into a base-10 integer */\nexport function parseIntFromHex(val) {\n return parseInt(val, 16);\n}\nexport function numberInputToObject(color) {\n return {\n r: color >> 16,\n g: (color & 0xff00) >> 8,\n b: color & 0xff,\n };\n}\n","// https://github.com/bahamas10/css-color-names/blob/master/css-color-names.json\n/**\n * @hidden\n */\nexport var names = {\n aliceblue: '#f0f8ff',\n antiquewhite: '#faebd7',\n aqua: '#00ffff',\n aquamarine: '#7fffd4',\n azure: '#f0ffff',\n beige: '#f5f5dc',\n bisque: '#ffe4c4',\n black: '#000000',\n blanchedalmond: '#ffebcd',\n blue: '#0000ff',\n blueviolet: '#8a2be2',\n brown: '#a52a2a',\n burlywood: '#deb887',\n cadetblue: '#5f9ea0',\n chartreuse: '#7fff00',\n chocolate: '#d2691e',\n coral: '#ff7f50',\n cornflowerblue: '#6495ed',\n cornsilk: '#fff8dc',\n crimson: '#dc143c',\n cyan: '#00ffff',\n darkblue: '#00008b',\n darkcyan: '#008b8b',\n darkgoldenrod: '#b8860b',\n darkgray: '#a9a9a9',\n darkgreen: '#006400',\n darkgrey: '#a9a9a9',\n darkkhaki: '#bdb76b',\n darkmagenta: '#8b008b',\n darkolivegreen: '#556b2f',\n darkorange: '#ff8c00',\n darkorchid: '#9932cc',\n darkred: '#8b0000',\n darksalmon: '#e9967a',\n darkseagreen: '#8fbc8f',\n darkslateblue: '#483d8b',\n darkslategray: '#2f4f4f',\n darkslategrey: '#2f4f4f',\n darkturquoise: '#00ced1',\n darkviolet: '#9400d3',\n deeppink: '#ff1493',\n deepskyblue: '#00bfff',\n dimgray: '#696969',\n dimgrey: '#696969',\n dodgerblue: '#1e90ff',\n firebrick: '#b22222',\n floralwhite: '#fffaf0',\n forestgreen: '#228b22',\n fuchsia: '#ff00ff',\n gainsboro: '#dcdcdc',\n ghostwhite: '#f8f8ff',\n goldenrod: '#daa520',\n gold: '#ffd700',\n gray: '#808080',\n green: '#008000',\n greenyellow: '#adff2f',\n grey: '#808080',\n honeydew: '#f0fff0',\n hotpink: '#ff69b4',\n indianred: '#cd5c5c',\n indigo: '#4b0082',\n ivory: '#fffff0',\n khaki: '#f0e68c',\n lavenderblush: '#fff0f5',\n lavender: '#e6e6fa',\n lawngreen: '#7cfc00',\n lemonchiffon: '#fffacd',\n lightblue: '#add8e6',\n lightcoral: '#f08080',\n lightcyan: '#e0ffff',\n lightgoldenrodyellow: '#fafad2',\n lightgray: '#d3d3d3',\n lightgreen: '#90ee90',\n lightgrey: '#d3d3d3',\n lightpink: '#ffb6c1',\n lightsalmon: '#ffa07a',\n lightseagreen: '#20b2aa',\n lightskyblue: '#87cefa',\n lightslategray: '#778899',\n lightslategrey: '#778899',\n lightsteelblue: '#b0c4de',\n lightyellow: '#ffffe0',\n lime: '#00ff00',\n limegreen: '#32cd32',\n linen: '#faf0e6',\n magenta: '#ff00ff',\n maroon: '#800000',\n mediumaquamarine: '#66cdaa',\n mediumblue: '#0000cd',\n mediumorchid: '#ba55d3',\n mediumpurple: '#9370db',\n mediumseagreen: '#3cb371',\n mediumslateblue: '#7b68ee',\n mediumspringgreen: '#00fa9a',\n mediumturquoise: '#48d1cc',\n mediumvioletred: '#c71585',\n midnightblue: '#191970',\n mintcream: '#f5fffa',\n mistyrose: '#ffe4e1',\n moccasin: '#ffe4b5',\n navajowhite: '#ffdead',\n navy: '#000080',\n oldlace: '#fdf5e6',\n olive: '#808000',\n olivedrab: '#6b8e23',\n orange: '#ffa500',\n orangered: '#ff4500',\n orchid: '#da70d6',\n palegoldenrod: '#eee8aa',\n palegreen: '#98fb98',\n paleturquoise: '#afeeee',\n palevioletred: '#db7093',\n papayawhip: '#ffefd5',\n peachpuff: '#ffdab9',\n peru: '#cd853f',\n pink: '#ffc0cb',\n plum: '#dda0dd',\n powderblue: '#b0e0e6',\n purple: '#800080',\n rebeccapurple: '#663399',\n red: '#ff0000',\n rosybrown: '#bc8f8f',\n royalblue: '#4169e1',\n saddlebrown: '#8b4513',\n salmon: '#fa8072',\n sandybrown: '#f4a460',\n seagreen: '#2e8b57',\n seashell: '#fff5ee',\n sienna: '#a0522d',\n silver: '#c0c0c0',\n skyblue: '#87ceeb',\n slateblue: '#6a5acd',\n slategray: '#708090',\n slategrey: '#708090',\n snow: '#fffafa',\n springgreen: '#00ff7f',\n steelblue: '#4682b4',\n tan: '#d2b48c',\n teal: '#008080',\n thistle: '#d8bfd8',\n tomato: '#ff6347',\n turquoise: '#40e0d0',\n violet: '#ee82ee',\n wheat: '#f5deb3',\n white: '#ffffff',\n whitesmoke: '#f5f5f5',\n yellow: '#ffff00',\n yellowgreen: '#9acd32',\n};\n","import { convertHexToDecimal, hslToRgb, hsvToRgb, parseIntFromHex, rgbToRgb } from './conversion';\nimport { names } from './css-color-names';\nimport { boundAlpha, convertToPercentage } from './util';\n/**\n * Given a string or object, convert that input to RGB\n *\n * Possible string inputs:\n * ```\n * \"red\"\n * \"#f00\" or \"f00\"\n * \"#ff0000\" or \"ff0000\"\n * \"#ff000000\" or \"ff000000\"\n * \"rgb 255 0 0\" or \"rgb (255, 0, 0)\"\n * \"rgb 1.0 0 0\" or \"rgb (1, 0, 0)\"\n * \"rgba (255, 0, 0, 1)\" or \"rgba 255, 0, 0, 1\"\n * \"rgba (1.0, 0, 0, 1)\" or \"rgba 1.0, 0, 0, 1\"\n * \"hsl(0, 100%, 50%)\" or \"hsl 0 100% 50%\"\n * \"hsla(0, 100%, 50%, 1)\" or \"hsla 0 100% 50%, 1\"\n * \"hsv(0, 100%, 100%)\" or \"hsv 0 100% 100%\"\n * ```\n */\nexport function inputToRGB(color) {\n var rgb = { r: 0, g: 0, b: 0 };\n var a = 1;\n var s = null;\n var v = null;\n var l = null;\n var ok = false;\n var format = false;\n if (typeof color === 'string') {\n color = stringInputToObject(color);\n }\n if (typeof color === 'object') {\n if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {\n rgb = rgbToRgb(color.r, color.g, color.b);\n ok = true;\n format = String(color.r).substr(-1) === '%' ? 'prgb' : 'rgb';\n }\n else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {\n s = convertToPercentage(color.s);\n v = convertToPercentage(color.v);\n rgb = hsvToRgb(color.h, s, v);\n ok = true;\n format = 'hsv';\n }\n else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {\n s = convertToPercentage(color.s);\n l = convertToPercentage(color.l);\n rgb = hslToRgb(color.h, s, l);\n ok = true;\n format = 'hsl';\n }\n if (Object.prototype.hasOwnProperty.call(color, 'a')) {\n a = color.a;\n }\n }\n a = boundAlpha(a);\n return {\n ok: ok,\n format: color.format || format,\n r: Math.min(255, Math.max(rgb.r, 0)),\n g: Math.min(255, Math.max(rgb.g, 0)),\n b: Math.min(255, Math.max(rgb.b, 0)),\n a: a,\n };\n}\n// \nvar CSS_INTEGER = '[-\\\\+]?\\\\d+%?';\n// \nvar CSS_NUMBER = '[-\\\\+]?\\\\d*\\\\.\\\\d+%?';\n// Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome.\nvar CSS_UNIT = \"(?:\" + CSS_NUMBER + \")|(?:\" + CSS_INTEGER + \")\";\n// Actual matching.\n// Parentheses and commas are optional, but not required.\n// Whitespace can take the place of commas or opening paren\nvar PERMISSIVE_MATCH3 = \"[\\\\s|\\\\(]+(\" + CSS_UNIT + \")[,|\\\\s]+(\" + CSS_UNIT + \")[,|\\\\s]+(\" + CSS_UNIT + \")\\\\s*\\\\)?\";\nvar PERMISSIVE_MATCH4 = \"[\\\\s|\\\\(]+(\" + CSS_UNIT + \")[,|\\\\s]+(\" + CSS_UNIT + \")[,|\\\\s]+(\" + CSS_UNIT + \")[,|\\\\s]+(\" + CSS_UNIT + \")\\\\s*\\\\)?\";\nvar matchers = {\n CSS_UNIT: new RegExp(CSS_UNIT),\n rgb: new RegExp('rgb' + PERMISSIVE_MATCH3),\n rgba: new RegExp('rgba' + PERMISSIVE_MATCH4),\n hsl: new RegExp('hsl' + PERMISSIVE_MATCH3),\n hsla: new RegExp('hsla' + PERMISSIVE_MATCH4),\n hsv: new RegExp('hsv' + PERMISSIVE_MATCH3),\n hsva: new RegExp('hsva' + PERMISSIVE_MATCH4),\n hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,\n hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,\n hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,\n hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,\n};\n/**\n * Permissive string parsing. Take in a number of formats, and output an object\n * based on detected format. Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`\n */\nexport function stringInputToObject(color) {\n color = color.trim().toLowerCase();\n if (color.length === 0) {\n return false;\n }\n var named = false;\n if (names[color]) {\n color = names[color];\n named = true;\n }\n else if (color === 'transparent') {\n return { r: 0, g: 0, b: 0, a: 0, format: 'name' };\n }\n // Try to match string input using regular expressions.\n // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]\n // Just return an object and let the conversion functions handle that.\n // This way the result will be the same whether the tinycolor is initialized with string or object.\n var match = matchers.rgb.exec(color);\n if (match) {\n return { r: match[1], g: match[2], b: match[3] };\n }\n match = matchers.rgba.exec(color);\n if (match) {\n return { r: match[1], g: match[2], b: match[3], a: match[4] };\n }\n match = matchers.hsl.exec(color);\n if (match) {\n return { h: match[1], s: match[2], l: match[3] };\n }\n match = matchers.hsla.exec(color);\n if (match) {\n return { h: match[1], s: match[2], l: match[3], a: match[4] };\n }\n match = matchers.hsv.exec(color);\n if (match) {\n return { h: match[1], s: match[2], v: match[3] };\n }\n match = matchers.hsva.exec(color);\n if (match) {\n return { h: match[1], s: match[2], v: match[3], a: match[4] };\n }\n match = matchers.hex8.exec(color);\n if (match) {\n return {\n r: parseIntFromHex(match[1]),\n g: parseIntFromHex(match[2]),\n b: parseIntFromHex(match[3]),\n a: convertHexToDecimal(match[4]),\n format: named ? 'name' : 'hex8',\n };\n }\n match = matchers.hex6.exec(color);\n if (match) {\n return {\n r: parseIntFromHex(match[1]),\n g: parseIntFromHex(match[2]),\n b: parseIntFromHex(match[3]),\n format: named ? 'name' : 'hex',\n };\n }\n match = matchers.hex4.exec(color);\n if (match) {\n return {\n r: parseIntFromHex(match[1] + match[1]),\n g: parseIntFromHex(match[2] + match[2]),\n b: parseIntFromHex(match[3] + match[3]),\n a: convertHexToDecimal(match[4] + match[4]),\n format: named ? 'name' : 'hex8',\n };\n }\n match = matchers.hex3.exec(color);\n if (match) {\n return {\n r: parseIntFromHex(match[1] + match[1]),\n g: parseIntFromHex(match[2] + match[2]),\n b: parseIntFromHex(match[3] + match[3]),\n format: named ? 'name' : 'hex',\n };\n }\n return false;\n}\n/**\n * Check to see if it looks like a CSS unit\n * (see `matchers` above for definition).\n */\nexport function isValidCSSUnit(color) {\n return Boolean(matchers.CSS_UNIT.exec(String(color)));\n}\n","import { rgbaToHex, rgbToHex, rgbToHsl, rgbToHsv, numberInputToObject } from './conversion';\nimport { names } from './css-color-names';\nimport { inputToRGB } from './format-input';\nimport { bound01, boundAlpha, clamp01 } from './util';\nvar TinyColor = /** @class */ (function () {\n function TinyColor(color, opts) {\n if (color === void 0) { color = ''; }\n if (opts === void 0) { opts = {}; }\n var _a;\n // If input is already a tinycolor, return itself\n if (color instanceof TinyColor) {\n // eslint-disable-next-line no-constructor-return\n return color;\n }\n if (typeof color === 'number') {\n color = numberInputToObject(color);\n }\n this.originalInput = color;\n var rgb = inputToRGB(color);\n this.originalInput = color;\n this.r = rgb.r;\n this.g = rgb.g;\n this.b = rgb.b;\n this.a = rgb.a;\n this.roundA = Math.round(100 * this.a) / 100;\n this.format = (_a = opts.format) !== null && _a !== void 0 ? _a : rgb.format;\n this.gradientType = opts.gradientType;\n // Don't let the range of [0,255] come back in [0,1].\n // Potentially lose a little bit of precision here, but will fix issues where\n // .5 gets interpreted as half of the total, instead of half of 1\n // If it was supposed to be 128, this was already taken care of by `inputToRgb`\n if (this.r < 1) {\n this.r = Math.round(this.r);\n }\n if (this.g < 1) {\n this.g = Math.round(this.g);\n }\n if (this.b < 1) {\n this.b = Math.round(this.b);\n }\n this.isValid = rgb.ok;\n }\n TinyColor.prototype.isDark = function () {\n return this.getBrightness() < 128;\n };\n TinyColor.prototype.isLight = function () {\n return !this.isDark();\n };\n /**\n * Returns the perceived brightness of the color, from 0-255.\n */\n TinyColor.prototype.getBrightness = function () {\n // http://www.w3.org/TR/AERT#color-contrast\n var rgb = this.toRgb();\n return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;\n };\n /**\n * Returns the perceived luminance of a color, from 0-1.\n */\n TinyColor.prototype.getLuminance = function () {\n // http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef\n var rgb = this.toRgb();\n var R;\n var G;\n var B;\n var RsRGB = rgb.r / 255;\n var GsRGB = rgb.g / 255;\n var BsRGB = rgb.b / 255;\n if (RsRGB <= 0.03928) {\n R = RsRGB / 12.92;\n }\n else {\n // eslint-disable-next-line prefer-exponentiation-operator\n R = Math.pow((RsRGB + 0.055) / 1.055, 2.4);\n }\n if (GsRGB <= 0.03928) {\n G = GsRGB / 12.92;\n }\n else {\n // eslint-disable-next-line prefer-exponentiation-operator\n G = Math.pow((GsRGB + 0.055) / 1.055, 2.4);\n }\n if (BsRGB <= 0.03928) {\n B = BsRGB / 12.92;\n }\n else {\n // eslint-disable-next-line prefer-exponentiation-operator\n B = Math.pow((BsRGB + 0.055) / 1.055, 2.4);\n }\n return 0.2126 * R + 0.7152 * G + 0.0722 * B;\n };\n /**\n * Returns the alpha value of a color, from 0-1.\n */\n TinyColor.prototype.getAlpha = function () {\n return this.a;\n };\n /**\n * Sets the alpha value on the current color.\n *\n * @param alpha - The new alpha value. The accepted range is 0-1.\n */\n TinyColor.prototype.setAlpha = function (alpha) {\n this.a = boundAlpha(alpha);\n this.roundA = Math.round(100 * this.a) / 100;\n return this;\n };\n /**\n * Returns the object as a HSVA object.\n */\n TinyColor.prototype.toHsv = function () {\n var hsv = rgbToHsv(this.r, this.g, this.b);\n return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this.a };\n };\n /**\n * Returns the hsva values interpolated into a string with the following format:\n * \"hsva(xxx, xxx, xxx, xx)\".\n */\n TinyColor.prototype.toHsvString = function () {\n var hsv = rgbToHsv(this.r, this.g, this.b);\n var h = Math.round(hsv.h * 360);\n var s = Math.round(hsv.s * 100);\n var v = Math.round(hsv.v * 100);\n return this.a === 1 ? \"hsv(\" + h + \", \" + s + \"%, \" + v + \"%)\" : \"hsva(\" + h + \", \" + s + \"%, \" + v + \"%, \" + this.roundA + \")\";\n };\n /**\n * Returns the object as a HSLA object.\n */\n TinyColor.prototype.toHsl = function () {\n var hsl = rgbToHsl(this.r, this.g, this.b);\n return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this.a };\n };\n /**\n * Returns the hsla values interpolated into a string with the following format:\n * \"hsla(xxx, xxx, xxx, xx)\".\n */\n TinyColor.prototype.toHslString = function () {\n var hsl = rgbToHsl(this.r, this.g, this.b);\n var h = Math.round(hsl.h * 360);\n var s = Math.round(hsl.s * 100);\n var l = Math.round(hsl.l * 100);\n return this.a === 1 ? \"hsl(\" + h + \", \" + s + \"%, \" + l + \"%)\" : \"hsla(\" + h + \", \" + s + \"%, \" + l + \"%, \" + this.roundA + \")\";\n };\n /**\n * Returns the hex value of the color.\n * @param allow3Char will shorten hex value to 3 char if possible\n */\n TinyColor.prototype.toHex = function (allow3Char) {\n if (allow3Char === void 0) { allow3Char = false; }\n return rgbToHex(this.r, this.g, this.b, allow3Char);\n };\n /**\n * Returns the hex value of the color -with a # appened.\n * @param allow3Char will shorten hex value to 3 char if possible\n */\n TinyColor.prototype.toHexString = function (allow3Char) {\n if (allow3Char === void 0) { allow3Char = false; }\n return '#' + this.toHex(allow3Char);\n };\n /**\n * Returns the hex 8 value of the color.\n * @param allow4Char will shorten hex value to 4 char if possible\n */\n TinyColor.prototype.toHex8 = function (allow4Char) {\n if (allow4Char === void 0) { allow4Char = false; }\n return rgbaToHex(this.r, this.g, this.b, this.a, allow4Char);\n };\n /**\n * Returns the hex 8 value of the color -with a # appened.\n * @param allow4Char will shorten hex value to 4 char if possible\n */\n TinyColor.prototype.toHex8String = function (allow4Char) {\n if (allow4Char === void 0) { allow4Char = false; }\n return '#' + this.toHex8(allow4Char);\n };\n /**\n * Returns the object as a RGBA object.\n */\n TinyColor.prototype.toRgb = function () {\n return {\n r: Math.round(this.r),\n g: Math.round(this.g),\n b: Math.round(this.b),\n a: this.a,\n };\n };\n /**\n * Returns the RGBA values interpolated into a string with the following format:\n * \"RGBA(xxx, xxx, xxx, xx)\".\n */\n TinyColor.prototype.toRgbString = function () {\n var r = Math.round(this.r);\n var g = Math.round(this.g);\n var b = Math.round(this.b);\n return this.a === 1 ? \"rgb(\" + r + \", \" + g + \", \" + b + \")\" : \"rgba(\" + r + \", \" + g + \", \" + b + \", \" + this.roundA + \")\";\n };\n /**\n * Returns the object as a RGBA object.\n */\n TinyColor.prototype.toPercentageRgb = function () {\n var fmt = function (x) { return Math.round(bound01(x, 255) * 100) + \"%\"; };\n return {\n r: fmt(this.r),\n g: fmt(this.g),\n b: fmt(this.b),\n a: this.a,\n };\n };\n /**\n * Returns the RGBA relative values interpolated into a string\n */\n TinyColor.prototype.toPercentageRgbString = function () {\n var rnd = function (x) { return Math.round(bound01(x, 255) * 100); };\n return this.a === 1\n ? \"rgb(\" + rnd(this.r) + \"%, \" + rnd(this.g) + \"%, \" + rnd(this.b) + \"%)\"\n : \"rgba(\" + rnd(this.r) + \"%, \" + rnd(this.g) + \"%, \" + rnd(this.b) + \"%, \" + this.roundA + \")\";\n };\n /**\n * The 'real' name of the color -if there is one.\n */\n TinyColor.prototype.toName = function () {\n if (this.a === 0) {\n return 'transparent';\n }\n if (this.a < 1) {\n return false;\n }\n var hex = '#' + rgbToHex(this.r, this.g, this.b, false);\n for (var _i = 0, _a = Object.entries(names); _i < _a.length; _i++) {\n var _b = _a[_i], key = _b[0], value = _b[1];\n if (hex === value) {\n return key;\n }\n }\n return false;\n };\n TinyColor.prototype.toString = function (format) {\n var formatSet = Boolean(format);\n format = format !== null && format !== void 0 ? format : this.format;\n var formattedString = false;\n var hasAlpha = this.a < 1 && this.a >= 0;\n var needsAlphaFormat = !formatSet && hasAlpha && (format.startsWith('hex') || format === 'name');\n if (needsAlphaFormat) {\n // Special case for \"transparent\", all other non-alpha formats\n // will return rgba when there is transparency.\n if (format === 'name' && this.a === 0) {\n return this.toName();\n }\n return this.toRgbString();\n }\n if (format === 'rgb') {\n formattedString = this.toRgbString();\n }\n if (format === 'prgb') {\n formattedString = this.toPercentageRgbString();\n }\n if (format === 'hex' || format === 'hex6') {\n formattedString = this.toHexString();\n }\n if (format === 'hex3') {\n formattedString = this.toHexString(true);\n }\n if (format === 'hex4') {\n formattedString = this.toHex8String(true);\n }\n if (format === 'hex8') {\n formattedString = this.toHex8String();\n }\n if (format === 'name') {\n formattedString = this.toName();\n }\n if (format === 'hsl') {\n formattedString = this.toHslString();\n }\n if (format === 'hsv') {\n formattedString = this.toHsvString();\n }\n return formattedString || this.toHexString();\n };\n TinyColor.prototype.toNumber = function () {\n return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b);\n };\n TinyColor.prototype.clone = function () {\n return new TinyColor(this.toString());\n };\n /**\n * Lighten the color a given amount. Providing 100 will always return white.\n * @param amount - valid between 1-100\n */\n TinyColor.prototype.lighten = function (amount) {\n if (amount === void 0) { amount = 10; }\n var hsl = this.toHsl();\n hsl.l += amount / 100;\n hsl.l = clamp01(hsl.l);\n return new TinyColor(hsl);\n };\n /**\n * Brighten the color a given amount, from 0 to 100.\n * @param amount - valid between 1-100\n */\n TinyColor.prototype.brighten = function (amount) {\n if (amount === void 0) { amount = 10; }\n var rgb = this.toRgb();\n rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100))));\n rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100))));\n rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100))));\n return new TinyColor(rgb);\n };\n /**\n * Darken the color a given amount, from 0 to 100.\n * Providing 100 will always return black.\n * @param amount - valid between 1-100\n */\n TinyColor.prototype.darken = function (amount) {\n if (amount === void 0) { amount = 10; }\n var hsl = this.toHsl();\n hsl.l -= amount / 100;\n hsl.l = clamp01(hsl.l);\n return new TinyColor(hsl);\n };\n /**\n * Mix the color with pure white, from 0 to 100.\n * Providing 0 will do nothing, providing 100 will always return white.\n * @param amount - valid between 1-100\n */\n TinyColor.prototype.tint = function (amount) {\n if (amount === void 0) { amount = 10; }\n return this.mix('white', amount);\n };\n /**\n * Mix the color with pure black, from 0 to 100.\n * Providing 0 will do nothing, providing 100 will always return black.\n * @param amount - valid between 1-100\n */\n TinyColor.prototype.shade = function (amount) {\n if (amount === void 0) { amount = 10; }\n return this.mix('black', amount);\n };\n /**\n * Desaturate the color a given amount, from 0 to 100.\n * Providing 100 will is the same as calling greyscale\n * @param amount - valid between 1-100\n */\n TinyColor.prototype.desaturate = function (amount) {\n if (amount === void 0) { amount = 10; }\n var hsl = this.toHsl();\n hsl.s -= amount / 100;\n hsl.s = clamp01(hsl.s);\n return new TinyColor(hsl);\n };\n /**\n * Saturate the color a given amount, from 0 to 100.\n * @param amount - valid between 1-100\n */\n TinyColor.prototype.saturate = function (amount) {\n if (amount === void 0) { amount = 10; }\n var hsl = this.toHsl();\n hsl.s += amount / 100;\n hsl.s = clamp01(hsl.s);\n return new TinyColor(hsl);\n };\n /**\n * Completely desaturates a color into greyscale.\n * Same as calling `desaturate(100)`\n */\n TinyColor.prototype.greyscale = function () {\n return this.desaturate(100);\n };\n /**\n * Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.\n * Values outside of this range will be wrapped into this range.\n */\n TinyColor.prototype.spin = function (amount) {\n var hsl = this.toHsl();\n var hue = (hsl.h + amount) % 360;\n hsl.h = hue < 0 ? 360 + hue : hue;\n return new TinyColor(hsl);\n };\n /**\n * Mix the current color a given amount with another color, from 0 to 100.\n * 0 means no mixing (return current color).\n */\n TinyColor.prototype.mix = function (color, amount) {\n if (amount === void 0) { amount = 50; }\n var rgb1 = this.toRgb();\n var rgb2 = new TinyColor(color).toRgb();\n var p = amount / 100;\n var rgba = {\n r: (rgb2.r - rgb1.r) * p + rgb1.r,\n g: (rgb2.g - rgb1.g) * p + rgb1.g,\n b: (rgb2.b - rgb1.b) * p + rgb1.b,\n a: (rgb2.a - rgb1.a) * p + rgb1.a,\n };\n return new TinyColor(rgba);\n };\n TinyColor.prototype.analogous = function (results, slices) {\n if (results === void 0) { results = 6; }\n if (slices === void 0) { slices = 30; }\n var hsl = this.toHsl();\n var part = 360 / slices;\n var ret = [this];\n for (hsl.h = (hsl.h - ((part * results) >> 1) + 720) % 360; --results;) {\n hsl.h = (hsl.h + part) % 360;\n ret.push(new TinyColor(hsl));\n }\n return ret;\n };\n /**\n * taken from https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js\n */\n TinyColor.prototype.complement = function () {\n var hsl = this.toHsl();\n hsl.h = (hsl.h + 180) % 360;\n return new TinyColor(hsl);\n };\n TinyColor.prototype.monochromatic = function (results) {\n if (results === void 0) { results = 6; }\n var hsv = this.toHsv();\n var h = hsv.h;\n var s = hsv.s;\n var v = hsv.v;\n var res = [];\n var modification = 1 / results;\n while (results--) {\n res.push(new TinyColor({ h: h, s: s, v: v }));\n v = (v + modification) % 1;\n }\n return res;\n };\n TinyColor.prototype.splitcomplement = function () {\n var hsl = this.toHsl();\n var h = hsl.h;\n return [\n this,\n new TinyColor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l }),\n new TinyColor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l }),\n ];\n };\n /**\n * Compute how the color would appear on a background\n */\n TinyColor.prototype.onBackground = function (background) {\n var fg = this.toRgb();\n var bg = new TinyColor(background).toRgb();\n return new TinyColor({\n r: bg.r + (fg.r - bg.r) * fg.a,\n g: bg.g + (fg.g - bg.g) * fg.a,\n b: bg.b + (fg.b - bg.b) * fg.a,\n });\n };\n /**\n * Alias for `polyad(3)`\n */\n TinyColor.prototype.triad = function () {\n return this.polyad(3);\n };\n /**\n * Alias for `polyad(4)`\n */\n TinyColor.prototype.tetrad = function () {\n return this.polyad(4);\n };\n /**\n * Get polyad colors, like (for 1, 2, 3, 4, 5, 6, 7, 8, etc...)\n * monad, dyad, triad, tetrad, pentad, hexad, heptad, octad, etc...\n */\n TinyColor.prototype.polyad = function (n) {\n var hsl = this.toHsl();\n var h = hsl.h;\n var result = [this];\n var increment = 360 / n;\n for (var i = 1; i < n; i++) {\n result.push(new TinyColor({ h: (h + i * increment) % 360, s: hsl.s, l: hsl.l }));\n }\n return result;\n };\n /**\n * compare color vs current color\n */\n TinyColor.prototype.equals = function (color) {\n return this.toRgbString() === new TinyColor(color).toRgbString();\n };\n return TinyColor;\n}());\nexport { TinyColor };\n// kept for backwards compatability with v1\nexport function tinycolor(color, opts) {\n if (color === void 0) { color = ''; }\n if (opts === void 0) { opts = {}; }\n return new TinyColor(color, opts);\n}\n","import { TinyColor } from '@ctrl/tinycolor';\n/**\n * A helper to mix colors using tiny color by an amount and get back a hex string.\n */ const mixColors = (colorA, colorB, amount)=>{\n return new TinyColor(colorA).mix(new TinyColor(colorB), amount).toHexString();\n};\n/**\n * Creates a v9 brand ramp by pairwise mixing v8 palette colors.\n */ const mixByPairs = (palette)=>{\n return {\n 10: palette.themeDarker,\n 20: mixColors(palette.themeDarker, palette.themeDark),\n 30: palette.themeDark,\n 40: mixColors(palette.themeDark, palette.themeDarkAlt),\n 50: palette.themeDarkAlt,\n 60: mixColors(palette.themeDarkAlt, palette.themePrimary),\n 70: palette.themePrimary,\n 80: mixColors(palette.themePrimary, palette.themeSecondary),\n 90: palette.themeSecondary,\n 100: mixColors(palette.themeSecondary, palette.themeTertiary),\n 110: palette.themeTertiary,\n 120: mixColors(palette.themeTertiary, palette.themeLight),\n 130: palette.themeLight,\n 140: mixColors(palette.themeLight, palette.themeLighter),\n 150: palette.themeLighter,\n 160: mixColors(palette.themeLighter, palette.themeLighterAlt)\n };\n};\n/**\n * Creates a v9 brand ramp by mixing v8 palette colors\n * using steps between themeDarker and themePrimary and\n * between themePrimary and themeLighterAlt.\n */ const mixPrimaryAndEnds = (palette)=>{\n return {\n 10: palette.themeDarker,\n 20: mixColors(palette.themeDarker, palette.themePrimary, 20),\n 30: mixColors(palette.themeDarker, palette.themePrimary, 30),\n 40: mixColors(palette.themeDarker, palette.themePrimary, 40),\n 50: mixColors(palette.themeDarker, palette.themePrimary, 50),\n 60: mixColors(palette.themeDarker, palette.themePrimary, 60),\n 70: mixColors(palette.themeDarker, palette.themePrimary, 70),\n 80: palette.themePrimary,\n 90: mixColors(palette.themePrimary, palette.themeLighterAlt, 10),\n 100: mixColors(palette.themePrimary, palette.themeLighterAlt, 20),\n 110: mixColors(palette.themePrimary, palette.themeLighterAlt, 30),\n 120: mixColors(palette.themePrimary, palette.themeLighterAlt, 40),\n 130: mixColors(palette.themePrimary, palette.themeLighterAlt, 50),\n 140: mixColors(palette.themePrimary, palette.themeLighterAlt, 60),\n 150: mixColors(palette.themePrimary, palette.themeLighterAlt, 70),\n 160: palette.themeLighterAlt\n };\n};\n/**\n * Creates v9 brand colors from a v8 palette using interpolation\n * A v8 palette has nine colors and v9 has sixteen colors.\n */ export const createBrandVariants = (palette, interpolation = 'pairs')=>{\n switch(interpolation){\n case 'primaryAndEnds':\n return mixPrimaryAndEnds(palette);\n case 'pairs':\n default:\n return mixByPairs(palette);\n }\n};\n","import { webLightTheme } from '@fluentui/react-components';\nimport { blackAlpha, whiteAlpha, grey, grey10Alpha, grey12Alpha } from './themeDuplicates';\n/**\n * Creates v9 color tokens from a v8 palette.\n */ const mapAliasColors = (palette, inverted)=>{\n return {\n colorNeutralForeground1: palette.neutralPrimary,\n colorNeutralForeground1Hover: palette.neutralPrimary,\n colorNeutralForeground1Pressed: palette.neutralPrimary,\n colorNeutralForeground1Selected: palette.neutralPrimary,\n colorNeutralForeground2: palette.neutralSecondary,\n colorNeutralForeground2Hover: palette.neutralPrimary,\n colorNeutralForeground2Pressed: palette.neutralPrimary,\n colorNeutralForeground2Selected: palette.neutralPrimary,\n colorNeutralForeground2BrandHover: palette.themePrimary,\n colorNeutralForeground2BrandPressed: palette.themeDarkAlt,\n colorNeutralForeground2BrandSelected: palette.themePrimary,\n colorNeutralForeground3: inverted ? palette.neutralSecondaryAlt : palette.neutralTertiary,\n colorNeutralForeground3Hover: palette.neutralSecondary,\n colorNeutralForeground3Pressed: palette.neutralSecondary,\n colorNeutralForeground3Selected: palette.neutralSecondary,\n colorNeutralForeground3BrandHover: palette.themePrimary,\n colorNeutralForeground3BrandPressed: palette.themeDarkAlt,\n colorNeutralForeground3BrandSelected: palette.themePrimary,\n colorNeutralForeground4: inverted ? palette.neutralSecondaryAlt : palette.neutralQuaternary,\n colorNeutralForegroundDisabled: palette.neutralTertiaryAlt,\n colorNeutralForegroundInvertedDisabled: whiteAlpha[40],\n colorBrandForegroundLink: palette.themeDarkAlt,\n colorBrandForegroundLinkHover: palette.themeDark,\n colorBrandForegroundLinkPressed: palette.themeDarker,\n colorBrandForegroundLinkSelected: palette.themeDarkAlt,\n colorNeutralForeground2Link: palette.neutralSecondary,\n colorNeutralForeground2LinkHover: palette.neutralPrimary,\n colorNeutralForeground2LinkPressed: palette.neutralPrimary,\n colorNeutralForeground2LinkSelected: palette.neutralPrimary,\n colorCompoundBrandForeground1: palette.themePrimary,\n colorCompoundBrandForeground1Hover: palette.themeDarkAlt,\n colorCompoundBrandForeground1Pressed: palette.themeDark,\n colorBrandForeground1: palette.themePrimary,\n colorBrandForeground2: palette.themeDarkAlt,\n colorBrandForeground2Hover: palette.themeDarkAlt,\n colorBrandForeground2Pressed: palette.themeDarkAlt,\n colorNeutralForeground1Static: palette.neutralPrimary,\n colorNeutralForegroundInverted: palette.white,\n colorNeutralForegroundInvertedHover: palette.white,\n colorNeutralForegroundInvertedPressed: palette.white,\n colorNeutralForegroundInvertedSelected: palette.white,\n colorNeutralForegroundOnBrand: palette.white,\n colorNeutralForegroundStaticInverted: palette.white,\n colorNeutralForegroundInvertedLink: palette.white,\n colorNeutralForegroundInvertedLinkHover: palette.white,\n colorNeutralForegroundInvertedLinkPressed: palette.white,\n colorNeutralForegroundInvertedLinkSelected: palette.white,\n colorNeutralForegroundInverted2: palette.white,\n colorBrandForegroundInverted: palette.themeSecondary,\n colorBrandForegroundInvertedHover: palette.themeTertiary,\n colorBrandForegroundInvertedPressed: palette.themeSecondary,\n colorBrandForegroundOnLight: palette.themePrimary,\n colorBrandForegroundOnLightHover: palette.themeDarkAlt,\n colorBrandForegroundOnLightPressed: palette.themeDark,\n colorBrandForegroundOnLightSelected: palette.themeDark,\n colorNeutralBackground1: palette.white,\n colorNeutralBackground1Hover: palette.neutralLighter,\n colorNeutralBackground1Pressed: palette.neutralQuaternaryAlt,\n colorNeutralBackground1Selected: palette.neutralLight,\n colorNeutralBackground2: palette.neutralLighterAlt,\n colorNeutralBackground2Hover: palette.neutralLighter,\n colorNeutralBackground2Pressed: palette.neutralQuaternaryAlt,\n colorNeutralBackground2Selected: palette.neutralLight,\n colorNeutralBackground3: palette.neutralLighter,\n colorNeutralBackground3Hover: palette.neutralLight,\n colorNeutralBackground3Pressed: palette.neutralQuaternary,\n colorNeutralBackground3Selected: palette.neutralQuaternaryAlt,\n colorNeutralBackground4: palette.neutralLighter,\n colorNeutralBackground4Hover: palette.neutralLighterAlt,\n colorNeutralBackground4Pressed: palette.neutralLighter,\n colorNeutralBackground4Selected: palette.white,\n colorNeutralBackground5: palette.neutralLight,\n colorNeutralBackground5Hover: palette.neutralLighter,\n colorNeutralBackground5Pressed: palette.neutralLighter,\n colorNeutralBackground5Selected: palette.neutralLighterAlt,\n colorNeutralBackground6: palette.neutralLight,\n colorNeutralBackgroundStatic: grey[20],\n colorNeutralBackgroundInverted: palette.neutralSecondary,\n colorNeutralBackgroundAlpha: inverted ? grey10Alpha[50] : whiteAlpha[50],\n colorNeutralBackgroundAlpha2: inverted ? grey12Alpha[70] : whiteAlpha[80],\n colorSubtleBackground: 'transparent',\n colorSubtleBackgroundHover: palette.neutralLighter,\n colorSubtleBackgroundPressed: palette.neutralQuaternaryAlt,\n colorSubtleBackgroundSelected: palette.neutralLight,\n colorSubtleBackgroundLightAlphaHover: inverted ? whiteAlpha[10] : whiteAlpha[80],\n colorSubtleBackgroundLightAlphaPressed: inverted ? whiteAlpha[5] : whiteAlpha[50],\n colorSubtleBackgroundLightAlphaSelected: 'transparent',\n colorSubtleBackgroundInverted: 'transparent',\n colorSubtleBackgroundInvertedHover: blackAlpha[10],\n colorSubtleBackgroundInvertedPressed: blackAlpha[30],\n colorSubtleBackgroundInvertedSelected: blackAlpha[20],\n colorTransparentBackground: 'transparent',\n colorTransparentBackgroundHover: 'transparent',\n colorTransparentBackgroundPressed: 'transparent',\n colorTransparentBackgroundSelected: 'transparent',\n colorNeutralBackgroundDisabled: palette.neutralLighter,\n colorNeutralBackgroundInvertedDisabled: whiteAlpha[10],\n colorNeutralStencil1: palette.neutralLight,\n colorNeutralStencil2: palette.neutralLighterAlt,\n colorNeutralStencil1Alpha: inverted ? whiteAlpha[10] : blackAlpha[10],\n colorNeutralStencil2Alpha: inverted ? whiteAlpha[5] : blackAlpha[5],\n colorBackgroundOverlay: blackAlpha[40],\n colorScrollbarOverlay: blackAlpha[50],\n colorBrandBackground: palette.themePrimary,\n colorBrandBackgroundHover: palette.themeDarkAlt,\n colorBrandBackgroundPressed: palette.themeDarker,\n colorBrandBackgroundSelected: palette.themeDark,\n colorCompoundBrandBackground: palette.themePrimary,\n colorCompoundBrandBackgroundHover: palette.themeDarkAlt,\n colorCompoundBrandBackgroundPressed: palette.themeDark,\n colorBrandBackgroundStatic: palette.themePrimary,\n colorBrandBackground2: palette.themeLighterAlt,\n colorBrandBackground2Hover: palette.themeLighterAlt,\n colorBrandBackground2Pressed: palette.themeLighterAlt,\n colorBrandBackground3Static: palette.themeDark,\n colorBrandBackground4Static: palette.themeDarker,\n colorBrandBackgroundInverted: palette.white,\n colorBrandBackgroundInvertedHover: palette.themeLighterAlt,\n colorBrandBackgroundInvertedPressed: palette.themeLight,\n colorBrandBackgroundInvertedSelected: palette.themeLighter,\n colorNeutralCardBackground: inverted ? grey[20] : grey[98],\n colorNeutralCardBackgroundHover: inverted ? grey[24] : palette.white,\n colorNeutralCardBackgroundPressed: inverted ? grey[18] : grey[96],\n colorNeutralCardBackgroundSelected: inverted ? grey[22] : grey[92],\n colorNeutralCardBackgroundDisabled: inverted ? grey[8] : grey[94],\n colorNeutralStrokeAccessible: palette.neutralSecondary,\n colorNeutralStrokeAccessibleHover: palette.neutralSecondary,\n colorNeutralStrokeAccessiblePressed: palette.neutralSecondary,\n colorNeutralStrokeAccessibleSelected: palette.themePrimary,\n colorNeutralStroke1: palette.neutralQuaternary,\n colorNeutralStroke1Hover: palette.neutralTertiaryAlt,\n colorNeutralStroke1Pressed: palette.neutralTertiaryAlt,\n colorNeutralStroke1Selected: palette.neutralTertiaryAlt,\n colorNeutralStroke2: palette.neutralQuaternaryAlt,\n colorNeutralStroke3: palette.neutralLighter,\n colorNeutralStrokeSubtle: palette.neutralQuaternaryAlt,\n colorNeutralStrokeOnBrand: palette.white,\n colorNeutralStrokeOnBrand2: palette.white,\n colorNeutralStrokeOnBrand2Hover: palette.white,\n colorNeutralStrokeOnBrand2Pressed: palette.white,\n colorNeutralStrokeOnBrand2Selected: palette.white,\n colorBrandStroke1: palette.themePrimary,\n colorBrandStroke2: palette.themeLight,\n colorBrandStroke2Hover: palette.themeLight,\n colorBrandStroke2Pressed: palette.themeLight,\n colorBrandStroke2Contrast: palette.themeLight,\n colorCompoundBrandStroke: palette.themePrimary,\n colorCompoundBrandStrokeHover: palette.themeDarkAlt,\n colorCompoundBrandStrokePressed: palette.themeDark,\n colorNeutralStrokeDisabled: palette.neutralQuaternaryAlt,\n colorNeutralStrokeInvertedDisabled: whiteAlpha[40],\n colorTransparentStroke: 'transparent',\n colorTransparentStrokeInteractive: 'transparent',\n colorTransparentStrokeDisabled: 'transparent',\n colorNeutralStrokeAlpha: inverted ? whiteAlpha[10] : blackAlpha[5],\n colorNeutralStrokeAlpha2: whiteAlpha[20],\n colorStrokeFocus1: palette.white,\n colorStrokeFocus2: palette.black,\n colorNeutralShadowAmbient: 'rgba(0,0,0,0.12)',\n colorNeutralShadowKey: 'rgba(0,0,0,0.14)',\n colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.06)',\n colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.07)',\n colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.20)',\n colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.24)',\n colorBrandShadowAmbient: 'rgba(0,0,0,0.30)',\n colorBrandShadowKey: 'rgba(0,0,0,0.25)'\n };\n};\n/**\n * Creates v9 shadow tokens from v8 effects.\n */ const mapShadowTokens = (effects)=>{\n return {\n shadow4: effects.elevation4,\n shadow8: effects.elevation8,\n shadow16: effects.elevation16,\n shadow64: effects.elevation64\n };\n};\n/**\n * Creates v9 border radius tokens from v8 effects\n */ const mapBorderRadiusTokens = (effects)=>{\n return {\n borderRadiusSmall: effects.roundedCorner2,\n borderRadiusMedium: effects.roundedCorner4,\n borderRadiusLarge: effects.roundedCorner6\n };\n};\n/**\n * Creates a v9 theme from a v8 theme.\n * You can optional pass a base v9 theme; otherwise webLightTheme is used.\n */ export const createV9Theme = (themeV8, baseThemeV9)=>{\n const baseTheme = baseThemeV9 !== null && baseThemeV9 !== void 0 ? baseThemeV9 : webLightTheme;\n return {\n ...baseTheme,\n ...mapAliasColors(themeV8.palette, themeV8.isInverted),\n ...mapShadowTokens(themeV8.effects),\n ...mapBorderRadiusTokens(themeV8.effects)\n };\n};\n","import { createTheme, getTheme, ICheckboxStyleProps, IToggleStyleProps } from '@fluentui/react';\nimport { createV8Theme } from '@fluentui/react-migration-v8-v9';\nimport { ITheme } from '../interfaces/theme';\n\nconst lightTheme = createTheme({\n palette: {\n white: '#ffffff'\n },\n})\n\n\nexport const getControlTheme = (fluentDesignLanguage?: ComponentFramework.FluentDesignState): ITheme => {\n const fluentTheme = getTheme();\n if (!fluentDesignLanguage) {\n return {\n ...fluentTheme, effects: {\n ...fluentTheme.effects,\n underlined: false\n },\n semanticColors: {\n ...fluentTheme.semanticColors,\n inputBorder: 'transparent',\n }\n }\n }\n const v8Theme: ITheme = createV8Theme(fluentDesignLanguage.brand, fluentDesignLanguage.tokenTheme);\n v8Theme.semanticColors.inputBackground = fluentDesignLanguage.tokenTheme.inputBackground ?? fluentDesignLanguage.tokenTheme.colorNeutralBackground1Hover;\n v8Theme.semanticColors.inputBorder = fluentDesignLanguage.tokenTheme.inputBorder ?? 'transparent';\n v8Theme.semanticColors.inputBorderHovered = fluentDesignLanguage.tokenTheme.inputBorderHovered ?? v8Theme.semanticColors.inputBorder;\n v8Theme.semanticColors.inputText = fluentDesignLanguage.tokenTheme.inputText ?? v8Theme.semanticColors.inputText;\n v8Theme.semanticColors.inputPlaceholderText = fluentDesignLanguage.tokenTheme.inputPlaceholderText ?? v8Theme.semanticColors.inputText\n v8Theme.semanticColors.inputTextHovered = fluentDesignLanguage.tokenTheme.inputTextHovered ?? v8Theme.semanticColors.inputText;\n v8Theme.effects.underlined = fluentDesignLanguage.tokenTheme.underlined ?? true;\n return normalizeComponentStyling(v8Theme);\n}\n\nexport const normalizeComponentStyling = (theme: ITheme) => {\n theme.components = {\n //@ts-ignore\n CommandBarButton: {\n styles: {\n root: {\n backgroundColor: 'transparent'\n },\n rootHovered: {\n backgroundColor: theme.semanticColors.buttonBackgroundHovered\n },\n rootPressed: {\n backgroundColor: theme.semanticColors.buttonBackgroundPressed\n },\n rootExpanded: {\n backgroundColor: theme.semanticColors.buttonBackgroundHovered\n },\n rootChecked: {\n backgroundColor: theme.semanticColors.buttonBackgroundChecked\n },\n rootCheckedPressed: {\n backgroundColor: theme.semanticColors.buttonBackgroundPressed\n },\n rootExpandedHovered: {\n backgroundColor: theme.semanticColors.buttonBackgroundPressed\n }\n }\n },\n Checkbox: {\n styles: (props: ICheckboxStyleProps) => {\n return {\n root: {\n ':hover .ms-Checkbox-checkbox': {\n borderColor: !props.checked ? 'inherit' : undefined\n }\n }\n }\n }\n },\n Toggle: {\n styles: (props: IToggleStyleProps) => {\n return {\n pill: {\n backgroundColor: !props.checked ? theme.semanticColors.inputBackground : undefined,\n ':hover': {\n borderColor: !props.checked ? props.theme.semanticColors.smallInputBorder : undefined\n },\n }\n };\n }\n }\n };\n const originalSemanticColors = { ...theme.semanticColors };\n const baseTheme = lightTheme;\n for (const key of Object.keys(baseTheme.semanticColors)) {\n if (key.startsWith('menu') || key.startsWith('list')) {\n //@ts-ignore - a\n theme.semanticColors[key] = baseTheme.semanticColors[key];\n }\n }\n theme.semanticColors.menuIcon = originalSemanticColors.menuIcon;\n return theme;\n}\n","import { useMemo } from \"react\";\nimport { ITheme } from \"../interfaces/theme\";\nimport { getControlTheme } from \"../utils/Theme\";\n\nexport const useControlTheme = (fluentDesignLanguage?: ComponentFramework.FluentDesignState): ITheme => {\n return useMemo(() => getControlTheme(fluentDesignLanguage), [])\n};","\nexport const useControlSizing = (mode: ComponentFramework.Mode): {\n height?: number,\n width?: number\n} => {\n const getAllocationSize = (allocationSize?: number) => {\n if(!allocationSize || allocationSize === -1) {\n return undefined;\n }\n return allocationSize;\n }\n return {\n height: getAllocationSize(mode.allocatedHeight),\n width: getAllocationSize(mode.allocatedWidth)\n }\n}","'use strict';\n\n// do not edit .js files directly - edit src/index.jst\n\n\n var envHasBigInt64Array = typeof BigInt64Array !== 'undefined';\n\n\nmodule.exports = function equal(a, b) {\n if (a === b) return true;\n\n if (a && b && typeof a == 'object' && typeof b == 'object') {\n if (a.constructor !== b.constructor) return false;\n\n var length, i, keys;\n if (Array.isArray(a)) {\n length = a.length;\n if (length != b.length) return false;\n for (i = length; i-- !== 0;)\n if (!equal(a[i], b[i])) return false;\n return true;\n }\n\n\n if ((a instanceof Map) && (b instanceof Map)) {\n if (a.size !== b.size) return false;\n for (i of a.entries())\n if (!b.has(i[0])) return false;\n for (i of a.entries())\n if (!equal(i[1], b.get(i[0]))) return false;\n return true;\n }\n\n if ((a instanceof Set) && (b instanceof Set)) {\n if (a.size !== b.size) return false;\n for (i of a.entries())\n if (!b.has(i[0])) return false;\n return true;\n }\n\n if (ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {\n length = a.length;\n if (length != b.length) return false;\n for (i = length; i-- !== 0;)\n if (a[i] !== b[i]) return false;\n return true;\n }\n\n\n if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;\n if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();\n if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();\n\n keys = Object.keys(a);\n length = keys.length;\n if (length !== Object.keys(b).length) return false;\n\n for (i = length; i-- !== 0;)\n if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;\n\n for (i = length; i-- !== 0;) {\n var key = keys[i];\n\n if (!equal(a[key], b[key])) return false;\n }\n\n return true;\n }\n\n // true if both NaN, false otherwise\n return a!==a && b!==b;\n};\n","import { useEffect, useMemo, useRef } from \"react\";\nimport { IControl, IOutputs, IParameters } from \"../interfaces\";\nimport { merge } from 'merge-anything';\nimport { Liquid } from \"liquidjs\";\nimport { useControlTheme } from \"./useControlTheme\";\nimport { ITheme } from \"../interfaces/theme\";\nimport { useControlSizing } from \"./useControlSizing\";\nimport deepEqual from 'fast-deep-equal/es6';\n\nexport type ITranslation = {\n [Property in keyof Required]: (variables?: any) => string\n};\n\nexport interface IDefaultTranslations {\n [LCID: number]: string | string[];\n [key: string]: any;\n}\n\n\nexport interface IControlController {\n labels: Required>,\n sizing: {\n width?: number,\n height?: number\n },\n theme: ITheme;\n onNotifyOutputChanged: (outputs: TOutputs) => void,\n}\n/**\n * Provides automatic checking if the given outputs are different from the provided inputs. Use the provided method any time you want\n * to notify the framework that you wish to write changes. The hook will notify the framework only if the provided output differs from the current inputs.\n */\nexport const useControl = (name: string, props: IControl, defaultTranslations?: IDefaultTranslations): IControlController => {\n const parametersRef = useRef(props.parameters);\n const sizing = useControlSizing(props.context.mode);\n const context = props.context;\n const liquid = useMemo(() => new Liquid(), []);\n const labels = useMemo(() => {\n const mergedTranslations = merge(defaultTranslations ?? {}, props.translations ?? {}) as TTranslations;\n return new Proxy(mergedTranslations as any, {\n get(target, key) {\n return (variables: any) => getLabel(key as string, mergedTranslations, variables)\n }\n }) as any;\n }, []);\n\n useEffect(() => {\n parametersRef.current = props.parameters;\n }, [props.parameters]);\n\n const getLabel = (key: string, translations: TTranslations, variables?: any): string | string[] => {\n const strigify = (value: string | string[]) => {\n if (typeof value === 'string') {\n return value;\n }\n return JSON.stringify(value);\n };\n //@ts-ignore\n const translation = translations[key];\n if (!translation) {\n console.error(`Translation for the ${key} label of the ${name} control has not been defined!`);\n return key;\n }\n if (typeof translation === 'string' || Array.isArray(translation)) {\n return strigify(translation);\n }\n let label = translation[props.context.userSettings.languageId];\n if (!label) {\n console.info(`Translation for the ${key} label of the ${name} control has not been found. Using default Czech label instead.`);\n label = translation[1029];\n }\n if (!label) {\n console.error(`Translation for the ${key} label of the ${name} control does not exists neither for Czech language and current LCID.`);\n label = key;\n }\n\n return liquid.parseAndRenderSync(strigify(label), variables);\n };\n\n const onNotifyOutputChanged = (outputs: TOutputs) => {\n let isDirty = false;\n for (let [key, outputValue] of Object.entries(outputs)) {\n let parameterValue = parametersRef.current[key]?.raw;\n if (!deepEqual(parameterValue, outputValue)) {\n if (outputValue === null) {\n outputValue = undefined;\n //@ts-ignore\n outputs[key] = undefined;\n }\n if (outputValue === \"\") {\n outputValue = undefined\n //@ts-ignore\n outputs[key] = undefined;\n }\n if (parameterValue === null) {\n parameterValue = undefined;\n }\n if (parameterValue === outputValue) {\n continue\n }\n isDirty = true;\n break;\n }\n }\n if (!isDirty) {\n return;\n }\n //console.log(`Change detected, triggering notifyOutputChanged on control ${name}.`);\n props.onNotifyOutputChanged?.(outputs);\n };\n return {\n labels,\n sizing,\n theme: useControlTheme(context.fluentDesignLanguage),\n onNotifyOutputChanged\n }\n};\n","import { useEffect, useState } from \"react\";\n\n\n//triggering the focus state immediately can cause issues in some cases => delay can prevent them\nexport const useFocusIn = (ref: React.RefObject, delay?: number): boolean => {\n const [isFocused, setIsFocused] = useState(false);\n\n const triggerIsFocused = (value: boolean) => {\n if(typeof delay !== 'number') {\n setIsFocused(value);\n return;\n }\n setTimeout(() => {\n setIsFocused(value);\n }, delay);\n }\n\n useEffect(() => {\n const onFocus = (e: FocusEvent) => {\n triggerIsFocused(true);\n }\n const onBlur = (e: FocusEvent) => {\n triggerIsFocused(false);\n }\n ref.current?.addEventListener('focusin', (e) => onFocus(e));\n ref.current?.addEventListener('focusout', (e) => onBlur(e));\n\n return () => {\n ref.current?.removeEventListener('focusin', onFocus);\n ref.current?.removeEventListener('focusout', onBlur);\n }\n }, []);\n return isFocused\n};","import { useEffect, useRef, useState } from \"react\";\nimport { IControl, IOutputs } from \"../interfaces/context\";\nimport { IControlController, IDefaultTranslations, useControl } from \"./useControl\";\nimport React from 'react';\nimport { IInputParameters } from \"../interfaces/parameters\";\n\n/**\n * Description\n * @param {any} value:any\n * @returns {any}\n */\ninterface IControlOptions {\n defaultTranslations?: IDefaultTranslations;\n /**\n * Formatting function that will format the bound value every time a new one comes from the props.\n */\n formatter?: (value: any) => any,\n valueExtractor?: (value: any) => any\n}\n\n/**\n * Use when working with components that need to store value changes internally before triggering `notifyOutputChanged`.\n * An example of this is a standard Decimal component - we do not want to trigger `notifyOutputChanged` on every value change,\n * since this would trigger decimal validation on every keystroke which would result in a bad UX. In this case, the `notifyOutputChanged` should\n * be triggered when the user looses focus on the component (`onBlur` event).\n * @returns {[]} The hook returns an array with three props. First `value` prop is a value that will will always be in sync with the value that comes from the `value` parameter. \n * Use this for displaying the up-to-date value to the user.\n * Second prop contains the translations for this component.\n * \n * Third prop is a method that can be used to change the current value. The new value will get propagated to the `value` variable returned from this hook. This method wont propagate the value to the framework.\n * \n * The last prop is a method that will notify the framework that you wish to write changes. \n * The method will notify the framework only if the provided output differs from the current inputs.\n */\n\ninterface IInputBasedControlController extends IControlController {\n value: TValue,\n setValue: (value: TValue) => void\n}\n\nexport const useInputBasedControl = (name: string, props: IControl, options?: IControlOptions): IInputBasedControlController => {\n const {formatter, valueExtractor} = {...options};\n const rawValue = props.parameters.value.raw;\n const [value, setValue] = useState(formatter?.(rawValue) ?? rawValue);\n const valueRef = useRef(rawValue);\n const {labels, sizing, theme, onNotifyOutputChanged} = useControl(name, props, options?.defaultTranslations);\n\n useEffect(() => {\n const formattedValue = formatter?.(rawValue);\n setValue(formattedValue ?? rawValue);\n //console.log(`Updating component ${name} with new value: ${formattedValue ?? rawValue}`);\n }, [rawValue]);\n\n useEffect(() => {\n valueRef.current = value;\n }, [value]);\n \n useEffect(() => {\n return () => {\n if(props.parameters.NotifyOutputChangedOnUnmount?.raw === true) {\n onNotifyOutputChanged({\n value: valueExtractor?.(valueRef.current) ?? valueRef.current\n } as any);\n }\n };\n }, []);\n return {\n value,\n labels,\n sizing,\n theme,\n onNotifyOutputChanged,\n setValue\n }\n};","import { useEffect, useState } from \"react\";\n\nexport const useMouseOver = (ref: React.RefObject): boolean => {\n const [isMouseOver, setIsMouseOver] = useState(false);\n\n useEffect(() => {\n const onMouseEnter = () => {\n setIsMouseOver(true);\n }\n const onMouseLeave = () => {\n setIsMouseOver(false);\n }\n ref.current?.addEventListener('mouseenter', onMouseEnter);\n ref.current?.addEventListener('mouseleave', onMouseLeave);\n\n return () => {\n ref.current?.removeEventListener('mouseenter',onMouseEnter);\n ref.current?.removeEventListener('mouseleave', onMouseLeave);\n }\n }, []);\n\n return isMouseOver;\n};","import { ITheme, mergeStyleSets } from \"@fluentui/react\";\n\nexport const getDateTimeStyles = (theme: ITheme) => {\n return mergeStyleSets({\n datePicker: {\n '[class^=\"statusMessage\"]': {\n display: 'none'\n }\n },\n calendarCallout: {\n '[class*=\"TALXIS__timepicker__root\"]': {\n padding: 12,\n 'label': {\n paddingTop: 0\n },\n 'i': {\n fontSize: 16\n }\n },\n 'hr': {\n margin: 0,\n border: 'none',\n height: 1,\n backgroundColor: theme.semanticColors.menuDivider\n },\n '[class^=\"monthAndYear\"], [class*=\"weekDayLabelCell\"]': {\n animationDuration: '0s'\n },\n '.ms-DatePicker': {\n animationDuration: '0s'\n }\n }\n });\n};","!function(t,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=e():\"function\"==typeof define&&define.amd?define(e):(t=\"undefined\"!=typeof globalThis?globalThis:t||self).dayjs=e()}(this,(function(){\"use strict\";var t=1e3,e=6e4,n=36e5,r=\"millisecond\",i=\"second\",s=\"minute\",u=\"hour\",a=\"day\",o=\"week\",c=\"month\",f=\"quarter\",h=\"year\",d=\"date\",l=\"Invalid Date\",$=/^(\\d{4})[-/]?(\\d{1,2})?[-/]?(\\d{0,2})[Tt\\s]*(\\d{1,2})?:?(\\d{1,2})?:?(\\d{1,2})?[.:]?(\\d+)?$/,y=/\\[([^\\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:\"en\",weekdays:\"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday\".split(\"_\"),months:\"January_February_March_April_May_June_July_August_September_October_November_December\".split(\"_\"),ordinal:function(t){var e=[\"th\",\"st\",\"nd\",\"rd\"],n=t%100;return\"[\"+t+(e[(n-20)%10]||e[n]||e[0])+\"]\"}},m=function(t,e,n){var r=String(t);return!r||r.length>=e?t:\"\"+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return(e<=0?\"+\":\"-\")+m(r,2,\"0\")+\":\"+m(i,2,\"0\")},m:function t(e,n){if(e.date()1)return t(u[0])}else{var a=e.name;D[a]=e,i=a}return!r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n=\"object\"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if(\"string\"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||\"0\").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init()},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},m.$utils=function(){return b},m.isValid=function(){return!(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)68?1900:2e3)};var f=function(e){return function(t){this[e]=+t}},h=[/[+-]\\d\\d:?(\\d\\d)?|Z/,function(e){(this.zone||(this.zone={})).offset=function(e){if(!e)return 0;if(\"Z\"===e)return 0;var t=e.match(/([+-]|\\d\\d)/g),n=60*t[1]+(+t[2]||0);return 0===n?0:\"+\"===t[0]?-n:n}(e)}],u=function(e){var t=s[e];return t&&(t.indexOf?t:t.s.concat(t.f))},d=function(e,t){var n,r=s.meridiem;if(r){for(var i=1;i<=24;i+=1)if(e.indexOf(r(i,0,t))>-1){n=i>12;break}}else n=e===(t?\"pm\":\"PM\");return n},c={A:[o,function(e){this.afternoon=d(e,!1)}],a:[o,function(e){this.afternoon=d(e,!0)}],Q:[n,function(e){this.month=3*(e-1)+1}],S:[n,function(e){this.milliseconds=100*+e}],SS:[r,function(e){this.milliseconds=10*+e}],SSS:[/\\d{3}/,function(e){this.milliseconds=+e}],s:[i,f(\"seconds\")],ss:[i,f(\"seconds\")],m:[i,f(\"minutes\")],mm:[i,f(\"minutes\")],H:[i,f(\"hours\")],h:[i,f(\"hours\")],HH:[i,f(\"hours\")],hh:[i,f(\"hours\")],D:[i,f(\"day\")],DD:[r,f(\"day\")],Do:[o,function(e){var t=s.ordinal,n=e.match(/\\d+/);if(this.day=n[0],t)for(var r=1;r<=31;r+=1)t(r).replace(/\\[|\\]/g,\"\")===e&&(this.day=r)}],w:[i,f(\"week\")],ww:[r,f(\"week\")],M:[i,f(\"month\")],MM:[r,f(\"month\")],MMM:[o,function(e){var t=u(\"months\"),n=(u(\"monthsShort\")||t.map((function(e){return e.slice(0,3)}))).indexOf(e)+1;if(n<1)throw new Error;this.month=n%12||n}],MMMM:[o,function(e){var t=u(\"months\").indexOf(e)+1;if(t<1)throw new Error;this.month=t%12||t}],Y:[/[+-]?\\d+/,f(\"year\")],YY:[r,function(e){this.year=a(e)}],YYYY:[/\\d{4}/,f(\"year\")],Z:h,ZZ:h};function l(n){var r,i;r=n,i=s&&s.formats;for(var o=(n=r.replace(/(\\[[^\\]]+])|(LTS?|l{1,4}|L{1,4})/g,(function(t,n,r){var o=r&&r.toUpperCase();return n||i[r]||e[r]||i[o].replace(/(\\[[^\\]]+])|(MMMM|MM|DD|dddd)/g,(function(e,t,n){return t||n.slice(1)}))}))).match(t),a=o.length,f=0;f-1)return new Date((\"X\"===t?1e3:1)*e);var i=l(t)(e),o=i.year,s=i.month,a=i.day,f=i.hours,h=i.minutes,u=i.seconds,d=i.milliseconds,c=i.zone,m=i.week,M=new Date,Y=a||(o||s?1:M.getDate()),p=o||M.getFullYear(),v=0;o&&!s||(v=s>0?s-1:M.getMonth());var D,w=f||0,g=h||0,y=u||0,L=d||0;return c?new Date(Date.UTC(p,v,Y,w,g,y,L+60*c.offset*1e3)):n?new Date(Date.UTC(p,v,Y,w,g,y,L)):(D=new Date(p,v,Y,w,g,y,L),m&&(D=r(D).week(m).toDate()),D)}catch(e){return new Date(\"\")}}(t,a,r,n),this.init(),d&&!0!==d&&(this.$L=this.locale(d).$L),u&&t!=this.format(a)&&(this.$d=new Date(\"\")),s={}}else if(a instanceof Array)for(var c=a.length,m=1;m<=c;m+=1){o[1]=a[m-1];var M=n.apply(this,o);if(M.isValid()){this.$d=M.$d,this.$L=M.$L,this.init();break}m===c&&(this.$d=new Date(\"\"))}else i.call(this,e)}}}));","export const getDefaultDateTimeTranslations = (dateFormattingInfo: ComponentFramework.UserSettingApi.DateFormattingInfo) => {\n return {\n time: {\n 1029: 'Čas',\n 1033: 'Time'\n },\n goToToday: {\n 1029: 'Přejít na dnešek',\n 1033: 'Go to today'\n },\n invalidTimeInput: {\n 1029: 'Neplatný časový formát.',\n 1033: 'Invalid time format.'\n },\n days: dateFormattingInfo.dayNames,\n months: dateFormattingInfo.monthNames,\n shortDays: dateFormattingInfo.shortestDayNames,\n shortMonths: dateFormattingInfo.abbreviatedMonthNames,\n }\n};","import { useEffect, useRef } from \"react\";\nimport { useInputBasedControl } from \"../../../hooks/useInputBasedControl\";\nimport { IDateTime, IDateTimeOutputs, IDateTimeParameters} from \"../interfaces\";\nimport dayjs from 'dayjs';\nimport utc from 'dayjs/plugin/utc';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { getDefaultDateTimeTranslations } from \"../translations\";\nimport {ITranslation } from \"../../../hooks\";\nimport { ITheme } from \"../../../interfaces/theme\";\n\ndayjs.extend(customParseFormat);\ndayjs.extend(utc);\n\nexport const useDateTime = (props: IDateTime, ref: React.RefObject): [\n boolean,\n ITheme,\n ITranslation['translations']>,\n {\n get: () => Date | undefined;\n getFormatted: () => string | undefined;\n set: (date?: Date, time?: string) => void;\n setDateString: (value: string | undefined) => void;\n clear: () => void;\n },\n {\n shortDatePattern: string\n shortTimePattern: string;\n fullDateTimePattern: string;\n },\n] => {\n\n const boundValue = props.parameters.value;\n const context = props.context;\n const behavior = boundValue.attributes.Behavior;\n const format = boundValue.attributes.Format;\n const dateFormattingInfo = context.userSettings.dateFormattingInfo;\n const lastValidDateRef = useRef(undefined);\n \n const isDateTime = (() => {\n switch (format) {\n case 'DateAndTime':\n case 'Date and Time':\n case 'DateAndTime.DateAndTime':\n case 'datetime': {\n return true;\n }\n default: {\n return false;\n }\n }\n })();\n\n //MS returns the pattern without correct separator and they do this during formatting\n const shortDatePattern = dateFormattingInfo.shortDatePattern.replace(/\\//g, dateFormattingInfo.dateSeparator).toUpperCase();\n const shortTimePattern = dateFormattingInfo.shortTimePattern.replace(/:/g, dateFormattingInfo.timeSeparator).replace('tt', 'A');\n const formatting = (() => {\n if (isDateTime) {\n return `${shortDatePattern} ${shortTimePattern}`;\n }\n return shortDatePattern;\n })();\n\n const formatDate = (date: Date | undefined | null | string): string | undefined | null => {\n if (date instanceof Date) {\n if (isDateTime) {\n //should handle the time zone conversion\n return context.formatting.formatTime(date, behavior);\n }\n return context.formatting.formatDateShort(date);\n }\n return date;\n };\n\n const {value, labels, theme, setValue, onNotifyOutputChanged} = useInputBasedControl['translations']>('DateTime', props, {\n formatter: formatDate,\n defaultTranslations: getDefaultDateTimeTranslations(props.context.userSettings.dateFormattingInfo)\n });\n\n useEffect(() => {\n const onBlur = () => {\n onNotifyOutputChanged({\n value: dateExtractor(value!) as any\n });\n };\n const input = ref.current?.querySelector('input');\n input?.addEventListener('blur', onBlur);\n return () => {\n input?.removeEventListener('blur', onBlur);\n };\n }, [value]);\n\n useEffect(() => {\n if (boundValue.raw instanceof Date) {\n lastValidDateRef.current = boundValue.raw;\n }\n }, [boundValue.raw]);\n\n const getDate = (): Date | undefined => {\n if (boundValue.raw instanceof Date) {\n if (behavior === 3) {\n //the date in javascript gets automatically adjusted to local time zone\n //this will make it think that the date already came in local time, thus not adjusting the time\n const date = new Date(boundValue.raw.toISOString().replace('Z', ''));\n return date;\n }\n return boundValue.raw;\n }\n if(boundValue.error) {\n return lastValidDateRef.current;\n }\n return undefined;\n };\n\n const dateExtractor = (value: string | Date): Date | string => {\n if (value instanceof Date) {\n return value;\n }\n const dayjsDate = dayjs(value, formatting, true);\n if (!dayjsDate.isValid()) {\n const dayJsDateNoWhiteSpace = dayjs(value?.replaceAll(' ', ''), formatting.replaceAll(' ', ''));\n if(!dayJsDateNoWhiteSpace.isValid()) {\n return value;\n }\n else {\n return dayJsDateNoWhiteSpace.toDate();\n }\n }\n return dayjsDate.toDate();\n };\n\n const clearDate = () => {\n onNotifyOutputChanged({\n value: undefined\n });\n };\n\n const selectDate = (date?: Date, time?: string) => {\n //onSelectDate can trigger on initial click with empty date, do not continue in this case\n //for clearing dates, date.clear should be used\n if(!date && !time) {\n return;\n }\n let dayjsDate = dayjs(date ?? getDate());\n //date selected from calendar, keep the original time\n if (!time) {\n time = dayjs(getDate()).format(shortTimePattern);\n }\n const dayjsTime = dayjs(time, shortTimePattern, true);\n let invalidDateString;\n if(!dayjsTime.isValid()) {\n invalidDateString = `${dayjsDate.format(shortDatePattern)} ${time}`\n }\n dayjsDate = dayjsDate.hour(dayjsTime.hour());\n dayjsDate = dayjsDate.minute(dayjsTime.minute());\n onNotifyOutputChanged({\n value: dateExtractor(invalidDateString ?? dayjsDate.toDate()) as any\n });\n };\n return [\n isDateTime,\n theme,\n labels,\n {\n get: getDate,\n clear: clearDate,\n getFormatted: () => value,\n set: selectDate,\n setDateString: setValue\n },\n {\n shortDatePattern: shortDatePattern,\n shortTimePattern: shortTimePattern,\n fullDateTimePattern: `${shortDatePattern} ${shortTimePattern}`\n }\n ]\n};","import { IDisabled, IErrorMessage, IReadOnly } from \"../interfaces/components\";\nimport { mergeStyles, useTheme } from \"@fluentui/react\";\nimport { useMemo } from \"react\";\nimport { ITheme as IFluentTheme } from '@fluentui/react/lib/Theme'\n\nexport interface ITheme extends IFluentTheme {\n effects: IFluentTheme['effects'] & {\n underlined?: boolean;\n }\n}\n\ninterface IComponentProps extends IReadOnly, IErrorMessage, IDisabled {\n className?: string;\n [key: string]: any;\n}\n\nexport const useClassNames = (componentName: string, componentProps: IComponentProps, additionalParameters?: string[], additionalClassNames?: string[]) => {\n const theme: ITheme = useTheme();\n const { errorMessage, className, readOnly } = { ...componentProps };\n let result = `TALXIS__${componentName.toLowerCase()}__root`;\n if (errorMessage) {\n result += '--has-error'\n }\n if (readOnly) {\n result += '--read-only';\n }\n if (theme.effects?.underlined) {\n result += '--underlined'\n }\n if (componentProps.disabled) {\n result += '--disabled'\n }\n additionalParameters?.map(par => {\n result += par\n });\n if (className) {\n result += ` ${componentProps.className}`;\n }\n additionalClassNames?.map(className => {\n result += ` ${className}`\n })\n if(componentProps.hideErrorMessage) {\n result += ` ${useMemo(() => getHideErrorMessageStyles(), [])}`\n }\n result += ` ${useMemo(() => getHoverOnlyStyle(), [])}`\n return result;\n};\n\nconst getHideErrorMessageStyles = () => {\n return mergeStyles({\n '.ms-TextField-errorMessage, &.ms-ComboBox-container > [id*=\"-error\"], .TALXIS__errorMessage': {\n display: 'none'\n }\n });\n}\n\nconst getHoverOnlyStyle = () => {\n return mergeStyles({\n '.hover-only': {\n display: 'none'\n },\n \"@media (pointer: coarse)\": {\n '.hover-only': {\n display: 'block'\n }\n },\n ':hover': {\n '.hover-only': {\n display: 'block'\n }\n }\n })\n}\n","/**\n * @license\n * Lodash \n * Copyright OpenJS Foundation and other contributors \n * Released under MIT license \n * Based on Underscore.js 1.8.3 \n * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors\n */\n;(function() {\n\n /** Used as a safe reference for `undefined` in pre-ES5 environments. */\n var undefined;\n\n /** Used as the semantic version number. */\n var VERSION = '4.17.21';\n\n /** Used as the size to enable large array optimizations. */\n var LARGE_ARRAY_SIZE = 200;\n\n /** Error message constants. */\n var CORE_ERROR_TEXT = 'Unsupported core-js use. Try https://npms.io/search?q=ponyfill.',\n FUNC_ERROR_TEXT = 'Expected a function',\n INVALID_TEMPL_VAR_ERROR_TEXT = 'Invalid `variable` option passed into `_.template`';\n\n /** Used to stand-in for `undefined` hash values. */\n var HASH_UNDEFINED = '__lodash_hash_undefined__';\n\n /** Used as the maximum memoize cache size. */\n var MAX_MEMOIZE_SIZE = 500;\n\n /** Used as the internal argument placeholder. */\n var PLACEHOLDER = '__lodash_placeholder__';\n\n /** Used to compose bitmasks for cloning. */\n var CLONE_DEEP_FLAG = 1,\n CLONE_FLAT_FLAG = 2,\n CLONE_SYMBOLS_FLAG = 4;\n\n /** Used to compose bitmasks for value comparisons. */\n var COMPARE_PARTIAL_FLAG = 1,\n COMPARE_UNORDERED_FLAG = 2;\n\n /** Used to compose bitmasks for function metadata. */\n var WRAP_BIND_FLAG = 1,\n WRAP_BIND_KEY_FLAG = 2,\n WRAP_CURRY_BOUND_FLAG = 4,\n WRAP_CURRY_FLAG = 8,\n WRAP_CURRY_RIGHT_FLAG = 16,\n WRAP_PARTIAL_FLAG = 32,\n WRAP_PARTIAL_RIGHT_FLAG = 64,\n WRAP_ARY_FLAG = 128,\n WRAP_REARG_FLAG = 256,\n WRAP_FLIP_FLAG = 512;\n\n /** Used as default options for `_.truncate`. */\n var DEFAULT_TRUNC_LENGTH = 30,\n DEFAULT_TRUNC_OMISSION = '...';\n\n /** Used to detect hot functions by number of calls within a span of milliseconds. */\n var HOT_COUNT = 800,\n HOT_SPAN = 16;\n\n /** Used to indicate the type of lazy iteratees. */\n var LAZY_FILTER_FLAG = 1,\n LAZY_MAP_FLAG = 2,\n LAZY_WHILE_FLAG = 3;\n\n /** Used as references for various `Number` constants. */\n var INFINITY = 1 / 0,\n MAX_SAFE_INTEGER = 9007199254740991,\n MAX_INTEGER = 1.7976931348623157e+308,\n NAN = 0 / 0;\n\n /** Used as references for the maximum length and index of an array. */\n var MAX_ARRAY_LENGTH = 4294967295,\n MAX_ARRAY_INDEX = MAX_ARRAY_LENGTH - 1,\n HALF_MAX_ARRAY_LENGTH = MAX_ARRAY_LENGTH >>> 1;\n\n /** Used to associate wrap methods with their bit flags. */\n var wrapFlags = [\n ['ary', WRAP_ARY_FLAG],\n ['bind', WRAP_BIND_FLAG],\n ['bindKey', WRAP_BIND_KEY_FLAG],\n ['curry', WRAP_CURRY_FLAG],\n ['curryRight', WRAP_CURRY_RIGHT_FLAG],\n ['flip', WRAP_FLIP_FLAG],\n ['partial', WRAP_PARTIAL_FLAG],\n ['partialRight', WRAP_PARTIAL_RIGHT_FLAG],\n ['rearg', WRAP_REARG_FLAG]\n ];\n\n /** `Object#toString` result references. */\n var argsTag = '[object Arguments]',\n arrayTag = '[object Array]',\n asyncTag = '[object AsyncFunction]',\n boolTag = '[object Boolean]',\n dateTag = '[object Date]',\n domExcTag = '[object DOMException]',\n errorTag = '[object Error]',\n funcTag = '[object Function]',\n genTag = '[object GeneratorFunction]',\n mapTag = '[object Map]',\n numberTag = '[object Number]',\n nullTag = '[object Null]',\n objectTag = '[object Object]',\n promiseTag = '[object Promise]',\n proxyTag = '[object Proxy]',\n regexpTag = '[object RegExp]',\n setTag = '[object Set]',\n stringTag = '[object String]',\n symbolTag = '[object Symbol]',\n undefinedTag = '[object Undefined]',\n weakMapTag = '[object WeakMap]',\n weakSetTag = '[object WeakSet]';\n\n var arrayBufferTag = '[object ArrayBuffer]',\n dataViewTag = '[object DataView]',\n float32Tag = '[object Float32Array]',\n float64Tag = '[object Float64Array]',\n int8Tag = '[object Int8Array]',\n int16Tag = '[object Int16Array]',\n int32Tag = '[object Int32Array]',\n uint8Tag = '[object Uint8Array]',\n uint8ClampedTag = '[object Uint8ClampedArray]',\n uint16Tag = '[object Uint16Array]',\n uint32Tag = '[object Uint32Array]';\n\n /** Used to match empty string literals in compiled template source. */\n var reEmptyStringLeading = /\\b__p \\+= '';/g,\n reEmptyStringMiddle = /\\b(__p \\+=) '' \\+/g,\n reEmptyStringTrailing = /(__e\\(.*?\\)|\\b__t\\)) \\+\\n'';/g;\n\n /** Used to match HTML entities and HTML characters. */\n var reEscapedHtml = /&(?:amp|lt|gt|quot|#39);/g,\n reUnescapedHtml = /[&<>\"']/g,\n reHasEscapedHtml = RegExp(reEscapedHtml.source),\n reHasUnescapedHtml = RegExp(reUnescapedHtml.source);\n\n /** Used to match template delimiters. */\n var reEscape = /<%-([\\s\\S]+?)%>/g,\n reEvaluate = /<%([\\s\\S]+?)%>/g,\n reInterpolate = /<%=([\\s\\S]+?)%>/g;\n\n /** Used to match property names within property paths. */\n var reIsDeepProp = /\\.|\\[(?:[^[\\]]*|([\"'])(?:(?!\\1)[^\\\\]|\\\\.)*?\\1)\\]/,\n reIsPlainProp = /^\\w*$/,\n rePropName = /[^.[\\]]+|\\[(?:(-?\\d+(?:\\.\\d+)?)|([\"'])((?:(?!\\2)[^\\\\]|\\\\.)*?)\\2)\\]|(?=(?:\\.|\\[\\])(?:\\.|\\[\\]|$))/g;\n\n /**\n * Used to match `RegExp`\n * [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).\n */\n var reRegExpChar = /[\\\\^$.*+?()[\\]{}|]/g,\n reHasRegExpChar = RegExp(reRegExpChar.source);\n\n /** Used to match leading whitespace. */\n var reTrimStart = /^\\s+/;\n\n /** Used to match a single whitespace character. */\n var reWhitespace = /\\s/;\n\n /** Used to match wrap detail comments. */\n var reWrapComment = /\\{(?:\\n\\/\\* \\[wrapped with .+\\] \\*\\/)?\\n?/,\n reWrapDetails = /\\{\\n\\/\\* \\[wrapped with (.+)\\] \\*/,\n reSplitDetails = /,? & /;\n\n /** Used to match words composed of alphanumeric characters. */\n var reAsciiWord = /[^\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\x7f]+/g;\n\n /**\n * Used to validate the `validate` option in `_.template` variable.\n *\n * Forbids characters which could potentially change the meaning of the function argument definition:\n * - \"(),\" (modification of function parameters)\n * - \"=\" (default value)\n * - \"[]{}\" (destructuring of function parameters)\n * - \"/\" (beginning of a comment)\n * - whitespace\n */\n var reForbiddenIdentifierChars = /[()=,{}\\[\\]\\/\\s]/;\n\n /** Used to match backslashes in property paths. */\n var reEscapeChar = /\\\\(\\\\)?/g;\n\n /**\n * Used to match\n * [ES template delimiters](http://ecma-international.org/ecma-262/7.0/#sec-template-literal-lexical-components).\n */\n var reEsTemplate = /\\$\\{([^\\\\}]*(?:\\\\.[^\\\\}]*)*)\\}/g;\n\n /** Used to match `RegExp` flags from their coerced string values. */\n var reFlags = /\\w*$/;\n\n /** Used to detect bad signed hexadecimal string values. */\n var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;\n\n /** Used to detect binary string values. */\n var reIsBinary = /^0b[01]+$/i;\n\n /** Used to detect host constructors (Safari). */\n var reIsHostCtor = /^\\[object .+?Constructor\\]$/;\n\n /** Used to detect octal string values. */\n var reIsOctal = /^0o[0-7]+$/i;\n\n /** Used to detect unsigned integer values. */\n var reIsUint = /^(?:0|[1-9]\\d*)$/;\n\n /** Used to match Latin Unicode letters (excluding mathematical operators). */\n var reLatin = /[\\xc0-\\xd6\\xd8-\\xf6\\xf8-\\xff\\u0100-\\u017f]/g;\n\n /** Used to ensure capturing order of template delimiters. */\n var reNoMatch = /($^)/;\n\n /** Used to match unescaped characters in compiled string literals. */\n var reUnescapedString = /['\\n\\r\\u2028\\u2029\\\\]/g;\n\n /** Used to compose unicode character classes. */\n var rsAstralRange = '\\\\ud800-\\\\udfff',\n rsComboMarksRange = '\\\\u0300-\\\\u036f',\n reComboHalfMarksRange = '\\\\ufe20-\\\\ufe2f',\n rsComboSymbolsRange = '\\\\u20d0-\\\\u20ff',\n rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange,\n rsDingbatRange = '\\\\u2700-\\\\u27bf',\n rsLowerRange = 'a-z\\\\xdf-\\\\xf6\\\\xf8-\\\\xff',\n rsMathOpRange = '\\\\xac\\\\xb1\\\\xd7\\\\xf7',\n rsNonCharRange = '\\\\x00-\\\\x2f\\\\x3a-\\\\x40\\\\x5b-\\\\x60\\\\x7b-\\\\xbf',\n rsPunctuationRange = '\\\\u2000-\\\\u206f',\n rsSpaceRange = ' \\\\t\\\\x0b\\\\f\\\\xa0\\\\ufeff\\\\n\\\\r\\\\u2028\\\\u2029\\\\u1680\\\\u180e\\\\u2000\\\\u2001\\\\u2002\\\\u2003\\\\u2004\\\\u2005\\\\u2006\\\\u2007\\\\u2008\\\\u2009\\\\u200a\\\\u202f\\\\u205f\\\\u3000',\n rsUpperRange = 'A-Z\\\\xc0-\\\\xd6\\\\xd8-\\\\xde',\n rsVarRange = '\\\\ufe0e\\\\ufe0f',\n rsBreakRange = rsMathOpRange + rsNonCharRange + rsPunctuationRange + rsSpaceRange;\n\n /** Used to compose unicode capture groups. */\n var rsApos = \"['\\u2019]\",\n rsAstral = '[' + rsAstralRange + ']',\n rsBreak = '[' + rsBreakRange + ']',\n rsCombo = '[' + rsComboRange + ']',\n rsDigits = '\\\\d+',\n rsDingbat = '[' + rsDingbatRange + ']',\n rsLower = '[' + rsLowerRange + ']',\n rsMisc = '[^' + rsAstralRange + rsBreakRange + rsDigits + rsDingbatRange + rsLowerRange + rsUpperRange + ']',\n rsFitz = '\\\\ud83c[\\\\udffb-\\\\udfff]',\n rsModifier = '(?:' + rsCombo + '|' + rsFitz + ')',\n rsNonAstral = '[^' + rsAstralRange + ']',\n rsRegional = '(?:\\\\ud83c[\\\\udde6-\\\\uddff]){2}',\n rsSurrPair = '[\\\\ud800-\\\\udbff][\\\\udc00-\\\\udfff]',\n rsUpper = '[' + rsUpperRange + ']',\n rsZWJ = '\\\\u200d';\n\n /** Used to compose unicode regexes. */\n var rsMiscLower = '(?:' + rsLower + '|' + rsMisc + ')',\n rsMiscUpper = '(?:' + rsUpper + '|' + rsMisc + ')',\n rsOptContrLower = '(?:' + rsApos + '(?:d|ll|m|re|s|t|ve))?',\n rsOptContrUpper = '(?:' + rsApos + '(?:D|LL|M|RE|S|T|VE))?',\n reOptMod = rsModifier + '?',\n rsOptVar = '[' + rsVarRange + ']?',\n rsOptJoin = '(?:' + rsZWJ + '(?:' + [rsNonAstral, rsRegional, rsSurrPair].join('|') + ')' + rsOptVar + reOptMod + ')*',\n rsOrdLower = '\\\\d*(?:1st|2nd|3rd|(?![123])\\\\dth)(?=\\\\b|[A-Z_])',\n rsOrdUpper = '\\\\d*(?:1ST|2ND|3RD|(?![123])\\\\dTH)(?=\\\\b|[a-z_])',\n rsSeq = rsOptVar + reOptMod + rsOptJoin,\n rsEmoji = '(?:' + [rsDingbat, rsRegional, rsSurrPair].join('|') + ')' + rsSeq,\n rsSymbol = '(?:' + [rsNonAstral + rsCombo + '?', rsCombo, rsRegional, rsSurrPair, rsAstral].join('|') + ')';\n\n /** Used to match apostrophes. */\n var reApos = RegExp(rsApos, 'g');\n\n /**\n * Used to match [combining diacritical marks](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks) and\n * [combining diacritical marks for symbols](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks_for_Symbols).\n */\n var reComboMark = RegExp(rsCombo, 'g');\n\n /** Used to match [string symbols](https://mathiasbynens.be/notes/javascript-unicode). */\n var reUnicode = RegExp(rsFitz + '(?=' + rsFitz + ')|' + rsSymbol + rsSeq, 'g');\n\n /** Used to match complex or compound words. */\n var reUnicodeWord = RegExp([\n rsUpper + '?' + rsLower + '+' + rsOptContrLower + '(?=' + [rsBreak, rsUpper, '$'].join('|') + ')',\n rsMiscUpper + '+' + rsOptContrUpper + '(?=' + [rsBreak, rsUpper + rsMiscLower, '$'].join('|') + ')',\n rsUpper + '?' + rsMiscLower + '+' + rsOptContrLower,\n rsUpper + '+' + rsOptContrUpper,\n rsOrdUpper,\n rsOrdLower,\n rsDigits,\n rsEmoji\n ].join('|'), 'g');\n\n /** Used to detect strings with [zero-width joiners or code points from the astral planes](http://eev.ee/blog/2015/09/12/dark-corners-of-unicode/). */\n var reHasUnicode = RegExp('[' + rsZWJ + rsAstralRange + rsComboRange + rsVarRange + ']');\n\n /** Used to detect strings that need a more robust regexp to match words. */\n var reHasUnicodeWord = /[a-z][A-Z]|[A-Z]{2}[a-z]|[0-9][a-zA-Z]|[a-zA-Z][0-9]|[^a-zA-Z0-9 ]/;\n\n /** Used to assign default `context` object properties. */\n var contextProps = [\n 'Array', 'Buffer', 'DataView', 'Date', 'Error', 'Float32Array', 'Float64Array',\n 'Function', 'Int8Array', 'Int16Array', 'Int32Array', 'Map', 'Math', 'Object',\n 'Promise', 'RegExp', 'Set', 'String', 'Symbol', 'TypeError', 'Uint8Array',\n 'Uint8ClampedArray', 'Uint16Array', 'Uint32Array', 'WeakMap',\n '_', 'clearTimeout', 'isFinite', 'parseInt', 'setTimeout'\n ];\n\n /** Used to make template sourceURLs easier to identify. */\n var templateCounter = -1;\n\n /** Used to identify `toStringTag` values of typed arrays. */\n var typedArrayTags = {};\n typedArrayTags[float32Tag] = typedArrayTags[float64Tag] =\n typedArrayTags[int8Tag] = typedArrayTags[int16Tag] =\n typedArrayTags[int32Tag] = typedArrayTags[uint8Tag] =\n typedArrayTags[uint8ClampedTag] = typedArrayTags[uint16Tag] =\n typedArrayTags[uint32Tag] = true;\n typedArrayTags[argsTag] = typedArrayTags[arrayTag] =\n typedArrayTags[arrayBufferTag] = typedArrayTags[boolTag] =\n typedArrayTags[dataViewTag] = typedArrayTags[dateTag] =\n typedArrayTags[errorTag] = typedArrayTags[funcTag] =\n typedArrayTags[mapTag] = typedArrayTags[numberTag] =\n typedArrayTags[objectTag] = typedArrayTags[regexpTag] =\n typedArrayTags[setTag] = typedArrayTags[stringTag] =\n typedArrayTags[weakMapTag] = false;\n\n /** Used to identify `toStringTag` values supported by `_.clone`. */\n var cloneableTags = {};\n cloneableTags[argsTag] = cloneableTags[arrayTag] =\n cloneableTags[arrayBufferTag] = cloneableTags[dataViewTag] =\n cloneableTags[boolTag] = cloneableTags[dateTag] =\n cloneableTags[float32Tag] = cloneableTags[float64Tag] =\n cloneableTags[int8Tag] = cloneableTags[int16Tag] =\n cloneableTags[int32Tag] = cloneableTags[mapTag] =\n cloneableTags[numberTag] = cloneableTags[objectTag] =\n cloneableTags[regexpTag] = cloneableTags[setTag] =\n cloneableTags[stringTag] = cloneableTags[symbolTag] =\n cloneableTags[uint8Tag] = cloneableTags[uint8ClampedTag] =\n cloneableTags[uint16Tag] = cloneableTags[uint32Tag] = true;\n cloneableTags[errorTag] = cloneableTags[funcTag] =\n cloneableTags[weakMapTag] = false;\n\n /** Used to map Latin Unicode letters to basic Latin letters. */\n var deburredLetters = {\n // Latin-1 Supplement block.\n '\\xc0': 'A', '\\xc1': 'A', '\\xc2': 'A', '\\xc3': 'A', '\\xc4': 'A', '\\xc5': 'A',\n '\\xe0': 'a', '\\xe1': 'a', '\\xe2': 'a', '\\xe3': 'a', '\\xe4': 'a', '\\xe5': 'a',\n '\\xc7': 'C', '\\xe7': 'c',\n '\\xd0': 'D', '\\xf0': 'd',\n '\\xc8': 'E', '\\xc9': 'E', '\\xca': 'E', '\\xcb': 'E',\n '\\xe8': 'e', '\\xe9': 'e', '\\xea': 'e', '\\xeb': 'e',\n '\\xcc': 'I', '\\xcd': 'I', '\\xce': 'I', '\\xcf': 'I',\n '\\xec': 'i', '\\xed': 'i', '\\xee': 'i', '\\xef': 'i',\n '\\xd1': 'N', '\\xf1': 'n',\n '\\xd2': 'O', '\\xd3': 'O', '\\xd4': 'O', '\\xd5': 'O', '\\xd6': 'O', '\\xd8': 'O',\n '\\xf2': 'o', '\\xf3': 'o', '\\xf4': 'o', '\\xf5': 'o', '\\xf6': 'o', '\\xf8': 'o',\n '\\xd9': 'U', '\\xda': 'U', '\\xdb': 'U', '\\xdc': 'U',\n '\\xf9': 'u', '\\xfa': 'u', '\\xfb': 'u', '\\xfc': 'u',\n '\\xdd': 'Y', '\\xfd': 'y', '\\xff': 'y',\n '\\xc6': 'Ae', '\\xe6': 'ae',\n '\\xde': 'Th', '\\xfe': 'th',\n '\\xdf': 'ss',\n // Latin Extended-A block.\n '\\u0100': 'A', '\\u0102': 'A', '\\u0104': 'A',\n '\\u0101': 'a', '\\u0103': 'a', '\\u0105': 'a',\n '\\u0106': 'C', '\\u0108': 'C', '\\u010a': 'C', '\\u010c': 'C',\n '\\u0107': 'c', '\\u0109': 'c', '\\u010b': 'c', '\\u010d': 'c',\n '\\u010e': 'D', '\\u0110': 'D', '\\u010f': 'd', '\\u0111': 'd',\n '\\u0112': 'E', '\\u0114': 'E', '\\u0116': 'E', '\\u0118': 'E', '\\u011a': 'E',\n '\\u0113': 'e', '\\u0115': 'e', '\\u0117': 'e', '\\u0119': 'e', '\\u011b': 'e',\n '\\u011c': 'G', '\\u011e': 'G', '\\u0120': 'G', '\\u0122': 'G',\n '\\u011d': 'g', '\\u011f': 'g', '\\u0121': 'g', '\\u0123': 'g',\n '\\u0124': 'H', '\\u0126': 'H', '\\u0125': 'h', '\\u0127': 'h',\n '\\u0128': 'I', '\\u012a': 'I', '\\u012c': 'I', '\\u012e': 'I', '\\u0130': 'I',\n '\\u0129': 'i', '\\u012b': 'i', '\\u012d': 'i', '\\u012f': 'i', '\\u0131': 'i',\n '\\u0134': 'J', '\\u0135': 'j',\n '\\u0136': 'K', '\\u0137': 'k', '\\u0138': 'k',\n '\\u0139': 'L', '\\u013b': 'L', '\\u013d': 'L', '\\u013f': 'L', '\\u0141': 'L',\n '\\u013a': 'l', '\\u013c': 'l', '\\u013e': 'l', '\\u0140': 'l', '\\u0142': 'l',\n '\\u0143': 'N', '\\u0145': 'N', '\\u0147': 'N', '\\u014a': 'N',\n '\\u0144': 'n', '\\u0146': 'n', '\\u0148': 'n', '\\u014b': 'n',\n '\\u014c': 'O', '\\u014e': 'O', '\\u0150': 'O',\n '\\u014d': 'o', '\\u014f': 'o', '\\u0151': 'o',\n '\\u0154': 'R', '\\u0156': 'R', '\\u0158': 'R',\n '\\u0155': 'r', '\\u0157': 'r', '\\u0159': 'r',\n '\\u015a': 'S', '\\u015c': 'S', '\\u015e': 'S', '\\u0160': 'S',\n '\\u015b': 's', '\\u015d': 's', '\\u015f': 's', '\\u0161': 's',\n '\\u0162': 'T', '\\u0164': 'T', '\\u0166': 'T',\n '\\u0163': 't', '\\u0165': 't', '\\u0167': 't',\n '\\u0168': 'U', '\\u016a': 'U', '\\u016c': 'U', '\\u016e': 'U', '\\u0170': 'U', '\\u0172': 'U',\n '\\u0169': 'u', '\\u016b': 'u', '\\u016d': 'u', '\\u016f': 'u', '\\u0171': 'u', '\\u0173': 'u',\n '\\u0174': 'W', '\\u0175': 'w',\n '\\u0176': 'Y', '\\u0177': 'y', '\\u0178': 'Y',\n '\\u0179': 'Z', '\\u017b': 'Z', '\\u017d': 'Z',\n '\\u017a': 'z', '\\u017c': 'z', '\\u017e': 'z',\n '\\u0132': 'IJ', '\\u0133': 'ij',\n '\\u0152': 'Oe', '\\u0153': 'oe',\n '\\u0149': \"'n\", '\\u017f': 's'\n };\n\n /** Used to map characters to HTML entities. */\n var htmlEscapes = {\n '&': '&',\n '<': '<',\n '>': '>',\n '\"': '"',\n \"'\": '''\n };\n\n /** Used to map HTML entities to characters. */\n var htmlUnescapes = {\n '&': '&',\n '<': '<',\n '>': '>',\n '"': '\"',\n ''': \"'\"\n };\n\n /** Used to escape characters for inclusion in compiled string literals. */\n var stringEscapes = {\n '\\\\': '\\\\',\n \"'\": \"'\",\n '\\n': 'n',\n '\\r': 'r',\n '\\u2028': 'u2028',\n '\\u2029': 'u2029'\n };\n\n /** Built-in method references without a dependency on `root`. */\n var freeParseFloat = parseFloat,\n freeParseInt = parseInt;\n\n /** Detect free variable `global` from Node.js. */\n var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;\n\n /** Detect free variable `self`. */\n var freeSelf = typeof self == 'object' && self && self.Object === Object && self;\n\n /** Used as a reference to the global object. */\n var root = freeGlobal || freeSelf || Function('return this')();\n\n /** Detect free variable `exports`. */\n var freeExports = typeof exports == 'object' && exports && !exports.nodeType && exports;\n\n /** Detect free variable `module`. */\n var freeModule = freeExports && typeof module == 'object' && module && !module.nodeType && module;\n\n /** Detect the popular CommonJS extension `module.exports`. */\n var moduleExports = freeModule && freeModule.exports === freeExports;\n\n /** Detect free variable `process` from Node.js. */\n var freeProcess = moduleExports && freeGlobal.process;\n\n /** Used to access faster Node.js helpers. */\n var nodeUtil = (function() {\n try {\n // Use `util.types` for Node.js 10+.\n var types = freeModule && freeModule.require && freeModule.require('util').types;\n\n if (types) {\n return types;\n }\n\n // Legacy `process.binding('util')` for Node.js < 10.\n return freeProcess && freeProcess.binding && freeProcess.binding('util');\n } catch (e) {}\n }());\n\n /* Node.js helper references. */\n var nodeIsArrayBuffer = nodeUtil && nodeUtil.isArrayBuffer,\n nodeIsDate = nodeUtil && nodeUtil.isDate,\n nodeIsMap = nodeUtil && nodeUtil.isMap,\n nodeIsRegExp = nodeUtil && nodeUtil.isRegExp,\n nodeIsSet = nodeUtil && nodeUtil.isSet,\n nodeIsTypedArray = nodeUtil && nodeUtil.isTypedArray;\n\n /*--------------------------------------------------------------------------*/\n\n /**\n * A faster alternative to `Function#apply`, this function invokes `func`\n * with the `this` binding of `thisArg` and the arguments of `args`.\n *\n * @private\n * @param {Function} func The function to invoke.\n * @param {*} thisArg The `this` binding of `func`.\n * @param {Array} args The arguments to invoke `func` with.\n * @returns {*} Returns the result of `func`.\n */\n function apply(func, thisArg, args) {\n switch (args.length) {\n case 0: return func.call(thisArg);\n case 1: return func.call(thisArg, args[0]);\n case 2: return func.call(thisArg, args[0], args[1]);\n case 3: return func.call(thisArg, args[0], args[1], args[2]);\n }\n return func.apply(thisArg, args);\n }\n\n /**\n * A specialized version of `baseAggregator` for arrays.\n *\n * @private\n * @param {Array} [array] The array to iterate over.\n * @param {Function} setter The function to set `accumulator` values.\n * @param {Function} iteratee The iteratee to transform keys.\n * @param {Object} accumulator The initial aggregated object.\n * @returns {Function} Returns `accumulator`.\n */\n function arrayAggregator(array, setter, iteratee, accumulator) {\n var index = -1,\n length = array == null ? 0 : array.length;\n\n while (++index < length) {\n var value = array[index];\n setter(accumulator, value, iteratee(value), array);\n }\n return accumulator;\n }\n\n /**\n * A specialized version of `_.forEach` for arrays without support for\n * iteratee shorthands.\n *\n * @private\n * @param {Array} [array] The array to iterate over.\n * @param {Function} iteratee The function invoked per iteration.\n * @returns {Array} Returns `array`.\n */\n function arrayEach(array, iteratee) {\n var index = -1,\n length = array == null ? 0 : array.length;\n\n while (++index < length) {\n if (iteratee(array[index], index, array) === false) {\n break;\n }\n }\n return array;\n }\n\n /**\n * A specialized version of `_.forEachRight` for arrays without support for\n * iteratee shorthands.\n *\n * @private\n * @param {Array} [array] The array to iterate over.\n * @param {Function} iteratee The function invoked per iteration.\n * @returns {Array} Returns `array`.\n */\n function arrayEachRight(array, iteratee) {\n var length = array == null ? 0 : array.length;\n\n while (length--) {\n if (iteratee(array[length], length, array) === false) {\n break;\n }\n }\n return array;\n }\n\n /**\n * A specialized version of `_.every` for arrays without support for\n * iteratee shorthands.\n *\n * @private\n * @param {Array} [array] The array to iterate over.\n * @param {Function} predicate The function invoked per iteration.\n * @returns {boolean} Returns `true` if all elements pass the predicate check,\n * else `false`.\n */\n function arrayEvery(array, predicate) {\n var index = -1,\n length = array == null ? 0 : array.length;\n\n while (++index < length) {\n if (!predicate(array[index], index, array)) {\n return false;\n }\n }\n return true;\n }\n\n /**\n * A specialized version of `_.filter` for arrays without support for\n * iteratee shorthands.\n *\n * @private\n * @param {Array} [array] The array to iterate over.\n * @param {Function} predicate The function invoked per iteration.\n * @returns {Array} Returns the new filtered array.\n */\n function arrayFilter(array, predicate) {\n var index = -1,\n length = array == null ? 0 : array.length,\n resIndex = 0,\n result = [];\n\n while (++index < length) {\n var value = array[index];\n if (predicate(value, index, array)) {\n result[resIndex++] = value;\n }\n }\n return result;\n }\n\n /**\n * A specialized version of `_.includes` for arrays without support for\n * specifying an index to search from.\n *\n * @private\n * @param {Array} [array] The array to inspect.\n * @param {*} target The value to search for.\n * @returns {boolean} Returns `true` if `target` is found, else `false`.\n */\n function arrayIncludes(array, value) {\n var length = array == null ? 0 : array.length;\n return !!length && baseIndexOf(array, value, 0) > -1;\n }\n\n /**\n * This function is like `arrayIncludes` except that it accepts a comparator.\n *\n * @private\n * @param {Array} [array] The array to inspect.\n * @param {*} target The value to search for.\n * @param {Function} comparator The comparator invoked per element.\n * @returns {boolean} Returns `true` if `target` is found, else `false`.\n */\n function arrayIncludesWith(array, value, comparator) {\n var index = -1,\n length = array == null ? 0 : array.length;\n\n while (++index < length) {\n if (comparator(value, array[index])) {\n return true;\n }\n }\n return false;\n }\n\n /**\n * A specialized version of `_.map` for arrays without support for iteratee\n * shorthands.\n *\n * @private\n * @param {Array} [array] The array to iterate over.\n * @param {Function} iteratee The function invoked per iteration.\n * @returns {Array} Returns the new mapped array.\n */\n function arrayMap(array, iteratee) {\n var index = -1,\n length = array == null ? 0 : array.length,\n result = Array(length);\n\n while (++index < length) {\n result[index] = iteratee(array[index], index, array);\n }\n return result;\n }\n\n /**\n * Appends the elements of `values` to `array`.\n *\n * @private\n * @param {Array} array The array to modify.\n * @param {Array} values The values to append.\n * @returns {Array} Returns `array`.\n */\n function arrayPush(array, values) {\n var index = -1,\n length = values.length,\n offset = array.length;\n\n while (++index < length) {\n array[offset + index] = values[index];\n }\n return array;\n }\n\n /**\n * A specialized version of `_.reduce` for arrays without support for\n * iteratee shorthands.\n *\n * @private\n * @param {Array} [array] The array to iterate over.\n * @param {Function} iteratee The function invoked per iteration.\n * @param {*} [accumulator] The initial value.\n * @param {boolean} [initAccum] Specify using the first element of `array` as\n * the initial value.\n * @returns {*} Returns the accumulated value.\n */\n function arrayReduce(array, iteratee, accumulator, initAccum) {\n var index = -1,\n length = array == null ? 0 : array.length;\n\n if (initAccum && length) {\n accumulator = array[++index];\n }\n while (++index < length) {\n accumulator = iteratee(accumulator, array[index], index, array);\n }\n return accumulator;\n }\n\n /**\n * A specialized version of `_.reduceRight` for arrays without support for\n * iteratee shorthands.\n *\n * @private\n * @param {Array} [array] The array to iterate over.\n * @param {Function} iteratee The function invoked per iteration.\n * @param {*} [accumulator] The initial value.\n * @param {boolean} [initAccum] Specify using the last element of `array` as\n * the initial value.\n * @returns {*} Returns the accumulated value.\n */\n function arrayReduceRight(array, iteratee, accumulator, initAccum) {\n var length = array == null ? 0 : array.length;\n if (initAccum && length) {\n accumulator = array[--length];\n }\n while (length--) {\n accumulator = iteratee(accumulator, array[length], length, array);\n }\n return accumulator;\n }\n\n /**\n * A specialized version of `_.some` for arrays without support for iteratee\n * shorthands.\n *\n * @private\n * @param {Array} [array] The array to iterate over.\n * @param {Function} predicate The function invoked per iteration.\n * @returns {boolean} Returns `true` if any element passes the predicate check,\n * else `false`.\n */\n function arraySome(array, predicate) {\n var index = -1,\n length = array == null ? 0 : array.length;\n\n while (++index < length) {\n if (predicate(array[index], index, array)) {\n return true;\n }\n }\n return false;\n }\n\n /**\n * Gets the size of an ASCII `string`.\n *\n * @private\n * @param {string} string The string inspect.\n * @returns {number} Returns the string size.\n */\n var asciiSize = baseProperty('length');\n\n /**\n * Converts an ASCII `string` to an array.\n *\n * @private\n * @param {string} string The string to convert.\n * @returns {Array} Returns the converted array.\n */\n function asciiToArray(string) {\n return string.split('');\n }\n\n /**\n * Splits an ASCII `string` into an array of its words.\n *\n * @private\n * @param {string} The string to inspect.\n * @returns {Array} Returns the words of `string`.\n */\n function asciiWords(string) {\n return string.match(reAsciiWord) || [];\n }\n\n /**\n * The base implementation of methods like `_.findKey` and `_.findLastKey`,\n * without support for iteratee shorthands, which iterates over `collection`\n * using `eachFunc`.\n *\n * @private\n * @param {Array|Object} collection The collection to inspect.\n * @param {Function} predicate The function invoked per iteration.\n * @param {Function} eachFunc The function to iterate over `collection`.\n * @returns {*} Returns the found element or its key, else `undefined`.\n */\n function baseFindKey(collection, predicate, eachFunc) {\n var result;\n eachFunc(collection, function(value, key, collection) {\n if (predicate(value, key, collection)) {\n result = key;\n return false;\n }\n });\n return result;\n }\n\n /**\n * The base implementation of `_.findIndex` and `_.findLastIndex` without\n * support for iteratee shorthands.\n *\n * @private\n * @param {Array} array The array to inspect.\n * @param {Function} predicate The function invoked per iteration.\n * @param {number} fromIndex The index to search from.\n * @param {boolean} [fromRight] Specify iterating from right to left.\n * @returns {number} Returns the index of the matched value, else `-1`.\n */\n function baseFindIndex(array, predicate, fromIndex, fromRight) {\n var length = array.length,\n index = fromIndex + (fromRight ? 1 : -1);\n\n while ((fromRight ? index-- : ++index < length)) {\n if (predicate(array[index], index, array)) {\n return index;\n }\n }\n return -1;\n }\n\n /**\n * The base implementation of `_.indexOf` without `fromIndex` bounds checks.\n *\n * @private\n * @param {Array} array The array to inspect.\n * @param {*} value The value to search for.\n * @param {number} fromIndex The index to search from.\n * @returns {number} Returns the index of the matched value, else `-1`.\n */\n function baseIndexOf(array, value, fromIndex) {\n return value === value\n ? strictIndexOf(array, value, fromIndex)\n : baseFindIndex(array, baseIsNaN, fromIndex);\n }\n\n /**\n * This function is like `baseIndexOf` except that it accepts a comparator.\n *\n * @private\n * @param {Array} array The array to inspect.\n * @param {*} value The value to search for.\n * @param {number} fromIndex The index to search from.\n * @param {Function} comparator The comparator invoked per element.\n * @returns {number} Returns the index of the matched value, else `-1`.\n */\n function baseIndexOfWith(array, value, fromIndex, comparator) {\n var index = fromIndex - 1,\n length = array.length;\n\n while (++index < length) {\n if (comparator(array[index], value)) {\n return index;\n }\n }\n return -1;\n }\n\n /**\n * The base implementation of `_.isNaN` without support for number objects.\n *\n * @private\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is `NaN`, else `false`.\n */\n function baseIsNaN(value) {\n return value !== value;\n }\n\n /**\n * The base implementation of `_.mean` and `_.meanBy` without support for\n * iteratee shorthands.\n *\n * @private\n * @param {Array} array The array to iterate over.\n * @param {Function} iteratee The function invoked per iteration.\n * @returns {number} Returns the mean.\n */\n function baseMean(array, iteratee) {\n var length = array == null ? 0 : array.length;\n return length ? (baseSum(array, iteratee) / length) : NAN;\n }\n\n /**\n * The base implementation of `_.property` without support for deep paths.\n *\n * @private\n * @param {string} key The key of the property to get.\n * @returns {Function} Returns the new accessor function.\n */\n function baseProperty(key) {\n return function(object) {\n return object == null ? undefined : object[key];\n };\n }\n\n /**\n * The base implementation of `_.propertyOf` without support for deep paths.\n *\n * @private\n * @param {Object} object The object to query.\n * @returns {Function} Returns the new accessor function.\n */\n function basePropertyOf(object) {\n return function(key) {\n return object == null ? undefined : object[key];\n };\n }\n\n /**\n * The base implementation of `_.reduce` and `_.reduceRight`, without support\n * for iteratee shorthands, which iterates over `collection` using `eachFunc`.\n *\n * @private\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} iteratee The function invoked per iteration.\n * @param {*} accumulator The initial value.\n * @param {boolean} initAccum Specify using the first or last element of\n * `collection` as the initial value.\n * @param {Function} eachFunc The function to iterate over `collection`.\n * @returns {*} Returns the accumulated value.\n */\n function baseReduce(collection, iteratee, accumulator, initAccum, eachFunc) {\n eachFunc(collection, function(value, index, collection) {\n accumulator = initAccum\n ? (initAccum = false, value)\n : iteratee(accumulator, value, index, collection);\n });\n return accumulator;\n }\n\n /**\n * The base implementation of `_.sortBy` which uses `comparer` to define the\n * sort order of `array` and replaces criteria objects with their corresponding\n * values.\n *\n * @private\n * @param {Array} array The array to sort.\n * @param {Function} comparer The function to define sort order.\n * @returns {Array} Returns `array`.\n */\n function baseSortBy(array, comparer) {\n var length = array.length;\n\n array.sort(comparer);\n while (length--) {\n array[length] = array[length].value;\n }\n return array;\n }\n\n /**\n * The base implementation of `_.sum` and `_.sumBy` without support for\n * iteratee shorthands.\n *\n * @private\n * @param {Array} array The array to iterate over.\n * @param {Function} iteratee The function invoked per iteration.\n * @returns {number} Returns the sum.\n */\n function baseSum(array, iteratee) {\n var result,\n index = -1,\n length = array.length;\n\n while (++index < length) {\n var current = iteratee(array[index]);\n if (current !== undefined) {\n result = result === undefined ? current : (result + current);\n }\n }\n return result;\n }\n\n /**\n * The base implementation of `_.times` without support for iteratee shorthands\n * or max array length checks.\n *\n * @private\n * @param {number} n The number of times to invoke `iteratee`.\n * @param {Function} iteratee The function invoked per iteration.\n * @returns {Array} Returns the array of results.\n */\n function baseTimes(n, iteratee) {\n var index = -1,\n result = Array(n);\n\n while (++index < n) {\n result[index] = iteratee(index);\n }\n return result;\n }\n\n /**\n * The base implementation of `_.toPairs` and `_.toPairsIn` which creates an array\n * of key-value pairs for `object` corresponding to the property names of `props`.\n *\n * @private\n * @param {Object} object The object to query.\n * @param {Array} props The property names to get values for.\n * @returns {Object} Returns the key-value pairs.\n */\n function baseToPairs(object, props) {\n return arrayMap(props, function(key) {\n return [key, object[key]];\n });\n }\n\n /**\n * The base implementation of `_.trim`.\n *\n * @private\n * @param {string} string The string to trim.\n * @returns {string} Returns the trimmed string.\n */\n function baseTrim(string) {\n return string\n ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')\n : string;\n }\n\n /**\n * The base implementation of `_.unary` without support for storing metadata.\n *\n * @private\n * @param {Function} func The function to cap arguments for.\n * @returns {Function} Returns the new capped function.\n */\n function baseUnary(func) {\n return function(value) {\n return func(value);\n };\n }\n\n /**\n * The base implementation of `_.values` and `_.valuesIn` which creates an\n * array of `object` property values corresponding to the property names\n * of `props`.\n *\n * @private\n * @param {Object} object The object to query.\n * @param {Array} props The property names to get values for.\n * @returns {Object} Returns the array of property values.\n */\n function baseValues(object, props) {\n return arrayMap(props, function(key) {\n return object[key];\n });\n }\n\n /**\n * Checks if a `cache` value for `key` exists.\n *\n * @private\n * @param {Object} cache The cache to query.\n * @param {string} key The key of the entry to check.\n * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.\n */\n function cacheHas(cache, key) {\n return cache.has(key);\n }\n\n /**\n * Used by `_.trim` and `_.trimStart` to get the index of the first string symbol\n * that is not found in the character symbols.\n *\n * @private\n * @param {Array} strSymbols The string symbols to inspect.\n * @param {Array} chrSymbols The character symbols to find.\n * @returns {number} Returns the index of the first unmatched string symbol.\n */\n function charsStartIndex(strSymbols, chrSymbols) {\n var index = -1,\n length = strSymbols.length;\n\n while (++index < length && baseIndexOf(chrSymbols, strSymbols[index], 0) > -1) {}\n return index;\n }\n\n /**\n * Used by `_.trim` and `_.trimEnd` to get the index of the last string symbol\n * that is not found in the character symbols.\n *\n * @private\n * @param {Array} strSymbols The string symbols to inspect.\n * @param {Array} chrSymbols The character symbols to find.\n * @returns {number} Returns the index of the last unmatched string symbol.\n */\n function charsEndIndex(strSymbols, chrSymbols) {\n var index = strSymbols.length;\n\n while (index-- && baseIndexOf(chrSymbols, strSymbols[index], 0) > -1) {}\n return index;\n }\n\n /**\n * Gets the number of `placeholder` occurrences in `array`.\n *\n * @private\n * @param {Array} array The array to inspect.\n * @param {*} placeholder The placeholder to search for.\n * @returns {number} Returns the placeholder count.\n */\n function countHolders(array, placeholder) {\n var length = array.length,\n result = 0;\n\n while (length--) {\n if (array[length] === placeholder) {\n ++result;\n }\n }\n return result;\n }\n\n /**\n * Used by `_.deburr` to convert Latin-1 Supplement and Latin Extended-A\n * letters to basic Latin letters.\n *\n * @private\n * @param {string} letter The matched letter to deburr.\n * @returns {string} Returns the deburred letter.\n */\n var deburrLetter = basePropertyOf(deburredLetters);\n\n /**\n * Used by `_.escape` to convert characters to HTML entities.\n *\n * @private\n * @param {string} chr The matched character to escape.\n * @returns {string} Returns the escaped character.\n */\n var escapeHtmlChar = basePropertyOf(htmlEscapes);\n\n /**\n * Used by `_.template` to escape characters for inclusion in compiled string literals.\n *\n * @private\n * @param {string} chr The matched character to escape.\n * @returns {string} Returns the escaped character.\n */\n function escapeStringChar(chr) {\n return '\\\\' + stringEscapes[chr];\n }\n\n /**\n * Gets the value at `key` of `object`.\n *\n * @private\n * @param {Object} [object] The object to query.\n * @param {string} key The key of the property to get.\n * @returns {*} Returns the property value.\n */\n function getValue(object, key) {\n return object == null ? undefined : object[key];\n }\n\n /**\n * Checks if `string` contains Unicode symbols.\n *\n * @private\n * @param {string} string The string to inspect.\n * @returns {boolean} Returns `true` if a symbol is found, else `false`.\n */\n function hasUnicode(string) {\n return reHasUnicode.test(string);\n }\n\n /**\n * Checks if `string` contains a word composed of Unicode symbols.\n *\n * @private\n * @param {string} string The string to inspect.\n * @returns {boolean} Returns `true` if a word is found, else `false`.\n */\n function hasUnicodeWord(string) {\n return reHasUnicodeWord.test(string);\n }\n\n /**\n * Converts `iterator` to an array.\n *\n * @private\n * @param {Object} iterator The iterator to convert.\n * @returns {Array} Returns the converted array.\n */\n function iteratorToArray(iterator) {\n var data,\n result = [];\n\n while (!(data = iterator.next()).done) {\n result.push(data.value);\n }\n return result;\n }\n\n /**\n * Converts `map` to its key-value pairs.\n *\n * @private\n * @param {Object} map The map to convert.\n * @returns {Array} Returns the key-value pairs.\n */\n function mapToArray(map) {\n var index = -1,\n result = Array(map.size);\n\n map.forEach(function(value, key) {\n result[++index] = [key, value];\n });\n return result;\n }\n\n /**\n * Creates a unary function that invokes `func` with its argument transformed.\n *\n * @private\n * @param {Function} func The function to wrap.\n * @param {Function} transform The argument transform.\n * @returns {Function} Returns the new function.\n */\n function overArg(func, transform) {\n return function(arg) {\n return func(transform(arg));\n };\n }\n\n /**\n * Replaces all `placeholder` elements in `array` with an internal placeholder\n * and returns an array of their indexes.\n *\n * @private\n * @param {Array} array The array to modify.\n * @param {*} placeholder The placeholder to replace.\n * @returns {Array} Returns the new array of placeholder indexes.\n */\n function replaceHolders(array, placeholder) {\n var index = -1,\n length = array.length,\n resIndex = 0,\n result = [];\n\n while (++index < length) {\n var value = array[index];\n if (value === placeholder || value === PLACEHOLDER) {\n array[index] = PLACEHOLDER;\n result[resIndex++] = index;\n }\n }\n return result;\n }\n\n /**\n * Converts `set` to an array of its values.\n *\n * @private\n * @param {Object} set The set to convert.\n * @returns {Array} Returns the values.\n */\n function setToArray(set) {\n var index = -1,\n result = Array(set.size);\n\n set.forEach(function(value) {\n result[++index] = value;\n });\n return result;\n }\n\n /**\n * Converts `set` to its value-value pairs.\n *\n * @private\n * @param {Object} set The set to convert.\n * @returns {Array} Returns the value-value pairs.\n */\n function setToPairs(set) {\n var index = -1,\n result = Array(set.size);\n\n set.forEach(function(value) {\n result[++index] = [value, value];\n });\n return result;\n }\n\n /**\n * A specialized version of `_.indexOf` which performs strict equality\n * comparisons of values, i.e. `===`.\n *\n * @private\n * @param {Array} array The array to inspect.\n * @param {*} value The value to search for.\n * @param {number} fromIndex The index to search from.\n * @returns {number} Returns the index of the matched value, else `-1`.\n */\n function strictIndexOf(array, value, fromIndex) {\n var index = fromIndex - 1,\n length = array.length;\n\n while (++index < length) {\n if (array[index] === value) {\n return index;\n }\n }\n return -1;\n }\n\n /**\n * A specialized version of `_.lastIndexOf` which performs strict equality\n * comparisons of values, i.e. `===`.\n *\n * @private\n * @param {Array} array The array to inspect.\n * @param {*} value The value to search for.\n * @param {number} fromIndex The index to search from.\n * @returns {number} Returns the index of the matched value, else `-1`.\n */\n function strictLastIndexOf(array, value, fromIndex) {\n var index = fromIndex + 1;\n while (index--) {\n if (array[index] === value) {\n return index;\n }\n }\n return index;\n }\n\n /**\n * Gets the number of symbols in `string`.\n *\n * @private\n * @param {string} string The string to inspect.\n * @returns {number} Returns the string size.\n */\n function stringSize(string) {\n return hasUnicode(string)\n ? unicodeSize(string)\n : asciiSize(string);\n }\n\n /**\n * Converts `string` to an array.\n *\n * @private\n * @param {string} string The string to convert.\n * @returns {Array} Returns the converted array.\n */\n function stringToArray(string) {\n return hasUnicode(string)\n ? unicodeToArray(string)\n : asciiToArray(string);\n }\n\n /**\n * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace\n * character of `string`.\n *\n * @private\n * @param {string} string The string to inspect.\n * @returns {number} Returns the index of the last non-whitespace character.\n */\n function trimmedEndIndex(string) {\n var index = string.length;\n\n while (index-- && reWhitespace.test(string.charAt(index))) {}\n return index;\n }\n\n /**\n * Used by `_.unescape` to convert HTML entities to characters.\n *\n * @private\n * @param {string} chr The matched character to unescape.\n * @returns {string} Returns the unescaped character.\n */\n var unescapeHtmlChar = basePropertyOf(htmlUnescapes);\n\n /**\n * Gets the size of a Unicode `string`.\n *\n * @private\n * @param {string} string The string inspect.\n * @returns {number} Returns the string size.\n */\n function unicodeSize(string) {\n var result = reUnicode.lastIndex = 0;\n while (reUnicode.test(string)) {\n ++result;\n }\n return result;\n }\n\n /**\n * Converts a Unicode `string` to an array.\n *\n * @private\n * @param {string} string The string to convert.\n * @returns {Array} Returns the converted array.\n */\n function unicodeToArray(string) {\n return string.match(reUnicode) || [];\n }\n\n /**\n * Splits a Unicode `string` into an array of its words.\n *\n * @private\n * @param {string} The string to inspect.\n * @returns {Array} Returns the words of `string`.\n */\n function unicodeWords(string) {\n return string.match(reUnicodeWord) || [];\n }\n\n /*--------------------------------------------------------------------------*/\n\n /**\n * Create a new pristine `lodash` function using the `context` object.\n *\n * @static\n * @memberOf _\n * @since 1.1.0\n * @category Util\n * @param {Object} [context=root] The context object.\n * @returns {Function} Returns a new `lodash` function.\n * @example\n *\n * _.mixin({ 'foo': _.constant('foo') });\n *\n * var lodash = _.runInContext();\n * lodash.mixin({ 'bar': lodash.constant('bar') });\n *\n * _.isFunction(_.foo);\n * // => true\n * _.isFunction(_.bar);\n * // => false\n *\n * lodash.isFunction(lodash.foo);\n * // => false\n * lodash.isFunction(lodash.bar);\n * // => true\n *\n * // Create a suped-up `defer` in Node.js.\n * var defer = _.runInContext({ 'setTimeout': setImmediate }).defer;\n */\n var runInContext = (function runInContext(context) {\n context = context == null ? root : _.defaults(root.Object(), context, _.pick(root, contextProps));\n\n /** Built-in constructor references. */\n var Array = context.Array,\n Date = context.Date,\n Error = context.Error,\n Function = context.Function,\n Math = context.Math,\n Object = context.Object,\n RegExp = context.RegExp,\n String = context.String,\n TypeError = context.TypeError;\n\n /** Used for built-in method references. */\n var arrayProto = Array.prototype,\n funcProto = Function.prototype,\n objectProto = Object.prototype;\n\n /** Used to detect overreaching core-js shims. */\n var coreJsData = context['__core-js_shared__'];\n\n /** Used to resolve the decompiled source of functions. */\n var funcToString = funcProto.toString;\n\n /** Used to check objects for own properties. */\n var hasOwnProperty = objectProto.hasOwnProperty;\n\n /** Used to generate unique IDs. */\n var idCounter = 0;\n\n /** Used to detect methods masquerading as native. */\n var maskSrcKey = (function() {\n var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || '');\n return uid ? ('Symbol(src)_1.' + uid) : '';\n }());\n\n /**\n * Used to resolve the\n * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)\n * of values.\n */\n var nativeObjectToString = objectProto.toString;\n\n /** Used to infer the `Object` constructor. */\n var objectCtorString = funcToString.call(Object);\n\n /** Used to restore the original `_` reference in `_.noConflict`. */\n var oldDash = root._;\n\n /** Used to detect if a method is native. */\n var reIsNative = RegExp('^' +\n funcToString.call(hasOwnProperty).replace(reRegExpChar, '\\\\$&')\n .replace(/hasOwnProperty|(function).*?(?=\\\\\\()| for .+?(?=\\\\\\])/g, '$1.*?') + '$'\n );\n\n /** Built-in value references. */\n var Buffer = moduleExports ? context.Buffer : undefined,\n Symbol = context.Symbol,\n Uint8Array = context.Uint8Array,\n allocUnsafe = Buffer ? Buffer.allocUnsafe : undefined,\n getPrototype = overArg(Object.getPrototypeOf, Object),\n objectCreate = Object.create,\n propertyIsEnumerable = objectProto.propertyIsEnumerable,\n splice = arrayProto.splice,\n spreadableSymbol = Symbol ? Symbol.isConcatSpreadable : undefined,\n symIterator = Symbol ? Symbol.iterator : undefined,\n symToStringTag = Symbol ? Symbol.toStringTag : undefined;\n\n var defineProperty = (function() {\n try {\n var func = getNative(Object, 'defineProperty');\n func({}, '', {});\n return func;\n } catch (e) {}\n }());\n\n /** Mocked built-ins. */\n var ctxClearTimeout = context.clearTimeout !== root.clearTimeout && context.clearTimeout,\n ctxNow = Date && Date.now !== root.Date.now && Date.now,\n ctxSetTimeout = context.setTimeout !== root.setTimeout && context.setTimeout;\n\n /* Built-in method references for those with the same name as other `lodash` methods. */\n var nativeCeil = Math.ceil,\n nativeFloor = Math.floor,\n nativeGetSymbols = Object.getOwnPropertySymbols,\n nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined,\n nativeIsFinite = context.isFinite,\n nativeJoin = arrayProto.join,\n nativeKeys = overArg(Object.keys, Object),\n nativeMax = Math.max,\n nativeMin = Math.min,\n nativeNow = Date.now,\n nativeParseInt = context.parseInt,\n nativeRandom = Math.random,\n nativeReverse = arrayProto.reverse;\n\n /* Built-in method references that are verified to be native. */\n var DataView = getNative(context, 'DataView'),\n Map = getNative(context, 'Map'),\n Promise = getNative(context, 'Promise'),\n Set = getNative(context, 'Set'),\n WeakMap = getNative(context, 'WeakMap'),\n nativeCreate = getNative(Object, 'create');\n\n /** Used to store function metadata. */\n var metaMap = WeakMap && new WeakMap;\n\n /** Used to lookup unminified function names. */\n var realNames = {};\n\n /** Used to detect maps, sets, and weakmaps. */\n var dataViewCtorString = toSource(DataView),\n mapCtorString = toSource(Map),\n promiseCtorString = toSource(Promise),\n setCtorString = toSource(Set),\n weakMapCtorString = toSource(WeakMap);\n\n /** Used to convert symbols to primitives and strings. */\n var symbolProto = Symbol ? Symbol.prototype : undefined,\n symbolValueOf = symbolProto ? symbolProto.valueOf : undefined,\n symbolToString = symbolProto ? symbolProto.toString : undefined;\n\n /*------------------------------------------------------------------------*/\n\n /**\n * Creates a `lodash` object which wraps `value` to enable implicit method\n * chain sequences. Methods that operate on and return arrays, collections,\n * and functions can be chained together. Methods that retrieve a single value\n * or may return a primitive value will automatically end the chain sequence\n * and return the unwrapped value. Otherwise, the value must be unwrapped\n * with `_#value`.\n *\n * Explicit chain sequences, which must be unwrapped with `_#value`, may be\n * enabled using `_.chain`.\n *\n * The execution of chained methods is lazy, that is, it's deferred until\n * `_#value` is implicitly or explicitly called.\n *\n * Lazy evaluation allows several methods to support shortcut fusion.\n * Shortcut fusion is an optimization to merge iteratee calls; this avoids\n * the creation of intermediate arrays and can greatly reduce the number of\n * iteratee executions. Sections of a chain sequence qualify for shortcut\n * fusion if the section is applied to an array and iteratees accept only\n * one argument. The heuristic for whether a section qualifies for shortcut\n * fusion is subject to change.\n *\n * Chaining is supported in custom builds as long as the `_#value` method is\n * directly or indirectly included in the build.\n *\n * In addition to lodash methods, wrappers have `Array` and `String` methods.\n *\n * The wrapper `Array` methods are:\n * `concat`, `join`, `pop`, `push`, `shift`, `sort`, `splice`, and `unshift`\n *\n * The wrapper `String` methods are:\n * `replace` and `split`\n *\n * The wrapper methods that support shortcut fusion are:\n * `at`, `compact`, `drop`, `dropRight`, `dropWhile`, `filter`, `find`,\n * `findLast`, `head`, `initial`, `last`, `map`, `reject`, `reverse`, `slice`,\n * `tail`, `take`, `takeRight`, `takeRightWhile`, `takeWhile`, and `toArray`\n *\n * The chainable wrapper methods are:\n * `after`, `ary`, `assign`, `assignIn`, `assignInWith`, `assignWith`, `at`,\n * `before`, `bind`, `bindAll`, `bindKey`, `castArray`, `chain`, `chunk`,\n * `commit`, `compact`, `concat`, `conforms`, `constant`, `countBy`, `create`,\n * `curry`, `debounce`, `defaults`, `defaultsDeep`, `defer`, `delay`,\n * `difference`, `differenceBy`, `differenceWith`, `drop`, `dropRight`,\n * `dropRightWhile`, `dropWhile`, `extend`, `extendWith`, `fill`, `filter`,\n * `flatMap`, `flatMapDeep`, `flatMapDepth`, `flatten`, `flattenDeep`,\n * `flattenDepth`, `flip`, `flow`, `flowRight`, `fromPairs`, `functions`,\n * `functionsIn`, `groupBy`, `initial`, `intersection`, `intersectionBy`,\n * `intersectionWith`, `invert`, `invertBy`, `invokeMap`, `iteratee`, `keyBy`,\n * `keys`, `keysIn`, `map`, `mapKeys`, `mapValues`, `matches`, `matchesProperty`,\n * `memoize`, `merge`, `mergeWith`, `method`, `methodOf`, `mixin`, `negate`,\n * `nthArg`, `omit`, `omitBy`, `once`, `orderBy`, `over`, `overArgs`,\n * `overEvery`, `overSome`, `partial`, `partialRight`, `partition`, `pick`,\n * `pickBy`, `plant`, `property`, `propertyOf`, `pull`, `pullAll`, `pullAllBy`,\n * `pullAllWith`, `pullAt`, `push`, `range`, `rangeRight`, `rearg`, `reject`,\n * `remove`, `rest`, `reverse`, `sampleSize`, `set`, `setWith`, `shuffle`,\n * `slice`, `sort`, `sortBy`, `splice`, `spread`, `tail`, `take`, `takeRight`,\n * `takeRightWhile`, `takeWhile`, `tap`, `throttle`, `thru`, `toArray`,\n * `toPairs`, `toPairsIn`, `toPath`, `toPlainObject`, `transform`, `unary`,\n * `union`, `unionBy`, `unionWith`, `uniq`, `uniqBy`, `uniqWith`, `unset`,\n * `unshift`, `unzip`, `unzipWith`, `update`, `updateWith`, `values`,\n * `valuesIn`, `without`, `wrap`, `xor`, `xorBy`, `xorWith`, `zip`,\n * `zipObject`, `zipObjectDeep`, and `zipWith`\n *\n * The wrapper methods that are **not** chainable by default are:\n * `add`, `attempt`, `camelCase`, `capitalize`, `ceil`, `clamp`, `clone`,\n * `cloneDeep`, `cloneDeepWith`, `cloneWith`, `conformsTo`, `deburr`,\n * `defaultTo`, `divide`, `each`, `eachRight`, `endsWith`, `eq`, `escape`,\n * `escapeRegExp`, `every`, `find`, `findIndex`, `findKey`, `findLast`,\n * `findLastIndex`, `findLastKey`, `first`, `floor`, `forEach`, `forEachRight`,\n * `forIn`, `forInRight`, `forOwn`, `forOwnRight`, `get`, `gt`, `gte`, `has`,\n * `hasIn`, `head`, `identity`, `includes`, `indexOf`, `inRange`, `invoke`,\n * `isArguments`, `isArray`, `isArrayBuffer`, `isArrayLike`, `isArrayLikeObject`,\n * `isBoolean`, `isBuffer`, `isDate`, `isElement`, `isEmpty`, `isEqual`,\n * `isEqualWith`, `isError`, `isFinite`, `isFunction`, `isInteger`, `isLength`,\n * `isMap`, `isMatch`, `isMatchWith`, `isNaN`, `isNative`, `isNil`, `isNull`,\n * `isNumber`, `isObject`, `isObjectLike`, `isPlainObject`, `isRegExp`,\n * `isSafeInteger`, `isSet`, `isString`, `isUndefined`, `isTypedArray`,\n * `isWeakMap`, `isWeakSet`, `join`, `kebabCase`, `last`, `lastIndexOf`,\n * `lowerCase`, `lowerFirst`, `lt`, `lte`, `max`, `maxBy`, `mean`, `meanBy`,\n * `min`, `minBy`, `multiply`, `noConflict`, `noop`, `now`, `nth`, `pad`,\n * `padEnd`, `padStart`, `parseInt`, `pop`, `random`, `reduce`, `reduceRight`,\n * `repeat`, `result`, `round`, `runInContext`, `sample`, `shift`, `size`,\n * `snakeCase`, `some`, `sortedIndex`, `sortedIndexBy`, `sortedLastIndex`,\n * `sortedLastIndexBy`, `startCase`, `startsWith`, `stubArray`, `stubFalse`,\n * `stubObject`, `stubString`, `stubTrue`, `subtract`, `sum`, `sumBy`,\n * `template`, `times`, `toFinite`, `toInteger`, `toJSON`, `toLength`,\n * `toLower`, `toNumber`, `toSafeInteger`, `toString`, `toUpper`, `trim`,\n * `trimEnd`, `trimStart`, `truncate`, `unescape`, `uniqueId`, `upperCase`,\n * `upperFirst`, `value`, and `words`\n *\n * @name _\n * @constructor\n * @category Seq\n * @param {*} value The value to wrap in a `lodash` instance.\n * @returns {Object} Returns the new `lodash` wrapper instance.\n * @example\n *\n * function square(n) {\n * return n * n;\n * }\n *\n * var wrapped = _([1, 2, 3]);\n *\n * // Returns an unwrapped value.\n * wrapped.reduce(_.add);\n * // => 6\n *\n * // Returns a wrapped value.\n * var squares = wrapped.map(square);\n *\n * _.isArray(squares);\n * // => false\n *\n * _.isArray(squares.value());\n * // => true\n */\n function lodash(value) {\n if (isObjectLike(value) && !isArray(value) && !(value instanceof LazyWrapper)) {\n if (value instanceof LodashWrapper) {\n return value;\n }\n if (hasOwnProperty.call(value, '__wrapped__')) {\n return wrapperClone(value);\n }\n }\n return new LodashWrapper(value);\n }\n\n /**\n * The base implementation of `_.create` without support for assigning\n * properties to the created object.\n *\n * @private\n * @param {Object} proto The object to inherit from.\n * @returns {Object} Returns the new object.\n */\n var baseCreate = (function() {\n function object() {}\n return function(proto) {\n if (!isObject(proto)) {\n return {};\n }\n if (objectCreate) {\n return objectCreate(proto);\n }\n object.prototype = proto;\n var result = new object;\n object.prototype = undefined;\n return result;\n };\n }());\n\n /**\n * The function whose prototype chain sequence wrappers inherit from.\n *\n * @private\n */\n function baseLodash() {\n // No operation performed.\n }\n\n /**\n * The base constructor for creating `lodash` wrapper objects.\n *\n * @private\n * @param {*} value The value to wrap.\n * @param {boolean} [chainAll] Enable explicit method chain sequences.\n */\n function LodashWrapper(value, chainAll) {\n this.__wrapped__ = value;\n this.__actions__ = [];\n this.__chain__ = !!chainAll;\n this.__index__ = 0;\n this.__values__ = undefined;\n }\n\n /**\n * By default, the template delimiters used by lodash are like those in\n * embedded Ruby (ERB) as well as ES2015 template strings. Change the\n * following template settings to use alternative delimiters.\n *\n * @static\n * @memberOf _\n * @type {Object}\n */\n lodash.templateSettings = {\n\n /**\n * Used to detect `data` property values to be HTML-escaped.\n *\n * @memberOf _.templateSettings\n * @type {RegExp}\n */\n 'escape': reEscape,\n\n /**\n * Used to detect code to be evaluated.\n *\n * @memberOf _.templateSettings\n * @type {RegExp}\n */\n 'evaluate': reEvaluate,\n\n /**\n * Used to detect `data` property values to inject.\n *\n * @memberOf _.templateSettings\n * @type {RegExp}\n */\n 'interpolate': reInterpolate,\n\n /**\n * Used to reference the data object in the template text.\n *\n * @memberOf _.templateSettings\n * @type {string}\n */\n 'variable': '',\n\n /**\n * Used to import variables into the compiled template.\n *\n * @memberOf _.templateSettings\n * @type {Object}\n */\n 'imports': {\n\n /**\n * A reference to the `lodash` function.\n *\n * @memberOf _.templateSettings.imports\n * @type {Function}\n */\n '_': lodash\n }\n };\n\n // Ensure wrappers are instances of `baseLodash`.\n lodash.prototype = baseLodash.prototype;\n lodash.prototype.constructor = lodash;\n\n LodashWrapper.prototype = baseCreate(baseLodash.prototype);\n LodashWrapper.prototype.constructor = LodashWrapper;\n\n /*------------------------------------------------------------------------*/\n\n /**\n * Creates a lazy wrapper object which wraps `value` to enable lazy evaluation.\n *\n * @private\n * @constructor\n * @param {*} value The value to wrap.\n */\n function LazyWrapper(value) {\n this.__wrapped__ = value;\n this.__actions__ = [];\n this.__dir__ = 1;\n this.__filtered__ = false;\n this.__iteratees__ = [];\n this.__takeCount__ = MAX_ARRAY_LENGTH;\n this.__views__ = [];\n }\n\n /**\n * Creates a clone of the lazy wrapper object.\n *\n * @private\n * @name clone\n * @memberOf LazyWrapper\n * @returns {Object} Returns the cloned `LazyWrapper` object.\n */\n function lazyClone() {\n var result = new LazyWrapper(this.__wrapped__);\n result.__actions__ = copyArray(this.__actions__);\n result.__dir__ = this.__dir__;\n result.__filtered__ = this.__filtered__;\n result.__iteratees__ = copyArray(this.__iteratees__);\n result.__takeCount__ = this.__takeCount__;\n result.__views__ = copyArray(this.__views__);\n return result;\n }\n\n /**\n * Reverses the direction of lazy iteration.\n *\n * @private\n * @name reverse\n * @memberOf LazyWrapper\n * @returns {Object} Returns the new reversed `LazyWrapper` object.\n */\n function lazyReverse() {\n if (this.__filtered__) {\n var result = new LazyWrapper(this);\n result.__dir__ = -1;\n result.__filtered__ = true;\n } else {\n result = this.clone();\n result.__dir__ *= -1;\n }\n return result;\n }\n\n /**\n * Extracts the unwrapped value from its lazy wrapper.\n *\n * @private\n * @name value\n * @memberOf LazyWrapper\n * @returns {*} Returns the unwrapped value.\n */\n function lazyValue() {\n var array = this.__wrapped__.value(),\n dir = this.__dir__,\n isArr = isArray(array),\n isRight = dir < 0,\n arrLength = isArr ? array.length : 0,\n view = getView(0, arrLength, this.__views__),\n start = view.start,\n end = view.end,\n length = end - start,\n index = isRight ? end : (start - 1),\n iteratees = this.__iteratees__,\n iterLength = iteratees.length,\n resIndex = 0,\n takeCount = nativeMin(length, this.__takeCount__);\n\n if (!isArr || (!isRight && arrLength == length && takeCount == length)) {\n return baseWrapperValue(array, this.__actions__);\n }\n var result = [];\n\n outer:\n while (length-- && resIndex < takeCount) {\n index += dir;\n\n var iterIndex = -1,\n value = array[index];\n\n while (++iterIndex < iterLength) {\n var data = iteratees[iterIndex],\n iteratee = data.iteratee,\n type = data.type,\n computed = iteratee(value);\n\n if (type == LAZY_MAP_FLAG) {\n value = computed;\n } else if (!computed) {\n if (type == LAZY_FILTER_FLAG) {\n continue outer;\n } else {\n break outer;\n }\n }\n }\n result[resIndex++] = value;\n }\n return result;\n }\n\n // Ensure `LazyWrapper` is an instance of `baseLodash`.\n LazyWrapper.prototype = baseCreate(baseLodash.prototype);\n LazyWrapper.prototype.constructor = LazyWrapper;\n\n /*------------------------------------------------------------------------*/\n\n /**\n * Creates a hash object.\n *\n * @private\n * @constructor\n * @param {Array} [entries] The key-value pairs to cache.\n */\n function Hash(entries) {\n var index = -1,\n length = entries == null ? 0 : entries.length;\n\n this.clear();\n while (++index < length) {\n var entry = entries[index];\n this.set(entry[0], entry[1]);\n }\n }\n\n /**\n * Removes all key-value entries from the hash.\n *\n * @private\n * @name clear\n * @memberOf Hash\n */\n function hashClear() {\n this.__data__ = nativeCreate ? nativeCreate(null) : {};\n this.size = 0;\n }\n\n /**\n * Removes `key` and its value from the hash.\n *\n * @private\n * @name delete\n * @memberOf Hash\n * @param {Object} hash The hash to modify.\n * @param {string} key The key of the value to remove.\n * @returns {boolean} Returns `true` if the entry was removed, else `false`.\n */\n function hashDelete(key) {\n var result = this.has(key) && delete this.__data__[key];\n this.size -= result ? 1 : 0;\n return result;\n }\n\n /**\n * Gets the hash value for `key`.\n *\n * @private\n * @name get\n * @memberOf Hash\n * @param {string} key The key of the value to get.\n * @returns {*} Returns the entry value.\n */\n function hashGet(key) {\n var data = this.__data__;\n if (nativeCreate) {\n var result = data[key];\n return result === HASH_UNDEFINED ? undefined : result;\n }\n return hasOwnProperty.call(data, key) ? data[key] : undefined;\n }\n\n /**\n * Checks if a hash value for `key` exists.\n *\n * @private\n * @name has\n * @memberOf Hash\n * @param {string} key The key of the entry to check.\n * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.\n */\n function hashHas(key) {\n var data = this.__data__;\n return nativeCreate ? (data[key] !== undefined) : hasOwnProperty.call(data, key);\n }\n\n /**\n * Sets the hash `key` to `value`.\n *\n * @private\n * @name set\n * @memberOf Hash\n * @param {string} key The key of the value to set.\n * @param {*} value The value to set.\n * @returns {Object} Returns the hash instance.\n */\n function hashSet(key, value) {\n var data = this.__data__;\n this.size += this.has(key) ? 0 : 1;\n data[key] = (nativeCreate && value === undefined) ? HASH_UNDEFINED : value;\n return this;\n }\n\n // Add methods to `Hash`.\n Hash.prototype.clear = hashClear;\n Hash.prototype['delete'] = hashDelete;\n Hash.prototype.get = hashGet;\n Hash.prototype.has = hashHas;\n Hash.prototype.set = hashSet;\n\n /*------------------------------------------------------------------------*/\n\n /**\n * Creates an list cache object.\n *\n * @private\n * @constructor\n * @param {Array} [entries] The key-value pairs to cache.\n */\n function ListCache(entries) {\n var index = -1,\n length = entries == null ? 0 : entries.length;\n\n this.clear();\n while (++index < length) {\n var entry = entries[index];\n this.set(entry[0], entry[1]);\n }\n }\n\n /**\n * Removes all key-value entries from the list cache.\n *\n * @private\n * @name clear\n * @memberOf ListCache\n */\n function listCacheClear() {\n this.__data__ = [];\n this.size = 0;\n }\n\n /**\n * Removes `key` and its value from the list cache.\n *\n * @private\n * @name delete\n * @memberOf ListCache\n * @param {string} key The key of the value to remove.\n * @returns {boolean} Returns `true` if the entry was removed, else `false`.\n */\n function listCacheDelete(key) {\n var data = this.__data__,\n index = assocIndexOf(data, key);\n\n if (index < 0) {\n return false;\n }\n var lastIndex = data.length - 1;\n if (index == lastIndex) {\n data.pop();\n } else {\n splice.call(data, index, 1);\n }\n --this.size;\n return true;\n }\n\n /**\n * Gets the list cache value for `key`.\n *\n * @private\n * @name get\n * @memberOf ListCache\n * @param {string} key The key of the value to get.\n * @returns {*} Returns the entry value.\n */\n function listCacheGet(key) {\n var data = this.__data__,\n index = assocIndexOf(data, key);\n\n return index < 0 ? undefined : data[index][1];\n }\n\n /**\n * Checks if a list cache value for `key` exists.\n *\n * @private\n * @name has\n * @memberOf ListCache\n * @param {string} key The key of the entry to check.\n * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.\n */\n function listCacheHas(key) {\n return assocIndexOf(this.__data__, key) > -1;\n }\n\n /**\n * Sets the list cache `key` to `value`.\n *\n * @private\n * @name set\n * @memberOf ListCache\n * @param {string} key The key of the value to set.\n * @param {*} value The value to set.\n * @returns {Object} Returns the list cache instance.\n */\n function listCacheSet(key, value) {\n var data = this.__data__,\n index = assocIndexOf(data, key);\n\n if (index < 0) {\n ++this.size;\n data.push([key, value]);\n } else {\n data[index][1] = value;\n }\n return this;\n }\n\n // Add methods to `ListCache`.\n ListCache.prototype.clear = listCacheClear;\n ListCache.prototype['delete'] = listCacheDelete;\n ListCache.prototype.get = listCacheGet;\n ListCache.prototype.has = listCacheHas;\n ListCache.prototype.set = listCacheSet;\n\n /*------------------------------------------------------------------------*/\n\n /**\n * Creates a map cache object to store key-value pairs.\n *\n * @private\n * @constructor\n * @param {Array} [entries] The key-value pairs to cache.\n */\n function MapCache(entries) {\n var index = -1,\n length = entries == null ? 0 : entries.length;\n\n this.clear();\n while (++index < length) {\n var entry = entries[index];\n this.set(entry[0], entry[1]);\n }\n }\n\n /**\n * Removes all key-value entries from the map.\n *\n * @private\n * @name clear\n * @memberOf MapCache\n */\n function mapCacheClear() {\n this.size = 0;\n this.__data__ = {\n 'hash': new Hash,\n 'map': new (Map || ListCache),\n 'string': new Hash\n };\n }\n\n /**\n * Removes `key` and its value from the map.\n *\n * @private\n * @name delete\n * @memberOf MapCache\n * @param {string} key The key of the value to remove.\n * @returns {boolean} Returns `true` if the entry was removed, else `false`.\n */\n function mapCacheDelete(key) {\n var result = getMapData(this, key)['delete'](key);\n this.size -= result ? 1 : 0;\n return result;\n }\n\n /**\n * Gets the map value for `key`.\n *\n * @private\n * @name get\n * @memberOf MapCache\n * @param {string} key The key of the value to get.\n * @returns {*} Returns the entry value.\n */\n function mapCacheGet(key) {\n return getMapData(this, key).get(key);\n }\n\n /**\n * Checks if a map value for `key` exists.\n *\n * @private\n * @name has\n * @memberOf MapCache\n * @param {string} key The key of the entry to check.\n * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.\n */\n function mapCacheHas(key) {\n return getMapData(this, key).has(key);\n }\n\n /**\n * Sets the map `key` to `value`.\n *\n * @private\n * @name set\n * @memberOf MapCache\n * @param {string} key The key of the value to set.\n * @param {*} value The value to set.\n * @returns {Object} Returns the map cache instance.\n */\n function mapCacheSet(key, value) {\n var data = getMapData(this, key),\n size = data.size;\n\n data.set(key, value);\n this.size += data.size == size ? 0 : 1;\n return this;\n }\n\n // Add methods to `MapCache`.\n MapCache.prototype.clear = mapCacheClear;\n MapCache.prototype['delete'] = mapCacheDelete;\n MapCache.prototype.get = mapCacheGet;\n MapCache.prototype.has = mapCacheHas;\n MapCache.prototype.set = mapCacheSet;\n\n /*------------------------------------------------------------------------*/\n\n /**\n *\n * Creates an array cache object to store unique values.\n *\n * @private\n * @constructor\n * @param {Array} [values] The values to cache.\n */\n function SetCache(values) {\n var index = -1,\n length = values == null ? 0 : values.length;\n\n this.__data__ = new MapCache;\n while (++index < length) {\n this.add(values[index]);\n }\n }\n\n /**\n * Adds `value` to the array cache.\n *\n * @private\n * @name add\n * @memberOf SetCache\n * @alias push\n * @param {*} value The value to cache.\n * @returns {Object} Returns the cache instance.\n */\n function setCacheAdd(value) {\n this.__data__.set(value, HASH_UNDEFINED);\n return this;\n }\n\n /**\n * Checks if `value` is in the array cache.\n *\n * @private\n * @name has\n * @memberOf SetCache\n * @param {*} value The value to search for.\n * @returns {number} Returns `true` if `value` is found, else `false`.\n */\n function setCacheHas(value) {\n return this.__data__.has(value);\n }\n\n // Add methods to `SetCache`.\n SetCache.prototype.add = SetCache.prototype.push = setCacheAdd;\n SetCache.prototype.has = setCacheHas;\n\n /*------------------------------------------------------------------------*/\n\n /**\n * Creates a stack cache object to store key-value pairs.\n *\n * @private\n * @constructor\n * @param {Array} [entries] The key-value pairs to cache.\n */\n function Stack(entries) {\n var data = this.__data__ = new ListCache(entries);\n this.size = data.size;\n }\n\n /**\n * Removes all key-value entries from the stack.\n *\n * @private\n * @name clear\n * @memberOf Stack\n */\n function stackClear() {\n this.__data__ = new ListCache;\n this.size = 0;\n }\n\n /**\n * Removes `key` and its value from the stack.\n *\n * @private\n * @name delete\n * @memberOf Stack\n * @param {string} key The key of the value to remove.\n * @returns {boolean} Returns `true` if the entry was removed, else `false`.\n */\n function stackDelete(key) {\n var data = this.__data__,\n result = data['delete'](key);\n\n this.size = data.size;\n return result;\n }\n\n /**\n * Gets the stack value for `key`.\n *\n * @private\n * @name get\n * @memberOf Stack\n * @param {string} key The key of the value to get.\n * @returns {*} Returns the entry value.\n */\n function stackGet(key) {\n return this.__data__.get(key);\n }\n\n /**\n * Checks if a stack value for `key` exists.\n *\n * @private\n * @name has\n * @memberOf Stack\n * @param {string} key The key of the entry to check.\n * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.\n */\n function stackHas(key) {\n return this.__data__.has(key);\n }\n\n /**\n * Sets the stack `key` to `value`.\n *\n * @private\n * @name set\n * @memberOf Stack\n * @param {string} key The key of the value to set.\n * @param {*} value The value to set.\n * @returns {Object} Returns the stack cache instance.\n */\n function stackSet(key, value) {\n var data = this.__data__;\n if (data instanceof ListCache) {\n var pairs = data.__data__;\n if (!Map || (pairs.length < LARGE_ARRAY_SIZE - 1)) {\n pairs.push([key, value]);\n this.size = ++data.size;\n return this;\n }\n data = this.__data__ = new MapCache(pairs);\n }\n data.set(key, value);\n this.size = data.size;\n return this;\n }\n\n // Add methods to `Stack`.\n Stack.prototype.clear = stackClear;\n Stack.prototype['delete'] = stackDelete;\n Stack.prototype.get = stackGet;\n Stack.prototype.has = stackHas;\n Stack.prototype.set = stackSet;\n\n /*------------------------------------------------------------------------*/\n\n /**\n * Creates an array of the enumerable property names of the array-like `value`.\n *\n * @private\n * @param {*} value The value to query.\n * @param {boolean} inherited Specify returning inherited property names.\n * @returns {Array} Returns the array of property names.\n */\n function arrayLikeKeys(value, inherited) {\n var isArr = isArray(value),\n isArg = !isArr && isArguments(value),\n isBuff = !isArr && !isArg && isBuffer(value),\n isType = !isArr && !isArg && !isBuff && isTypedArray(value),\n skipIndexes = isArr || isArg || isBuff || isType,\n result = skipIndexes ? baseTimes(value.length, String) : [],\n length = result.length;\n\n for (var key in value) {\n if ((inherited || hasOwnProperty.call(value, key)) &&\n !(skipIndexes && (\n // Safari 9 has enumerable `arguments.length` in strict mode.\n key == 'length' ||\n // Node.js 0.10 has enumerable non-index properties on buffers.\n (isBuff && (key == 'offset' || key == 'parent')) ||\n // PhantomJS 2 has enumerable non-index properties on typed arrays.\n (isType && (key == 'buffer' || key == 'byteLength' || key == 'byteOffset')) ||\n // Skip index properties.\n isIndex(key, length)\n ))) {\n result.push(key);\n }\n }\n return result;\n }\n\n /**\n * A specialized version of `_.sample` for arrays.\n *\n * @private\n * @param {Array} array The array to sample.\n * @returns {*} Returns the random element.\n */\n function arraySample(array) {\n var length = array.length;\n return length ? array[baseRandom(0, length - 1)] : undefined;\n }\n\n /**\n * A specialized version of `_.sampleSize` for arrays.\n *\n * @private\n * @param {Array} array The array to sample.\n * @param {number} n The number of elements to sample.\n * @returns {Array} Returns the random elements.\n */\n function arraySampleSize(array, n) {\n return shuffleSelf(copyArray(array), baseClamp(n, 0, array.length));\n }\n\n /**\n * A specialized version of `_.shuffle` for arrays.\n *\n * @private\n * @param {Array} array The array to shuffle.\n * @returns {Array} Returns the new shuffled array.\n */\n function arrayShuffle(array) {\n return shuffleSelf(copyArray(array));\n }\n\n /**\n * This function is like `assignValue` except that it doesn't assign\n * `undefined` values.\n *\n * @private\n * @param {Object} object The object to modify.\n * @param {string} key The key of the property to assign.\n * @param {*} value The value to assign.\n */\n function assignMergeValue(object, key, value) {\n if ((value !== undefined && !eq(object[key], value)) ||\n (value === undefined && !(key in object))) {\n baseAssignValue(object, key, value);\n }\n }\n\n /**\n * Assigns `value` to `key` of `object` if the existing value is not equivalent\n * using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)\n * for equality comparisons.\n *\n * @private\n * @param {Object} object The object to modify.\n * @param {string} key The key of the property to assign.\n * @param {*} value The value to assign.\n */\n function assignValue(object, key, value) {\n var objValue = object[key];\n if (!(hasOwnProperty.call(object, key) && eq(objValue, value)) ||\n (value === undefined && !(key in object))) {\n baseAssignValue(object, key, value);\n }\n }\n\n /**\n * Gets the index at which the `key` is found in `array` of key-value pairs.\n *\n * @private\n * @param {Array} array The array to inspect.\n * @param {*} key The key to search for.\n * @returns {number} Returns the index of the matched value, else `-1`.\n */\n function assocIndexOf(array, key) {\n var length = array.length;\n while (length--) {\n if (eq(array[length][0], key)) {\n return length;\n }\n }\n return -1;\n }\n\n /**\n * Aggregates elements of `collection` on `accumulator` with keys transformed\n * by `iteratee` and values set by `setter`.\n *\n * @private\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} setter The function to set `accumulator` values.\n * @param {Function} iteratee The iteratee to transform keys.\n * @param {Object} accumulator The initial aggregated object.\n * @returns {Function} Returns `accumulator`.\n */\n function baseAggregator(collection, setter, iteratee, accumulator) {\n baseEach(collection, function(value, key, collection) {\n setter(accumulator, value, iteratee(value), collection);\n });\n return accumulator;\n }\n\n /**\n * The base implementation of `_.assign` without support for multiple sources\n * or `customizer` functions.\n *\n * @private\n * @param {Object} object The destination object.\n * @param {Object} source The source object.\n * @returns {Object} Returns `object`.\n */\n function baseAssign(object, source) {\n return object && copyObject(source, keys(source), object);\n }\n\n /**\n * The base implementation of `_.assignIn` without support for multiple sources\n * or `customizer` functions.\n *\n * @private\n * @param {Object} object The destination object.\n * @param {Object} source The source object.\n * @returns {Object} Returns `object`.\n */\n function baseAssignIn(object, source) {\n return object && copyObject(source, keysIn(source), object);\n }\n\n /**\n * The base implementation of `assignValue` and `assignMergeValue` without\n * value checks.\n *\n * @private\n * @param {Object} object The object to modify.\n * @param {string} key The key of the property to assign.\n * @param {*} value The value to assign.\n */\n function baseAssignValue(object, key, value) {\n if (key == '__proto__' && defineProperty) {\n defineProperty(object, key, {\n 'configurable': true,\n 'enumerable': true,\n 'value': value,\n 'writable': true\n });\n } else {\n object[key] = value;\n }\n }\n\n /**\n * The base implementation of `_.at` without support for individual paths.\n *\n * @private\n * @param {Object} object The object to iterate over.\n * @param {string[]} paths The property paths to pick.\n * @returns {Array} Returns the picked elements.\n */\n function baseAt(object, paths) {\n var index = -1,\n length = paths.length,\n result = Array(length),\n skip = object == null;\n\n while (++index < length) {\n result[index] = skip ? undefined : get(object, paths[index]);\n }\n return result;\n }\n\n /**\n * The base implementation of `_.clamp` which doesn't coerce arguments.\n *\n * @private\n * @param {number} number The number to clamp.\n * @param {number} [lower] The lower bound.\n * @param {number} upper The upper bound.\n * @returns {number} Returns the clamped number.\n */\n function baseClamp(number, lower, upper) {\n if (number === number) {\n if (upper !== undefined) {\n number = number <= upper ? number : upper;\n }\n if (lower !== undefined) {\n number = number >= lower ? number : lower;\n }\n }\n return number;\n }\n\n /**\n * The base implementation of `_.clone` and `_.cloneDeep` which tracks\n * traversed objects.\n *\n * @private\n * @param {*} value The value to clone.\n * @param {boolean} bitmask The bitmask flags.\n * 1 - Deep clone\n * 2 - Flatten inherited properties\n * 4 - Clone symbols\n * @param {Function} [customizer] The function to customize cloning.\n * @param {string} [key] The key of `value`.\n * @param {Object} [object] The parent object of `value`.\n * @param {Object} [stack] Tracks traversed objects and their clone counterparts.\n * @returns {*} Returns the cloned value.\n */\n function baseClone(value, bitmask, customizer, key, object, stack) {\n var result,\n isDeep = bitmask & CLONE_DEEP_FLAG,\n isFlat = bitmask & CLONE_FLAT_FLAG,\n isFull = bitmask & CLONE_SYMBOLS_FLAG;\n\n if (customizer) {\n result = object ? customizer(value, key, object, stack) : customizer(value);\n }\n if (result !== undefined) {\n return result;\n }\n if (!isObject(value)) {\n return value;\n }\n var isArr = isArray(value);\n if (isArr) {\n result = initCloneArray(value);\n if (!isDeep) {\n return copyArray(value, result);\n }\n } else {\n var tag = getTag(value),\n isFunc = tag == funcTag || tag == genTag;\n\n if (isBuffer(value)) {\n return cloneBuffer(value, isDeep);\n }\n if (tag == objectTag || tag == argsTag || (isFunc && !object)) {\n result = (isFlat || isFunc) ? {} : initCloneObject(value);\n if (!isDeep) {\n return isFlat\n ? copySymbolsIn(value, baseAssignIn(result, value))\n : copySymbols(value, baseAssign(result, value));\n }\n } else {\n if (!cloneableTags[tag]) {\n return object ? value : {};\n }\n result = initCloneByTag(value, tag, isDeep);\n }\n }\n // Check for circular references and return its corresponding clone.\n stack || (stack = new Stack);\n var stacked = stack.get(value);\n if (stacked) {\n return stacked;\n }\n stack.set(value, result);\n\n if (isSet(value)) {\n value.forEach(function(subValue) {\n result.add(baseClone(subValue, bitmask, customizer, subValue, value, stack));\n });\n } else if (isMap(value)) {\n value.forEach(function(subValue, key) {\n result.set(key, baseClone(subValue, bitmask, customizer, key, value, stack));\n });\n }\n\n var keysFunc = isFull\n ? (isFlat ? getAllKeysIn : getAllKeys)\n : (isFlat ? keysIn : keys);\n\n var props = isArr ? undefined : keysFunc(value);\n arrayEach(props || value, function(subValue, key) {\n if (props) {\n key = subValue;\n subValue = value[key];\n }\n // Recursively populate clone (susceptible to call stack limits).\n assignValue(result, key, baseClone(subValue, bitmask, customizer, key, value, stack));\n });\n return result;\n }\n\n /**\n * The base implementation of `_.conforms` which doesn't clone `source`.\n *\n * @private\n * @param {Object} source The object of property predicates to conform to.\n * @returns {Function} Returns the new spec function.\n */\n function baseConforms(source) {\n var props = keys(source);\n return function(object) {\n return baseConformsTo(object, source, props);\n };\n }\n\n /**\n * The base implementation of `_.conformsTo` which accepts `props` to check.\n *\n * @private\n * @param {Object} object The object to inspect.\n * @param {Object} source The object of property predicates to conform to.\n * @returns {boolean} Returns `true` if `object` conforms, else `false`.\n */\n function baseConformsTo(object, source, props) {\n var length = props.length;\n if (object == null) {\n return !length;\n }\n object = Object(object);\n while (length--) {\n var key = props[length],\n predicate = source[key],\n value = object[key];\n\n if ((value === undefined && !(key in object)) || !predicate(value)) {\n return false;\n }\n }\n return true;\n }\n\n /**\n * The base implementation of `_.delay` and `_.defer` which accepts `args`\n * to provide to `func`.\n *\n * @private\n * @param {Function} func The function to delay.\n * @param {number} wait The number of milliseconds to delay invocation.\n * @param {Array} args The arguments to provide to `func`.\n * @returns {number|Object} Returns the timer id or timeout object.\n */\n function baseDelay(func, wait, args) {\n if (typeof func != 'function') {\n throw new TypeError(FUNC_ERROR_TEXT);\n }\n return setTimeout(function() { func.apply(undefined, args); }, wait);\n }\n\n /**\n * The base implementation of methods like `_.difference` without support\n * for excluding multiple arrays or iteratee shorthands.\n *\n * @private\n * @param {Array} array The array to inspect.\n * @param {Array} values The values to exclude.\n * @param {Function} [iteratee] The iteratee invoked per element.\n * @param {Function} [comparator] The comparator invoked per element.\n * @returns {Array} Returns the new array of filtered values.\n */\n function baseDifference(array, values, iteratee, comparator) {\n var index = -1,\n includes = arrayIncludes,\n isCommon = true,\n length = array.length,\n result = [],\n valuesLength = values.length;\n\n if (!length) {\n return result;\n }\n if (iteratee) {\n values = arrayMap(values, baseUnary(iteratee));\n }\n if (comparator) {\n includes = arrayIncludesWith;\n isCommon = false;\n }\n else if (values.length >= LARGE_ARRAY_SIZE) {\n includes = cacheHas;\n isCommon = false;\n values = new SetCache(values);\n }\n outer:\n while (++index < length) {\n var value = array[index],\n computed = iteratee == null ? value : iteratee(value);\n\n value = (comparator || value !== 0) ? value : 0;\n if (isCommon && computed === computed) {\n var valuesIndex = valuesLength;\n while (valuesIndex--) {\n if (values[valuesIndex] === computed) {\n continue outer;\n }\n }\n result.push(value);\n }\n else if (!includes(values, computed, comparator)) {\n result.push(value);\n }\n }\n return result;\n }\n\n /**\n * The base implementation of `_.forEach` without support for iteratee shorthands.\n *\n * @private\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} iteratee The function invoked per iteration.\n * @returns {Array|Object} Returns `collection`.\n */\n var baseEach = createBaseEach(baseForOwn);\n\n /**\n * The base implementation of `_.forEachRight` without support for iteratee shorthands.\n *\n * @private\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} iteratee The function invoked per iteration.\n * @returns {Array|Object} Returns `collection`.\n */\n var baseEachRight = createBaseEach(baseForOwnRight, true);\n\n /**\n * The base implementation of `_.every` without support for iteratee shorthands.\n *\n * @private\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} predicate The function invoked per iteration.\n * @returns {boolean} Returns `true` if all elements pass the predicate check,\n * else `false`\n */\n function baseEvery(collection, predicate) {\n var result = true;\n baseEach(collection, function(value, index, collection) {\n result = !!predicate(value, index, collection);\n return result;\n });\n return result;\n }\n\n /**\n * The base implementation of methods like `_.max` and `_.min` which accepts a\n * `comparator` to determine the extremum value.\n *\n * @private\n * @param {Array} array The array to iterate over.\n * @param {Function} iteratee The iteratee invoked per iteration.\n * @param {Function} comparator The comparator used to compare values.\n * @returns {*} Returns the extremum value.\n */\n function baseExtremum(array, iteratee, comparator) {\n var index = -1,\n length = array.length;\n\n while (++index < length) {\n var value = array[index],\n current = iteratee(value);\n\n if (current != null && (computed === undefined\n ? (current === current && !isSymbol(current))\n : comparator(current, computed)\n )) {\n var computed = current,\n result = value;\n }\n }\n return result;\n }\n\n /**\n * The base implementation of `_.fill` without an iteratee call guard.\n *\n * @private\n * @param {Array} array The array to fill.\n * @param {*} value The value to fill `array` with.\n * @param {number} [start=0] The start position.\n * @param {number} [end=array.length] The end position.\n * @returns {Array} Returns `array`.\n */\n function baseFill(array, value, start, end) {\n var length = array.length;\n\n start = toInteger(start);\n if (start < 0) {\n start = -start > length ? 0 : (length + start);\n }\n end = (end === undefined || end > length) ? length : toInteger(end);\n if (end < 0) {\n end += length;\n }\n end = start > end ? 0 : toLength(end);\n while (start < end) {\n array[start++] = value;\n }\n return array;\n }\n\n /**\n * The base implementation of `_.filter` without support for iteratee shorthands.\n *\n * @private\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} predicate The function invoked per iteration.\n * @returns {Array} Returns the new filtered array.\n */\n function baseFilter(collection, predicate) {\n var result = [];\n baseEach(collection, function(value, index, collection) {\n if (predicate(value, index, collection)) {\n result.push(value);\n }\n });\n return result;\n }\n\n /**\n * The base implementation of `_.flatten` with support for restricting flattening.\n *\n * @private\n * @param {Array} array The array to flatten.\n * @param {number} depth The maximum recursion depth.\n * @param {boolean} [predicate=isFlattenable] The function invoked per iteration.\n * @param {boolean} [isStrict] Restrict to values that pass `predicate` checks.\n * @param {Array} [result=[]] The initial result value.\n * @returns {Array} Returns the new flattened array.\n */\n function baseFlatten(array, depth, predicate, isStrict, result) {\n var index = -1,\n length = array.length;\n\n predicate || (predicate = isFlattenable);\n result || (result = []);\n\n while (++index < length) {\n var value = array[index];\n if (depth > 0 && predicate(value)) {\n if (depth > 1) {\n // Recursively flatten arrays (susceptible to call stack limits).\n baseFlatten(value, depth - 1, predicate, isStrict, result);\n } else {\n arrayPush(result, value);\n }\n } else if (!isStrict) {\n result[result.length] = value;\n }\n }\n return result;\n }\n\n /**\n * The base implementation of `baseForOwn` which iterates over `object`\n * properties returned by `keysFunc` and invokes `iteratee` for each property.\n * Iteratee functions may exit iteration early by explicitly returning `false`.\n *\n * @private\n * @param {Object} object The object to iterate over.\n * @param {Function} iteratee The function invoked per iteration.\n * @param {Function} keysFunc The function to get the keys of `object`.\n * @returns {Object} Returns `object`.\n */\n var baseFor = createBaseFor();\n\n /**\n * This function is like `baseFor` except that it iterates over properties\n * in the opposite order.\n *\n * @private\n * @param {Object} object The object to iterate over.\n * @param {Function} iteratee The function invoked per iteration.\n * @param {Function} keysFunc The function to get the keys of `object`.\n * @returns {Object} Returns `object`.\n */\n var baseForRight = createBaseFor(true);\n\n /**\n * The base implementation of `_.forOwn` without support for iteratee shorthands.\n *\n * @private\n * @param {Object} object The object to iterate over.\n * @param {Function} iteratee The function invoked per iteration.\n * @returns {Object} Returns `object`.\n */\n function baseForOwn(object, iteratee) {\n return object && baseFor(object, iteratee, keys);\n }\n\n /**\n * The base implementation of `_.forOwnRight` without support for iteratee shorthands.\n *\n * @private\n * @param {Object} object The object to iterate over.\n * @param {Function} iteratee The function invoked per iteration.\n * @returns {Object} Returns `object`.\n */\n function baseForOwnRight(object, iteratee) {\n return object && baseForRight(object, iteratee, keys);\n }\n\n /**\n * The base implementation of `_.functions` which creates an array of\n * `object` function property names filtered from `props`.\n *\n * @private\n * @param {Object} object The object to inspect.\n * @param {Array} props The property names to filter.\n * @returns {Array} Returns the function names.\n */\n function baseFunctions(object, props) {\n return arrayFilter(props, function(key) {\n return isFunction(object[key]);\n });\n }\n\n /**\n * The base implementation of `_.get` without support for default values.\n *\n * @private\n * @param {Object} object The object to query.\n * @param {Array|string} path The path of the property to get.\n * @returns {*} Returns the resolved value.\n */\n function baseGet(object, path) {\n path = castPath(path, object);\n\n var index = 0,\n length = path.length;\n\n while (object != null && index < length) {\n object = object[toKey(path[index++])];\n }\n return (index && index == length) ? object : undefined;\n }\n\n /**\n * The base implementation of `getAllKeys` and `getAllKeysIn` which uses\n * `keysFunc` and `symbolsFunc` to get the enumerable property names and\n * symbols of `object`.\n *\n * @private\n * @param {Object} object The object to query.\n * @param {Function} keysFunc The function to get the keys of `object`.\n * @param {Function} symbolsFunc The function to get the symbols of `object`.\n * @returns {Array} Returns the array of property names and symbols.\n */\n function baseGetAllKeys(object, keysFunc, symbolsFunc) {\n var result = keysFunc(object);\n return isArray(object) ? result : arrayPush(result, symbolsFunc(object));\n }\n\n /**\n * The base implementation of `getTag` without fallbacks for buggy environments.\n *\n * @private\n * @param {*} value The value to query.\n * @returns {string} Returns the `toStringTag`.\n */\n function baseGetTag(value) {\n if (value == null) {\n return value === undefined ? undefinedTag : nullTag;\n }\n return (symToStringTag && symToStringTag in Object(value))\n ? getRawTag(value)\n : objectToString(value);\n }\n\n /**\n * The base implementation of `_.gt` which doesn't coerce arguments.\n *\n * @private\n * @param {*} value The value to compare.\n * @param {*} other The other value to compare.\n * @returns {boolean} Returns `true` if `value` is greater than `other`,\n * else `false`.\n */\n function baseGt(value, other) {\n return value > other;\n }\n\n /**\n * The base implementation of `_.has` without support for deep paths.\n *\n * @private\n * @param {Object} [object] The object to query.\n * @param {Array|string} key The key to check.\n * @returns {boolean} Returns `true` if `key` exists, else `false`.\n */\n function baseHas(object, key) {\n return object != null && hasOwnProperty.call(object, key);\n }\n\n /**\n * The base implementation of `_.hasIn` without support for deep paths.\n *\n * @private\n * @param {Object} [object] The object to query.\n * @param {Array|string} key The key to check.\n * @returns {boolean} Returns `true` if `key` exists, else `false`.\n */\n function baseHasIn(object, key) {\n return object != null && key in Object(object);\n }\n\n /**\n * The base implementation of `_.inRange` which doesn't coerce arguments.\n *\n * @private\n * @param {number} number The number to check.\n * @param {number} start The start of the range.\n * @param {number} end The end of the range.\n * @returns {boolean} Returns `true` if `number` is in the range, else `false`.\n */\n function baseInRange(number, start, end) {\n return number >= nativeMin(start, end) && number < nativeMax(start, end);\n }\n\n /**\n * The base implementation of methods like `_.intersection`, without support\n * for iteratee shorthands, that accepts an array of arrays to inspect.\n *\n * @private\n * @param {Array} arrays The arrays to inspect.\n * @param {Function} [iteratee] The iteratee invoked per element.\n * @param {Function} [comparator] The comparator invoked per element.\n * @returns {Array} Returns the new array of shared values.\n */\n function baseIntersection(arrays, iteratee, comparator) {\n var includes = comparator ? arrayIncludesWith : arrayIncludes,\n length = arrays[0].length,\n othLength = arrays.length,\n othIndex = othLength,\n caches = Array(othLength),\n maxLength = Infinity,\n result = [];\n\n while (othIndex--) {\n var array = arrays[othIndex];\n if (othIndex && iteratee) {\n array = arrayMap(array, baseUnary(iteratee));\n }\n maxLength = nativeMin(array.length, maxLength);\n caches[othIndex] = !comparator && (iteratee || (length >= 120 && array.length >= 120))\n ? new SetCache(othIndex && array)\n : undefined;\n }\n array = arrays[0];\n\n var index = -1,\n seen = caches[0];\n\n outer:\n while (++index < length && result.length < maxLength) {\n var value = array[index],\n computed = iteratee ? iteratee(value) : value;\n\n value = (comparator || value !== 0) ? value : 0;\n if (!(seen\n ? cacheHas(seen, computed)\n : includes(result, computed, comparator)\n )) {\n othIndex = othLength;\n while (--othIndex) {\n var cache = caches[othIndex];\n if (!(cache\n ? cacheHas(cache, computed)\n : includes(arrays[othIndex], computed, comparator))\n ) {\n continue outer;\n }\n }\n if (seen) {\n seen.push(computed);\n }\n result.push(value);\n }\n }\n return result;\n }\n\n /**\n * The base implementation of `_.invert` and `_.invertBy` which inverts\n * `object` with values transformed by `iteratee` and set by `setter`.\n *\n * @private\n * @param {Object} object The object to iterate over.\n * @param {Function} setter The function to set `accumulator` values.\n * @param {Function} iteratee The iteratee to transform values.\n * @param {Object} accumulator The initial inverted object.\n * @returns {Function} Returns `accumulator`.\n */\n function baseInverter(object, setter, iteratee, accumulator) {\n baseForOwn(object, function(value, key, object) {\n setter(accumulator, iteratee(value), key, object);\n });\n return accumulator;\n }\n\n /**\n * The base implementation of `_.invoke` without support for individual\n * method arguments.\n *\n * @private\n * @param {Object} object The object to query.\n * @param {Array|string} path The path of the method to invoke.\n * @param {Array} args The arguments to invoke the method with.\n * @returns {*} Returns the result of the invoked method.\n */\n function baseInvoke(object, path, args) {\n path = castPath(path, object);\n object = parent(object, path);\n var func = object == null ? object : object[toKey(last(path))];\n return func == null ? undefined : apply(func, object, args);\n }\n\n /**\n * The base implementation of `_.isArguments`.\n *\n * @private\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is an `arguments` object,\n */\n function baseIsArguments(value) {\n return isObjectLike(value) && baseGetTag(value) == argsTag;\n }\n\n /**\n * The base implementation of `_.isArrayBuffer` without Node.js optimizations.\n *\n * @private\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is an array buffer, else `false`.\n */\n function baseIsArrayBuffer(value) {\n return isObjectLike(value) && baseGetTag(value) == arrayBufferTag;\n }\n\n /**\n * The base implementation of `_.isDate` without Node.js optimizations.\n *\n * @private\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a date object, else `false`.\n */\n function baseIsDate(value) {\n return isObjectLike(value) && baseGetTag(value) == dateTag;\n }\n\n /**\n * The base implementation of `_.isEqual` which supports partial comparisons\n * and tracks traversed objects.\n *\n * @private\n * @param {*} value The value to compare.\n * @param {*} other The other value to compare.\n * @param {boolean} bitmask The bitmask flags.\n * 1 - Unordered comparison\n * 2 - Partial comparison\n * @param {Function} [customizer] The function to customize comparisons.\n * @param {Object} [stack] Tracks traversed `value` and `other` objects.\n * @returns {boolean} Returns `true` if the values are equivalent, else `false`.\n */\n function baseIsEqual(value, other, bitmask, customizer, stack) {\n if (value === other) {\n return true;\n }\n if (value == null || other == null || (!isObjectLike(value) && !isObjectLike(other))) {\n return value !== value && other !== other;\n }\n return baseIsEqualDeep(value, other, bitmask, customizer, baseIsEqual, stack);\n }\n\n /**\n * A specialized version of `baseIsEqual` for arrays and objects which performs\n * deep comparisons and tracks traversed objects enabling objects with circular\n * references to be compared.\n *\n * @private\n * @param {Object} object The object to compare.\n * @param {Object} other The other object to compare.\n * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.\n * @param {Function} customizer The function to customize comparisons.\n * @param {Function} equalFunc The function to determine equivalents of values.\n * @param {Object} [stack] Tracks traversed `object` and `other` objects.\n * @returns {boolean} Returns `true` if the objects are equivalent, else `false`.\n */\n function baseIsEqualDeep(object, other, bitmask, customizer, equalFunc, stack) {\n var objIsArr = isArray(object),\n othIsArr = isArray(other),\n objTag = objIsArr ? arrayTag : getTag(object),\n othTag = othIsArr ? arrayTag : getTag(other);\n\n objTag = objTag == argsTag ? objectTag : objTag;\n othTag = othTag == argsTag ? objectTag : othTag;\n\n var objIsObj = objTag == objectTag,\n othIsObj = othTag == objectTag,\n isSameTag = objTag == othTag;\n\n if (isSameTag && isBuffer(object)) {\n if (!isBuffer(other)) {\n return false;\n }\n objIsArr = true;\n objIsObj = false;\n }\n if (isSameTag && !objIsObj) {\n stack || (stack = new Stack);\n return (objIsArr || isTypedArray(object))\n ? equalArrays(object, other, bitmask, customizer, equalFunc, stack)\n : equalByTag(object, other, objTag, bitmask, customizer, equalFunc, stack);\n }\n if (!(bitmask & COMPARE_PARTIAL_FLAG)) {\n var objIsWrapped = objIsObj && hasOwnProperty.call(object, '__wrapped__'),\n othIsWrapped = othIsObj && hasOwnProperty.call(other, '__wrapped__');\n\n if (objIsWrapped || othIsWrapped) {\n var objUnwrapped = objIsWrapped ? object.value() : object,\n othUnwrapped = othIsWrapped ? other.value() : other;\n\n stack || (stack = new Stack);\n return equalFunc(objUnwrapped, othUnwrapped, bitmask, customizer, stack);\n }\n }\n if (!isSameTag) {\n return false;\n }\n stack || (stack = new Stack);\n return equalObjects(object, other, bitmask, customizer, equalFunc, stack);\n }\n\n /**\n * The base implementation of `_.isMap` without Node.js optimizations.\n *\n * @private\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a map, else `false`.\n */\n function baseIsMap(value) {\n return isObjectLike(value) && getTag(value) == mapTag;\n }\n\n /**\n * The base implementation of `_.isMatch` without support for iteratee shorthands.\n *\n * @private\n * @param {Object} object The object to inspect.\n * @param {Object} source The object of property values to match.\n * @param {Array} matchData The property names, values, and compare flags to match.\n * @param {Function} [customizer] The function to customize comparisons.\n * @returns {boolean} Returns `true` if `object` is a match, else `false`.\n */\n function baseIsMatch(object, source, matchData, customizer) {\n var index = matchData.length,\n length = index,\n noCustomizer = !customizer;\n\n if (object == null) {\n return !length;\n }\n object = Object(object);\n while (index--) {\n var data = matchData[index];\n if ((noCustomizer && data[2])\n ? data[1] !== object[data[0]]\n : !(data[0] in object)\n ) {\n return false;\n }\n }\n while (++index < length) {\n data = matchData[index];\n var key = data[0],\n objValue = object[key],\n srcValue = data[1];\n\n if (noCustomizer && data[2]) {\n if (objValue === undefined && !(key in object)) {\n return false;\n }\n } else {\n var stack = new Stack;\n if (customizer) {\n var result = customizer(objValue, srcValue, key, object, source, stack);\n }\n if (!(result === undefined\n ? baseIsEqual(srcValue, objValue, COMPARE_PARTIAL_FLAG | COMPARE_UNORDERED_FLAG, customizer, stack)\n : result\n )) {\n return false;\n }\n }\n }\n return true;\n }\n\n /**\n * The base implementation of `_.isNative` without bad shim checks.\n *\n * @private\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a native function,\n * else `false`.\n */\n function baseIsNative(value) {\n if (!isObject(value) || isMasked(value)) {\n return false;\n }\n var pattern = isFunction(value) ? reIsNative : reIsHostCtor;\n return pattern.test(toSource(value));\n }\n\n /**\n * The base implementation of `_.isRegExp` without Node.js optimizations.\n *\n * @private\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a regexp, else `false`.\n */\n function baseIsRegExp(value) {\n return isObjectLike(value) && baseGetTag(value) == regexpTag;\n }\n\n /**\n * The base implementation of `_.isSet` without Node.js optimizations.\n *\n * @private\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a set, else `false`.\n */\n function baseIsSet(value) {\n return isObjectLike(value) && getTag(value) == setTag;\n }\n\n /**\n * The base implementation of `_.isTypedArray` without Node.js optimizations.\n *\n * @private\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a typed array, else `false`.\n */\n function baseIsTypedArray(value) {\n return isObjectLike(value) &&\n isLength(value.length) && !!typedArrayTags[baseGetTag(value)];\n }\n\n /**\n * The base implementation of `_.iteratee`.\n *\n * @private\n * @param {*} [value=_.identity] The value to convert to an iteratee.\n * @returns {Function} Returns the iteratee.\n */\n function baseIteratee(value) {\n // Don't store the `typeof` result in a variable to avoid a JIT bug in Safari 9.\n // See https://bugs.webkit.org/show_bug.cgi?id=156034 for more details.\n if (typeof value == 'function') {\n return value;\n }\n if (value == null) {\n return identity;\n }\n if (typeof value == 'object') {\n return isArray(value)\n ? baseMatchesProperty(value[0], value[1])\n : baseMatches(value);\n }\n return property(value);\n }\n\n /**\n * The base implementation of `_.keys` which doesn't treat sparse arrays as dense.\n *\n * @private\n * @param {Object} object The object to query.\n * @returns {Array} Returns the array of property names.\n */\n function baseKeys(object) {\n if (!isPrototype(object)) {\n return nativeKeys(object);\n }\n var result = [];\n for (var key in Object(object)) {\n if (hasOwnProperty.call(object, key) && key != 'constructor') {\n result.push(key);\n }\n }\n return result;\n }\n\n /**\n * The base implementation of `_.keysIn` which doesn't treat sparse arrays as dense.\n *\n * @private\n * @param {Object} object The object to query.\n * @returns {Array} Returns the array of property names.\n */\n function baseKeysIn(object) {\n if (!isObject(object)) {\n return nativeKeysIn(object);\n }\n var isProto = isPrototype(object),\n result = [];\n\n for (var key in object) {\n if (!(key == 'constructor' && (isProto || !hasOwnProperty.call(object, key)))) {\n result.push(key);\n }\n }\n return result;\n }\n\n /**\n * The base implementation of `_.lt` which doesn't coerce arguments.\n *\n * @private\n * @param {*} value The value to compare.\n * @param {*} other The other value to compare.\n * @returns {boolean} Returns `true` if `value` is less than `other`,\n * else `false`.\n */\n function baseLt(value, other) {\n return value < other;\n }\n\n /**\n * The base implementation of `_.map` without support for iteratee shorthands.\n *\n * @private\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} iteratee The function invoked per iteration.\n * @returns {Array} Returns the new mapped array.\n */\n function baseMap(collection, iteratee) {\n var index = -1,\n result = isArrayLike(collection) ? Array(collection.length) : [];\n\n baseEach(collection, function(value, key, collection) {\n result[++index] = iteratee(value, key, collection);\n });\n return result;\n }\n\n /**\n * The base implementation of `_.matches` which doesn't clone `source`.\n *\n * @private\n * @param {Object} source The object of property values to match.\n * @returns {Function} Returns the new spec function.\n */\n function baseMatches(source) {\n var matchData = getMatchData(source);\n if (matchData.length == 1 && matchData[0][2]) {\n return matchesStrictComparable(matchData[0][0], matchData[0][1]);\n }\n return function(object) {\n return object === source || baseIsMatch(object, source, matchData);\n };\n }\n\n /**\n * The base implementation of `_.matchesProperty` which doesn't clone `srcValue`.\n *\n * @private\n * @param {string} path The path of the property to get.\n * @param {*} srcValue The value to match.\n * @returns {Function} Returns the new spec function.\n */\n function baseMatchesProperty(path, srcValue) {\n if (isKey(path) && isStrictComparable(srcValue)) {\n return matchesStrictComparable(toKey(path), srcValue);\n }\n return function(object) {\n var objValue = get(object, path);\n return (objValue === undefined && objValue === srcValue)\n ? hasIn(object, path)\n : baseIsEqual(srcValue, objValue, COMPARE_PARTIAL_FLAG | COMPARE_UNORDERED_FLAG);\n };\n }\n\n /**\n * The base implementation of `_.merge` without support for multiple sources.\n *\n * @private\n * @param {Object} object The destination object.\n * @param {Object} source The source object.\n * @param {number} srcIndex The index of `source`.\n * @param {Function} [customizer] The function to customize merged values.\n * @param {Object} [stack] Tracks traversed source values and their merged\n * counterparts.\n */\n function baseMerge(object, source, srcIndex, customizer, stack) {\n if (object === source) {\n return;\n }\n baseFor(source, function(srcValue, key) {\n stack || (stack = new Stack);\n if (isObject(srcValue)) {\n baseMergeDeep(object, source, key, srcIndex, baseMerge, customizer, stack);\n }\n else {\n var newValue = customizer\n ? customizer(safeGet(object, key), srcValue, (key + ''), object, source, stack)\n : undefined;\n\n if (newValue === undefined) {\n newValue = srcValue;\n }\n assignMergeValue(object, key, newValue);\n }\n }, keysIn);\n }\n\n /**\n * A specialized version of `baseMerge` for arrays and objects which performs\n * deep merges and tracks traversed objects enabling objects with circular\n * references to be merged.\n *\n * @private\n * @param {Object} object The destination object.\n * @param {Object} source The source object.\n * @param {string} key The key of the value to merge.\n * @param {number} srcIndex The index of `source`.\n * @param {Function} mergeFunc The function to merge values.\n * @param {Function} [customizer] The function to customize assigned values.\n * @param {Object} [stack] Tracks traversed source values and their merged\n * counterparts.\n */\n function baseMergeDeep(object, source, key, srcIndex, mergeFunc, customizer, stack) {\n var objValue = safeGet(object, key),\n srcValue = safeGet(source, key),\n stacked = stack.get(srcValue);\n\n if (stacked) {\n assignMergeValue(object, key, stacked);\n return;\n }\n var newValue = customizer\n ? customizer(objValue, srcValue, (key + ''), object, source, stack)\n : undefined;\n\n var isCommon = newValue === undefined;\n\n if (isCommon) {\n var isArr = isArray(srcValue),\n isBuff = !isArr && isBuffer(srcValue),\n isTyped = !isArr && !isBuff && isTypedArray(srcValue);\n\n newValue = srcValue;\n if (isArr || isBuff || isTyped) {\n if (isArray(objValue)) {\n newValue = objValue;\n }\n else if (isArrayLikeObject(objValue)) {\n newValue = copyArray(objValue);\n }\n else if (isBuff) {\n isCommon = false;\n newValue = cloneBuffer(srcValue, true);\n }\n else if (isTyped) {\n isCommon = false;\n newValue = cloneTypedArray(srcValue, true);\n }\n else {\n newValue = [];\n }\n }\n else if (isPlainObject(srcValue) || isArguments(srcValue)) {\n newValue = objValue;\n if (isArguments(objValue)) {\n newValue = toPlainObject(objValue);\n }\n else if (!isObject(objValue) || isFunction(objValue)) {\n newValue = initCloneObject(srcValue);\n }\n }\n else {\n isCommon = false;\n }\n }\n if (isCommon) {\n // Recursively merge objects and arrays (susceptible to call stack limits).\n stack.set(srcValue, newValue);\n mergeFunc(newValue, srcValue, srcIndex, customizer, stack);\n stack['delete'](srcValue);\n }\n assignMergeValue(object, key, newValue);\n }\n\n /**\n * The base implementation of `_.nth` which doesn't coerce arguments.\n *\n * @private\n * @param {Array} array The array to query.\n * @param {number} n The index of the element to return.\n * @returns {*} Returns the nth element of `array`.\n */\n function baseNth(array, n) {\n var length = array.length;\n if (!length) {\n return;\n }\n n += n < 0 ? length : 0;\n return isIndex(n, length) ? array[n] : undefined;\n }\n\n /**\n * The base implementation of `_.orderBy` without param guards.\n *\n * @private\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function[]|Object[]|string[]} iteratees The iteratees to sort by.\n * @param {string[]} orders The sort orders of `iteratees`.\n * @returns {Array} Returns the new sorted array.\n */\n function baseOrderBy(collection, iteratees, orders) {\n if (iteratees.length) {\n iteratees = arrayMap(iteratees, function(iteratee) {\n if (isArray(iteratee)) {\n return function(value) {\n return baseGet(value, iteratee.length === 1 ? iteratee[0] : iteratee);\n }\n }\n return iteratee;\n });\n } else {\n iteratees = [identity];\n }\n\n var index = -1;\n iteratees = arrayMap(iteratees, baseUnary(getIteratee()));\n\n var result = baseMap(collection, function(value, key, collection) {\n var criteria = arrayMap(iteratees, function(iteratee) {\n return iteratee(value);\n });\n return { 'criteria': criteria, 'index': ++index, 'value': value };\n });\n\n return baseSortBy(result, function(object, other) {\n return compareMultiple(object, other, orders);\n });\n }\n\n /**\n * The base implementation of `_.pick` without support for individual\n * property identifiers.\n *\n * @private\n * @param {Object} object The source object.\n * @param {string[]} paths The property paths to pick.\n * @returns {Object} Returns the new object.\n */\n function basePick(object, paths) {\n return basePickBy(object, paths, function(value, path) {\n return hasIn(object, path);\n });\n }\n\n /**\n * The base implementation of `_.pickBy` without support for iteratee shorthands.\n *\n * @private\n * @param {Object} object The source object.\n * @param {string[]} paths The property paths to pick.\n * @param {Function} predicate The function invoked per property.\n * @returns {Object} Returns the new object.\n */\n function basePickBy(object, paths, predicate) {\n var index = -1,\n length = paths.length,\n result = {};\n\n while (++index < length) {\n var path = paths[index],\n value = baseGet(object, path);\n\n if (predicate(value, path)) {\n baseSet(result, castPath(path, object), value);\n }\n }\n return result;\n }\n\n /**\n * A specialized version of `baseProperty` which supports deep paths.\n *\n * @private\n * @param {Array|string} path The path of the property to get.\n * @returns {Function} Returns the new accessor function.\n */\n function basePropertyDeep(path) {\n return function(object) {\n return baseGet(object, path);\n };\n }\n\n /**\n * The base implementation of `_.pullAllBy` without support for iteratee\n * shorthands.\n *\n * @private\n * @param {Array} array The array to modify.\n * @param {Array} values The values to remove.\n * @param {Function} [iteratee] The iteratee invoked per element.\n * @param {Function} [comparator] The comparator invoked per element.\n * @returns {Array} Returns `array`.\n */\n function basePullAll(array, values, iteratee, comparator) {\n var indexOf = comparator ? baseIndexOfWith : baseIndexOf,\n index = -1,\n length = values.length,\n seen = array;\n\n if (array === values) {\n values = copyArray(values);\n }\n if (iteratee) {\n seen = arrayMap(array, baseUnary(iteratee));\n }\n while (++index < length) {\n var fromIndex = 0,\n value = values[index],\n computed = iteratee ? iteratee(value) : value;\n\n while ((fromIndex = indexOf(seen, computed, fromIndex, comparator)) > -1) {\n if (seen !== array) {\n splice.call(seen, fromIndex, 1);\n }\n splice.call(array, fromIndex, 1);\n }\n }\n return array;\n }\n\n /**\n * The base implementation of `_.pullAt` without support for individual\n * indexes or capturing the removed elements.\n *\n * @private\n * @param {Array} array The array to modify.\n * @param {number[]} indexes The indexes of elements to remove.\n * @returns {Array} Returns `array`.\n */\n function basePullAt(array, indexes) {\n var length = array ? indexes.length : 0,\n lastIndex = length - 1;\n\n while (length--) {\n var index = indexes[length];\n if (length == lastIndex || index !== previous) {\n var previous = index;\n if (isIndex(index)) {\n splice.call(array, index, 1);\n } else {\n baseUnset(array, index);\n }\n }\n }\n return array;\n }\n\n /**\n * The base implementation of `_.random` without support for returning\n * floating-point numbers.\n *\n * @private\n * @param {number} lower The lower bound.\n * @param {number} upper The upper bound.\n * @returns {number} Returns the random number.\n */\n function baseRandom(lower, upper) {\n return lower + nativeFloor(nativeRandom() * (upper - lower + 1));\n }\n\n /**\n * The base implementation of `_.range` and `_.rangeRight` which doesn't\n * coerce arguments.\n *\n * @private\n * @param {number} start The start of the range.\n * @param {number} end The end of the range.\n * @param {number} step The value to increment or decrement by.\n * @param {boolean} [fromRight] Specify iterating from right to left.\n * @returns {Array} Returns the range of numbers.\n */\n function baseRange(start, end, step, fromRight) {\n var index = -1,\n length = nativeMax(nativeCeil((end - start) / (step || 1)), 0),\n result = Array(length);\n\n while (length--) {\n result[fromRight ? length : ++index] = start;\n start += step;\n }\n return result;\n }\n\n /**\n * The base implementation of `_.repeat` which doesn't coerce arguments.\n *\n * @private\n * @param {string} string The string to repeat.\n * @param {number} n The number of times to repeat the string.\n * @returns {string} Returns the repeated string.\n */\n function baseRepeat(string, n) {\n var result = '';\n if (!string || n < 1 || n > MAX_SAFE_INTEGER) {\n return result;\n }\n // Leverage the exponentiation by squaring algorithm for a faster repeat.\n // See https://en.wikipedia.org/wiki/Exponentiation_by_squaring for more details.\n do {\n if (n % 2) {\n result += string;\n }\n n = nativeFloor(n / 2);\n if (n) {\n string += string;\n }\n } while (n);\n\n return result;\n }\n\n /**\n * The base implementation of `_.rest` which doesn't validate or coerce arguments.\n *\n * @private\n * @param {Function} func The function to apply a rest parameter to.\n * @param {number} [start=func.length-1] The start position of the rest parameter.\n * @returns {Function} Returns the new function.\n */\n function baseRest(func, start) {\n return setToString(overRest(func, start, identity), func + '');\n }\n\n /**\n * The base implementation of `_.sample`.\n *\n * @private\n * @param {Array|Object} collection The collection to sample.\n * @returns {*} Returns the random element.\n */\n function baseSample(collection) {\n return arraySample(values(collection));\n }\n\n /**\n * The base implementation of `_.sampleSize` without param guards.\n *\n * @private\n * @param {Array|Object} collection The collection to sample.\n * @param {number} n The number of elements to sample.\n * @returns {Array} Returns the random elements.\n */\n function baseSampleSize(collection, n) {\n var array = values(collection);\n return shuffleSelf(array, baseClamp(n, 0, array.length));\n }\n\n /**\n * The base implementation of `_.set`.\n *\n * @private\n * @param {Object} object The object to modify.\n * @param {Array|string} path The path of the property to set.\n * @param {*} value The value to set.\n * @param {Function} [customizer] The function to customize path creation.\n * @returns {Object} Returns `object`.\n */\n function baseSet(object, path, value, customizer) {\n if (!isObject(object)) {\n return object;\n }\n path = castPath(path, object);\n\n var index = -1,\n length = path.length,\n lastIndex = length - 1,\n nested = object;\n\n while (nested != null && ++index < length) {\n var key = toKey(path[index]),\n newValue = value;\n\n if (key === '__proto__' || key === 'constructor' || key === 'prototype') {\n return object;\n }\n\n if (index != lastIndex) {\n var objValue = nested[key];\n newValue = customizer ? customizer(objValue, key, nested) : undefined;\n if (newValue === undefined) {\n newValue = isObject(objValue)\n ? objValue\n : (isIndex(path[index + 1]) ? [] : {});\n }\n }\n assignValue(nested, key, newValue);\n nested = nested[key];\n }\n return object;\n }\n\n /**\n * The base implementation of `setData` without support for hot loop shorting.\n *\n * @private\n * @param {Function} func The function to associate metadata with.\n * @param {*} data The metadata.\n * @returns {Function} Returns `func`.\n */\n var baseSetData = !metaMap ? identity : function(func, data) {\n metaMap.set(func, data);\n return func;\n };\n\n /**\n * The base implementation of `setToString` without support for hot loop shorting.\n *\n * @private\n * @param {Function} func The function to modify.\n * @param {Function} string The `toString` result.\n * @returns {Function} Returns `func`.\n */\n var baseSetToString = !defineProperty ? identity : function(func, string) {\n return defineProperty(func, 'toString', {\n 'configurable': true,\n 'enumerable': false,\n 'value': constant(string),\n 'writable': true\n });\n };\n\n /**\n * The base implementation of `_.shuffle`.\n *\n * @private\n * @param {Array|Object} collection The collection to shuffle.\n * @returns {Array} Returns the new shuffled array.\n */\n function baseShuffle(collection) {\n return shuffleSelf(values(collection));\n }\n\n /**\n * The base implementation of `_.slice` without an iteratee call guard.\n *\n * @private\n * @param {Array} array The array to slice.\n * @param {number} [start=0] The start position.\n * @param {number} [end=array.length] The end position.\n * @returns {Array} Returns the slice of `array`.\n */\n function baseSlice(array, start, end) {\n var index = -1,\n length = array.length;\n\n if (start < 0) {\n start = -start > length ? 0 : (length + start);\n }\n end = end > length ? length : end;\n if (end < 0) {\n end += length;\n }\n length = start > end ? 0 : ((end - start) >>> 0);\n start >>>= 0;\n\n var result = Array(length);\n while (++index < length) {\n result[index] = array[index + start];\n }\n return result;\n }\n\n /**\n * The base implementation of `_.some` without support for iteratee shorthands.\n *\n * @private\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} predicate The function invoked per iteration.\n * @returns {boolean} Returns `true` if any element passes the predicate check,\n * else `false`.\n */\n function baseSome(collection, predicate) {\n var result;\n\n baseEach(collection, function(value, index, collection) {\n result = predicate(value, index, collection);\n return !result;\n });\n return !!result;\n }\n\n /**\n * The base implementation of `_.sortedIndex` and `_.sortedLastIndex` which\n * performs a binary search of `array` to determine the index at which `value`\n * should be inserted into `array` in order to maintain its sort order.\n *\n * @private\n * @param {Array} array The sorted array to inspect.\n * @param {*} value The value to evaluate.\n * @param {boolean} [retHighest] Specify returning the highest qualified index.\n * @returns {number} Returns the index at which `value` should be inserted\n * into `array`.\n */\n function baseSortedIndex(array, value, retHighest) {\n var low = 0,\n high = array == null ? low : array.length;\n\n if (typeof value == 'number' && value === value && high <= HALF_MAX_ARRAY_LENGTH) {\n while (low < high) {\n var mid = (low + high) >>> 1,\n computed = array[mid];\n\n if (computed !== null && !isSymbol(computed) &&\n (retHighest ? (computed <= value) : (computed < value))) {\n low = mid + 1;\n } else {\n high = mid;\n }\n }\n return high;\n }\n return baseSortedIndexBy(array, value, identity, retHighest);\n }\n\n /**\n * The base implementation of `_.sortedIndexBy` and `_.sortedLastIndexBy`\n * which invokes `iteratee` for `value` and each element of `array` to compute\n * their sort ranking. The iteratee is invoked with one argument; (value).\n *\n * @private\n * @param {Array} array The sorted array to inspect.\n * @param {*} value The value to evaluate.\n * @param {Function} iteratee The iteratee invoked per element.\n * @param {boolean} [retHighest] Specify returning the highest qualified index.\n * @returns {number} Returns the index at which `value` should be inserted\n * into `array`.\n */\n function baseSortedIndexBy(array, value, iteratee, retHighest) {\n var low = 0,\n high = array == null ? 0 : array.length;\n if (high === 0) {\n return 0;\n }\n\n value = iteratee(value);\n var valIsNaN = value !== value,\n valIsNull = value === null,\n valIsSymbol = isSymbol(value),\n valIsUndefined = value === undefined;\n\n while (low < high) {\n var mid = nativeFloor((low + high) / 2),\n computed = iteratee(array[mid]),\n othIsDefined = computed !== undefined,\n othIsNull = computed === null,\n othIsReflexive = computed === computed,\n othIsSymbol = isSymbol(computed);\n\n if (valIsNaN) {\n var setLow = retHighest || othIsReflexive;\n } else if (valIsUndefined) {\n setLow = othIsReflexive && (retHighest || othIsDefined);\n } else if (valIsNull) {\n setLow = othIsReflexive && othIsDefined && (retHighest || !othIsNull);\n } else if (valIsSymbol) {\n setLow = othIsReflexive && othIsDefined && !othIsNull && (retHighest || !othIsSymbol);\n } else if (othIsNull || othIsSymbol) {\n setLow = false;\n } else {\n setLow = retHighest ? (computed <= value) : (computed < value);\n }\n if (setLow) {\n low = mid + 1;\n } else {\n high = mid;\n }\n }\n return nativeMin(high, MAX_ARRAY_INDEX);\n }\n\n /**\n * The base implementation of `_.sortedUniq` and `_.sortedUniqBy` without\n * support for iteratee shorthands.\n *\n * @private\n * @param {Array} array The array to inspect.\n * @param {Function} [iteratee] The iteratee invoked per element.\n * @returns {Array} Returns the new duplicate free array.\n */\n function baseSortedUniq(array, iteratee) {\n var index = -1,\n length = array.length,\n resIndex = 0,\n result = [];\n\n while (++index < length) {\n var value = array[index],\n computed = iteratee ? iteratee(value) : value;\n\n if (!index || !eq(computed, seen)) {\n var seen = computed;\n result[resIndex++] = value === 0 ? 0 : value;\n }\n }\n return result;\n }\n\n /**\n * The base implementation of `_.toNumber` which doesn't ensure correct\n * conversions of binary, hexadecimal, or octal string values.\n *\n * @private\n * @param {*} value The value to process.\n * @returns {number} Returns the number.\n */\n function baseToNumber(value) {\n if (typeof value == 'number') {\n return value;\n }\n if (isSymbol(value)) {\n return NAN;\n }\n return +value;\n }\n\n /**\n * The base implementation of `_.toString` which doesn't convert nullish\n * values to empty strings.\n *\n * @private\n * @param {*} value The value to process.\n * @returns {string} Returns the string.\n */\n function baseToString(value) {\n // Exit early for strings to avoid a performance hit in some environments.\n if (typeof value == 'string') {\n return value;\n }\n if (isArray(value)) {\n // Recursively convert values (susceptible to call stack limits).\n return arrayMap(value, baseToString) + '';\n }\n if (isSymbol(value)) {\n return symbolToString ? symbolToString.call(value) : '';\n }\n var result = (value + '');\n return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;\n }\n\n /**\n * The base implementation of `_.uniqBy` without support for iteratee shorthands.\n *\n * @private\n * @param {Array} array The array to inspect.\n * @param {Function} [iteratee] The iteratee invoked per element.\n * @param {Function} [comparator] The comparator invoked per element.\n * @returns {Array} Returns the new duplicate free array.\n */\n function baseUniq(array, iteratee, comparator) {\n var index = -1,\n includes = arrayIncludes,\n length = array.length,\n isCommon = true,\n result = [],\n seen = result;\n\n if (comparator) {\n isCommon = false;\n includes = arrayIncludesWith;\n }\n else if (length >= LARGE_ARRAY_SIZE) {\n var set = iteratee ? null : createSet(array);\n if (set) {\n return setToArray(set);\n }\n isCommon = false;\n includes = cacheHas;\n seen = new SetCache;\n }\n else {\n seen = iteratee ? [] : result;\n }\n outer:\n while (++index < length) {\n var value = array[index],\n computed = iteratee ? iteratee(value) : value;\n\n value = (comparator || value !== 0) ? value : 0;\n if (isCommon && computed === computed) {\n var seenIndex = seen.length;\n while (seenIndex--) {\n if (seen[seenIndex] === computed) {\n continue outer;\n }\n }\n if (iteratee) {\n seen.push(computed);\n }\n result.push(value);\n }\n else if (!includes(seen, computed, comparator)) {\n if (seen !== result) {\n seen.push(computed);\n }\n result.push(value);\n }\n }\n return result;\n }\n\n /**\n * The base implementation of `_.unset`.\n *\n * @private\n * @param {Object} object The object to modify.\n * @param {Array|string} path The property path to unset.\n * @returns {boolean} Returns `true` if the property is deleted, else `false`.\n */\n function baseUnset(object, path) {\n path = castPath(path, object);\n object = parent(object, path);\n return object == null || delete object[toKey(last(path))];\n }\n\n /**\n * The base implementation of `_.update`.\n *\n * @private\n * @param {Object} object The object to modify.\n * @param {Array|string} path The path of the property to update.\n * @param {Function} updater The function to produce the updated value.\n * @param {Function} [customizer] The function to customize path creation.\n * @returns {Object} Returns `object`.\n */\n function baseUpdate(object, path, updater, customizer) {\n return baseSet(object, path, updater(baseGet(object, path)), customizer);\n }\n\n /**\n * The base implementation of methods like `_.dropWhile` and `_.takeWhile`\n * without support for iteratee shorthands.\n *\n * @private\n * @param {Array} array The array to query.\n * @param {Function} predicate The function invoked per iteration.\n * @param {boolean} [isDrop] Specify dropping elements instead of taking them.\n * @param {boolean} [fromRight] Specify iterating from right to left.\n * @returns {Array} Returns the slice of `array`.\n */\n function baseWhile(array, predicate, isDrop, fromRight) {\n var length = array.length,\n index = fromRight ? length : -1;\n\n while ((fromRight ? index-- : ++index < length) &&\n predicate(array[index], index, array)) {}\n\n return isDrop\n ? baseSlice(array, (fromRight ? 0 : index), (fromRight ? index + 1 : length))\n : baseSlice(array, (fromRight ? index + 1 : 0), (fromRight ? length : index));\n }\n\n /**\n * The base implementation of `wrapperValue` which returns the result of\n * performing a sequence of actions on the unwrapped `value`, where each\n * successive action is supplied the return value of the previous.\n *\n * @private\n * @param {*} value The unwrapped value.\n * @param {Array} actions Actions to perform to resolve the unwrapped value.\n * @returns {*} Returns the resolved value.\n */\n function baseWrapperValue(value, actions) {\n var result = value;\n if (result instanceof LazyWrapper) {\n result = result.value();\n }\n return arrayReduce(actions, function(result, action) {\n return action.func.apply(action.thisArg, arrayPush([result], action.args));\n }, result);\n }\n\n /**\n * The base implementation of methods like `_.xor`, without support for\n * iteratee shorthands, that accepts an array of arrays to inspect.\n *\n * @private\n * @param {Array} arrays The arrays to inspect.\n * @param {Function} [iteratee] The iteratee invoked per element.\n * @param {Function} [comparator] The comparator invoked per element.\n * @returns {Array} Returns the new array of values.\n */\n function baseXor(arrays, iteratee, comparator) {\n var length = arrays.length;\n if (length < 2) {\n return length ? baseUniq(arrays[0]) : [];\n }\n var index = -1,\n result = Array(length);\n\n while (++index < length) {\n var array = arrays[index],\n othIndex = -1;\n\n while (++othIndex < length) {\n if (othIndex != index) {\n result[index] = baseDifference(result[index] || array, arrays[othIndex], iteratee, comparator);\n }\n }\n }\n return baseUniq(baseFlatten(result, 1), iteratee, comparator);\n }\n\n /**\n * This base implementation of `_.zipObject` which assigns values using `assignFunc`.\n *\n * @private\n * @param {Array} props The property identifiers.\n * @param {Array} values The property values.\n * @param {Function} assignFunc The function to assign values.\n * @returns {Object} Returns the new object.\n */\n function baseZipObject(props, values, assignFunc) {\n var index = -1,\n length = props.length,\n valsLength = values.length,\n result = {};\n\n while (++index < length) {\n var value = index < valsLength ? values[index] : undefined;\n assignFunc(result, props[index], value);\n }\n return result;\n }\n\n /**\n * Casts `value` to an empty array if it's not an array like object.\n *\n * @private\n * @param {*} value The value to inspect.\n * @returns {Array|Object} Returns the cast array-like object.\n */\n function castArrayLikeObject(value) {\n return isArrayLikeObject(value) ? value : [];\n }\n\n /**\n * Casts `value` to `identity` if it's not a function.\n *\n * @private\n * @param {*} value The value to inspect.\n * @returns {Function} Returns cast function.\n */\n function castFunction(value) {\n return typeof value == 'function' ? value : identity;\n }\n\n /**\n * Casts `value` to a path array if it's not one.\n *\n * @private\n * @param {*} value The value to inspect.\n * @param {Object} [object] The object to query keys on.\n * @returns {Array} Returns the cast property path array.\n */\n function castPath(value, object) {\n if (isArray(value)) {\n return value;\n }\n return isKey(value, object) ? [value] : stringToPath(toString(value));\n }\n\n /**\n * A `baseRest` alias which can be replaced with `identity` by module\n * replacement plugins.\n *\n * @private\n * @type {Function}\n * @param {Function} func The function to apply a rest parameter to.\n * @returns {Function} Returns the new function.\n */\n var castRest = baseRest;\n\n /**\n * Casts `array` to a slice if it's needed.\n *\n * @private\n * @param {Array} array The array to inspect.\n * @param {number} start The start position.\n * @param {number} [end=array.length] The end position.\n * @returns {Array} Returns the cast slice.\n */\n function castSlice(array, start, end) {\n var length = array.length;\n end = end === undefined ? length : end;\n return (!start && end >= length) ? array : baseSlice(array, start, end);\n }\n\n /**\n * A simple wrapper around the global [`clearTimeout`](https://mdn.io/clearTimeout).\n *\n * @private\n * @param {number|Object} id The timer id or timeout object of the timer to clear.\n */\n var clearTimeout = ctxClearTimeout || function(id) {\n return root.clearTimeout(id);\n };\n\n /**\n * Creates a clone of `buffer`.\n *\n * @private\n * @param {Buffer} buffer The buffer to clone.\n * @param {boolean} [isDeep] Specify a deep clone.\n * @returns {Buffer} Returns the cloned buffer.\n */\n function cloneBuffer(buffer, isDeep) {\n if (isDeep) {\n return buffer.slice();\n }\n var length = buffer.length,\n result = allocUnsafe ? allocUnsafe(length) : new buffer.constructor(length);\n\n buffer.copy(result);\n return result;\n }\n\n /**\n * Creates a clone of `arrayBuffer`.\n *\n * @private\n * @param {ArrayBuffer} arrayBuffer The array buffer to clone.\n * @returns {ArrayBuffer} Returns the cloned array buffer.\n */\n function cloneArrayBuffer(arrayBuffer) {\n var result = new arrayBuffer.constructor(arrayBuffer.byteLength);\n new Uint8Array(result).set(new Uint8Array(arrayBuffer));\n return result;\n }\n\n /**\n * Creates a clone of `dataView`.\n *\n * @private\n * @param {Object} dataView The data view to clone.\n * @param {boolean} [isDeep] Specify a deep clone.\n * @returns {Object} Returns the cloned data view.\n */\n function cloneDataView(dataView, isDeep) {\n var buffer = isDeep ? cloneArrayBuffer(dataView.buffer) : dataView.buffer;\n return new dataView.constructor(buffer, dataView.byteOffset, dataView.byteLength);\n }\n\n /**\n * Creates a clone of `regexp`.\n *\n * @private\n * @param {Object} regexp The regexp to clone.\n * @returns {Object} Returns the cloned regexp.\n */\n function cloneRegExp(regexp) {\n var result = new regexp.constructor(regexp.source, reFlags.exec(regexp));\n result.lastIndex = regexp.lastIndex;\n return result;\n }\n\n /**\n * Creates a clone of the `symbol` object.\n *\n * @private\n * @param {Object} symbol The symbol object to clone.\n * @returns {Object} Returns the cloned symbol object.\n */\n function cloneSymbol(symbol) {\n return symbolValueOf ? Object(symbolValueOf.call(symbol)) : {};\n }\n\n /**\n * Creates a clone of `typedArray`.\n *\n * @private\n * @param {Object} typedArray The typed array to clone.\n * @param {boolean} [isDeep] Specify a deep clone.\n * @returns {Object} Returns the cloned typed array.\n */\n function cloneTypedArray(typedArray, isDeep) {\n var buffer = isDeep ? cloneArrayBuffer(typedArray.buffer) : typedArray.buffer;\n return new typedArray.constructor(buffer, typedArray.byteOffset, typedArray.length);\n }\n\n /**\n * Compares values to sort them in ascending order.\n *\n * @private\n * @param {*} value The value to compare.\n * @param {*} other The other value to compare.\n * @returns {number} Returns the sort order indicator for `value`.\n */\n function compareAscending(value, other) {\n if (value !== other) {\n var valIsDefined = value !== undefined,\n valIsNull = value === null,\n valIsReflexive = value === value,\n valIsSymbol = isSymbol(value);\n\n var othIsDefined = other !== undefined,\n othIsNull = other === null,\n othIsReflexive = other === other,\n othIsSymbol = isSymbol(other);\n\n if ((!othIsNull && !othIsSymbol && !valIsSymbol && value > other) ||\n (valIsSymbol && othIsDefined && othIsReflexive && !othIsNull && !othIsSymbol) ||\n (valIsNull && othIsDefined && othIsReflexive) ||\n (!valIsDefined && othIsReflexive) ||\n !valIsReflexive) {\n return 1;\n }\n if ((!valIsNull && !valIsSymbol && !othIsSymbol && value < other) ||\n (othIsSymbol && valIsDefined && valIsReflexive && !valIsNull && !valIsSymbol) ||\n (othIsNull && valIsDefined && valIsReflexive) ||\n (!othIsDefined && valIsReflexive) ||\n !othIsReflexive) {\n return -1;\n }\n }\n return 0;\n }\n\n /**\n * Used by `_.orderBy` to compare multiple properties of a value to another\n * and stable sort them.\n *\n * If `orders` is unspecified, all values are sorted in ascending order. Otherwise,\n * specify an order of \"desc\" for descending or \"asc\" for ascending sort order\n * of corresponding values.\n *\n * @private\n * @param {Object} object The object to compare.\n * @param {Object} other The other object to compare.\n * @param {boolean[]|string[]} orders The order to sort by for each property.\n * @returns {number} Returns the sort order indicator for `object`.\n */\n function compareMultiple(object, other, orders) {\n var index = -1,\n objCriteria = object.criteria,\n othCriteria = other.criteria,\n length = objCriteria.length,\n ordersLength = orders.length;\n\n while (++index < length) {\n var result = compareAscending(objCriteria[index], othCriteria[index]);\n if (result) {\n if (index >= ordersLength) {\n return result;\n }\n var order = orders[index];\n return result * (order == 'desc' ? -1 : 1);\n }\n }\n // Fixes an `Array#sort` bug in the JS engine embedded in Adobe applications\n // that causes it, under certain circumstances, to provide the same value for\n // `object` and `other`. See https://github.com/jashkenas/underscore/pull/1247\n // for more details.\n //\n // This also ensures a stable sort in V8 and other engines.\n // See https://bugs.chromium.org/p/v8/issues/detail?id=90 for more details.\n return object.index - other.index;\n }\n\n /**\n * Creates an array that is the composition of partially applied arguments,\n * placeholders, and provided arguments into a single array of arguments.\n *\n * @private\n * @param {Array} args The provided arguments.\n * @param {Array} partials The arguments to prepend to those provided.\n * @param {Array} holders The `partials` placeholder indexes.\n * @params {boolean} [isCurried] Specify composing for a curried function.\n * @returns {Array} Returns the new array of composed arguments.\n */\n function composeArgs(args, partials, holders, isCurried) {\n var argsIndex = -1,\n argsLength = args.length,\n holdersLength = holders.length,\n leftIndex = -1,\n leftLength = partials.length,\n rangeLength = nativeMax(argsLength - holdersLength, 0),\n result = Array(leftLength + rangeLength),\n isUncurried = !isCurried;\n\n while (++leftIndex < leftLength) {\n result[leftIndex] = partials[leftIndex];\n }\n while (++argsIndex < holdersLength) {\n if (isUncurried || argsIndex < argsLength) {\n result[holders[argsIndex]] = args[argsIndex];\n }\n }\n while (rangeLength--) {\n result[leftIndex++] = args[argsIndex++];\n }\n return result;\n }\n\n /**\n * This function is like `composeArgs` except that the arguments composition\n * is tailored for `_.partialRight`.\n *\n * @private\n * @param {Array} args The provided arguments.\n * @param {Array} partials The arguments to append to those provided.\n * @param {Array} holders The `partials` placeholder indexes.\n * @params {boolean} [isCurried] Specify composing for a curried function.\n * @returns {Array} Returns the new array of composed arguments.\n */\n function composeArgsRight(args, partials, holders, isCurried) {\n var argsIndex = -1,\n argsLength = args.length,\n holdersIndex = -1,\n holdersLength = holders.length,\n rightIndex = -1,\n rightLength = partials.length,\n rangeLength = nativeMax(argsLength - holdersLength, 0),\n result = Array(rangeLength + rightLength),\n isUncurried = !isCurried;\n\n while (++argsIndex < rangeLength) {\n result[argsIndex] = args[argsIndex];\n }\n var offset = argsIndex;\n while (++rightIndex < rightLength) {\n result[offset + rightIndex] = partials[rightIndex];\n }\n while (++holdersIndex < holdersLength) {\n if (isUncurried || argsIndex < argsLength) {\n result[offset + holders[holdersIndex]] = args[argsIndex++];\n }\n }\n return result;\n }\n\n /**\n * Copies the values of `source` to `array`.\n *\n * @private\n * @param {Array} source The array to copy values from.\n * @param {Array} [array=[]] The array to copy values to.\n * @returns {Array} Returns `array`.\n */\n function copyArray(source, array) {\n var index = -1,\n length = source.length;\n\n array || (array = Array(length));\n while (++index < length) {\n array[index] = source[index];\n }\n return array;\n }\n\n /**\n * Copies properties of `source` to `object`.\n *\n * @private\n * @param {Object} source The object to copy properties from.\n * @param {Array} props The property identifiers to copy.\n * @param {Object} [object={}] The object to copy properties to.\n * @param {Function} [customizer] The function to customize copied values.\n * @returns {Object} Returns `object`.\n */\n function copyObject(source, props, object, customizer) {\n var isNew = !object;\n object || (object = {});\n\n var index = -1,\n length = props.length;\n\n while (++index < length) {\n var key = props[index];\n\n var newValue = customizer\n ? customizer(object[key], source[key], key, object, source)\n : undefined;\n\n if (newValue === undefined) {\n newValue = source[key];\n }\n if (isNew) {\n baseAssignValue(object, key, newValue);\n } else {\n assignValue(object, key, newValue);\n }\n }\n return object;\n }\n\n /**\n * Copies own symbols of `source` to `object`.\n *\n * @private\n * @param {Object} source The object to copy symbols from.\n * @param {Object} [object={}] The object to copy symbols to.\n * @returns {Object} Returns `object`.\n */\n function copySymbols(source, object) {\n return copyObject(source, getSymbols(source), object);\n }\n\n /**\n * Copies own and inherited symbols of `source` to `object`.\n *\n * @private\n * @param {Object} source The object to copy symbols from.\n * @param {Object} [object={}] The object to copy symbols to.\n * @returns {Object} Returns `object`.\n */\n function copySymbolsIn(source, object) {\n return copyObject(source, getSymbolsIn(source), object);\n }\n\n /**\n * Creates a function like `_.groupBy`.\n *\n * @private\n * @param {Function} setter The function to set accumulator values.\n * @param {Function} [initializer] The accumulator object initializer.\n * @returns {Function} Returns the new aggregator function.\n */\n function createAggregator(setter, initializer) {\n return function(collection, iteratee) {\n var func = isArray(collection) ? arrayAggregator : baseAggregator,\n accumulator = initializer ? initializer() : {};\n\n return func(collection, setter, getIteratee(iteratee, 2), accumulator);\n };\n }\n\n /**\n * Creates a function like `_.assign`.\n *\n * @private\n * @param {Function} assigner The function to assign values.\n * @returns {Function} Returns the new assigner function.\n */\n function createAssigner(assigner) {\n return baseRest(function(object, sources) {\n var index = -1,\n length = sources.length,\n customizer = length > 1 ? sources[length - 1] : undefined,\n guard = length > 2 ? sources[2] : undefined;\n\n customizer = (assigner.length > 3 && typeof customizer == 'function')\n ? (length--, customizer)\n : undefined;\n\n if (guard && isIterateeCall(sources[0], sources[1], guard)) {\n customizer = length < 3 ? undefined : customizer;\n length = 1;\n }\n object = Object(object);\n while (++index < length) {\n var source = sources[index];\n if (source) {\n assigner(object, source, index, customizer);\n }\n }\n return object;\n });\n }\n\n /**\n * Creates a `baseEach` or `baseEachRight` function.\n *\n * @private\n * @param {Function} eachFunc The function to iterate over a collection.\n * @param {boolean} [fromRight] Specify iterating from right to left.\n * @returns {Function} Returns the new base function.\n */\n function createBaseEach(eachFunc, fromRight) {\n return function(collection, iteratee) {\n if (collection == null) {\n return collection;\n }\n if (!isArrayLike(collection)) {\n return eachFunc(collection, iteratee);\n }\n var length = collection.length,\n index = fromRight ? length : -1,\n iterable = Object(collection);\n\n while ((fromRight ? index-- : ++index < length)) {\n if (iteratee(iterable[index], index, iterable) === false) {\n break;\n }\n }\n return collection;\n };\n }\n\n /**\n * Creates a base function for methods like `_.forIn` and `_.forOwn`.\n *\n * @private\n * @param {boolean} [fromRight] Specify iterating from right to left.\n * @returns {Function} Returns the new base function.\n */\n function createBaseFor(fromRight) {\n return function(object, iteratee, keysFunc) {\n var index = -1,\n iterable = Object(object),\n props = keysFunc(object),\n length = props.length;\n\n while (length--) {\n var key = props[fromRight ? length : ++index];\n if (iteratee(iterable[key], key, iterable) === false) {\n break;\n }\n }\n return object;\n };\n }\n\n /**\n * Creates a function that wraps `func` to invoke it with the optional `this`\n * binding of `thisArg`.\n *\n * @private\n * @param {Function} func The function to wrap.\n * @param {number} bitmask The bitmask flags. See `createWrap` for more details.\n * @param {*} [thisArg] The `this` binding of `func`.\n * @returns {Function} Returns the new wrapped function.\n */\n function createBind(func, bitmask, thisArg) {\n var isBind = bitmask & WRAP_BIND_FLAG,\n Ctor = createCtor(func);\n\n function wrapper() {\n var fn = (this && this !== root && this instanceof wrapper) ? Ctor : func;\n return fn.apply(isBind ? thisArg : this, arguments);\n }\n return wrapper;\n }\n\n /**\n * Creates a function like `_.lowerFirst`.\n *\n * @private\n * @param {string} methodName The name of the `String` case method to use.\n * @returns {Function} Returns the new case function.\n */\n function createCaseFirst(methodName) {\n return function(string) {\n string = toString(string);\n\n var strSymbols = hasUnicode(string)\n ? stringToArray(string)\n : undefined;\n\n var chr = strSymbols\n ? strSymbols[0]\n : string.charAt(0);\n\n var trailing = strSymbols\n ? castSlice(strSymbols, 1).join('')\n : string.slice(1);\n\n return chr[methodName]() + trailing;\n };\n }\n\n /**\n * Creates a function like `_.camelCase`.\n *\n * @private\n * @param {Function} callback The function to combine each word.\n * @returns {Function} Returns the new compounder function.\n */\n function createCompounder(callback) {\n return function(string) {\n return arrayReduce(words(deburr(string).replace(reApos, '')), callback, '');\n };\n }\n\n /**\n * Creates a function that produces an instance of `Ctor` regardless of\n * whether it was invoked as part of a `new` expression or by `call` or `apply`.\n *\n * @private\n * @param {Function} Ctor The constructor to wrap.\n * @returns {Function} Returns the new wrapped function.\n */\n function createCtor(Ctor) {\n return function() {\n // Use a `switch` statement to work with class constructors. See\n // http://ecma-international.org/ecma-262/7.0/#sec-ecmascript-function-objects-call-thisargument-argumentslist\n // for more details.\n var args = arguments;\n switch (args.length) {\n case 0: return new Ctor;\n case 1: return new Ctor(args[0]);\n case 2: return new Ctor(args[0], args[1]);\n case 3: return new Ctor(args[0], args[1], args[2]);\n case 4: return new Ctor(args[0], args[1], args[2], args[3]);\n case 5: return new Ctor(args[0], args[1], args[2], args[3], args[4]);\n case 6: return new Ctor(args[0], args[1], args[2], args[3], args[4], args[5]);\n case 7: return new Ctor(args[0], args[1], args[2], args[3], args[4], args[5], args[6]);\n }\n var thisBinding = baseCreate(Ctor.prototype),\n result = Ctor.apply(thisBinding, args);\n\n // Mimic the constructor's `return` behavior.\n // See https://es5.github.io/#x13.2.2 for more details.\n return isObject(result) ? result : thisBinding;\n };\n }\n\n /**\n * Creates a function that wraps `func` to enable currying.\n *\n * @private\n * @param {Function} func The function to wrap.\n * @param {number} bitmask The bitmask flags. See `createWrap` for more details.\n * @param {number} arity The arity of `func`.\n * @returns {Function} Returns the new wrapped function.\n */\n function createCurry(func, bitmask, arity) {\n var Ctor = createCtor(func);\n\n function wrapper() {\n var length = arguments.length,\n args = Array(length),\n index = length,\n placeholder = getHolder(wrapper);\n\n while (index--) {\n args[index] = arguments[index];\n }\n var holders = (length < 3 && args[0] !== placeholder && args[length - 1] !== placeholder)\n ? []\n : replaceHolders(args, placeholder);\n\n length -= holders.length;\n if (length < arity) {\n return createRecurry(\n func, bitmask, createHybrid, wrapper.placeholder, undefined,\n args, holders, undefined, undefined, arity - length);\n }\n var fn = (this && this !== root && this instanceof wrapper) ? Ctor : func;\n return apply(fn, this, args);\n }\n return wrapper;\n }\n\n /**\n * Creates a `_.find` or `_.findLast` function.\n *\n * @private\n * @param {Function} findIndexFunc The function to find the collection index.\n * @returns {Function} Returns the new find function.\n */\n function createFind(findIndexFunc) {\n return function(collection, predicate, fromIndex) {\n var iterable = Object(collection);\n if (!isArrayLike(collection)) {\n var iteratee = getIteratee(predicate, 3);\n collection = keys(collection);\n predicate = function(key) { return iteratee(iterable[key], key, iterable); };\n }\n var index = findIndexFunc(collection, predicate, fromIndex);\n return index > -1 ? iterable[iteratee ? collection[index] : index] : undefined;\n };\n }\n\n /**\n * Creates a `_.flow` or `_.flowRight` function.\n *\n * @private\n * @param {boolean} [fromRight] Specify iterating from right to left.\n * @returns {Function} Returns the new flow function.\n */\n function createFlow(fromRight) {\n return flatRest(function(funcs) {\n var length = funcs.length,\n index = length,\n prereq = LodashWrapper.prototype.thru;\n\n if (fromRight) {\n funcs.reverse();\n }\n while (index--) {\n var func = funcs[index];\n if (typeof func != 'function') {\n throw new TypeError(FUNC_ERROR_TEXT);\n }\n if (prereq && !wrapper && getFuncName(func) == 'wrapper') {\n var wrapper = new LodashWrapper([], true);\n }\n }\n index = wrapper ? index : length;\n while (++index < length) {\n func = funcs[index];\n\n var funcName = getFuncName(func),\n data = funcName == 'wrapper' ? getData(func) : undefined;\n\n if (data && isLaziable(data[0]) &&\n data[1] == (WRAP_ARY_FLAG | WRAP_CURRY_FLAG | WRAP_PARTIAL_FLAG | WRAP_REARG_FLAG) &&\n !data[4].length && data[9] == 1\n ) {\n wrapper = wrapper[getFuncName(data[0])].apply(wrapper, data[3]);\n } else {\n wrapper = (func.length == 1 && isLaziable(func))\n ? wrapper[funcName]()\n : wrapper.thru(func);\n }\n }\n return function() {\n var args = arguments,\n value = args[0];\n\n if (wrapper && args.length == 1 && isArray(value)) {\n return wrapper.plant(value).value();\n }\n var index = 0,\n result = length ? funcs[index].apply(this, args) : value;\n\n while (++index < length) {\n result = funcs[index].call(this, result);\n }\n return result;\n };\n });\n }\n\n /**\n * Creates a function that wraps `func` to invoke it with optional `this`\n * binding of `thisArg`, partial application, and currying.\n *\n * @private\n * @param {Function|string} func The function or method name to wrap.\n * @param {number} bitmask The bitmask flags. See `createWrap` for more details.\n * @param {*} [thisArg] The `this` binding of `func`.\n * @param {Array} [partials] The arguments to prepend to those provided to\n * the new function.\n * @param {Array} [holders] The `partials` placeholder indexes.\n * @param {Array} [partialsRight] The arguments to append to those provided\n * to the new function.\n * @param {Array} [holdersRight] The `partialsRight` placeholder indexes.\n * @param {Array} [argPos] The argument positions of the new function.\n * @param {number} [ary] The arity cap of `func`.\n * @param {number} [arity] The arity of `func`.\n * @returns {Function} Returns the new wrapped function.\n */\n function createHybrid(func, bitmask, thisArg, partials, holders, partialsRight, holdersRight, argPos, ary, arity) {\n var isAry = bitmask & WRAP_ARY_FLAG,\n isBind = bitmask & WRAP_BIND_FLAG,\n isBindKey = bitmask & WRAP_BIND_KEY_FLAG,\n isCurried = bitmask & (WRAP_CURRY_FLAG | WRAP_CURRY_RIGHT_FLAG),\n isFlip = bitmask & WRAP_FLIP_FLAG,\n Ctor = isBindKey ? undefined : createCtor(func);\n\n function wrapper() {\n var length = arguments.length,\n args = Array(length),\n index = length;\n\n while (index--) {\n args[index] = arguments[index];\n }\n if (isCurried) {\n var placeholder = getHolder(wrapper),\n holdersCount = countHolders(args, placeholder);\n }\n if (partials) {\n args = composeArgs(args, partials, holders, isCurried);\n }\n if (partialsRight) {\n args = composeArgsRight(args, partialsRight, holdersRight, isCurried);\n }\n length -= holdersCount;\n if (isCurried && length < arity) {\n var newHolders = replaceHolders(args, placeholder);\n return createRecurry(\n func, bitmask, createHybrid, wrapper.placeholder, thisArg,\n args, newHolders, argPos, ary, arity - length\n );\n }\n var thisBinding = isBind ? thisArg : this,\n fn = isBindKey ? thisBinding[func] : func;\n\n length = args.length;\n if (argPos) {\n args = reorder(args, argPos);\n } else if (isFlip && length > 1) {\n args.reverse();\n }\n if (isAry && ary < length) {\n args.length = ary;\n }\n if (this && this !== root && this instanceof wrapper) {\n fn = Ctor || createCtor(fn);\n }\n return fn.apply(thisBinding, args);\n }\n return wrapper;\n }\n\n /**\n * Creates a function like `_.invertBy`.\n *\n * @private\n * @param {Function} setter The function to set accumulator values.\n * @param {Function} toIteratee The function to resolve iteratees.\n * @returns {Function} Returns the new inverter function.\n */\n function createInverter(setter, toIteratee) {\n return function(object, iteratee) {\n return baseInverter(object, setter, toIteratee(iteratee), {});\n };\n }\n\n /**\n * Creates a function that performs a mathematical operation on two values.\n *\n * @private\n * @param {Function} operator The function to perform the operation.\n * @param {number} [defaultValue] The value used for `undefined` arguments.\n * @returns {Function} Returns the new mathematical operation function.\n */\n function createMathOperation(operator, defaultValue) {\n return function(value, other) {\n var result;\n if (value === undefined && other === undefined) {\n return defaultValue;\n }\n if (value !== undefined) {\n result = value;\n }\n if (other !== undefined) {\n if (result === undefined) {\n return other;\n }\n if (typeof value == 'string' || typeof other == 'string') {\n value = baseToString(value);\n other = baseToString(other);\n } else {\n value = baseToNumber(value);\n other = baseToNumber(other);\n }\n result = operator(value, other);\n }\n return result;\n };\n }\n\n /**\n * Creates a function like `_.over`.\n *\n * @private\n * @param {Function} arrayFunc The function to iterate over iteratees.\n * @returns {Function} Returns the new over function.\n */\n function createOver(arrayFunc) {\n return flatRest(function(iteratees) {\n iteratees = arrayMap(iteratees, baseUnary(getIteratee()));\n return baseRest(function(args) {\n var thisArg = this;\n return arrayFunc(iteratees, function(iteratee) {\n return apply(iteratee, thisArg, args);\n });\n });\n });\n }\n\n /**\n * Creates the padding for `string` based on `length`. The `chars` string\n * is truncated if the number of characters exceeds `length`.\n *\n * @private\n * @param {number} length The padding length.\n * @param {string} [chars=' '] The string used as padding.\n * @returns {string} Returns the padding for `string`.\n */\n function createPadding(length, chars) {\n chars = chars === undefined ? ' ' : baseToString(chars);\n\n var charsLength = chars.length;\n if (charsLength < 2) {\n return charsLength ? baseRepeat(chars, length) : chars;\n }\n var result = baseRepeat(chars, nativeCeil(length / stringSize(chars)));\n return hasUnicode(chars)\n ? castSlice(stringToArray(result), 0, length).join('')\n : result.slice(0, length);\n }\n\n /**\n * Creates a function that wraps `func` to invoke it with the `this` binding\n * of `thisArg` and `partials` prepended to the arguments it receives.\n *\n * @private\n * @param {Function} func The function to wrap.\n * @param {number} bitmask The bitmask flags. See `createWrap` for more details.\n * @param {*} thisArg The `this` binding of `func`.\n * @param {Array} partials The arguments to prepend to those provided to\n * the new function.\n * @returns {Function} Returns the new wrapped function.\n */\n function createPartial(func, bitmask, thisArg, partials) {\n var isBind = bitmask & WRAP_BIND_FLAG,\n Ctor = createCtor(func);\n\n function wrapper() {\n var argsIndex = -1,\n argsLength = arguments.length,\n leftIndex = -1,\n leftLength = partials.length,\n args = Array(leftLength + argsLength),\n fn = (this && this !== root && this instanceof wrapper) ? Ctor : func;\n\n while (++leftIndex < leftLength) {\n args[leftIndex] = partials[leftIndex];\n }\n while (argsLength--) {\n args[leftIndex++] = arguments[++argsIndex];\n }\n return apply(fn, isBind ? thisArg : this, args);\n }\n return wrapper;\n }\n\n /**\n * Creates a `_.range` or `_.rangeRight` function.\n *\n * @private\n * @param {boolean} [fromRight] Specify iterating from right to left.\n * @returns {Function} Returns the new range function.\n */\n function createRange(fromRight) {\n return function(start, end, step) {\n if (step && typeof step != 'number' && isIterateeCall(start, end, step)) {\n end = step = undefined;\n }\n // Ensure the sign of `-0` is preserved.\n start = toFinite(start);\n if (end === undefined) {\n end = start;\n start = 0;\n } else {\n end = toFinite(end);\n }\n step = step === undefined ? (start < end ? 1 : -1) : toFinite(step);\n return baseRange(start, end, step, fromRight);\n };\n }\n\n /**\n * Creates a function that performs a relational operation on two values.\n *\n * @private\n * @param {Function} operator The function to perform the operation.\n * @returns {Function} Returns the new relational operation function.\n */\n function createRelationalOperation(operator) {\n return function(value, other) {\n if (!(typeof value == 'string' && typeof other == 'string')) {\n value = toNumber(value);\n other = toNumber(other);\n }\n return operator(value, other);\n };\n }\n\n /**\n * Creates a function that wraps `func` to continue currying.\n *\n * @private\n * @param {Function} func The function to wrap.\n * @param {number} bitmask The bitmask flags. See `createWrap` for more details.\n * @param {Function} wrapFunc The function to create the `func` wrapper.\n * @param {*} placeholder The placeholder value.\n * @param {*} [thisArg] The `this` binding of `func`.\n * @param {Array} [partials] The arguments to prepend to those provided to\n * the new function.\n * @param {Array} [holders] The `partials` placeholder indexes.\n * @param {Array} [argPos] The argument positions of the new function.\n * @param {number} [ary] The arity cap of `func`.\n * @param {number} [arity] The arity of `func`.\n * @returns {Function} Returns the new wrapped function.\n */\n function createRecurry(func, bitmask, wrapFunc, placeholder, thisArg, partials, holders, argPos, ary, arity) {\n var isCurry = bitmask & WRAP_CURRY_FLAG,\n newHolders = isCurry ? holders : undefined,\n newHoldersRight = isCurry ? undefined : holders,\n newPartials = isCurry ? partials : undefined,\n newPartialsRight = isCurry ? undefined : partials;\n\n bitmask |= (isCurry ? WRAP_PARTIAL_FLAG : WRAP_PARTIAL_RIGHT_FLAG);\n bitmask &= ~(isCurry ? WRAP_PARTIAL_RIGHT_FLAG : WRAP_PARTIAL_FLAG);\n\n if (!(bitmask & WRAP_CURRY_BOUND_FLAG)) {\n bitmask &= ~(WRAP_BIND_FLAG | WRAP_BIND_KEY_FLAG);\n }\n var newData = [\n func, bitmask, thisArg, newPartials, newHolders, newPartialsRight,\n newHoldersRight, argPos, ary, arity\n ];\n\n var result = wrapFunc.apply(undefined, newData);\n if (isLaziable(func)) {\n setData(result, newData);\n }\n result.placeholder = placeholder;\n return setWrapToString(result, func, bitmask);\n }\n\n /**\n * Creates a function like `_.round`.\n *\n * @private\n * @param {string} methodName The name of the `Math` method to use when rounding.\n * @returns {Function} Returns the new round function.\n */\n function createRound(methodName) {\n var func = Math[methodName];\n return function(number, precision) {\n number = toNumber(number);\n precision = precision == null ? 0 : nativeMin(toInteger(precision), 292);\n if (precision && nativeIsFinite(number)) {\n // Shift with exponential notation to avoid floating-point issues.\n // See [MDN](https://mdn.io/round#Examples) for more details.\n var pair = (toString(number) + 'e').split('e'),\n value = func(pair[0] + 'e' + (+pair[1] + precision));\n\n pair = (toString(value) + 'e').split('e');\n return +(pair[0] + 'e' + (+pair[1] - precision));\n }\n return func(number);\n };\n }\n\n /**\n * Creates a set object of `values`.\n *\n * @private\n * @param {Array} values The values to add to the set.\n * @returns {Object} Returns the new set.\n */\n var createSet = !(Set && (1 / setToArray(new Set([,-0]))[1]) == INFINITY) ? noop : function(values) {\n return new Set(values);\n };\n\n /**\n * Creates a `_.toPairs` or `_.toPairsIn` function.\n *\n * @private\n * @param {Function} keysFunc The function to get the keys of a given object.\n * @returns {Function} Returns the new pairs function.\n */\n function createToPairs(keysFunc) {\n return function(object) {\n var tag = getTag(object);\n if (tag == mapTag) {\n return mapToArray(object);\n }\n if (tag == setTag) {\n return setToPairs(object);\n }\n return baseToPairs(object, keysFunc(object));\n };\n }\n\n /**\n * Creates a function that either curries or invokes `func` with optional\n * `this` binding and partially applied arguments.\n *\n * @private\n * @param {Function|string} func The function or method name to wrap.\n * @param {number} bitmask The bitmask flags.\n * 1 - `_.bind`\n * 2 - `_.bindKey`\n * 4 - `_.curry` or `_.curryRight` of a bound function\n * 8 - `_.curry`\n * 16 - `_.curryRight`\n * 32 - `_.partial`\n * 64 - `_.partialRight`\n * 128 - `_.rearg`\n * 256 - `_.ary`\n * 512 - `_.flip`\n * @param {*} [thisArg] The `this` binding of `func`.\n * @param {Array} [partials] The arguments to be partially applied.\n * @param {Array} [holders] The `partials` placeholder indexes.\n * @param {Array} [argPos] The argument positions of the new function.\n * @param {number} [ary] The arity cap of `func`.\n * @param {number} [arity] The arity of `func`.\n * @returns {Function} Returns the new wrapped function.\n */\n function createWrap(func, bitmask, thisArg, partials, holders, argPos, ary, arity) {\n var isBindKey = bitmask & WRAP_BIND_KEY_FLAG;\n if (!isBindKey && typeof func != 'function') {\n throw new TypeError(FUNC_ERROR_TEXT);\n }\n var length = partials ? partials.length : 0;\n if (!length) {\n bitmask &= ~(WRAP_PARTIAL_FLAG | WRAP_PARTIAL_RIGHT_FLAG);\n partials = holders = undefined;\n }\n ary = ary === undefined ? ary : nativeMax(toInteger(ary), 0);\n arity = arity === undefined ? arity : toInteger(arity);\n length -= holders ? holders.length : 0;\n\n if (bitmask & WRAP_PARTIAL_RIGHT_FLAG) {\n var partialsRight = partials,\n holdersRight = holders;\n\n partials = holders = undefined;\n }\n var data = isBindKey ? undefined : getData(func);\n\n var newData = [\n func, bitmask, thisArg, partials, holders, partialsRight, holdersRight,\n argPos, ary, arity\n ];\n\n if (data) {\n mergeData(newData, data);\n }\n func = newData[0];\n bitmask = newData[1];\n thisArg = newData[2];\n partials = newData[3];\n holders = newData[4];\n arity = newData[9] = newData[9] === undefined\n ? (isBindKey ? 0 : func.length)\n : nativeMax(newData[9] - length, 0);\n\n if (!arity && bitmask & (WRAP_CURRY_FLAG | WRAP_CURRY_RIGHT_FLAG)) {\n bitmask &= ~(WRAP_CURRY_FLAG | WRAP_CURRY_RIGHT_FLAG);\n }\n if (!bitmask || bitmask == WRAP_BIND_FLAG) {\n var result = createBind(func, bitmask, thisArg);\n } else if (bitmask == WRAP_CURRY_FLAG || bitmask == WRAP_CURRY_RIGHT_FLAG) {\n result = createCurry(func, bitmask, arity);\n } else if ((bitmask == WRAP_PARTIAL_FLAG || bitmask == (WRAP_BIND_FLAG | WRAP_PARTIAL_FLAG)) && !holders.length) {\n result = createPartial(func, bitmask, thisArg, partials);\n } else {\n result = createHybrid.apply(undefined, newData);\n }\n var setter = data ? baseSetData : setData;\n return setWrapToString(setter(result, newData), func, bitmask);\n }\n\n /**\n * Used by `_.defaults` to customize its `_.assignIn` use to assign properties\n * of source objects to the destination object for all destination properties\n * that resolve to `undefined`.\n *\n * @private\n * @param {*} objValue The destination value.\n * @param {*} srcValue The source value.\n * @param {string} key The key of the property to assign.\n * @param {Object} object The parent object of `objValue`.\n * @returns {*} Returns the value to assign.\n */\n function customDefaultsAssignIn(objValue, srcValue, key, object) {\n if (objValue === undefined ||\n (eq(objValue, objectProto[key]) && !hasOwnProperty.call(object, key))) {\n return srcValue;\n }\n return objValue;\n }\n\n /**\n * Used by `_.defaultsDeep` to customize its `_.merge` use to merge source\n * objects into destination objects that are passed thru.\n *\n * @private\n * @param {*} objValue The destination value.\n * @param {*} srcValue The source value.\n * @param {string} key The key of the property to merge.\n * @param {Object} object The parent object of `objValue`.\n * @param {Object} source The parent object of `srcValue`.\n * @param {Object} [stack] Tracks traversed source values and their merged\n * counterparts.\n * @returns {*} Returns the value to assign.\n */\n function customDefaultsMerge(objValue, srcValue, key, object, source, stack) {\n if (isObject(objValue) && isObject(srcValue)) {\n // Recursively merge objects and arrays (susceptible to call stack limits).\n stack.set(srcValue, objValue);\n baseMerge(objValue, srcValue, undefined, customDefaultsMerge, stack);\n stack['delete'](srcValue);\n }\n return objValue;\n }\n\n /**\n * Used by `_.omit` to customize its `_.cloneDeep` use to only clone plain\n * objects.\n *\n * @private\n * @param {*} value The value to inspect.\n * @param {string} key The key of the property to inspect.\n * @returns {*} Returns the uncloned value or `undefined` to defer cloning to `_.cloneDeep`.\n */\n function customOmitClone(value) {\n return isPlainObject(value) ? undefined : value;\n }\n\n /**\n * A specialized version of `baseIsEqualDeep` for arrays with support for\n * partial deep comparisons.\n *\n * @private\n * @param {Array} array The array to compare.\n * @param {Array} other The other array to compare.\n * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.\n * @param {Function} customizer The function to customize comparisons.\n * @param {Function} equalFunc The function to determine equivalents of values.\n * @param {Object} stack Tracks traversed `array` and `other` objects.\n * @returns {boolean} Returns `true` if the arrays are equivalent, else `false`.\n */\n function equalArrays(array, other, bitmask, customizer, equalFunc, stack) {\n var isPartial = bitmask & COMPARE_PARTIAL_FLAG,\n arrLength = array.length,\n othLength = other.length;\n\n if (arrLength != othLength && !(isPartial && othLength > arrLength)) {\n return false;\n }\n // Check that cyclic values are equal.\n var arrStacked = stack.get(array);\n var othStacked = stack.get(other);\n if (arrStacked && othStacked) {\n return arrStacked == other && othStacked == array;\n }\n var index = -1,\n result = true,\n seen = (bitmask & COMPARE_UNORDERED_FLAG) ? new SetCache : undefined;\n\n stack.set(array, other);\n stack.set(other, array);\n\n // Ignore non-index properties.\n while (++index < arrLength) {\n var arrValue = array[index],\n othValue = other[index];\n\n if (customizer) {\n var compared = isPartial\n ? customizer(othValue, arrValue, index, other, array, stack)\n : customizer(arrValue, othValue, index, array, other, stack);\n }\n if (compared !== undefined) {\n if (compared) {\n continue;\n }\n result = false;\n break;\n }\n // Recursively compare arrays (susceptible to call stack limits).\n if (seen) {\n if (!arraySome(other, function(othValue, othIndex) {\n if (!cacheHas(seen, othIndex) &&\n (arrValue === othValue || equalFunc(arrValue, othValue, bitmask, customizer, stack))) {\n return seen.push(othIndex);\n }\n })) {\n result = false;\n break;\n }\n } else if (!(\n arrValue === othValue ||\n equalFunc(arrValue, othValue, bitmask, customizer, stack)\n )) {\n result = false;\n break;\n }\n }\n stack['delete'](array);\n stack['delete'](other);\n return result;\n }\n\n /**\n * A specialized version of `baseIsEqualDeep` for comparing objects of\n * the same `toStringTag`.\n *\n * **Note:** This function only supports comparing values with tags of\n * `Boolean`, `Date`, `Error`, `Number`, `RegExp`, or `String`.\n *\n * @private\n * @param {Object} object The object to compare.\n * @param {Object} other The other object to compare.\n * @param {string} tag The `toStringTag` of the objects to compare.\n * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.\n * @param {Function} customizer The function to customize comparisons.\n * @param {Function} equalFunc The function to determine equivalents of values.\n * @param {Object} stack Tracks traversed `object` and `other` objects.\n * @returns {boolean} Returns `true` if the objects are equivalent, else `false`.\n */\n function equalByTag(object, other, tag, bitmask, customizer, equalFunc, stack) {\n switch (tag) {\n case dataViewTag:\n if ((object.byteLength != other.byteLength) ||\n (object.byteOffset != other.byteOffset)) {\n return false;\n }\n object = object.buffer;\n other = other.buffer;\n\n case arrayBufferTag:\n if ((object.byteLength != other.byteLength) ||\n !equalFunc(new Uint8Array(object), new Uint8Array(other))) {\n return false;\n }\n return true;\n\n case boolTag:\n case dateTag:\n case numberTag:\n // Coerce booleans to `1` or `0` and dates to milliseconds.\n // Invalid dates are coerced to `NaN`.\n return eq(+object, +other);\n\n case errorTag:\n return object.name == other.name && object.message == other.message;\n\n case regexpTag:\n case stringTag:\n // Coerce regexes to strings and treat strings, primitives and objects,\n // as equal. See http://www.ecma-international.org/ecma-262/7.0/#sec-regexp.prototype.tostring\n // for more details.\n return object == (other + '');\n\n case mapTag:\n var convert = mapToArray;\n\n case setTag:\n var isPartial = bitmask & COMPARE_PARTIAL_FLAG;\n convert || (convert = setToArray);\n\n if (object.size != other.size && !isPartial) {\n return false;\n }\n // Assume cyclic values are equal.\n var stacked = stack.get(object);\n if (stacked) {\n return stacked == other;\n }\n bitmask |= COMPARE_UNORDERED_FLAG;\n\n // Recursively compare objects (susceptible to call stack limits).\n stack.set(object, other);\n var result = equalArrays(convert(object), convert(other), bitmask, customizer, equalFunc, stack);\n stack['delete'](object);\n return result;\n\n case symbolTag:\n if (symbolValueOf) {\n return symbolValueOf.call(object) == symbolValueOf.call(other);\n }\n }\n return false;\n }\n\n /**\n * A specialized version of `baseIsEqualDeep` for objects with support for\n * partial deep comparisons.\n *\n * @private\n * @param {Object} object The object to compare.\n * @param {Object} other The other object to compare.\n * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.\n * @param {Function} customizer The function to customize comparisons.\n * @param {Function} equalFunc The function to determine equivalents of values.\n * @param {Object} stack Tracks traversed `object` and `other` objects.\n * @returns {boolean} Returns `true` if the objects are equivalent, else `false`.\n */\n function equalObjects(object, other, bitmask, customizer, equalFunc, stack) {\n var isPartial = bitmask & COMPARE_PARTIAL_FLAG,\n objProps = getAllKeys(object),\n objLength = objProps.length,\n othProps = getAllKeys(other),\n othLength = othProps.length;\n\n if (objLength != othLength && !isPartial) {\n return false;\n }\n var index = objLength;\n while (index--) {\n var key = objProps[index];\n if (!(isPartial ? key in other : hasOwnProperty.call(other, key))) {\n return false;\n }\n }\n // Check that cyclic values are equal.\n var objStacked = stack.get(object);\n var othStacked = stack.get(other);\n if (objStacked && othStacked) {\n return objStacked == other && othStacked == object;\n }\n var result = true;\n stack.set(object, other);\n stack.set(other, object);\n\n var skipCtor = isPartial;\n while (++index < objLength) {\n key = objProps[index];\n var objValue = object[key],\n othValue = other[key];\n\n if (customizer) {\n var compared = isPartial\n ? customizer(othValue, objValue, key, other, object, stack)\n : customizer(objValue, othValue, key, object, other, stack);\n }\n // Recursively compare objects (susceptible to call stack limits).\n if (!(compared === undefined\n ? (objValue === othValue || equalFunc(objValue, othValue, bitmask, customizer, stack))\n : compared\n )) {\n result = false;\n break;\n }\n skipCtor || (skipCtor = key == 'constructor');\n }\n if (result && !skipCtor) {\n var objCtor = object.constructor,\n othCtor = other.constructor;\n\n // Non `Object` object instances with different constructors are not equal.\n if (objCtor != othCtor &&\n ('constructor' in object && 'constructor' in other) &&\n !(typeof objCtor == 'function' && objCtor instanceof objCtor &&\n typeof othCtor == 'function' && othCtor instanceof othCtor)) {\n result = false;\n }\n }\n stack['delete'](object);\n stack['delete'](other);\n return result;\n }\n\n /**\n * A specialized version of `baseRest` which flattens the rest array.\n *\n * @private\n * @param {Function} func The function to apply a rest parameter to.\n * @returns {Function} Returns the new function.\n */\n function flatRest(func) {\n return setToString(overRest(func, undefined, flatten), func + '');\n }\n\n /**\n * Creates an array of own enumerable property names and symbols of `object`.\n *\n * @private\n * @param {Object} object The object to query.\n * @returns {Array} Returns the array of property names and symbols.\n */\n function getAllKeys(object) {\n return baseGetAllKeys(object, keys, getSymbols);\n }\n\n /**\n * Creates an array of own and inherited enumerable property names and\n * symbols of `object`.\n *\n * @private\n * @param {Object} object The object to query.\n * @returns {Array} Returns the array of property names and symbols.\n */\n function getAllKeysIn(object) {\n return baseGetAllKeys(object, keysIn, getSymbolsIn);\n }\n\n /**\n * Gets metadata for `func`.\n *\n * @private\n * @param {Function} func The function to query.\n * @returns {*} Returns the metadata for `func`.\n */\n var getData = !metaMap ? noop : function(func) {\n return metaMap.get(func);\n };\n\n /**\n * Gets the name of `func`.\n *\n * @private\n * @param {Function} func The function to query.\n * @returns {string} Returns the function name.\n */\n function getFuncName(func) {\n var result = (func.name + ''),\n array = realNames[result],\n length = hasOwnProperty.call(realNames, result) ? array.length : 0;\n\n while (length--) {\n var data = array[length],\n otherFunc = data.func;\n if (otherFunc == null || otherFunc == func) {\n return data.name;\n }\n }\n return result;\n }\n\n /**\n * Gets the argument placeholder value for `func`.\n *\n * @private\n * @param {Function} func The function to inspect.\n * @returns {*} Returns the placeholder value.\n */\n function getHolder(func) {\n var object = hasOwnProperty.call(lodash, 'placeholder') ? lodash : func;\n return object.placeholder;\n }\n\n /**\n * Gets the appropriate \"iteratee\" function. If `_.iteratee` is customized,\n * this function returns the custom method, otherwise it returns `baseIteratee`.\n * If arguments are provided, the chosen function is invoked with them and\n * its result is returned.\n *\n * @private\n * @param {*} [value] The value to convert to an iteratee.\n * @param {number} [arity] The arity of the created iteratee.\n * @returns {Function} Returns the chosen function or its result.\n */\n function getIteratee() {\n var result = lodash.iteratee || iteratee;\n result = result === iteratee ? baseIteratee : result;\n return arguments.length ? result(arguments[0], arguments[1]) : result;\n }\n\n /**\n * Gets the data for `map`.\n *\n * @private\n * @param {Object} map The map to query.\n * @param {string} key The reference key.\n * @returns {*} Returns the map data.\n */\n function getMapData(map, key) {\n var data = map.__data__;\n return isKeyable(key)\n ? data[typeof key == 'string' ? 'string' : 'hash']\n : data.map;\n }\n\n /**\n * Gets the property names, values, and compare flags of `object`.\n *\n * @private\n * @param {Object} object The object to query.\n * @returns {Array} Returns the match data of `object`.\n */\n function getMatchData(object) {\n var result = keys(object),\n length = result.length;\n\n while (length--) {\n var key = result[length],\n value = object[key];\n\n result[length] = [key, value, isStrictComparable(value)];\n }\n return result;\n }\n\n /**\n * Gets the native function at `key` of `object`.\n *\n * @private\n * @param {Object} object The object to query.\n * @param {string} key The key of the method to get.\n * @returns {*} Returns the function if it's native, else `undefined`.\n */\n function getNative(object, key) {\n var value = getValue(object, key);\n return baseIsNative(value) ? value : undefined;\n }\n\n /**\n * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.\n *\n * @private\n * @param {*} value The value to query.\n * @returns {string} Returns the raw `toStringTag`.\n */\n function getRawTag(value) {\n var isOwn = hasOwnProperty.call(value, symToStringTag),\n tag = value[symToStringTag];\n\n try {\n value[symToStringTag] = undefined;\n var unmasked = true;\n } catch (e) {}\n\n var result = nativeObjectToString.call(value);\n if (unmasked) {\n if (isOwn) {\n value[symToStringTag] = tag;\n } else {\n delete value[symToStringTag];\n }\n }\n return result;\n }\n\n /**\n * Creates an array of the own enumerable symbols of `object`.\n *\n * @private\n * @param {Object} object The object to query.\n * @returns {Array} Returns the array of symbols.\n */\n var getSymbols = !nativeGetSymbols ? stubArray : function(object) {\n if (object == null) {\n return [];\n }\n object = Object(object);\n return arrayFilter(nativeGetSymbols(object), function(symbol) {\n return propertyIsEnumerable.call(object, symbol);\n });\n };\n\n /**\n * Creates an array of the own and inherited enumerable symbols of `object`.\n *\n * @private\n * @param {Object} object The object to query.\n * @returns {Array} Returns the array of symbols.\n */\n var getSymbolsIn = !nativeGetSymbols ? stubArray : function(object) {\n var result = [];\n while (object) {\n arrayPush(result, getSymbols(object));\n object = getPrototype(object);\n }\n return result;\n };\n\n /**\n * Gets the `toStringTag` of `value`.\n *\n * @private\n * @param {*} value The value to query.\n * @returns {string} Returns the `toStringTag`.\n */\n var getTag = baseGetTag;\n\n // Fallback for data views, maps, sets, and weak maps in IE 11 and promises in Node.js < 6.\n if ((DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag) ||\n (Map && getTag(new Map) != mapTag) ||\n (Promise && getTag(Promise.resolve()) != promiseTag) ||\n (Set && getTag(new Set) != setTag) ||\n (WeakMap && getTag(new WeakMap) != weakMapTag)) {\n getTag = function(value) {\n var result = baseGetTag(value),\n Ctor = result == objectTag ? value.constructor : undefined,\n ctorString = Ctor ? toSource(Ctor) : '';\n\n if (ctorString) {\n switch (ctorString) {\n case dataViewCtorString: return dataViewTag;\n case mapCtorString: return mapTag;\n case promiseCtorString: return promiseTag;\n case setCtorString: return setTag;\n case weakMapCtorString: return weakMapTag;\n }\n }\n return result;\n };\n }\n\n /**\n * Gets the view, applying any `transforms` to the `start` and `end` positions.\n *\n * @private\n * @param {number} start The start of the view.\n * @param {number} end The end of the view.\n * @param {Array} transforms The transformations to apply to the view.\n * @returns {Object} Returns an object containing the `start` and `end`\n * positions of the view.\n */\n function getView(start, end, transforms) {\n var index = -1,\n length = transforms.length;\n\n while (++index < length) {\n var data = transforms[index],\n size = data.size;\n\n switch (data.type) {\n case 'drop': start += size; break;\n case 'dropRight': end -= size; break;\n case 'take': end = nativeMin(end, start + size); break;\n case 'takeRight': start = nativeMax(start, end - size); break;\n }\n }\n return { 'start': start, 'end': end };\n }\n\n /**\n * Extracts wrapper details from the `source` body comment.\n *\n * @private\n * @param {string} source The source to inspect.\n * @returns {Array} Returns the wrapper details.\n */\n function getWrapDetails(source) {\n var match = source.match(reWrapDetails);\n return match ? match[1].split(reSplitDetails) : [];\n }\n\n /**\n * Checks if `path` exists on `object`.\n *\n * @private\n * @param {Object} object The object to query.\n * @param {Array|string} path The path to check.\n * @param {Function} hasFunc The function to check properties.\n * @returns {boolean} Returns `true` if `path` exists, else `false`.\n */\n function hasPath(object, path, hasFunc) {\n path = castPath(path, object);\n\n var index = -1,\n length = path.length,\n result = false;\n\n while (++index < length) {\n var key = toKey(path[index]);\n if (!(result = object != null && hasFunc(object, key))) {\n break;\n }\n object = object[key];\n }\n if (result || ++index != length) {\n return result;\n }\n length = object == null ? 0 : object.length;\n return !!length && isLength(length) && isIndex(key, length) &&\n (isArray(object) || isArguments(object));\n }\n\n /**\n * Initializes an array clone.\n *\n * @private\n * @param {Array} array The array to clone.\n * @returns {Array} Returns the initialized clone.\n */\n function initCloneArray(array) {\n var length = array.length,\n result = new array.constructor(length);\n\n // Add properties assigned by `RegExp#exec`.\n if (length && typeof array[0] == 'string' && hasOwnProperty.call(array, 'index')) {\n result.index = array.index;\n result.input = array.input;\n }\n return result;\n }\n\n /**\n * Initializes an object clone.\n *\n * @private\n * @param {Object} object The object to clone.\n * @returns {Object} Returns the initialized clone.\n */\n function initCloneObject(object) {\n return (typeof object.constructor == 'function' && !isPrototype(object))\n ? baseCreate(getPrototype(object))\n : {};\n }\n\n /**\n * Initializes an object clone based on its `toStringTag`.\n *\n * **Note:** This function only supports cloning values with tags of\n * `Boolean`, `Date`, `Error`, `Map`, `Number`, `RegExp`, `Set`, or `String`.\n *\n * @private\n * @param {Object} object The object to clone.\n * @param {string} tag The `toStringTag` of the object to clone.\n * @param {boolean} [isDeep] Specify a deep clone.\n * @returns {Object} Returns the initialized clone.\n */\n function initCloneByTag(object, tag, isDeep) {\n var Ctor = object.constructor;\n switch (tag) {\n case arrayBufferTag:\n return cloneArrayBuffer(object);\n\n case boolTag:\n case dateTag:\n return new Ctor(+object);\n\n case dataViewTag:\n return cloneDataView(object, isDeep);\n\n case float32Tag: case float64Tag:\n case int8Tag: case int16Tag: case int32Tag:\n case uint8Tag: case uint8ClampedTag: case uint16Tag: case uint32Tag:\n return cloneTypedArray(object, isDeep);\n\n case mapTag:\n return new Ctor;\n\n case numberTag:\n case stringTag:\n return new Ctor(object);\n\n case regexpTag:\n return cloneRegExp(object);\n\n case setTag:\n return new Ctor;\n\n case symbolTag:\n return cloneSymbol(object);\n }\n }\n\n /**\n * Inserts wrapper `details` in a comment at the top of the `source` body.\n *\n * @private\n * @param {string} source The source to modify.\n * @returns {Array} details The details to insert.\n * @returns {string} Returns the modified source.\n */\n function insertWrapDetails(source, details) {\n var length = details.length;\n if (!length) {\n return source;\n }\n var lastIndex = length - 1;\n details[lastIndex] = (length > 1 ? '& ' : '') + details[lastIndex];\n details = details.join(length > 2 ? ', ' : ' ');\n return source.replace(reWrapComment, '{\\n/* [wrapped with ' + details + '] */\\n');\n }\n\n /**\n * Checks if `value` is a flattenable `arguments` object or array.\n *\n * @private\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is flattenable, else `false`.\n */\n function isFlattenable(value) {\n return isArray(value) || isArguments(value) ||\n !!(spreadableSymbol && value && value[spreadableSymbol]);\n }\n\n /**\n * Checks if `value` is a valid array-like index.\n *\n * @private\n * @param {*} value The value to check.\n * @param {number} [length=MAX_SAFE_INTEGER] The upper bounds of a valid index.\n * @returns {boolean} Returns `true` if `value` is a valid index, else `false`.\n */\n function isIndex(value, length) {\n var type = typeof value;\n length = length == null ? MAX_SAFE_INTEGER : length;\n\n return !!length &&\n (type == 'number' ||\n (type != 'symbol' && reIsUint.test(value))) &&\n (value > -1 && value % 1 == 0 && value < length);\n }\n\n /**\n * Checks if the given arguments are from an iteratee call.\n *\n * @private\n * @param {*} value The potential iteratee value argument.\n * @param {*} index The potential iteratee index or key argument.\n * @param {*} object The potential iteratee object argument.\n * @returns {boolean} Returns `true` if the arguments are from an iteratee call,\n * else `false`.\n */\n function isIterateeCall(value, index, object) {\n if (!isObject(object)) {\n return false;\n }\n var type = typeof index;\n if (type == 'number'\n ? (isArrayLike(object) && isIndex(index, object.length))\n : (type == 'string' && index in object)\n ) {\n return eq(object[index], value);\n }\n return false;\n }\n\n /**\n * Checks if `value` is a property name and not a property path.\n *\n * @private\n * @param {*} value The value to check.\n * @param {Object} [object] The object to query keys on.\n * @returns {boolean} Returns `true` if `value` is a property name, else `false`.\n */\n function isKey(value, object) {\n if (isArray(value)) {\n return false;\n }\n var type = typeof value;\n if (type == 'number' || type == 'symbol' || type == 'boolean' ||\n value == null || isSymbol(value)) {\n return true;\n }\n return reIsPlainProp.test(value) || !reIsDeepProp.test(value) ||\n (object != null && value in Object(object));\n }\n\n /**\n * Checks if `value` is suitable for use as unique object key.\n *\n * @private\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is suitable, else `false`.\n */\n function isKeyable(value) {\n var type = typeof value;\n return (type == 'string' || type == 'number' || type == 'symbol' || type == 'boolean')\n ? (value !== '__proto__')\n : (value === null);\n }\n\n /**\n * Checks if `func` has a lazy counterpart.\n *\n * @private\n * @param {Function} func The function to check.\n * @returns {boolean} Returns `true` if `func` has a lazy counterpart,\n * else `false`.\n */\n function isLaziable(func) {\n var funcName = getFuncName(func),\n other = lodash[funcName];\n\n if (typeof other != 'function' || !(funcName in LazyWrapper.prototype)) {\n return false;\n }\n if (func === other) {\n return true;\n }\n var data = getData(other);\n return !!data && func === data[0];\n }\n\n /**\n * Checks if `func` has its source masked.\n *\n * @private\n * @param {Function} func The function to check.\n * @returns {boolean} Returns `true` if `func` is masked, else `false`.\n */\n function isMasked(func) {\n return !!maskSrcKey && (maskSrcKey in func);\n }\n\n /**\n * Checks if `func` is capable of being masked.\n *\n * @private\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `func` is maskable, else `false`.\n */\n var isMaskable = coreJsData ? isFunction : stubFalse;\n\n /**\n * Checks if `value` is likely a prototype object.\n *\n * @private\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a prototype, else `false`.\n */\n function isPrototype(value) {\n var Ctor = value && value.constructor,\n proto = (typeof Ctor == 'function' && Ctor.prototype) || objectProto;\n\n return value === proto;\n }\n\n /**\n * Checks if `value` is suitable for strict equality comparisons, i.e. `===`.\n *\n * @private\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` if suitable for strict\n * equality comparisons, else `false`.\n */\n function isStrictComparable(value) {\n return value === value && !isObject(value);\n }\n\n /**\n * A specialized version of `matchesProperty` for source values suitable\n * for strict equality comparisons, i.e. `===`.\n *\n * @private\n * @param {string} key The key of the property to get.\n * @param {*} srcValue The value to match.\n * @returns {Function} Returns the new spec function.\n */\n function matchesStrictComparable(key, srcValue) {\n return function(object) {\n if (object == null) {\n return false;\n }\n return object[key] === srcValue &&\n (srcValue !== undefined || (key in Object(object)));\n };\n }\n\n /**\n * A specialized version of `_.memoize` which clears the memoized function's\n * cache when it exceeds `MAX_MEMOIZE_SIZE`.\n *\n * @private\n * @param {Function} func The function to have its output memoized.\n * @returns {Function} Returns the new memoized function.\n */\n function memoizeCapped(func) {\n var result = memoize(func, function(key) {\n if (cache.size === MAX_MEMOIZE_SIZE) {\n cache.clear();\n }\n return key;\n });\n\n var cache = result.cache;\n return result;\n }\n\n /**\n * Merges the function metadata of `source` into `data`.\n *\n * Merging metadata reduces the number of wrappers used to invoke a function.\n * This is possible because methods like `_.bind`, `_.curry`, and `_.partial`\n * may be applied regardless of execution order. Methods like `_.ary` and\n * `_.rearg` modify function arguments, making the order in which they are\n * executed important, preventing the merging of metadata. However, we make\n * an exception for a safe combined case where curried functions have `_.ary`\n * and or `_.rearg` applied.\n *\n * @private\n * @param {Array} data The destination metadata.\n * @param {Array} source The source metadata.\n * @returns {Array} Returns `data`.\n */\n function mergeData(data, source) {\n var bitmask = data[1],\n srcBitmask = source[1],\n newBitmask = bitmask | srcBitmask,\n isCommon = newBitmask < (WRAP_BIND_FLAG | WRAP_BIND_KEY_FLAG | WRAP_ARY_FLAG);\n\n var isCombo =\n ((srcBitmask == WRAP_ARY_FLAG) && (bitmask == WRAP_CURRY_FLAG)) ||\n ((srcBitmask == WRAP_ARY_FLAG) && (bitmask == WRAP_REARG_FLAG) && (data[7].length <= source[8])) ||\n ((srcBitmask == (WRAP_ARY_FLAG | WRAP_REARG_FLAG)) && (source[7].length <= source[8]) && (bitmask == WRAP_CURRY_FLAG));\n\n // Exit early if metadata can't be merged.\n if (!(isCommon || isCombo)) {\n return data;\n }\n // Use source `thisArg` if available.\n if (srcBitmask & WRAP_BIND_FLAG) {\n data[2] = source[2];\n // Set when currying a bound function.\n newBitmask |= bitmask & WRAP_BIND_FLAG ? 0 : WRAP_CURRY_BOUND_FLAG;\n }\n // Compose partial arguments.\n var value = source[3];\n if (value) {\n var partials = data[3];\n data[3] = partials ? composeArgs(partials, value, source[4]) : value;\n data[4] = partials ? replaceHolders(data[3], PLACEHOLDER) : source[4];\n }\n // Compose partial right arguments.\n value = source[5];\n if (value) {\n partials = data[5];\n data[5] = partials ? composeArgsRight(partials, value, source[6]) : value;\n data[6] = partials ? replaceHolders(data[5], PLACEHOLDER) : source[6];\n }\n // Use source `argPos` if available.\n value = source[7];\n if (value) {\n data[7] = value;\n }\n // Use source `ary` if it's smaller.\n if (srcBitmask & WRAP_ARY_FLAG) {\n data[8] = data[8] == null ? source[8] : nativeMin(data[8], source[8]);\n }\n // Use source `arity` if one is not provided.\n if (data[9] == null) {\n data[9] = source[9];\n }\n // Use source `func` and merge bitmasks.\n data[0] = source[0];\n data[1] = newBitmask;\n\n return data;\n }\n\n /**\n * This function is like\n * [`Object.keys`](http://ecma-international.org/ecma-262/7.0/#sec-object.keys)\n * except that it includes inherited enumerable properties.\n *\n * @private\n * @param {Object} object The object to query.\n * @returns {Array} Returns the array of property names.\n */\n function nativeKeysIn(object) {\n var result = [];\n if (object != null) {\n for (var key in Object(object)) {\n result.push(key);\n }\n }\n return result;\n }\n\n /**\n * Converts `value` to a string using `Object.prototype.toString`.\n *\n * @private\n * @param {*} value The value to convert.\n * @returns {string} Returns the converted string.\n */\n function objectToString(value) {\n return nativeObjectToString.call(value);\n }\n\n /**\n * A specialized version of `baseRest` which transforms the rest array.\n *\n * @private\n * @param {Function} func The function to apply a rest parameter to.\n * @param {number} [start=func.length-1] The start position of the rest parameter.\n * @param {Function} transform The rest array transform.\n * @returns {Function} Returns the new function.\n */\n function overRest(func, start, transform) {\n start = nativeMax(start === undefined ? (func.length - 1) : start, 0);\n return function() {\n var args = arguments,\n index = -1,\n length = nativeMax(args.length - start, 0),\n array = Array(length);\n\n while (++index < length) {\n array[index] = args[start + index];\n }\n index = -1;\n var otherArgs = Array(start + 1);\n while (++index < start) {\n otherArgs[index] = args[index];\n }\n otherArgs[start] = transform(array);\n return apply(func, this, otherArgs);\n };\n }\n\n /**\n * Gets the parent value at `path` of `object`.\n *\n * @private\n * @param {Object} object The object to query.\n * @param {Array} path The path to get the parent value of.\n * @returns {*} Returns the parent value.\n */\n function parent(object, path) {\n return path.length < 2 ? object : baseGet(object, baseSlice(path, 0, -1));\n }\n\n /**\n * Reorder `array` according to the specified indexes where the element at\n * the first index is assigned as the first element, the element at\n * the second index is assigned as the second element, and so on.\n *\n * @private\n * @param {Array} array The array to reorder.\n * @param {Array} indexes The arranged array indexes.\n * @returns {Array} Returns `array`.\n */\n function reorder(array, indexes) {\n var arrLength = array.length,\n length = nativeMin(indexes.length, arrLength),\n oldArray = copyArray(array);\n\n while (length--) {\n var index = indexes[length];\n array[length] = isIndex(index, arrLength) ? oldArray[index] : undefined;\n }\n return array;\n }\n\n /**\n * Gets the value at `key`, unless `key` is \"__proto__\" or \"constructor\".\n *\n * @private\n * @param {Object} object The object to query.\n * @param {string} key The key of the property to get.\n * @returns {*} Returns the property value.\n */\n function safeGet(object, key) {\n if (key === 'constructor' && typeof object[key] === 'function') {\n return;\n }\n\n if (key == '__proto__') {\n return;\n }\n\n return object[key];\n }\n\n /**\n * Sets metadata for `func`.\n *\n * **Note:** If this function becomes hot, i.e. is invoked a lot in a short\n * period of time, it will trip its breaker and transition to an identity\n * function to avoid garbage collection pauses in V8. See\n * [V8 issue 2070](https://bugs.chromium.org/p/v8/issues/detail?id=2070)\n * for more details.\n *\n * @private\n * @param {Function} func The function to associate metadata with.\n * @param {*} data The metadata.\n * @returns {Function} Returns `func`.\n */\n var setData = shortOut(baseSetData);\n\n /**\n * A simple wrapper around the global [`setTimeout`](https://mdn.io/setTimeout).\n *\n * @private\n * @param {Function} func The function to delay.\n * @param {number} wait The number of milliseconds to delay invocation.\n * @returns {number|Object} Returns the timer id or timeout object.\n */\n var setTimeout = ctxSetTimeout || function(func, wait) {\n return root.setTimeout(func, wait);\n };\n\n /**\n * Sets the `toString` method of `func` to return `string`.\n *\n * @private\n * @param {Function} func The function to modify.\n * @param {Function} string The `toString` result.\n * @returns {Function} Returns `func`.\n */\n var setToString = shortOut(baseSetToString);\n\n /**\n * Sets the `toString` method of `wrapper` to mimic the source of `reference`\n * with wrapper details in a comment at the top of the source body.\n *\n * @private\n * @param {Function} wrapper The function to modify.\n * @param {Function} reference The reference function.\n * @param {number} bitmask The bitmask flags. See `createWrap` for more details.\n * @returns {Function} Returns `wrapper`.\n */\n function setWrapToString(wrapper, reference, bitmask) {\n var source = (reference + '');\n return setToString(wrapper, insertWrapDetails(source, updateWrapDetails(getWrapDetails(source), bitmask)));\n }\n\n /**\n * Creates a function that'll short out and invoke `identity` instead\n * of `func` when it's called `HOT_COUNT` or more times in `HOT_SPAN`\n * milliseconds.\n *\n * @private\n * @param {Function} func The function to restrict.\n * @returns {Function} Returns the new shortable function.\n */\n function shortOut(func) {\n var count = 0,\n lastCalled = 0;\n\n return function() {\n var stamp = nativeNow(),\n remaining = HOT_SPAN - (stamp - lastCalled);\n\n lastCalled = stamp;\n if (remaining > 0) {\n if (++count >= HOT_COUNT) {\n return arguments[0];\n }\n } else {\n count = 0;\n }\n return func.apply(undefined, arguments);\n };\n }\n\n /**\n * A specialized version of `_.shuffle` which mutates and sets the size of `array`.\n *\n * @private\n * @param {Array} array The array to shuffle.\n * @param {number} [size=array.length] The size of `array`.\n * @returns {Array} Returns `array`.\n */\n function shuffleSelf(array, size) {\n var index = -1,\n length = array.length,\n lastIndex = length - 1;\n\n size = size === undefined ? length : size;\n while (++index < size) {\n var rand = baseRandom(index, lastIndex),\n value = array[rand];\n\n array[rand] = array[index];\n array[index] = value;\n }\n array.length = size;\n return array;\n }\n\n /**\n * Converts `string` to a property path array.\n *\n * @private\n * @param {string} string The string to convert.\n * @returns {Array} Returns the property path array.\n */\n var stringToPath = memoizeCapped(function(string) {\n var result = [];\n if (string.charCodeAt(0) === 46 /* . */) {\n result.push('');\n }\n string.replace(rePropName, function(match, number, quote, subString) {\n result.push(quote ? subString.replace(reEscapeChar, '$1') : (number || match));\n });\n return result;\n });\n\n /**\n * Converts `value` to a string key if it's not a string or symbol.\n *\n * @private\n * @param {*} value The value to inspect.\n * @returns {string|symbol} Returns the key.\n */\n function toKey(value) {\n if (typeof value == 'string' || isSymbol(value)) {\n return value;\n }\n var result = (value + '');\n return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;\n }\n\n /**\n * Converts `func` to its source code.\n *\n * @private\n * @param {Function} func The function to convert.\n * @returns {string} Returns the source code.\n */\n function toSource(func) {\n if (func != null) {\n try {\n return funcToString.call(func);\n } catch (e) {}\n try {\n return (func + '');\n } catch (e) {}\n }\n return '';\n }\n\n /**\n * Updates wrapper `details` based on `bitmask` flags.\n *\n * @private\n * @returns {Array} details The details to modify.\n * @param {number} bitmask The bitmask flags. See `createWrap` for more details.\n * @returns {Array} Returns `details`.\n */\n function updateWrapDetails(details, bitmask) {\n arrayEach(wrapFlags, function(pair) {\n var value = '_.' + pair[0];\n if ((bitmask & pair[1]) && !arrayIncludes(details, value)) {\n details.push(value);\n }\n });\n return details.sort();\n }\n\n /**\n * Creates a clone of `wrapper`.\n *\n * @private\n * @param {Object} wrapper The wrapper to clone.\n * @returns {Object} Returns the cloned wrapper.\n */\n function wrapperClone(wrapper) {\n if (wrapper instanceof LazyWrapper) {\n return wrapper.clone();\n }\n var result = new LodashWrapper(wrapper.__wrapped__, wrapper.__chain__);\n result.__actions__ = copyArray(wrapper.__actions__);\n result.__index__ = wrapper.__index__;\n result.__values__ = wrapper.__values__;\n return result;\n }\n\n /*------------------------------------------------------------------------*/\n\n /**\n * Creates an array of elements split into groups the length of `size`.\n * If `array` can't be split evenly, the final chunk will be the remaining\n * elements.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Array\n * @param {Array} array The array to process.\n * @param {number} [size=1] The length of each chunk\n * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n * @returns {Array} Returns the new array of chunks.\n * @example\n *\n * _.chunk(['a', 'b', 'c', 'd'], 2);\n * // => [['a', 'b'], ['c', 'd']]\n *\n * _.chunk(['a', 'b', 'c', 'd'], 3);\n * // => [['a', 'b', 'c'], ['d']]\n */\n function chunk(array, size, guard) {\n if ((guard ? isIterateeCall(array, size, guard) : size === undefined)) {\n size = 1;\n } else {\n size = nativeMax(toInteger(size), 0);\n }\n var length = array == null ? 0 : array.length;\n if (!length || size < 1) {\n return [];\n }\n var index = 0,\n resIndex = 0,\n result = Array(nativeCeil(length / size));\n\n while (index < length) {\n result[resIndex++] = baseSlice(array, index, (index += size));\n }\n return result;\n }\n\n /**\n * Creates an array with all falsey values removed. The values `false`, `null`,\n * `0`, `\"\"`, `undefined`, and `NaN` are falsey.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Array\n * @param {Array} array The array to compact.\n * @returns {Array} Returns the new array of filtered values.\n * @example\n *\n * _.compact([0, 1, false, 2, '', 3]);\n * // => [1, 2, 3]\n */\n function compact(array) {\n var index = -1,\n length = array == null ? 0 : array.length,\n resIndex = 0,\n result = [];\n\n while (++index < length) {\n var value = array[index];\n if (value) {\n result[resIndex++] = value;\n }\n }\n return result;\n }\n\n /**\n * Creates a new array concatenating `array` with any additional arrays\n * and/or values.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Array\n * @param {Array} array The array to concatenate.\n * @param {...*} [values] The values to concatenate.\n * @returns {Array} Returns the new concatenated array.\n * @example\n *\n * var array = [1];\n * var other = _.concat(array, 2, [3], [[4]]);\n *\n * console.log(other);\n * // => [1, 2, 3, [4]]\n *\n * console.log(array);\n * // => [1]\n */\n function concat() {\n var length = arguments.length;\n if (!length) {\n return [];\n }\n var args = Array(length - 1),\n array = arguments[0],\n index = length;\n\n while (index--) {\n args[index - 1] = arguments[index];\n }\n return arrayPush(isArray(array) ? copyArray(array) : [array], baseFlatten(args, 1));\n }\n\n /**\n * Creates an array of `array` values not included in the other given arrays\n * using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)\n * for equality comparisons. The order and references of result values are\n * determined by the first array.\n *\n * **Note:** Unlike `_.pullAll`, this method returns a new array.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Array\n * @param {Array} array The array to inspect.\n * @param {...Array} [values] The values to exclude.\n * @returns {Array} Returns the new array of filtered values.\n * @see _.without, _.xor\n * @example\n *\n * _.difference([2, 1], [2, 3]);\n * // => [1]\n */\n var difference = baseRest(function(array, values) {\n return isArrayLikeObject(array)\n ? baseDifference(array, baseFlatten(values, 1, isArrayLikeObject, true))\n : [];\n });\n\n /**\n * This method is like `_.difference` except that it accepts `iteratee` which\n * is invoked for each element of `array` and `values` to generate the criterion\n * by which they're compared. The order and references of result values are\n * determined by the first array. The iteratee is invoked with one argument:\n * (value).\n *\n * **Note:** Unlike `_.pullAllBy`, this method returns a new array.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Array\n * @param {Array} array The array to inspect.\n * @param {...Array} [values] The values to exclude.\n * @param {Function} [iteratee=_.identity] The iteratee invoked per element.\n * @returns {Array} Returns the new array of filtered values.\n * @example\n *\n * _.differenceBy([2.1, 1.2], [2.3, 3.4], Math.floor);\n * // => [1.2]\n *\n * // The `_.property` iteratee shorthand.\n * _.differenceBy([{ 'x': 2 }, { 'x': 1 }], [{ 'x': 1 }], 'x');\n * // => [{ 'x': 2 }]\n */\n var differenceBy = baseRest(function(array, values) {\n var iteratee = last(values);\n if (isArrayLikeObject(iteratee)) {\n iteratee = undefined;\n }\n return isArrayLikeObject(array)\n ? baseDifference(array, baseFlatten(values, 1, isArrayLikeObject, true), getIteratee(iteratee, 2))\n : [];\n });\n\n /**\n * This method is like `_.difference` except that it accepts `comparator`\n * which is invoked to compare elements of `array` to `values`. The order and\n * references of result values are determined by the first array. The comparator\n * is invoked with two arguments: (arrVal, othVal).\n *\n * **Note:** Unlike `_.pullAllWith`, this method returns a new array.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Array\n * @param {Array} array The array to inspect.\n * @param {...Array} [values] The values to exclude.\n * @param {Function} [comparator] The comparator invoked per element.\n * @returns {Array} Returns the new array of filtered values.\n * @example\n *\n * var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];\n *\n * _.differenceWith(objects, [{ 'x': 1, 'y': 2 }], _.isEqual);\n * // => [{ 'x': 2, 'y': 1 }]\n */\n var differenceWith = baseRest(function(array, values) {\n var comparator = last(values);\n if (isArrayLikeObject(comparator)) {\n comparator = undefined;\n }\n return isArrayLikeObject(array)\n ? baseDifference(array, baseFlatten(values, 1, isArrayLikeObject, true), undefined, comparator)\n : [];\n });\n\n /**\n * Creates a slice of `array` with `n` elements dropped from the beginning.\n *\n * @static\n * @memberOf _\n * @since 0.5.0\n * @category Array\n * @param {Array} array The array to query.\n * @param {number} [n=1] The number of elements to drop.\n * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n * @returns {Array} Returns the slice of `array`.\n * @example\n *\n * _.drop([1, 2, 3]);\n * // => [2, 3]\n *\n * _.drop([1, 2, 3], 2);\n * // => [3]\n *\n * _.drop([1, 2, 3], 5);\n * // => []\n *\n * _.drop([1, 2, 3], 0);\n * // => [1, 2, 3]\n */\n function drop(array, n, guard) {\n var length = array == null ? 0 : array.length;\n if (!length) {\n return [];\n }\n n = (guard || n === undefined) ? 1 : toInteger(n);\n return baseSlice(array, n < 0 ? 0 : n, length);\n }\n\n /**\n * Creates a slice of `array` with `n` elements dropped from the end.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Array\n * @param {Array} array The array to query.\n * @param {number} [n=1] The number of elements to drop.\n * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n * @returns {Array} Returns the slice of `array`.\n * @example\n *\n * _.dropRight([1, 2, 3]);\n * // => [1, 2]\n *\n * _.dropRight([1, 2, 3], 2);\n * // => [1]\n *\n * _.dropRight([1, 2, 3], 5);\n * // => []\n *\n * _.dropRight([1, 2, 3], 0);\n * // => [1, 2, 3]\n */\n function dropRight(array, n, guard) {\n var length = array == null ? 0 : array.length;\n if (!length) {\n return [];\n }\n n = (guard || n === undefined) ? 1 : toInteger(n);\n n = length - n;\n return baseSlice(array, 0, n < 0 ? 0 : n);\n }\n\n /**\n * Creates a slice of `array` excluding elements dropped from the end.\n * Elements are dropped until `predicate` returns falsey. The predicate is\n * invoked with three arguments: (value, index, array).\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Array\n * @param {Array} array The array to query.\n * @param {Function} [predicate=_.identity] The function invoked per iteration.\n * @returns {Array} Returns the slice of `array`.\n * @example\n *\n * var users = [\n * { 'user': 'barney', 'active': true },\n * { 'user': 'fred', 'active': false },\n * { 'user': 'pebbles', 'active': false }\n * ];\n *\n * _.dropRightWhile(users, function(o) { return !o.active; });\n * // => objects for ['barney']\n *\n * // The `_.matches` iteratee shorthand.\n * _.dropRightWhile(users, { 'user': 'pebbles', 'active': false });\n * // => objects for ['barney', 'fred']\n *\n * // The `_.matchesProperty` iteratee shorthand.\n * _.dropRightWhile(users, ['active', false]);\n * // => objects for ['barney']\n *\n * // The `_.property` iteratee shorthand.\n * _.dropRightWhile(users, 'active');\n * // => objects for ['barney', 'fred', 'pebbles']\n */\n function dropRightWhile(array, predicate) {\n return (array && array.length)\n ? baseWhile(array, getIteratee(predicate, 3), true, true)\n : [];\n }\n\n /**\n * Creates a slice of `array` excluding elements dropped from the beginning.\n * Elements are dropped until `predicate` returns falsey. The predicate is\n * invoked with three arguments: (value, index, array).\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Array\n * @param {Array} array The array to query.\n * @param {Function} [predicate=_.identity] The function invoked per iteration.\n * @returns {Array} Returns the slice of `array`.\n * @example\n *\n * var users = [\n * { 'user': 'barney', 'active': false },\n * { 'user': 'fred', 'active': false },\n * { 'user': 'pebbles', 'active': true }\n * ];\n *\n * _.dropWhile(users, function(o) { return !o.active; });\n * // => objects for ['pebbles']\n *\n * // The `_.matches` iteratee shorthand.\n * _.dropWhile(users, { 'user': 'barney', 'active': false });\n * // => objects for ['fred', 'pebbles']\n *\n * // The `_.matchesProperty` iteratee shorthand.\n * _.dropWhile(users, ['active', false]);\n * // => objects for ['pebbles']\n *\n * // The `_.property` iteratee shorthand.\n * _.dropWhile(users, 'active');\n * // => objects for ['barney', 'fred', 'pebbles']\n */\n function dropWhile(array, predicate) {\n return (array && array.length)\n ? baseWhile(array, getIteratee(predicate, 3), true)\n : [];\n }\n\n /**\n * Fills elements of `array` with `value` from `start` up to, but not\n * including, `end`.\n *\n * **Note:** This method mutates `array`.\n *\n * @static\n * @memberOf _\n * @since 3.2.0\n * @category Array\n * @param {Array} array The array to fill.\n * @param {*} value The value to fill `array` with.\n * @param {number} [start=0] The start position.\n * @param {number} [end=array.length] The end position.\n * @returns {Array} Returns `array`.\n * @example\n *\n * var array = [1, 2, 3];\n *\n * _.fill(array, 'a');\n * console.log(array);\n * // => ['a', 'a', 'a']\n *\n * _.fill(Array(3), 2);\n * // => [2, 2, 2]\n *\n * _.fill([4, 6, 8, 10], '*', 1, 3);\n * // => [4, '*', '*', 10]\n */\n function fill(array, value, start, end) {\n var length = array == null ? 0 : array.length;\n if (!length) {\n return [];\n }\n if (start && typeof start != 'number' && isIterateeCall(array, value, start)) {\n start = 0;\n end = length;\n }\n return baseFill(array, value, start, end);\n }\n\n /**\n * This method is like `_.find` except that it returns the index of the first\n * element `predicate` returns truthy for instead of the element itself.\n *\n * @static\n * @memberOf _\n * @since 1.1.0\n * @category Array\n * @param {Array} array The array to inspect.\n * @param {Function} [predicate=_.identity] The function invoked per iteration.\n * @param {number} [fromIndex=0] The index to search from.\n * @returns {number} Returns the index of the found element, else `-1`.\n * @example\n *\n * var users = [\n * { 'user': 'barney', 'active': false },\n * { 'user': 'fred', 'active': false },\n * { 'user': 'pebbles', 'active': true }\n * ];\n *\n * _.findIndex(users, function(o) { return o.user == 'barney'; });\n * // => 0\n *\n * // The `_.matches` iteratee shorthand.\n * _.findIndex(users, { 'user': 'fred', 'active': false });\n * // => 1\n *\n * // The `_.matchesProperty` iteratee shorthand.\n * _.findIndex(users, ['active', false]);\n * // => 0\n *\n * // The `_.property` iteratee shorthand.\n * _.findIndex(users, 'active');\n * // => 2\n */\n function findIndex(array, predicate, fromIndex) {\n var length = array == null ? 0 : array.length;\n if (!length) {\n return -1;\n }\n var index = fromIndex == null ? 0 : toInteger(fromIndex);\n if (index < 0) {\n index = nativeMax(length + index, 0);\n }\n return baseFindIndex(array, getIteratee(predicate, 3), index);\n }\n\n /**\n * This method is like `_.findIndex` except that it iterates over elements\n * of `collection` from right to left.\n *\n * @static\n * @memberOf _\n * @since 2.0.0\n * @category Array\n * @param {Array} array The array to inspect.\n * @param {Function} [predicate=_.identity] The function invoked per iteration.\n * @param {number} [fromIndex=array.length-1] The index to search from.\n * @returns {number} Returns the index of the found element, else `-1`.\n * @example\n *\n * var users = [\n * { 'user': 'barney', 'active': true },\n * { 'user': 'fred', 'active': false },\n * { 'user': 'pebbles', 'active': false }\n * ];\n *\n * _.findLastIndex(users, function(o) { return o.user == 'pebbles'; });\n * // => 2\n *\n * // The `_.matches` iteratee shorthand.\n * _.findLastIndex(users, { 'user': 'barney', 'active': true });\n * // => 0\n *\n * // The `_.matchesProperty` iteratee shorthand.\n * _.findLastIndex(users, ['active', false]);\n * // => 2\n *\n * // The `_.property` iteratee shorthand.\n * _.findLastIndex(users, 'active');\n * // => 0\n */\n function findLastIndex(array, predicate, fromIndex) {\n var length = array == null ? 0 : array.length;\n if (!length) {\n return -1;\n }\n var index = length - 1;\n if (fromIndex !== undefined) {\n index = toInteger(fromIndex);\n index = fromIndex < 0\n ? nativeMax(length + index, 0)\n : nativeMin(index, length - 1);\n }\n return baseFindIndex(array, getIteratee(predicate, 3), index, true);\n }\n\n /**\n * Flattens `array` a single level deep.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Array\n * @param {Array} array The array to flatten.\n * @returns {Array} Returns the new flattened array.\n * @example\n *\n * _.flatten([1, [2, [3, [4]], 5]]);\n * // => [1, 2, [3, [4]], 5]\n */\n function flatten(array) {\n var length = array == null ? 0 : array.length;\n return length ? baseFlatten(array, 1) : [];\n }\n\n /**\n * Recursively flattens `array`.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Array\n * @param {Array} array The array to flatten.\n * @returns {Array} Returns the new flattened array.\n * @example\n *\n * _.flattenDeep([1, [2, [3, [4]], 5]]);\n * // => [1, 2, 3, 4, 5]\n */\n function flattenDeep(array) {\n var length = array == null ? 0 : array.length;\n return length ? baseFlatten(array, INFINITY) : [];\n }\n\n /**\n * Recursively flatten `array` up to `depth` times.\n *\n * @static\n * @memberOf _\n * @since 4.4.0\n * @category Array\n * @param {Array} array The array to flatten.\n * @param {number} [depth=1] The maximum recursion depth.\n * @returns {Array} Returns the new flattened array.\n * @example\n *\n * var array = [1, [2, [3, [4]], 5]];\n *\n * _.flattenDepth(array, 1);\n * // => [1, 2, [3, [4]], 5]\n *\n * _.flattenDepth(array, 2);\n * // => [1, 2, 3, [4], 5]\n */\n function flattenDepth(array, depth) {\n var length = array == null ? 0 : array.length;\n if (!length) {\n return [];\n }\n depth = depth === undefined ? 1 : toInteger(depth);\n return baseFlatten(array, depth);\n }\n\n /**\n * The inverse of `_.toPairs`; this method returns an object composed\n * from key-value `pairs`.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Array\n * @param {Array} pairs The key-value pairs.\n * @returns {Object} Returns the new object.\n * @example\n *\n * _.fromPairs([['a', 1], ['b', 2]]);\n * // => { 'a': 1, 'b': 2 }\n */\n function fromPairs(pairs) {\n var index = -1,\n length = pairs == null ? 0 : pairs.length,\n result = {};\n\n while (++index < length) {\n var pair = pairs[index];\n result[pair[0]] = pair[1];\n }\n return result;\n }\n\n /**\n * Gets the first element of `array`.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @alias first\n * @category Array\n * @param {Array} array The array to query.\n * @returns {*} Returns the first element of `array`.\n * @example\n *\n * _.head([1, 2, 3]);\n * // => 1\n *\n * _.head([]);\n * // => undefined\n */\n function head(array) {\n return (array && array.length) ? array[0] : undefined;\n }\n\n /**\n * Gets the index at which the first occurrence of `value` is found in `array`\n * using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)\n * for equality comparisons. If `fromIndex` is negative, it's used as the\n * offset from the end of `array`.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Array\n * @param {Array} array The array to inspect.\n * @param {*} value The value to search for.\n * @param {number} [fromIndex=0] The index to search from.\n * @returns {number} Returns the index of the matched value, else `-1`.\n * @example\n *\n * _.indexOf([1, 2, 1, 2], 2);\n * // => 1\n *\n * // Search from the `fromIndex`.\n * _.indexOf([1, 2, 1, 2], 2, 2);\n * // => 3\n */\n function indexOf(array, value, fromIndex) {\n var length = array == null ? 0 : array.length;\n if (!length) {\n return -1;\n }\n var index = fromIndex == null ? 0 : toInteger(fromIndex);\n if (index < 0) {\n index = nativeMax(length + index, 0);\n }\n return baseIndexOf(array, value, index);\n }\n\n /**\n * Gets all but the last element of `array`.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Array\n * @param {Array} array The array to query.\n * @returns {Array} Returns the slice of `array`.\n * @example\n *\n * _.initial([1, 2, 3]);\n * // => [1, 2]\n */\n function initial(array) {\n var length = array == null ? 0 : array.length;\n return length ? baseSlice(array, 0, -1) : [];\n }\n\n /**\n * Creates an array of unique values that are included in all given arrays\n * using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)\n * for equality comparisons. The order and references of result values are\n * determined by the first array.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Array\n * @param {...Array} [arrays] The arrays to inspect.\n * @returns {Array} Returns the new array of intersecting values.\n * @example\n *\n * _.intersection([2, 1], [2, 3]);\n * // => [2]\n */\n var intersection = baseRest(function(arrays) {\n var mapped = arrayMap(arrays, castArrayLikeObject);\n return (mapped.length && mapped[0] === arrays[0])\n ? baseIntersection(mapped)\n : [];\n });\n\n /**\n * This method is like `_.intersection` except that it accepts `iteratee`\n * which is invoked for each element of each `arrays` to generate the criterion\n * by which they're compared. The order and references of result values are\n * determined by the first array. The iteratee is invoked with one argument:\n * (value).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Array\n * @param {...Array} [arrays] The arrays to inspect.\n * @param {Function} [iteratee=_.identity] The iteratee invoked per element.\n * @returns {Array} Returns the new array of intersecting values.\n * @example\n *\n * _.intersectionBy([2.1, 1.2], [2.3, 3.4], Math.floor);\n * // => [2.1]\n *\n * // The `_.property` iteratee shorthand.\n * _.intersectionBy([{ 'x': 1 }], [{ 'x': 2 }, { 'x': 1 }], 'x');\n * // => [{ 'x': 1 }]\n */\n var intersectionBy = baseRest(function(arrays) {\n var iteratee = last(arrays),\n mapped = arrayMap(arrays, castArrayLikeObject);\n\n if (iteratee === last(mapped)) {\n iteratee = undefined;\n } else {\n mapped.pop();\n }\n return (mapped.length && mapped[0] === arrays[0])\n ? baseIntersection(mapped, getIteratee(iteratee, 2))\n : [];\n });\n\n /**\n * This method is like `_.intersection` except that it accepts `comparator`\n * which is invoked to compare elements of `arrays`. The order and references\n * of result values are determined by the first array. The comparator is\n * invoked with two arguments: (arrVal, othVal).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Array\n * @param {...Array} [arrays] The arrays to inspect.\n * @param {Function} [comparator] The comparator invoked per element.\n * @returns {Array} Returns the new array of intersecting values.\n * @example\n *\n * var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];\n * var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }];\n *\n * _.intersectionWith(objects, others, _.isEqual);\n * // => [{ 'x': 1, 'y': 2 }]\n */\n var intersectionWith = baseRest(function(arrays) {\n var comparator = last(arrays),\n mapped = arrayMap(arrays, castArrayLikeObject);\n\n comparator = typeof comparator == 'function' ? comparator : undefined;\n if (comparator) {\n mapped.pop();\n }\n return (mapped.length && mapped[0] === arrays[0])\n ? baseIntersection(mapped, undefined, comparator)\n : [];\n });\n\n /**\n * Converts all elements in `array` into a string separated by `separator`.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Array\n * @param {Array} array The array to convert.\n * @param {string} [separator=','] The element separator.\n * @returns {string} Returns the joined string.\n * @example\n *\n * _.join(['a', 'b', 'c'], '~');\n * // => 'a~b~c'\n */\n function join(array, separator) {\n return array == null ? '' : nativeJoin.call(array, separator);\n }\n\n /**\n * Gets the last element of `array`.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Array\n * @param {Array} array The array to query.\n * @returns {*} Returns the last element of `array`.\n * @example\n *\n * _.last([1, 2, 3]);\n * // => 3\n */\n function last(array) {\n var length = array == null ? 0 : array.length;\n return length ? array[length - 1] : undefined;\n }\n\n /**\n * This method is like `_.indexOf` except that it iterates over elements of\n * `array` from right to left.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Array\n * @param {Array} array The array to inspect.\n * @param {*} value The value to search for.\n * @param {number} [fromIndex=array.length-1] The index to search from.\n * @returns {number} Returns the index of the matched value, else `-1`.\n * @example\n *\n * _.lastIndexOf([1, 2, 1, 2], 2);\n * // => 3\n *\n * // Search from the `fromIndex`.\n * _.lastIndexOf([1, 2, 1, 2], 2, 2);\n * // => 1\n */\n function lastIndexOf(array, value, fromIndex) {\n var length = array == null ? 0 : array.length;\n if (!length) {\n return -1;\n }\n var index = length;\n if (fromIndex !== undefined) {\n index = toInteger(fromIndex);\n index = index < 0 ? nativeMax(length + index, 0) : nativeMin(index, length - 1);\n }\n return value === value\n ? strictLastIndexOf(array, value, index)\n : baseFindIndex(array, baseIsNaN, index, true);\n }\n\n /**\n * Gets the element at index `n` of `array`. If `n` is negative, the nth\n * element from the end is returned.\n *\n * @static\n * @memberOf _\n * @since 4.11.0\n * @category Array\n * @param {Array} array The array to query.\n * @param {number} [n=0] The index of the element to return.\n * @returns {*} Returns the nth element of `array`.\n * @example\n *\n * var array = ['a', 'b', 'c', 'd'];\n *\n * _.nth(array, 1);\n * // => 'b'\n *\n * _.nth(array, -2);\n * // => 'c';\n */\n function nth(array, n) {\n return (array && array.length) ? baseNth(array, toInteger(n)) : undefined;\n }\n\n /**\n * Removes all given values from `array` using\n * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)\n * for equality comparisons.\n *\n * **Note:** Unlike `_.without`, this method mutates `array`. Use `_.remove`\n * to remove elements from an array by predicate.\n *\n * @static\n * @memberOf _\n * @since 2.0.0\n * @category Array\n * @param {Array} array The array to modify.\n * @param {...*} [values] The values to remove.\n * @returns {Array} Returns `array`.\n * @example\n *\n * var array = ['a', 'b', 'c', 'a', 'b', 'c'];\n *\n * _.pull(array, 'a', 'c');\n * console.log(array);\n * // => ['b', 'b']\n */\n var pull = baseRest(pullAll);\n\n /**\n * This method is like `_.pull` except that it accepts an array of values to remove.\n *\n * **Note:** Unlike `_.difference`, this method mutates `array`.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Array\n * @param {Array} array The array to modify.\n * @param {Array} values The values to remove.\n * @returns {Array} Returns `array`.\n * @example\n *\n * var array = ['a', 'b', 'c', 'a', 'b', 'c'];\n *\n * _.pullAll(array, ['a', 'c']);\n * console.log(array);\n * // => ['b', 'b']\n */\n function pullAll(array, values) {\n return (array && array.length && values && values.length)\n ? basePullAll(array, values)\n : array;\n }\n\n /**\n * This method is like `_.pullAll` except that it accepts `iteratee` which is\n * invoked for each element of `array` and `values` to generate the criterion\n * by which they're compared. The iteratee is invoked with one argument: (value).\n *\n * **Note:** Unlike `_.differenceBy`, this method mutates `array`.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Array\n * @param {Array} array The array to modify.\n * @param {Array} values The values to remove.\n * @param {Function} [iteratee=_.identity] The iteratee invoked per element.\n * @returns {Array} Returns `array`.\n * @example\n *\n * var array = [{ 'x': 1 }, { 'x': 2 }, { 'x': 3 }, { 'x': 1 }];\n *\n * _.pullAllBy(array, [{ 'x': 1 }, { 'x': 3 }], 'x');\n * console.log(array);\n * // => [{ 'x': 2 }]\n */\n function pullAllBy(array, values, iteratee) {\n return (array && array.length && values && values.length)\n ? basePullAll(array, values, getIteratee(iteratee, 2))\n : array;\n }\n\n /**\n * This method is like `_.pullAll` except that it accepts `comparator` which\n * is invoked to compare elements of `array` to `values`. The comparator is\n * invoked with two arguments: (arrVal, othVal).\n *\n * **Note:** Unlike `_.differenceWith`, this method mutates `array`.\n *\n * @static\n * @memberOf _\n * @since 4.6.0\n * @category Array\n * @param {Array} array The array to modify.\n * @param {Array} values The values to remove.\n * @param {Function} [comparator] The comparator invoked per element.\n * @returns {Array} Returns `array`.\n * @example\n *\n * var array = [{ 'x': 1, 'y': 2 }, { 'x': 3, 'y': 4 }, { 'x': 5, 'y': 6 }];\n *\n * _.pullAllWith(array, [{ 'x': 3, 'y': 4 }], _.isEqual);\n * console.log(array);\n * // => [{ 'x': 1, 'y': 2 }, { 'x': 5, 'y': 6 }]\n */\n function pullAllWith(array, values, comparator) {\n return (array && array.length && values && values.length)\n ? basePullAll(array, values, undefined, comparator)\n : array;\n }\n\n /**\n * Removes elements from `array` corresponding to `indexes` and returns an\n * array of removed elements.\n *\n * **Note:** Unlike `_.at`, this method mutates `array`.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Array\n * @param {Array} array The array to modify.\n * @param {...(number|number[])} [indexes] The indexes of elements to remove.\n * @returns {Array} Returns the new array of removed elements.\n * @example\n *\n * var array = ['a', 'b', 'c', 'd'];\n * var pulled = _.pullAt(array, [1, 3]);\n *\n * console.log(array);\n * // => ['a', 'c']\n *\n * console.log(pulled);\n * // => ['b', 'd']\n */\n var pullAt = flatRest(function(array, indexes) {\n var length = array == null ? 0 : array.length,\n result = baseAt(array, indexes);\n\n basePullAt(array, arrayMap(indexes, function(index) {\n return isIndex(index, length) ? +index : index;\n }).sort(compareAscending));\n\n return result;\n });\n\n /**\n * Removes all elements from `array` that `predicate` returns truthy for\n * and returns an array of the removed elements. The predicate is invoked\n * with three arguments: (value, index, array).\n *\n * **Note:** Unlike `_.filter`, this method mutates `array`. Use `_.pull`\n * to pull elements from an array by value.\n *\n * @static\n * @memberOf _\n * @since 2.0.0\n * @category Array\n * @param {Array} array The array to modify.\n * @param {Function} [predicate=_.identity] The function invoked per iteration.\n * @returns {Array} Returns the new array of removed elements.\n * @example\n *\n * var array = [1, 2, 3, 4];\n * var evens = _.remove(array, function(n) {\n * return n % 2 == 0;\n * });\n *\n * console.log(array);\n * // => [1, 3]\n *\n * console.log(evens);\n * // => [2, 4]\n */\n function remove(array, predicate) {\n var result = [];\n if (!(array && array.length)) {\n return result;\n }\n var index = -1,\n indexes = [],\n length = array.length;\n\n predicate = getIteratee(predicate, 3);\n while (++index < length) {\n var value = array[index];\n if (predicate(value, index, array)) {\n result.push(value);\n indexes.push(index);\n }\n }\n basePullAt(array, indexes);\n return result;\n }\n\n /**\n * Reverses `array` so that the first element becomes the last, the second\n * element becomes the second to last, and so on.\n *\n * **Note:** This method mutates `array` and is based on\n * [`Array#reverse`](https://mdn.io/Array/reverse).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Array\n * @param {Array} array The array to modify.\n * @returns {Array} Returns `array`.\n * @example\n *\n * var array = [1, 2, 3];\n *\n * _.reverse(array);\n * // => [3, 2, 1]\n *\n * console.log(array);\n * // => [3, 2, 1]\n */\n function reverse(array) {\n return array == null ? array : nativeReverse.call(array);\n }\n\n /**\n * Creates a slice of `array` from `start` up to, but not including, `end`.\n *\n * **Note:** This method is used instead of\n * [`Array#slice`](https://mdn.io/Array/slice) to ensure dense arrays are\n * returned.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Array\n * @param {Array} array The array to slice.\n * @param {number} [start=0] The start position.\n * @param {number} [end=array.length] The end position.\n * @returns {Array} Returns the slice of `array`.\n */\n function slice(array, start, end) {\n var length = array == null ? 0 : array.length;\n if (!length) {\n return [];\n }\n if (end && typeof end != 'number' && isIterateeCall(array, start, end)) {\n start = 0;\n end = length;\n }\n else {\n start = start == null ? 0 : toInteger(start);\n end = end === undefined ? length : toInteger(end);\n }\n return baseSlice(array, start, end);\n }\n\n /**\n * Uses a binary search to determine the lowest index at which `value`\n * should be inserted into `array` in order to maintain its sort order.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Array\n * @param {Array} array The sorted array to inspect.\n * @param {*} value The value to evaluate.\n * @returns {number} Returns the index at which `value` should be inserted\n * into `array`.\n * @example\n *\n * _.sortedIndex([30, 50], 40);\n * // => 1\n */\n function sortedIndex(array, value) {\n return baseSortedIndex(array, value);\n }\n\n /**\n * This method is like `_.sortedIndex` except that it accepts `iteratee`\n * which is invoked for `value` and each element of `array` to compute their\n * sort ranking. The iteratee is invoked with one argument: (value).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Array\n * @param {Array} array The sorted array to inspect.\n * @param {*} value The value to evaluate.\n * @param {Function} [iteratee=_.identity] The iteratee invoked per element.\n * @returns {number} Returns the index at which `value` should be inserted\n * into `array`.\n * @example\n *\n * var objects = [{ 'x': 4 }, { 'x': 5 }];\n *\n * _.sortedIndexBy(objects, { 'x': 4 }, function(o) { return o.x; });\n * // => 0\n *\n * // The `_.property` iteratee shorthand.\n * _.sortedIndexBy(objects, { 'x': 4 }, 'x');\n * // => 0\n */\n function sortedIndexBy(array, value, iteratee) {\n return baseSortedIndexBy(array, value, getIteratee(iteratee, 2));\n }\n\n /**\n * This method is like `_.indexOf` except that it performs a binary\n * search on a sorted `array`.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Array\n * @param {Array} array The array to inspect.\n * @param {*} value The value to search for.\n * @returns {number} Returns the index of the matched value, else `-1`.\n * @example\n *\n * _.sortedIndexOf([4, 5, 5, 5, 6], 5);\n * // => 1\n */\n function sortedIndexOf(array, value) {\n var length = array == null ? 0 : array.length;\n if (length) {\n var index = baseSortedIndex(array, value);\n if (index < length && eq(array[index], value)) {\n return index;\n }\n }\n return -1;\n }\n\n /**\n * This method is like `_.sortedIndex` except that it returns the highest\n * index at which `value` should be inserted into `array` in order to\n * maintain its sort order.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Array\n * @param {Array} array The sorted array to inspect.\n * @param {*} value The value to evaluate.\n * @returns {number} Returns the index at which `value` should be inserted\n * into `array`.\n * @example\n *\n * _.sortedLastIndex([4, 5, 5, 5, 6], 5);\n * // => 4\n */\n function sortedLastIndex(array, value) {\n return baseSortedIndex(array, value, true);\n }\n\n /**\n * This method is like `_.sortedLastIndex` except that it accepts `iteratee`\n * which is invoked for `value` and each element of `array` to compute their\n * sort ranking. The iteratee is invoked with one argument: (value).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Array\n * @param {Array} array The sorted array to inspect.\n * @param {*} value The value to evaluate.\n * @param {Function} [iteratee=_.identity] The iteratee invoked per element.\n * @returns {number} Returns the index at which `value` should be inserted\n * into `array`.\n * @example\n *\n * var objects = [{ 'x': 4 }, { 'x': 5 }];\n *\n * _.sortedLastIndexBy(objects, { 'x': 4 }, function(o) { return o.x; });\n * // => 1\n *\n * // The `_.property` iteratee shorthand.\n * _.sortedLastIndexBy(objects, { 'x': 4 }, 'x');\n * // => 1\n */\n function sortedLastIndexBy(array, value, iteratee) {\n return baseSortedIndexBy(array, value, getIteratee(iteratee, 2), true);\n }\n\n /**\n * This method is like `_.lastIndexOf` except that it performs a binary\n * search on a sorted `array`.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Array\n * @param {Array} array The array to inspect.\n * @param {*} value The value to search for.\n * @returns {number} Returns the index of the matched value, else `-1`.\n * @example\n *\n * _.sortedLastIndexOf([4, 5, 5, 5, 6], 5);\n * // => 3\n */\n function sortedLastIndexOf(array, value) {\n var length = array == null ? 0 : array.length;\n if (length) {\n var index = baseSortedIndex(array, value, true) - 1;\n if (eq(array[index], value)) {\n return index;\n }\n }\n return -1;\n }\n\n /**\n * This method is like `_.uniq` except that it's designed and optimized\n * for sorted arrays.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Array\n * @param {Array} array The array to inspect.\n * @returns {Array} Returns the new duplicate free array.\n * @example\n *\n * _.sortedUniq([1, 1, 2]);\n * // => [1, 2]\n */\n function sortedUniq(array) {\n return (array && array.length)\n ? baseSortedUniq(array)\n : [];\n }\n\n /**\n * This method is like `_.uniqBy` except that it's designed and optimized\n * for sorted arrays.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Array\n * @param {Array} array The array to inspect.\n * @param {Function} [iteratee] The iteratee invoked per element.\n * @returns {Array} Returns the new duplicate free array.\n * @example\n *\n * _.sortedUniqBy([1.1, 1.2, 2.3, 2.4], Math.floor);\n * // => [1.1, 2.3]\n */\n function sortedUniqBy(array, iteratee) {\n return (array && array.length)\n ? baseSortedUniq(array, getIteratee(iteratee, 2))\n : [];\n }\n\n /**\n * Gets all but the first element of `array`.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Array\n * @param {Array} array The array to query.\n * @returns {Array} Returns the slice of `array`.\n * @example\n *\n * _.tail([1, 2, 3]);\n * // => [2, 3]\n */\n function tail(array) {\n var length = array == null ? 0 : array.length;\n return length ? baseSlice(array, 1, length) : [];\n }\n\n /**\n * Creates a slice of `array` with `n` elements taken from the beginning.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Array\n * @param {Array} array The array to query.\n * @param {number} [n=1] The number of elements to take.\n * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n * @returns {Array} Returns the slice of `array`.\n * @example\n *\n * _.take([1, 2, 3]);\n * // => [1]\n *\n * _.take([1, 2, 3], 2);\n * // => [1, 2]\n *\n * _.take([1, 2, 3], 5);\n * // => [1, 2, 3]\n *\n * _.take([1, 2, 3], 0);\n * // => []\n */\n function take(array, n, guard) {\n if (!(array && array.length)) {\n return [];\n }\n n = (guard || n === undefined) ? 1 : toInteger(n);\n return baseSlice(array, 0, n < 0 ? 0 : n);\n }\n\n /**\n * Creates a slice of `array` with `n` elements taken from the end.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Array\n * @param {Array} array The array to query.\n * @param {number} [n=1] The number of elements to take.\n * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n * @returns {Array} Returns the slice of `array`.\n * @example\n *\n * _.takeRight([1, 2, 3]);\n * // => [3]\n *\n * _.takeRight([1, 2, 3], 2);\n * // => [2, 3]\n *\n * _.takeRight([1, 2, 3], 5);\n * // => [1, 2, 3]\n *\n * _.takeRight([1, 2, 3], 0);\n * // => []\n */\n function takeRight(array, n, guard) {\n var length = array == null ? 0 : array.length;\n if (!length) {\n return [];\n }\n n = (guard || n === undefined) ? 1 : toInteger(n);\n n = length - n;\n return baseSlice(array, n < 0 ? 0 : n, length);\n }\n\n /**\n * Creates a slice of `array` with elements taken from the end. Elements are\n * taken until `predicate` returns falsey. The predicate is invoked with\n * three arguments: (value, index, array).\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Array\n * @param {Array} array The array to query.\n * @param {Function} [predicate=_.identity] The function invoked per iteration.\n * @returns {Array} Returns the slice of `array`.\n * @example\n *\n * var users = [\n * { 'user': 'barney', 'active': true },\n * { 'user': 'fred', 'active': false },\n * { 'user': 'pebbles', 'active': false }\n * ];\n *\n * _.takeRightWhile(users, function(o) { return !o.active; });\n * // => objects for ['fred', 'pebbles']\n *\n * // The `_.matches` iteratee shorthand.\n * _.takeRightWhile(users, { 'user': 'pebbles', 'active': false });\n * // => objects for ['pebbles']\n *\n * // The `_.matchesProperty` iteratee shorthand.\n * _.takeRightWhile(users, ['active', false]);\n * // => objects for ['fred', 'pebbles']\n *\n * // The `_.property` iteratee shorthand.\n * _.takeRightWhile(users, 'active');\n * // => []\n */\n function takeRightWhile(array, predicate) {\n return (array && array.length)\n ? baseWhile(array, getIteratee(predicate, 3), false, true)\n : [];\n }\n\n /**\n * Creates a slice of `array` with elements taken from the beginning. Elements\n * are taken until `predicate` returns falsey. The predicate is invoked with\n * three arguments: (value, index, array).\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Array\n * @param {Array} array The array to query.\n * @param {Function} [predicate=_.identity] The function invoked per iteration.\n * @returns {Array} Returns the slice of `array`.\n * @example\n *\n * var users = [\n * { 'user': 'barney', 'active': false },\n * { 'user': 'fred', 'active': false },\n * { 'user': 'pebbles', 'active': true }\n * ];\n *\n * _.takeWhile(users, function(o) { return !o.active; });\n * // => objects for ['barney', 'fred']\n *\n * // The `_.matches` iteratee shorthand.\n * _.takeWhile(users, { 'user': 'barney', 'active': false });\n * // => objects for ['barney']\n *\n * // The `_.matchesProperty` iteratee shorthand.\n * _.takeWhile(users, ['active', false]);\n * // => objects for ['barney', 'fred']\n *\n * // The `_.property` iteratee shorthand.\n * _.takeWhile(users, 'active');\n * // => []\n */\n function takeWhile(array, predicate) {\n return (array && array.length)\n ? baseWhile(array, getIteratee(predicate, 3))\n : [];\n }\n\n /**\n * Creates an array of unique values, in order, from all given arrays using\n * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)\n * for equality comparisons.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Array\n * @param {...Array} [arrays] The arrays to inspect.\n * @returns {Array} Returns the new array of combined values.\n * @example\n *\n * _.union([2], [1, 2]);\n * // => [2, 1]\n */\n var union = baseRest(function(arrays) {\n return baseUniq(baseFlatten(arrays, 1, isArrayLikeObject, true));\n });\n\n /**\n * This method is like `_.union` except that it accepts `iteratee` which is\n * invoked for each element of each `arrays` to generate the criterion by\n * which uniqueness is computed. Result values are chosen from the first\n * array in which the value occurs. The iteratee is invoked with one argument:\n * (value).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Array\n * @param {...Array} [arrays] The arrays to inspect.\n * @param {Function} [iteratee=_.identity] The iteratee invoked per element.\n * @returns {Array} Returns the new array of combined values.\n * @example\n *\n * _.unionBy([2.1], [1.2, 2.3], Math.floor);\n * // => [2.1, 1.2]\n *\n * // The `_.property` iteratee shorthand.\n * _.unionBy([{ 'x': 1 }], [{ 'x': 2 }, { 'x': 1 }], 'x');\n * // => [{ 'x': 1 }, { 'x': 2 }]\n */\n var unionBy = baseRest(function(arrays) {\n var iteratee = last(arrays);\n if (isArrayLikeObject(iteratee)) {\n iteratee = undefined;\n }\n return baseUniq(baseFlatten(arrays, 1, isArrayLikeObject, true), getIteratee(iteratee, 2));\n });\n\n /**\n * This method is like `_.union` except that it accepts `comparator` which\n * is invoked to compare elements of `arrays`. Result values are chosen from\n * the first array in which the value occurs. The comparator is invoked\n * with two arguments: (arrVal, othVal).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Array\n * @param {...Array} [arrays] The arrays to inspect.\n * @param {Function} [comparator] The comparator invoked per element.\n * @returns {Array} Returns the new array of combined values.\n * @example\n *\n * var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];\n * var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }];\n *\n * _.unionWith(objects, others, _.isEqual);\n * // => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 1 }]\n */\n var unionWith = baseRest(function(arrays) {\n var comparator = last(arrays);\n comparator = typeof comparator == 'function' ? comparator : undefined;\n return baseUniq(baseFlatten(arrays, 1, isArrayLikeObject, true), undefined, comparator);\n });\n\n /**\n * Creates a duplicate-free version of an array, using\n * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)\n * for equality comparisons, in which only the first occurrence of each element\n * is kept. The order of result values is determined by the order they occur\n * in the array.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Array\n * @param {Array} array The array to inspect.\n * @returns {Array} Returns the new duplicate free array.\n * @example\n *\n * _.uniq([2, 1, 2]);\n * // => [2, 1]\n */\n function uniq(array) {\n return (array && array.length) ? baseUniq(array) : [];\n }\n\n /**\n * This method is like `_.uniq` except that it accepts `iteratee` which is\n * invoked for each element in `array` to generate the criterion by which\n * uniqueness is computed. The order of result values is determined by the\n * order they occur in the array. The iteratee is invoked with one argument:\n * (value).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Array\n * @param {Array} array The array to inspect.\n * @param {Function} [iteratee=_.identity] The iteratee invoked per element.\n * @returns {Array} Returns the new duplicate free array.\n * @example\n *\n * _.uniqBy([2.1, 1.2, 2.3], Math.floor);\n * // => [2.1, 1.2]\n *\n * // The `_.property` iteratee shorthand.\n * _.uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x');\n * // => [{ 'x': 1 }, { 'x': 2 }]\n */\n function uniqBy(array, iteratee) {\n return (array && array.length) ? baseUniq(array, getIteratee(iteratee, 2)) : [];\n }\n\n /**\n * This method is like `_.uniq` except that it accepts `comparator` which\n * is invoked to compare elements of `array`. The order of result values is\n * determined by the order they occur in the array.The comparator is invoked\n * with two arguments: (arrVal, othVal).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Array\n * @param {Array} array The array to inspect.\n * @param {Function} [comparator] The comparator invoked per element.\n * @returns {Array} Returns the new duplicate free array.\n * @example\n *\n * var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }];\n *\n * _.uniqWith(objects, _.isEqual);\n * // => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]\n */\n function uniqWith(array, comparator) {\n comparator = typeof comparator == 'function' ? comparator : undefined;\n return (array && array.length) ? baseUniq(array, undefined, comparator) : [];\n }\n\n /**\n * This method is like `_.zip` except that it accepts an array of grouped\n * elements and creates an array regrouping the elements to their pre-zip\n * configuration.\n *\n * @static\n * @memberOf _\n * @since 1.2.0\n * @category Array\n * @param {Array} array The array of grouped elements to process.\n * @returns {Array} Returns the new array of regrouped elements.\n * @example\n *\n * var zipped = _.zip(['a', 'b'], [1, 2], [true, false]);\n * // => [['a', 1, true], ['b', 2, false]]\n *\n * _.unzip(zipped);\n * // => [['a', 'b'], [1, 2], [true, false]]\n */\n function unzip(array) {\n if (!(array && array.length)) {\n return [];\n }\n var length = 0;\n array = arrayFilter(array, function(group) {\n if (isArrayLikeObject(group)) {\n length = nativeMax(group.length, length);\n return true;\n }\n });\n return baseTimes(length, function(index) {\n return arrayMap(array, baseProperty(index));\n });\n }\n\n /**\n * This method is like `_.unzip` except that it accepts `iteratee` to specify\n * how regrouped values should be combined. The iteratee is invoked with the\n * elements of each group: (...group).\n *\n * @static\n * @memberOf _\n * @since 3.8.0\n * @category Array\n * @param {Array} array The array of grouped elements to process.\n * @param {Function} [iteratee=_.identity] The function to combine\n * regrouped values.\n * @returns {Array} Returns the new array of regrouped elements.\n * @example\n *\n * var zipped = _.zip([1, 2], [10, 20], [100, 200]);\n * // => [[1, 10, 100], [2, 20, 200]]\n *\n * _.unzipWith(zipped, _.add);\n * // => [3, 30, 300]\n */\n function unzipWith(array, iteratee) {\n if (!(array && array.length)) {\n return [];\n }\n var result = unzip(array);\n if (iteratee == null) {\n return result;\n }\n return arrayMap(result, function(group) {\n return apply(iteratee, undefined, group);\n });\n }\n\n /**\n * Creates an array excluding all given values using\n * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)\n * for equality comparisons.\n *\n * **Note:** Unlike `_.pull`, this method returns a new array.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Array\n * @param {Array} array The array to inspect.\n * @param {...*} [values] The values to exclude.\n * @returns {Array} Returns the new array of filtered values.\n * @see _.difference, _.xor\n * @example\n *\n * _.without([2, 1, 2, 3], 1, 2);\n * // => [3]\n */\n var without = baseRest(function(array, values) {\n return isArrayLikeObject(array)\n ? baseDifference(array, values)\n : [];\n });\n\n /**\n * Creates an array of unique values that is the\n * [symmetric difference](https://en.wikipedia.org/wiki/Symmetric_difference)\n * of the given arrays. The order of result values is determined by the order\n * they occur in the arrays.\n *\n * @static\n * @memberOf _\n * @since 2.4.0\n * @category Array\n * @param {...Array} [arrays] The arrays to inspect.\n * @returns {Array} Returns the new array of filtered values.\n * @see _.difference, _.without\n * @example\n *\n * _.xor([2, 1], [2, 3]);\n * // => [1, 3]\n */\n var xor = baseRest(function(arrays) {\n return baseXor(arrayFilter(arrays, isArrayLikeObject));\n });\n\n /**\n * This method is like `_.xor` except that it accepts `iteratee` which is\n * invoked for each element of each `arrays` to generate the criterion by\n * which by which they're compared. The order of result values is determined\n * by the order they occur in the arrays. The iteratee is invoked with one\n * argument: (value).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Array\n * @param {...Array} [arrays] The arrays to inspect.\n * @param {Function} [iteratee=_.identity] The iteratee invoked per element.\n * @returns {Array} Returns the new array of filtered values.\n * @example\n *\n * _.xorBy([2.1, 1.2], [2.3, 3.4], Math.floor);\n * // => [1.2, 3.4]\n *\n * // The `_.property` iteratee shorthand.\n * _.xorBy([{ 'x': 1 }], [{ 'x': 2 }, { 'x': 1 }], 'x');\n * // => [{ 'x': 2 }]\n */\n var xorBy = baseRest(function(arrays) {\n var iteratee = last(arrays);\n if (isArrayLikeObject(iteratee)) {\n iteratee = undefined;\n }\n return baseXor(arrayFilter(arrays, isArrayLikeObject), getIteratee(iteratee, 2));\n });\n\n /**\n * This method is like `_.xor` except that it accepts `comparator` which is\n * invoked to compare elements of `arrays`. The order of result values is\n * determined by the order they occur in the arrays. The comparator is invoked\n * with two arguments: (arrVal, othVal).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Array\n * @param {...Array} [arrays] The arrays to inspect.\n * @param {Function} [comparator] The comparator invoked per element.\n * @returns {Array} Returns the new array of filtered values.\n * @example\n *\n * var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];\n * var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }];\n *\n * _.xorWith(objects, others, _.isEqual);\n * // => [{ 'x': 2, 'y': 1 }, { 'x': 1, 'y': 1 }]\n */\n var xorWith = baseRest(function(arrays) {\n var comparator = last(arrays);\n comparator = typeof comparator == 'function' ? comparator : undefined;\n return baseXor(arrayFilter(arrays, isArrayLikeObject), undefined, comparator);\n });\n\n /**\n * Creates an array of grouped elements, the first of which contains the\n * first elements of the given arrays, the second of which contains the\n * second elements of the given arrays, and so on.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Array\n * @param {...Array} [arrays] The arrays to process.\n * @returns {Array} Returns the new array of grouped elements.\n * @example\n *\n * _.zip(['a', 'b'], [1, 2], [true, false]);\n * // => [['a', 1, true], ['b', 2, false]]\n */\n var zip = baseRest(unzip);\n\n /**\n * This method is like `_.fromPairs` except that it accepts two arrays,\n * one of property identifiers and one of corresponding values.\n *\n * @static\n * @memberOf _\n * @since 0.4.0\n * @category Array\n * @param {Array} [props=[]] The property identifiers.\n * @param {Array} [values=[]] The property values.\n * @returns {Object} Returns the new object.\n * @example\n *\n * _.zipObject(['a', 'b'], [1, 2]);\n * // => { 'a': 1, 'b': 2 }\n */\n function zipObject(props, values) {\n return baseZipObject(props || [], values || [], assignValue);\n }\n\n /**\n * This method is like `_.zipObject` except that it supports property paths.\n *\n * @static\n * @memberOf _\n * @since 4.1.0\n * @category Array\n * @param {Array} [props=[]] The property identifiers.\n * @param {Array} [values=[]] The property values.\n * @returns {Object} Returns the new object.\n * @example\n *\n * _.zipObjectDeep(['a.b[0].c', 'a.b[1].d'], [1, 2]);\n * // => { 'a': { 'b': [{ 'c': 1 }, { 'd': 2 }] } }\n */\n function zipObjectDeep(props, values) {\n return baseZipObject(props || [], values || [], baseSet);\n }\n\n /**\n * This method is like `_.zip` except that it accepts `iteratee` to specify\n * how grouped values should be combined. The iteratee is invoked with the\n * elements of each group: (...group).\n *\n * @static\n * @memberOf _\n * @since 3.8.0\n * @category Array\n * @param {...Array} [arrays] The arrays to process.\n * @param {Function} [iteratee=_.identity] The function to combine\n * grouped values.\n * @returns {Array} Returns the new array of grouped elements.\n * @example\n *\n * _.zipWith([1, 2], [10, 20], [100, 200], function(a, b, c) {\n * return a + b + c;\n * });\n * // => [111, 222]\n */\n var zipWith = baseRest(function(arrays) {\n var length = arrays.length,\n iteratee = length > 1 ? arrays[length - 1] : undefined;\n\n iteratee = typeof iteratee == 'function' ? (arrays.pop(), iteratee) : undefined;\n return unzipWith(arrays, iteratee);\n });\n\n /*------------------------------------------------------------------------*/\n\n /**\n * Creates a `lodash` wrapper instance that wraps `value` with explicit method\n * chain sequences enabled. The result of such sequences must be unwrapped\n * with `_#value`.\n *\n * @static\n * @memberOf _\n * @since 1.3.0\n * @category Seq\n * @param {*} value The value to wrap.\n * @returns {Object} Returns the new `lodash` wrapper instance.\n * @example\n *\n * var users = [\n * { 'user': 'barney', 'age': 36 },\n * { 'user': 'fred', 'age': 40 },\n * { 'user': 'pebbles', 'age': 1 }\n * ];\n *\n * var youngest = _\n * .chain(users)\n * .sortBy('age')\n * .map(function(o) {\n * return o.user + ' is ' + o.age;\n * })\n * .head()\n * .value();\n * // => 'pebbles is 1'\n */\n function chain(value) {\n var result = lodash(value);\n result.__chain__ = true;\n return result;\n }\n\n /**\n * This method invokes `interceptor` and returns `value`. The interceptor\n * is invoked with one argument; (value). The purpose of this method is to\n * \"tap into\" a method chain sequence in order to modify intermediate results.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Seq\n * @param {*} value The value to provide to `interceptor`.\n * @param {Function} interceptor The function to invoke.\n * @returns {*} Returns `value`.\n * @example\n *\n * _([1, 2, 3])\n * .tap(function(array) {\n * // Mutate input array.\n * array.pop();\n * })\n * .reverse()\n * .value();\n * // => [2, 1]\n */\n function tap(value, interceptor) {\n interceptor(value);\n return value;\n }\n\n /**\n * This method is like `_.tap` except that it returns the result of `interceptor`.\n * The purpose of this method is to \"pass thru\" values replacing intermediate\n * results in a method chain sequence.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Seq\n * @param {*} value The value to provide to `interceptor`.\n * @param {Function} interceptor The function to invoke.\n * @returns {*} Returns the result of `interceptor`.\n * @example\n *\n * _(' abc ')\n * .chain()\n * .trim()\n * .thru(function(value) {\n * return [value];\n * })\n * .value();\n * // => ['abc']\n */\n function thru(value, interceptor) {\n return interceptor(value);\n }\n\n /**\n * This method is the wrapper version of `_.at`.\n *\n * @name at\n * @memberOf _\n * @since 1.0.0\n * @category Seq\n * @param {...(string|string[])} [paths] The property paths to pick.\n * @returns {Object} Returns the new `lodash` wrapper instance.\n * @example\n *\n * var object = { 'a': [{ 'b': { 'c': 3 } }, 4] };\n *\n * _(object).at(['a[0].b.c', 'a[1]']).value();\n * // => [3, 4]\n */\n var wrapperAt = flatRest(function(paths) {\n var length = paths.length,\n start = length ? paths[0] : 0,\n value = this.__wrapped__,\n interceptor = function(object) { return baseAt(object, paths); };\n\n if (length > 1 || this.__actions__.length ||\n !(value instanceof LazyWrapper) || !isIndex(start)) {\n return this.thru(interceptor);\n }\n value = value.slice(start, +start + (length ? 1 : 0));\n value.__actions__.push({\n 'func': thru,\n 'args': [interceptor],\n 'thisArg': undefined\n });\n return new LodashWrapper(value, this.__chain__).thru(function(array) {\n if (length && !array.length) {\n array.push(undefined);\n }\n return array;\n });\n });\n\n /**\n * Creates a `lodash` wrapper instance with explicit method chain sequences enabled.\n *\n * @name chain\n * @memberOf _\n * @since 0.1.0\n * @category Seq\n * @returns {Object} Returns the new `lodash` wrapper instance.\n * @example\n *\n * var users = [\n * { 'user': 'barney', 'age': 36 },\n * { 'user': 'fred', 'age': 40 }\n * ];\n *\n * // A sequence without explicit chaining.\n * _(users).head();\n * // => { 'user': 'barney', 'age': 36 }\n *\n * // A sequence with explicit chaining.\n * _(users)\n * .chain()\n * .head()\n * .pick('user')\n * .value();\n * // => { 'user': 'barney' }\n */\n function wrapperChain() {\n return chain(this);\n }\n\n /**\n * Executes the chain sequence and returns the wrapped result.\n *\n * @name commit\n * @memberOf _\n * @since 3.2.0\n * @category Seq\n * @returns {Object} Returns the new `lodash` wrapper instance.\n * @example\n *\n * var array = [1, 2];\n * var wrapped = _(array).push(3);\n *\n * console.log(array);\n * // => [1, 2]\n *\n * wrapped = wrapped.commit();\n * console.log(array);\n * // => [1, 2, 3]\n *\n * wrapped.last();\n * // => 3\n *\n * console.log(array);\n * // => [1, 2, 3]\n */\n function wrapperCommit() {\n return new LodashWrapper(this.value(), this.__chain__);\n }\n\n /**\n * Gets the next value on a wrapped object following the\n * [iterator protocol](https://mdn.io/iteration_protocols#iterator).\n *\n * @name next\n * @memberOf _\n * @since 4.0.0\n * @category Seq\n * @returns {Object} Returns the next iterator value.\n * @example\n *\n * var wrapped = _([1, 2]);\n *\n * wrapped.next();\n * // => { 'done': false, 'value': 1 }\n *\n * wrapped.next();\n * // => { 'done': false, 'value': 2 }\n *\n * wrapped.next();\n * // => { 'done': true, 'value': undefined }\n */\n function wrapperNext() {\n if (this.__values__ === undefined) {\n this.__values__ = toArray(this.value());\n }\n var done = this.__index__ >= this.__values__.length,\n value = done ? undefined : this.__values__[this.__index__++];\n\n return { 'done': done, 'value': value };\n }\n\n /**\n * Enables the wrapper to be iterable.\n *\n * @name Symbol.iterator\n * @memberOf _\n * @since 4.0.0\n * @category Seq\n * @returns {Object} Returns the wrapper object.\n * @example\n *\n * var wrapped = _([1, 2]);\n *\n * wrapped[Symbol.iterator]() === wrapped;\n * // => true\n *\n * Array.from(wrapped);\n * // => [1, 2]\n */\n function wrapperToIterator() {\n return this;\n }\n\n /**\n * Creates a clone of the chain sequence planting `value` as the wrapped value.\n *\n * @name plant\n * @memberOf _\n * @since 3.2.0\n * @category Seq\n * @param {*} value The value to plant.\n * @returns {Object} Returns the new `lodash` wrapper instance.\n * @example\n *\n * function square(n) {\n * return n * n;\n * }\n *\n * var wrapped = _([1, 2]).map(square);\n * var other = wrapped.plant([3, 4]);\n *\n * other.value();\n * // => [9, 16]\n *\n * wrapped.value();\n * // => [1, 4]\n */\n function wrapperPlant(value) {\n var result,\n parent = this;\n\n while (parent instanceof baseLodash) {\n var clone = wrapperClone(parent);\n clone.__index__ = 0;\n clone.__values__ = undefined;\n if (result) {\n previous.__wrapped__ = clone;\n } else {\n result = clone;\n }\n var previous = clone;\n parent = parent.__wrapped__;\n }\n previous.__wrapped__ = value;\n return result;\n }\n\n /**\n * This method is the wrapper version of `_.reverse`.\n *\n * **Note:** This method mutates the wrapped array.\n *\n * @name reverse\n * @memberOf _\n * @since 0.1.0\n * @category Seq\n * @returns {Object} Returns the new `lodash` wrapper instance.\n * @example\n *\n * var array = [1, 2, 3];\n *\n * _(array).reverse().value()\n * // => [3, 2, 1]\n *\n * console.log(array);\n * // => [3, 2, 1]\n */\n function wrapperReverse() {\n var value = this.__wrapped__;\n if (value instanceof LazyWrapper) {\n var wrapped = value;\n if (this.__actions__.length) {\n wrapped = new LazyWrapper(this);\n }\n wrapped = wrapped.reverse();\n wrapped.__actions__.push({\n 'func': thru,\n 'args': [reverse],\n 'thisArg': undefined\n });\n return new LodashWrapper(wrapped, this.__chain__);\n }\n return this.thru(reverse);\n }\n\n /**\n * Executes the chain sequence to resolve the unwrapped value.\n *\n * @name value\n * @memberOf _\n * @since 0.1.0\n * @alias toJSON, valueOf\n * @category Seq\n * @returns {*} Returns the resolved unwrapped value.\n * @example\n *\n * _([1, 2, 3]).value();\n * // => [1, 2, 3]\n */\n function wrapperValue() {\n return baseWrapperValue(this.__wrapped__, this.__actions__);\n }\n\n /*------------------------------------------------------------------------*/\n\n /**\n * Creates an object composed of keys generated from the results of running\n * each element of `collection` thru `iteratee`. The corresponding value of\n * each key is the number of times the key was returned by `iteratee`. The\n * iteratee is invoked with one argument: (value).\n *\n * @static\n * @memberOf _\n * @since 0.5.0\n * @category Collection\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} [iteratee=_.identity] The iteratee to transform keys.\n * @returns {Object} Returns the composed aggregate object.\n * @example\n *\n * _.countBy([6.1, 4.2, 6.3], Math.floor);\n * // => { '4': 1, '6': 2 }\n *\n * // The `_.property` iteratee shorthand.\n * _.countBy(['one', 'two', 'three'], 'length');\n * // => { '3': 2, '5': 1 }\n */\n var countBy = createAggregator(function(result, value, key) {\n if (hasOwnProperty.call(result, key)) {\n ++result[key];\n } else {\n baseAssignValue(result, key, 1);\n }\n });\n\n /**\n * Checks if `predicate` returns truthy for **all** elements of `collection`.\n * Iteration is stopped once `predicate` returns falsey. The predicate is\n * invoked with three arguments: (value, index|key, collection).\n *\n * **Note:** This method returns `true` for\n * [empty collections](https://en.wikipedia.org/wiki/Empty_set) because\n * [everything is true](https://en.wikipedia.org/wiki/Vacuous_truth) of\n * elements of empty collections.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Collection\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} [predicate=_.identity] The function invoked per iteration.\n * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n * @returns {boolean} Returns `true` if all elements pass the predicate check,\n * else `false`.\n * @example\n *\n * _.every([true, 1, null, 'yes'], Boolean);\n * // => false\n *\n * var users = [\n * { 'user': 'barney', 'age': 36, 'active': false },\n * { 'user': 'fred', 'age': 40, 'active': false }\n * ];\n *\n * // The `_.matches` iteratee shorthand.\n * _.every(users, { 'user': 'barney', 'active': false });\n * // => false\n *\n * // The `_.matchesProperty` iteratee shorthand.\n * _.every(users, ['active', false]);\n * // => true\n *\n * // The `_.property` iteratee shorthand.\n * _.every(users, 'active');\n * // => false\n */\n function every(collection, predicate, guard) {\n var func = isArray(collection) ? arrayEvery : baseEvery;\n if (guard && isIterateeCall(collection, predicate, guard)) {\n predicate = undefined;\n }\n return func(collection, getIteratee(predicate, 3));\n }\n\n /**\n * Iterates over elements of `collection`, returning an array of all elements\n * `predicate` returns truthy for. The predicate is invoked with three\n * arguments: (value, index|key, collection).\n *\n * **Note:** Unlike `_.remove`, this method returns a new array.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Collection\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} [predicate=_.identity] The function invoked per iteration.\n * @returns {Array} Returns the new filtered array.\n * @see _.reject\n * @example\n *\n * var users = [\n * { 'user': 'barney', 'age': 36, 'active': true },\n * { 'user': 'fred', 'age': 40, 'active': false }\n * ];\n *\n * _.filter(users, function(o) { return !o.active; });\n * // => objects for ['fred']\n *\n * // The `_.matches` iteratee shorthand.\n * _.filter(users, { 'age': 36, 'active': true });\n * // => objects for ['barney']\n *\n * // The `_.matchesProperty` iteratee shorthand.\n * _.filter(users, ['active', false]);\n * // => objects for ['fred']\n *\n * // The `_.property` iteratee shorthand.\n * _.filter(users, 'active');\n * // => objects for ['barney']\n *\n * // Combining several predicates using `_.overEvery` or `_.overSome`.\n * _.filter(users, _.overSome([{ 'age': 36 }, ['age', 40]]));\n * // => objects for ['fred', 'barney']\n */\n function filter(collection, predicate) {\n var func = isArray(collection) ? arrayFilter : baseFilter;\n return func(collection, getIteratee(predicate, 3));\n }\n\n /**\n * Iterates over elements of `collection`, returning the first element\n * `predicate` returns truthy for. The predicate is invoked with three\n * arguments: (value, index|key, collection).\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Collection\n * @param {Array|Object} collection The collection to inspect.\n * @param {Function} [predicate=_.identity] The function invoked per iteration.\n * @param {number} [fromIndex=0] The index to search from.\n * @returns {*} Returns the matched element, else `undefined`.\n * @example\n *\n * var users = [\n * { 'user': 'barney', 'age': 36, 'active': true },\n * { 'user': 'fred', 'age': 40, 'active': false },\n * { 'user': 'pebbles', 'age': 1, 'active': true }\n * ];\n *\n * _.find(users, function(o) { return o.age < 40; });\n * // => object for 'barney'\n *\n * // The `_.matches` iteratee shorthand.\n * _.find(users, { 'age': 1, 'active': true });\n * // => object for 'pebbles'\n *\n * // The `_.matchesProperty` iteratee shorthand.\n * _.find(users, ['active', false]);\n * // => object for 'fred'\n *\n * // The `_.property` iteratee shorthand.\n * _.find(users, 'active');\n * // => object for 'barney'\n */\n var find = createFind(findIndex);\n\n /**\n * This method is like `_.find` except that it iterates over elements of\n * `collection` from right to left.\n *\n * @static\n * @memberOf _\n * @since 2.0.0\n * @category Collection\n * @param {Array|Object} collection The collection to inspect.\n * @param {Function} [predicate=_.identity] The function invoked per iteration.\n * @param {number} [fromIndex=collection.length-1] The index to search from.\n * @returns {*} Returns the matched element, else `undefined`.\n * @example\n *\n * _.findLast([1, 2, 3, 4], function(n) {\n * return n % 2 == 1;\n * });\n * // => 3\n */\n var findLast = createFind(findLastIndex);\n\n /**\n * Creates a flattened array of values by running each element in `collection`\n * thru `iteratee` and flattening the mapped results. The iteratee is invoked\n * with three arguments: (value, index|key, collection).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Collection\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n * @returns {Array} Returns the new flattened array.\n * @example\n *\n * function duplicate(n) {\n * return [n, n];\n * }\n *\n * _.flatMap([1, 2], duplicate);\n * // => [1, 1, 2, 2]\n */\n function flatMap(collection, iteratee) {\n return baseFlatten(map(collection, iteratee), 1);\n }\n\n /**\n * This method is like `_.flatMap` except that it recursively flattens the\n * mapped results.\n *\n * @static\n * @memberOf _\n * @since 4.7.0\n * @category Collection\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n * @returns {Array} Returns the new flattened array.\n * @example\n *\n * function duplicate(n) {\n * return [[[n, n]]];\n * }\n *\n * _.flatMapDeep([1, 2], duplicate);\n * // => [1, 1, 2, 2]\n */\n function flatMapDeep(collection, iteratee) {\n return baseFlatten(map(collection, iteratee), INFINITY);\n }\n\n /**\n * This method is like `_.flatMap` except that it recursively flattens the\n * mapped results up to `depth` times.\n *\n * @static\n * @memberOf _\n * @since 4.7.0\n * @category Collection\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n * @param {number} [depth=1] The maximum recursion depth.\n * @returns {Array} Returns the new flattened array.\n * @example\n *\n * function duplicate(n) {\n * return [[[n, n]]];\n * }\n *\n * _.flatMapDepth([1, 2], duplicate, 2);\n * // => [[1, 1], [2, 2]]\n */\n function flatMapDepth(collection, iteratee, depth) {\n depth = depth === undefined ? 1 : toInteger(depth);\n return baseFlatten(map(collection, iteratee), depth);\n }\n\n /**\n * Iterates over elements of `collection` and invokes `iteratee` for each element.\n * The iteratee is invoked with three arguments: (value, index|key, collection).\n * Iteratee functions may exit iteration early by explicitly returning `false`.\n *\n * **Note:** As with other \"Collections\" methods, objects with a \"length\"\n * property are iterated like arrays. To avoid this behavior use `_.forIn`\n * or `_.forOwn` for object iteration.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @alias each\n * @category Collection\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n * @returns {Array|Object} Returns `collection`.\n * @see _.forEachRight\n * @example\n *\n * _.forEach([1, 2], function(value) {\n * console.log(value);\n * });\n * // => Logs `1` then `2`.\n *\n * _.forEach({ 'a': 1, 'b': 2 }, function(value, key) {\n * console.log(key);\n * });\n * // => Logs 'a' then 'b' (iteration order is not guaranteed).\n */\n function forEach(collection, iteratee) {\n var func = isArray(collection) ? arrayEach : baseEach;\n return func(collection, getIteratee(iteratee, 3));\n }\n\n /**\n * This method is like `_.forEach` except that it iterates over elements of\n * `collection` from right to left.\n *\n * @static\n * @memberOf _\n * @since 2.0.0\n * @alias eachRight\n * @category Collection\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n * @returns {Array|Object} Returns `collection`.\n * @see _.forEach\n * @example\n *\n * _.forEachRight([1, 2], function(value) {\n * console.log(value);\n * });\n * // => Logs `2` then `1`.\n */\n function forEachRight(collection, iteratee) {\n var func = isArray(collection) ? arrayEachRight : baseEachRight;\n return func(collection, getIteratee(iteratee, 3));\n }\n\n /**\n * Creates an object composed of keys generated from the results of running\n * each element of `collection` thru `iteratee`. The order of grouped values\n * is determined by the order they occur in `collection`. The corresponding\n * value of each key is an array of elements responsible for generating the\n * key. The iteratee is invoked with one argument: (value).\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Collection\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} [iteratee=_.identity] The iteratee to transform keys.\n * @returns {Object} Returns the composed aggregate object.\n * @example\n *\n * _.groupBy([6.1, 4.2, 6.3], Math.floor);\n * // => { '4': [4.2], '6': [6.1, 6.3] }\n *\n * // The `_.property` iteratee shorthand.\n * _.groupBy(['one', 'two', 'three'], 'length');\n * // => { '3': ['one', 'two'], '5': ['three'] }\n */\n var groupBy = createAggregator(function(result, value, key) {\n if (hasOwnProperty.call(result, key)) {\n result[key].push(value);\n } else {\n baseAssignValue(result, key, [value]);\n }\n });\n\n /**\n * Checks if `value` is in `collection`. If `collection` is a string, it's\n * checked for a substring of `value`, otherwise\n * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)\n * is used for equality comparisons. If `fromIndex` is negative, it's used as\n * the offset from the end of `collection`.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Collection\n * @param {Array|Object|string} collection The collection to inspect.\n * @param {*} value The value to search for.\n * @param {number} [fromIndex=0] The index to search from.\n * @param- {Object} [guard] Enables use as an iteratee for methods like `_.reduce`.\n * @returns {boolean} Returns `true` if `value` is found, else `false`.\n * @example\n *\n * _.includes([1, 2, 3], 1);\n * // => true\n *\n * _.includes([1, 2, 3], 1, 2);\n * // => false\n *\n * _.includes({ 'a': 1, 'b': 2 }, 1);\n * // => true\n *\n * _.includes('abcd', 'bc');\n * // => true\n */\n function includes(collection, value, fromIndex, guard) {\n collection = isArrayLike(collection) ? collection : values(collection);\n fromIndex = (fromIndex && !guard) ? toInteger(fromIndex) : 0;\n\n var length = collection.length;\n if (fromIndex < 0) {\n fromIndex = nativeMax(length + fromIndex, 0);\n }\n return isString(collection)\n ? (fromIndex <= length && collection.indexOf(value, fromIndex) > -1)\n : (!!length && baseIndexOf(collection, value, fromIndex) > -1);\n }\n\n /**\n * Invokes the method at `path` of each element in `collection`, returning\n * an array of the results of each invoked method. Any additional arguments\n * are provided to each invoked method. If `path` is a function, it's invoked\n * for, and `this` bound to, each element in `collection`.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Collection\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Array|Function|string} path The path of the method to invoke or\n * the function invoked per iteration.\n * @param {...*} [args] The arguments to invoke each method with.\n * @returns {Array} Returns the array of results.\n * @example\n *\n * _.invokeMap([[5, 1, 7], [3, 2, 1]], 'sort');\n * // => [[1, 5, 7], [1, 2, 3]]\n *\n * _.invokeMap([123, 456], String.prototype.split, '');\n * // => [['1', '2', '3'], ['4', '5', '6']]\n */\n var invokeMap = baseRest(function(collection, path, args) {\n var index = -1,\n isFunc = typeof path == 'function',\n result = isArrayLike(collection) ? Array(collection.length) : [];\n\n baseEach(collection, function(value) {\n result[++index] = isFunc ? apply(path, value, args) : baseInvoke(value, path, args);\n });\n return result;\n });\n\n /**\n * Creates an object composed of keys generated from the results of running\n * each element of `collection` thru `iteratee`. The corresponding value of\n * each key is the last element responsible for generating the key. The\n * iteratee is invoked with one argument: (value).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Collection\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} [iteratee=_.identity] The iteratee to transform keys.\n * @returns {Object} Returns the composed aggregate object.\n * @example\n *\n * var array = [\n * { 'dir': 'left', 'code': 97 },\n * { 'dir': 'right', 'code': 100 }\n * ];\n *\n * _.keyBy(array, function(o) {\n * return String.fromCharCode(o.code);\n * });\n * // => { 'a': { 'dir': 'left', 'code': 97 }, 'd': { 'dir': 'right', 'code': 100 } }\n *\n * _.keyBy(array, 'dir');\n * // => { 'left': { 'dir': 'left', 'code': 97 }, 'right': { 'dir': 'right', 'code': 100 } }\n */\n var keyBy = createAggregator(function(result, value, key) {\n baseAssignValue(result, key, value);\n });\n\n /**\n * Creates an array of values by running each element in `collection` thru\n * `iteratee`. The iteratee is invoked with three arguments:\n * (value, index|key, collection).\n *\n * Many lodash methods are guarded to work as iteratees for methods like\n * `_.every`, `_.filter`, `_.map`, `_.mapValues`, `_.reject`, and `_.some`.\n *\n * The guarded methods are:\n * `ary`, `chunk`, `curry`, `curryRight`, `drop`, `dropRight`, `every`,\n * `fill`, `invert`, `parseInt`, `random`, `range`, `rangeRight`, `repeat`,\n * `sampleSize`, `slice`, `some`, `sortBy`, `split`, `take`, `takeRight`,\n * `template`, `trim`, `trimEnd`, `trimStart`, and `words`\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Collection\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n * @returns {Array} Returns the new mapped array.\n * @example\n *\n * function square(n) {\n * return n * n;\n * }\n *\n * _.map([4, 8], square);\n * // => [16, 64]\n *\n * _.map({ 'a': 4, 'b': 8 }, square);\n * // => [16, 64] (iteration order is not guaranteed)\n *\n * var users = [\n * { 'user': 'barney' },\n * { 'user': 'fred' }\n * ];\n *\n * // The `_.property` iteratee shorthand.\n * _.map(users, 'user');\n * // => ['barney', 'fred']\n */\n function map(collection, iteratee) {\n var func = isArray(collection) ? arrayMap : baseMap;\n return func(collection, getIteratee(iteratee, 3));\n }\n\n /**\n * This method is like `_.sortBy` except that it allows specifying the sort\n * orders of the iteratees to sort by. If `orders` is unspecified, all values\n * are sorted in ascending order. Otherwise, specify an order of \"desc\" for\n * descending or \"asc\" for ascending sort order of corresponding values.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Collection\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Array[]|Function[]|Object[]|string[]} [iteratees=[_.identity]]\n * The iteratees to sort by.\n * @param {string[]} [orders] The sort orders of `iteratees`.\n * @param- {Object} [guard] Enables use as an iteratee for methods like `_.reduce`.\n * @returns {Array} Returns the new sorted array.\n * @example\n *\n * var users = [\n * { 'user': 'fred', 'age': 48 },\n * { 'user': 'barney', 'age': 34 },\n * { 'user': 'fred', 'age': 40 },\n * { 'user': 'barney', 'age': 36 }\n * ];\n *\n * // Sort by `user` in ascending order and by `age` in descending order.\n * _.orderBy(users, ['user', 'age'], ['asc', 'desc']);\n * // => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]\n */\n function orderBy(collection, iteratees, orders, guard) {\n if (collection == null) {\n return [];\n }\n if (!isArray(iteratees)) {\n iteratees = iteratees == null ? [] : [iteratees];\n }\n orders = guard ? undefined : orders;\n if (!isArray(orders)) {\n orders = orders == null ? [] : [orders];\n }\n return baseOrderBy(collection, iteratees, orders);\n }\n\n /**\n * Creates an array of elements split into two groups, the first of which\n * contains elements `predicate` returns truthy for, the second of which\n * contains elements `predicate` returns falsey for. The predicate is\n * invoked with one argument: (value).\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Collection\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} [predicate=_.identity] The function invoked per iteration.\n * @returns {Array} Returns the array of grouped elements.\n * @example\n *\n * var users = [\n * { 'user': 'barney', 'age': 36, 'active': false },\n * { 'user': 'fred', 'age': 40, 'active': true },\n * { 'user': 'pebbles', 'age': 1, 'active': false }\n * ];\n *\n * _.partition(users, function(o) { return o.active; });\n * // => objects for [['fred'], ['barney', 'pebbles']]\n *\n * // The `_.matches` iteratee shorthand.\n * _.partition(users, { 'age': 1, 'active': false });\n * // => objects for [['pebbles'], ['barney', 'fred']]\n *\n * // The `_.matchesProperty` iteratee shorthand.\n * _.partition(users, ['active', false]);\n * // => objects for [['barney', 'pebbles'], ['fred']]\n *\n * // The `_.property` iteratee shorthand.\n * _.partition(users, 'active');\n * // => objects for [['fred'], ['barney', 'pebbles']]\n */\n var partition = createAggregator(function(result, value, key) {\n result[key ? 0 : 1].push(value);\n }, function() { return [[], []]; });\n\n /**\n * Reduces `collection` to a value which is the accumulated result of running\n * each element in `collection` thru `iteratee`, where each successive\n * invocation is supplied the return value of the previous. If `accumulator`\n * is not given, the first element of `collection` is used as the initial\n * value. The iteratee is invoked with four arguments:\n * (accumulator, value, index|key, collection).\n *\n * Many lodash methods are guarded to work as iteratees for methods like\n * `_.reduce`, `_.reduceRight`, and `_.transform`.\n *\n * The guarded methods are:\n * `assign`, `defaults`, `defaultsDeep`, `includes`, `merge`, `orderBy`,\n * and `sortBy`\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Collection\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n * @param {*} [accumulator] The initial value.\n * @returns {*} Returns the accumulated value.\n * @see _.reduceRight\n * @example\n *\n * _.reduce([1, 2], function(sum, n) {\n * return sum + n;\n * }, 0);\n * // => 3\n *\n * _.reduce({ 'a': 1, 'b': 2, 'c': 1 }, function(result, value, key) {\n * (result[value] || (result[value] = [])).push(key);\n * return result;\n * }, {});\n * // => { '1': ['a', 'c'], '2': ['b'] } (iteration order is not guaranteed)\n */\n function reduce(collection, iteratee, accumulator) {\n var func = isArray(collection) ? arrayReduce : baseReduce,\n initAccum = arguments.length < 3;\n\n return func(collection, getIteratee(iteratee, 4), accumulator, initAccum, baseEach);\n }\n\n /**\n * This method is like `_.reduce` except that it iterates over elements of\n * `collection` from right to left.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Collection\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n * @param {*} [accumulator] The initial value.\n * @returns {*} Returns the accumulated value.\n * @see _.reduce\n * @example\n *\n * var array = [[0, 1], [2, 3], [4, 5]];\n *\n * _.reduceRight(array, function(flattened, other) {\n * return flattened.concat(other);\n * }, []);\n * // => [4, 5, 2, 3, 0, 1]\n */\n function reduceRight(collection, iteratee, accumulator) {\n var func = isArray(collection) ? arrayReduceRight : baseReduce,\n initAccum = arguments.length < 3;\n\n return func(collection, getIteratee(iteratee, 4), accumulator, initAccum, baseEachRight);\n }\n\n /**\n * The opposite of `_.filter`; this method returns the elements of `collection`\n * that `predicate` does **not** return truthy for.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Collection\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} [predicate=_.identity] The function invoked per iteration.\n * @returns {Array} Returns the new filtered array.\n * @see _.filter\n * @example\n *\n * var users = [\n * { 'user': 'barney', 'age': 36, 'active': false },\n * { 'user': 'fred', 'age': 40, 'active': true }\n * ];\n *\n * _.reject(users, function(o) { return !o.active; });\n * // => objects for ['fred']\n *\n * // The `_.matches` iteratee shorthand.\n * _.reject(users, { 'age': 40, 'active': true });\n * // => objects for ['barney']\n *\n * // The `_.matchesProperty` iteratee shorthand.\n * _.reject(users, ['active', false]);\n * // => objects for ['fred']\n *\n * // The `_.property` iteratee shorthand.\n * _.reject(users, 'active');\n * // => objects for ['barney']\n */\n function reject(collection, predicate) {\n var func = isArray(collection) ? arrayFilter : baseFilter;\n return func(collection, negate(getIteratee(predicate, 3)));\n }\n\n /**\n * Gets a random element from `collection`.\n *\n * @static\n * @memberOf _\n * @since 2.0.0\n * @category Collection\n * @param {Array|Object} collection The collection to sample.\n * @returns {*} Returns the random element.\n * @example\n *\n * _.sample([1, 2, 3, 4]);\n * // => 2\n */\n function sample(collection) {\n var func = isArray(collection) ? arraySample : baseSample;\n return func(collection);\n }\n\n /**\n * Gets `n` random elements at unique keys from `collection` up to the\n * size of `collection`.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Collection\n * @param {Array|Object} collection The collection to sample.\n * @param {number} [n=1] The number of elements to sample.\n * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n * @returns {Array} Returns the random elements.\n * @example\n *\n * _.sampleSize([1, 2, 3], 2);\n * // => [3, 1]\n *\n * _.sampleSize([1, 2, 3], 4);\n * // => [2, 3, 1]\n */\n function sampleSize(collection, n, guard) {\n if ((guard ? isIterateeCall(collection, n, guard) : n === undefined)) {\n n = 1;\n } else {\n n = toInteger(n);\n }\n var func = isArray(collection) ? arraySampleSize : baseSampleSize;\n return func(collection, n);\n }\n\n /**\n * Creates an array of shuffled values, using a version of the\n * [Fisher-Yates shuffle](https://en.wikipedia.org/wiki/Fisher-Yates_shuffle).\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Collection\n * @param {Array|Object} collection The collection to shuffle.\n * @returns {Array} Returns the new shuffled array.\n * @example\n *\n * _.shuffle([1, 2, 3, 4]);\n * // => [4, 1, 3, 2]\n */\n function shuffle(collection) {\n var func = isArray(collection) ? arrayShuffle : baseShuffle;\n return func(collection);\n }\n\n /**\n * Gets the size of `collection` by returning its length for array-like\n * values or the number of own enumerable string keyed properties for objects.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Collection\n * @param {Array|Object|string} collection The collection to inspect.\n * @returns {number} Returns the collection size.\n * @example\n *\n * _.size([1, 2, 3]);\n * // => 3\n *\n * _.size({ 'a': 1, 'b': 2 });\n * // => 2\n *\n * _.size('pebbles');\n * // => 7\n */\n function size(collection) {\n if (collection == null) {\n return 0;\n }\n if (isArrayLike(collection)) {\n return isString(collection) ? stringSize(collection) : collection.length;\n }\n var tag = getTag(collection);\n if (tag == mapTag || tag == setTag) {\n return collection.size;\n }\n return baseKeys(collection).length;\n }\n\n /**\n * Checks if `predicate` returns truthy for **any** element of `collection`.\n * Iteration is stopped once `predicate` returns truthy. The predicate is\n * invoked with three arguments: (value, index|key, collection).\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Collection\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} [predicate=_.identity] The function invoked per iteration.\n * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n * @returns {boolean} Returns `true` if any element passes the predicate check,\n * else `false`.\n * @example\n *\n * _.some([null, 0, 'yes', false], Boolean);\n * // => true\n *\n * var users = [\n * { 'user': 'barney', 'active': true },\n * { 'user': 'fred', 'active': false }\n * ];\n *\n * // The `_.matches` iteratee shorthand.\n * _.some(users, { 'user': 'barney', 'active': false });\n * // => false\n *\n * // The `_.matchesProperty` iteratee shorthand.\n * _.some(users, ['active', false]);\n * // => true\n *\n * // The `_.property` iteratee shorthand.\n * _.some(users, 'active');\n * // => true\n */\n function some(collection, predicate, guard) {\n var func = isArray(collection) ? arraySome : baseSome;\n if (guard && isIterateeCall(collection, predicate, guard)) {\n predicate = undefined;\n }\n return func(collection, getIteratee(predicate, 3));\n }\n\n /**\n * Creates an array of elements, sorted in ascending order by the results of\n * running each element in a collection thru each iteratee. This method\n * performs a stable sort, that is, it preserves the original sort order of\n * equal elements. The iteratees are invoked with one argument: (value).\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Collection\n * @param {Array|Object} collection The collection to iterate over.\n * @param {...(Function|Function[])} [iteratees=[_.identity]]\n * The iteratees to sort by.\n * @returns {Array} Returns the new sorted array.\n * @example\n *\n * var users = [\n * { 'user': 'fred', 'age': 48 },\n * { 'user': 'barney', 'age': 36 },\n * { 'user': 'fred', 'age': 30 },\n * { 'user': 'barney', 'age': 34 }\n * ];\n *\n * _.sortBy(users, [function(o) { return o.user; }]);\n * // => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 30]]\n *\n * _.sortBy(users, ['user', 'age']);\n * // => objects for [['barney', 34], ['barney', 36], ['fred', 30], ['fred', 48]]\n */\n var sortBy = baseRest(function(collection, iteratees) {\n if (collection == null) {\n return [];\n }\n var length = iteratees.length;\n if (length > 1 && isIterateeCall(collection, iteratees[0], iteratees[1])) {\n iteratees = [];\n } else if (length > 2 && isIterateeCall(iteratees[0], iteratees[1], iteratees[2])) {\n iteratees = [iteratees[0]];\n }\n return baseOrderBy(collection, baseFlatten(iteratees, 1), []);\n });\n\n /*------------------------------------------------------------------------*/\n\n /**\n * Gets the timestamp of the number of milliseconds that have elapsed since\n * the Unix epoch (1 January 1970 00:00:00 UTC).\n *\n * @static\n * @memberOf _\n * @since 2.4.0\n * @category Date\n * @returns {number} Returns the timestamp.\n * @example\n *\n * _.defer(function(stamp) {\n * console.log(_.now() - stamp);\n * }, _.now());\n * // => Logs the number of milliseconds it took for the deferred invocation.\n */\n var now = ctxNow || function() {\n return root.Date.now();\n };\n\n /*------------------------------------------------------------------------*/\n\n /**\n * The opposite of `_.before`; this method creates a function that invokes\n * `func` once it's called `n` or more times.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Function\n * @param {number} n The number of calls before `func` is invoked.\n * @param {Function} func The function to restrict.\n * @returns {Function} Returns the new restricted function.\n * @example\n *\n * var saves = ['profile', 'settings'];\n *\n * var done = _.after(saves.length, function() {\n * console.log('done saving!');\n * });\n *\n * _.forEach(saves, function(type) {\n * asyncSave({ 'type': type, 'complete': done });\n * });\n * // => Logs 'done saving!' after the two async saves have completed.\n */\n function after(n, func) {\n if (typeof func != 'function') {\n throw new TypeError(FUNC_ERROR_TEXT);\n }\n n = toInteger(n);\n return function() {\n if (--n < 1) {\n return func.apply(this, arguments);\n }\n };\n }\n\n /**\n * Creates a function that invokes `func`, with up to `n` arguments,\n * ignoring any additional arguments.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Function\n * @param {Function} func The function to cap arguments for.\n * @param {number} [n=func.length] The arity cap.\n * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n * @returns {Function} Returns the new capped function.\n * @example\n *\n * _.map(['6', '8', '10'], _.ary(parseInt, 1));\n * // => [6, 8, 10]\n */\n function ary(func, n, guard) {\n n = guard ? undefined : n;\n n = (func && n == null) ? func.length : n;\n return createWrap(func, WRAP_ARY_FLAG, undefined, undefined, undefined, undefined, n);\n }\n\n /**\n * Creates a function that invokes `func`, with the `this` binding and arguments\n * of the created function, while it's called less than `n` times. Subsequent\n * calls to the created function return the result of the last `func` invocation.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Function\n * @param {number} n The number of calls at which `func` is no longer invoked.\n * @param {Function} func The function to restrict.\n * @returns {Function} Returns the new restricted function.\n * @example\n *\n * jQuery(element).on('click', _.before(5, addContactToList));\n * // => Allows adding up to 4 contacts to the list.\n */\n function before(n, func) {\n var result;\n if (typeof func != 'function') {\n throw new TypeError(FUNC_ERROR_TEXT);\n }\n n = toInteger(n);\n return function() {\n if (--n > 0) {\n result = func.apply(this, arguments);\n }\n if (n <= 1) {\n func = undefined;\n }\n return result;\n };\n }\n\n /**\n * Creates a function that invokes `func` with the `this` binding of `thisArg`\n * and `partials` prepended to the arguments it receives.\n *\n * The `_.bind.placeholder` value, which defaults to `_` in monolithic builds,\n * may be used as a placeholder for partially applied arguments.\n *\n * **Note:** Unlike native `Function#bind`, this method doesn't set the \"length\"\n * property of bound functions.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Function\n * @param {Function} func The function to bind.\n * @param {*} thisArg The `this` binding of `func`.\n * @param {...*} [partials] The arguments to be partially applied.\n * @returns {Function} Returns the new bound function.\n * @example\n *\n * function greet(greeting, punctuation) {\n * return greeting + ' ' + this.user + punctuation;\n * }\n *\n * var object = { 'user': 'fred' };\n *\n * var bound = _.bind(greet, object, 'hi');\n * bound('!');\n * // => 'hi fred!'\n *\n * // Bound with placeholders.\n * var bound = _.bind(greet, object, _, '!');\n * bound('hi');\n * // => 'hi fred!'\n */\n var bind = baseRest(function(func, thisArg, partials) {\n var bitmask = WRAP_BIND_FLAG;\n if (partials.length) {\n var holders = replaceHolders(partials, getHolder(bind));\n bitmask |= WRAP_PARTIAL_FLAG;\n }\n return createWrap(func, bitmask, thisArg, partials, holders);\n });\n\n /**\n * Creates a function that invokes the method at `object[key]` with `partials`\n * prepended to the arguments it receives.\n *\n * This method differs from `_.bind` by allowing bound functions to reference\n * methods that may be redefined or don't yet exist. See\n * [Peter Michaux's article](http://peter.michaux.ca/articles/lazy-function-definition-pattern)\n * for more details.\n *\n * The `_.bindKey.placeholder` value, which defaults to `_` in monolithic\n * builds, may be used as a placeholder for partially applied arguments.\n *\n * @static\n * @memberOf _\n * @since 0.10.0\n * @category Function\n * @param {Object} object The object to invoke the method on.\n * @param {string} key The key of the method.\n * @param {...*} [partials] The arguments to be partially applied.\n * @returns {Function} Returns the new bound function.\n * @example\n *\n * var object = {\n * 'user': 'fred',\n * 'greet': function(greeting, punctuation) {\n * return greeting + ' ' + this.user + punctuation;\n * }\n * };\n *\n * var bound = _.bindKey(object, 'greet', 'hi');\n * bound('!');\n * // => 'hi fred!'\n *\n * object.greet = function(greeting, punctuation) {\n * return greeting + 'ya ' + this.user + punctuation;\n * };\n *\n * bound('!');\n * // => 'hiya fred!'\n *\n * // Bound with placeholders.\n * var bound = _.bindKey(object, 'greet', _, '!');\n * bound('hi');\n * // => 'hiya fred!'\n */\n var bindKey = baseRest(function(object, key, partials) {\n var bitmask = WRAP_BIND_FLAG | WRAP_BIND_KEY_FLAG;\n if (partials.length) {\n var holders = replaceHolders(partials, getHolder(bindKey));\n bitmask |= WRAP_PARTIAL_FLAG;\n }\n return createWrap(key, bitmask, object, partials, holders);\n });\n\n /**\n * Creates a function that accepts arguments of `func` and either invokes\n * `func` returning its result, if at least `arity` number of arguments have\n * been provided, or returns a function that accepts the remaining `func`\n * arguments, and so on. The arity of `func` may be specified if `func.length`\n * is not sufficient.\n *\n * The `_.curry.placeholder` value, which defaults to `_` in monolithic builds,\n * may be used as a placeholder for provided arguments.\n *\n * **Note:** This method doesn't set the \"length\" property of curried functions.\n *\n * @static\n * @memberOf _\n * @since 2.0.0\n * @category Function\n * @param {Function} func The function to curry.\n * @param {number} [arity=func.length] The arity of `func`.\n * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n * @returns {Function} Returns the new curried function.\n * @example\n *\n * var abc = function(a, b, c) {\n * return [a, b, c];\n * };\n *\n * var curried = _.curry(abc);\n *\n * curried(1)(2)(3);\n * // => [1, 2, 3]\n *\n * curried(1, 2)(3);\n * // => [1, 2, 3]\n *\n * curried(1, 2, 3);\n * // => [1, 2, 3]\n *\n * // Curried with placeholders.\n * curried(1)(_, 3)(2);\n * // => [1, 2, 3]\n */\n function curry(func, arity, guard) {\n arity = guard ? undefined : arity;\n var result = createWrap(func, WRAP_CURRY_FLAG, undefined, undefined, undefined, undefined, undefined, arity);\n result.placeholder = curry.placeholder;\n return result;\n }\n\n /**\n * This method is like `_.curry` except that arguments are applied to `func`\n * in the manner of `_.partialRight` instead of `_.partial`.\n *\n * The `_.curryRight.placeholder` value, which defaults to `_` in monolithic\n * builds, may be used as a placeholder for provided arguments.\n *\n * **Note:** This method doesn't set the \"length\" property of curried functions.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Function\n * @param {Function} func The function to curry.\n * @param {number} [arity=func.length] The arity of `func`.\n * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n * @returns {Function} Returns the new curried function.\n * @example\n *\n * var abc = function(a, b, c) {\n * return [a, b, c];\n * };\n *\n * var curried = _.curryRight(abc);\n *\n * curried(3)(2)(1);\n * // => [1, 2, 3]\n *\n * curried(2, 3)(1);\n * // => [1, 2, 3]\n *\n * curried(1, 2, 3);\n * // => [1, 2, 3]\n *\n * // Curried with placeholders.\n * curried(3)(1, _)(2);\n * // => [1, 2, 3]\n */\n function curryRight(func, arity, guard) {\n arity = guard ? undefined : arity;\n var result = createWrap(func, WRAP_CURRY_RIGHT_FLAG, undefined, undefined, undefined, undefined, undefined, arity);\n result.placeholder = curryRight.placeholder;\n return result;\n }\n\n /**\n * Creates a debounced function that delays invoking `func` until after `wait`\n * milliseconds have elapsed since the last time the debounced function was\n * invoked. The debounced function comes with a `cancel` method to cancel\n * delayed `func` invocations and a `flush` method to immediately invoke them.\n * Provide `options` to indicate whether `func` should be invoked on the\n * leading and/or trailing edge of the `wait` timeout. The `func` is invoked\n * with the last arguments provided to the debounced function. Subsequent\n * calls to the debounced function return the result of the last `func`\n * invocation.\n *\n * **Note:** If `leading` and `trailing` options are `true`, `func` is\n * invoked on the trailing edge of the timeout only if the debounced function\n * is invoked more than once during the `wait` timeout.\n *\n * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred\n * until to the next tick, similar to `setTimeout` with a timeout of `0`.\n *\n * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)\n * for details over the differences between `_.debounce` and `_.throttle`.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Function\n * @param {Function} func The function to debounce.\n * @param {number} [wait=0] The number of milliseconds to delay.\n * @param {Object} [options={}] The options object.\n * @param {boolean} [options.leading=false]\n * Specify invoking on the leading edge of the timeout.\n * @param {number} [options.maxWait]\n * The maximum time `func` is allowed to be delayed before it's invoked.\n * @param {boolean} [options.trailing=true]\n * Specify invoking on the trailing edge of the timeout.\n * @returns {Function} Returns the new debounced function.\n * @example\n *\n * // Avoid costly calculations while the window size is in flux.\n * jQuery(window).on('resize', _.debounce(calculateLayout, 150));\n *\n * // Invoke `sendMail` when clicked, debouncing subsequent calls.\n * jQuery(element).on('click', _.debounce(sendMail, 300, {\n * 'leading': true,\n * 'trailing': false\n * }));\n *\n * // Ensure `batchLog` is invoked once after 1 second of debounced calls.\n * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });\n * var source = new EventSource('/stream');\n * jQuery(source).on('message', debounced);\n *\n * // Cancel the trailing debounced invocation.\n * jQuery(window).on('popstate', debounced.cancel);\n */\n function debounce(func, wait, options) {\n var lastArgs,\n lastThis,\n maxWait,\n result,\n timerId,\n lastCallTime,\n lastInvokeTime = 0,\n leading = false,\n maxing = false,\n trailing = true;\n\n if (typeof func != 'function') {\n throw new TypeError(FUNC_ERROR_TEXT);\n }\n wait = toNumber(wait) || 0;\n if (isObject(options)) {\n leading = !!options.leading;\n maxing = 'maxWait' in options;\n maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;\n trailing = 'trailing' in options ? !!options.trailing : trailing;\n }\n\n function invokeFunc(time) {\n var args = lastArgs,\n thisArg = lastThis;\n\n lastArgs = lastThis = undefined;\n lastInvokeTime = time;\n result = func.apply(thisArg, args);\n return result;\n }\n\n function leadingEdge(time) {\n // Reset any `maxWait` timer.\n lastInvokeTime = time;\n // Start the timer for the trailing edge.\n timerId = setTimeout(timerExpired, wait);\n // Invoke the leading edge.\n return leading ? invokeFunc(time) : result;\n }\n\n function remainingWait(time) {\n var timeSinceLastCall = time - lastCallTime,\n timeSinceLastInvoke = time - lastInvokeTime,\n timeWaiting = wait - timeSinceLastCall;\n\n return maxing\n ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)\n : timeWaiting;\n }\n\n function shouldInvoke(time) {\n var timeSinceLastCall = time - lastCallTime,\n timeSinceLastInvoke = time - lastInvokeTime;\n\n // Either this is the first call, activity has stopped and we're at the\n // trailing edge, the system time has gone backwards and we're treating\n // it as the trailing edge, or we've hit the `maxWait` limit.\n return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||\n (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));\n }\n\n function timerExpired() {\n var time = now();\n if (shouldInvoke(time)) {\n return trailingEdge(time);\n }\n // Restart the timer.\n timerId = setTimeout(timerExpired, remainingWait(time));\n }\n\n function trailingEdge(time) {\n timerId = undefined;\n\n // Only invoke if we have `lastArgs` which means `func` has been\n // debounced at least once.\n if (trailing && lastArgs) {\n return invokeFunc(time);\n }\n lastArgs = lastThis = undefined;\n return result;\n }\n\n function cancel() {\n if (timerId !== undefined) {\n clearTimeout(timerId);\n }\n lastInvokeTime = 0;\n lastArgs = lastCallTime = lastThis = timerId = undefined;\n }\n\n function flush() {\n return timerId === undefined ? result : trailingEdge(now());\n }\n\n function debounced() {\n var time = now(),\n isInvoking = shouldInvoke(time);\n\n lastArgs = arguments;\n lastThis = this;\n lastCallTime = time;\n\n if (isInvoking) {\n if (timerId === undefined) {\n return leadingEdge(lastCallTime);\n }\n if (maxing) {\n // Handle invocations in a tight loop.\n clearTimeout(timerId);\n timerId = setTimeout(timerExpired, wait);\n return invokeFunc(lastCallTime);\n }\n }\n if (timerId === undefined) {\n timerId = setTimeout(timerExpired, wait);\n }\n return result;\n }\n debounced.cancel = cancel;\n debounced.flush = flush;\n return debounced;\n }\n\n /**\n * Defers invoking the `func` until the current call stack has cleared. Any\n * additional arguments are provided to `func` when it's invoked.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Function\n * @param {Function} func The function to defer.\n * @param {...*} [args] The arguments to invoke `func` with.\n * @returns {number} Returns the timer id.\n * @example\n *\n * _.defer(function(text) {\n * console.log(text);\n * }, 'deferred');\n * // => Logs 'deferred' after one millisecond.\n */\n var defer = baseRest(function(func, args) {\n return baseDelay(func, 1, args);\n });\n\n /**\n * Invokes `func` after `wait` milliseconds. Any additional arguments are\n * provided to `func` when it's invoked.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Function\n * @param {Function} func The function to delay.\n * @param {number} wait The number of milliseconds to delay invocation.\n * @param {...*} [args] The arguments to invoke `func` with.\n * @returns {number} Returns the timer id.\n * @example\n *\n * _.delay(function(text) {\n * console.log(text);\n * }, 1000, 'later');\n * // => Logs 'later' after one second.\n */\n var delay = baseRest(function(func, wait, args) {\n return baseDelay(func, toNumber(wait) || 0, args);\n });\n\n /**\n * Creates a function that invokes `func` with arguments reversed.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Function\n * @param {Function} func The function to flip arguments for.\n * @returns {Function} Returns the new flipped function.\n * @example\n *\n * var flipped = _.flip(function() {\n * return _.toArray(arguments);\n * });\n *\n * flipped('a', 'b', 'c', 'd');\n * // => ['d', 'c', 'b', 'a']\n */\n function flip(func) {\n return createWrap(func, WRAP_FLIP_FLAG);\n }\n\n /**\n * Creates a function that memoizes the result of `func`. If `resolver` is\n * provided, it determines the cache key for storing the result based on the\n * arguments provided to the memoized function. By default, the first argument\n * provided to the memoized function is used as the map cache key. The `func`\n * is invoked with the `this` binding of the memoized function.\n *\n * **Note:** The cache is exposed as the `cache` property on the memoized\n * function. Its creation may be customized by replacing the `_.memoize.Cache`\n * constructor with one whose instances implement the\n * [`Map`](http://ecma-international.org/ecma-262/7.0/#sec-properties-of-the-map-prototype-object)\n * method interface of `clear`, `delete`, `get`, `has`, and `set`.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Function\n * @param {Function} func The function to have its output memoized.\n * @param {Function} [resolver] The function to resolve the cache key.\n * @returns {Function} Returns the new memoized function.\n * @example\n *\n * var object = { 'a': 1, 'b': 2 };\n * var other = { 'c': 3, 'd': 4 };\n *\n * var values = _.memoize(_.values);\n * values(object);\n * // => [1, 2]\n *\n * values(other);\n * // => [3, 4]\n *\n * object.a = 2;\n * values(object);\n * // => [1, 2]\n *\n * // Modify the result cache.\n * values.cache.set(object, ['a', 'b']);\n * values(object);\n * // => ['a', 'b']\n *\n * // Replace `_.memoize.Cache`.\n * _.memoize.Cache = WeakMap;\n */\n function memoize(func, resolver) {\n if (typeof func != 'function' || (resolver != null && typeof resolver != 'function')) {\n throw new TypeError(FUNC_ERROR_TEXT);\n }\n var memoized = function() {\n var args = arguments,\n key = resolver ? resolver.apply(this, args) : args[0],\n cache = memoized.cache;\n\n if (cache.has(key)) {\n return cache.get(key);\n }\n var result = func.apply(this, args);\n memoized.cache = cache.set(key, result) || cache;\n return result;\n };\n memoized.cache = new (memoize.Cache || MapCache);\n return memoized;\n }\n\n // Expose `MapCache`.\n memoize.Cache = MapCache;\n\n /**\n * Creates a function that negates the result of the predicate `func`. The\n * `func` predicate is invoked with the `this` binding and arguments of the\n * created function.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Function\n * @param {Function} predicate The predicate to negate.\n * @returns {Function} Returns the new negated function.\n * @example\n *\n * function isEven(n) {\n * return n % 2 == 0;\n * }\n *\n * _.filter([1, 2, 3, 4, 5, 6], _.negate(isEven));\n * // => [1, 3, 5]\n */\n function negate(predicate) {\n if (typeof predicate != 'function') {\n throw new TypeError(FUNC_ERROR_TEXT);\n }\n return function() {\n var args = arguments;\n switch (args.length) {\n case 0: return !predicate.call(this);\n case 1: return !predicate.call(this, args[0]);\n case 2: return !predicate.call(this, args[0], args[1]);\n case 3: return !predicate.call(this, args[0], args[1], args[2]);\n }\n return !predicate.apply(this, args);\n };\n }\n\n /**\n * Creates a function that is restricted to invoking `func` once. Repeat calls\n * to the function return the value of the first invocation. The `func` is\n * invoked with the `this` binding and arguments of the created function.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Function\n * @param {Function} func The function to restrict.\n * @returns {Function} Returns the new restricted function.\n * @example\n *\n * var initialize = _.once(createApplication);\n * initialize();\n * initialize();\n * // => `createApplication` is invoked once\n */\n function once(func) {\n return before(2, func);\n }\n\n /**\n * Creates a function that invokes `func` with its arguments transformed.\n *\n * @static\n * @since 4.0.0\n * @memberOf _\n * @category Function\n * @param {Function} func The function to wrap.\n * @param {...(Function|Function[])} [transforms=[_.identity]]\n * The argument transforms.\n * @returns {Function} Returns the new function.\n * @example\n *\n * function doubled(n) {\n * return n * 2;\n * }\n *\n * function square(n) {\n * return n * n;\n * }\n *\n * var func = _.overArgs(function(x, y) {\n * return [x, y];\n * }, [square, doubled]);\n *\n * func(9, 3);\n * // => [81, 6]\n *\n * func(10, 5);\n * // => [100, 10]\n */\n var overArgs = castRest(function(func, transforms) {\n transforms = (transforms.length == 1 && isArray(transforms[0]))\n ? arrayMap(transforms[0], baseUnary(getIteratee()))\n : arrayMap(baseFlatten(transforms, 1), baseUnary(getIteratee()));\n\n var funcsLength = transforms.length;\n return baseRest(function(args) {\n var index = -1,\n length = nativeMin(args.length, funcsLength);\n\n while (++index < length) {\n args[index] = transforms[index].call(this, args[index]);\n }\n return apply(func, this, args);\n });\n });\n\n /**\n * Creates a function that invokes `func` with `partials` prepended to the\n * arguments it receives. This method is like `_.bind` except it does **not**\n * alter the `this` binding.\n *\n * The `_.partial.placeholder` value, which defaults to `_` in monolithic\n * builds, may be used as a placeholder for partially applied arguments.\n *\n * **Note:** This method doesn't set the \"length\" property of partially\n * applied functions.\n *\n * @static\n * @memberOf _\n * @since 0.2.0\n * @category Function\n * @param {Function} func The function to partially apply arguments to.\n * @param {...*} [partials] The arguments to be partially applied.\n * @returns {Function} Returns the new partially applied function.\n * @example\n *\n * function greet(greeting, name) {\n * return greeting + ' ' + name;\n * }\n *\n * var sayHelloTo = _.partial(greet, 'hello');\n * sayHelloTo('fred');\n * // => 'hello fred'\n *\n * // Partially applied with placeholders.\n * var greetFred = _.partial(greet, _, 'fred');\n * greetFred('hi');\n * // => 'hi fred'\n */\n var partial = baseRest(function(func, partials) {\n var holders = replaceHolders(partials, getHolder(partial));\n return createWrap(func, WRAP_PARTIAL_FLAG, undefined, partials, holders);\n });\n\n /**\n * This method is like `_.partial` except that partially applied arguments\n * are appended to the arguments it receives.\n *\n * The `_.partialRight.placeholder` value, which defaults to `_` in monolithic\n * builds, may be used as a placeholder for partially applied arguments.\n *\n * **Note:** This method doesn't set the \"length\" property of partially\n * applied functions.\n *\n * @static\n * @memberOf _\n * @since 1.0.0\n * @category Function\n * @param {Function} func The function to partially apply arguments to.\n * @param {...*} [partials] The arguments to be partially applied.\n * @returns {Function} Returns the new partially applied function.\n * @example\n *\n * function greet(greeting, name) {\n * return greeting + ' ' + name;\n * }\n *\n * var greetFred = _.partialRight(greet, 'fred');\n * greetFred('hi');\n * // => 'hi fred'\n *\n * // Partially applied with placeholders.\n * var sayHelloTo = _.partialRight(greet, 'hello', _);\n * sayHelloTo('fred');\n * // => 'hello fred'\n */\n var partialRight = baseRest(function(func, partials) {\n var holders = replaceHolders(partials, getHolder(partialRight));\n return createWrap(func, WRAP_PARTIAL_RIGHT_FLAG, undefined, partials, holders);\n });\n\n /**\n * Creates a function that invokes `func` with arguments arranged according\n * to the specified `indexes` where the argument value at the first index is\n * provided as the first argument, the argument value at the second index is\n * provided as the second argument, and so on.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Function\n * @param {Function} func The function to rearrange arguments for.\n * @param {...(number|number[])} indexes The arranged argument indexes.\n * @returns {Function} Returns the new function.\n * @example\n *\n * var rearged = _.rearg(function(a, b, c) {\n * return [a, b, c];\n * }, [2, 0, 1]);\n *\n * rearged('b', 'c', 'a')\n * // => ['a', 'b', 'c']\n */\n var rearg = flatRest(function(func, indexes) {\n return createWrap(func, WRAP_REARG_FLAG, undefined, undefined, undefined, indexes);\n });\n\n /**\n * Creates a function that invokes `func` with the `this` binding of the\n * created function and arguments from `start` and beyond provided as\n * an array.\n *\n * **Note:** This method is based on the\n * [rest parameter](https://mdn.io/rest_parameters).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Function\n * @param {Function} func The function to apply a rest parameter to.\n * @param {number} [start=func.length-1] The start position of the rest parameter.\n * @returns {Function} Returns the new function.\n * @example\n *\n * var say = _.rest(function(what, names) {\n * return what + ' ' + _.initial(names).join(', ') +\n * (_.size(names) > 1 ? ', & ' : '') + _.last(names);\n * });\n *\n * say('hello', 'fred', 'barney', 'pebbles');\n * // => 'hello fred, barney, & pebbles'\n */\n function rest(func, start) {\n if (typeof func != 'function') {\n throw new TypeError(FUNC_ERROR_TEXT);\n }\n start = start === undefined ? start : toInteger(start);\n return baseRest(func, start);\n }\n\n /**\n * Creates a function that invokes `func` with the `this` binding of the\n * create function and an array of arguments much like\n * [`Function#apply`](http://www.ecma-international.org/ecma-262/7.0/#sec-function.prototype.apply).\n *\n * **Note:** This method is based on the\n * [spread operator](https://mdn.io/spread_operator).\n *\n * @static\n * @memberOf _\n * @since 3.2.0\n * @category Function\n * @param {Function} func The function to spread arguments over.\n * @param {number} [start=0] The start position of the spread.\n * @returns {Function} Returns the new function.\n * @example\n *\n * var say = _.spread(function(who, what) {\n * return who + ' says ' + what;\n * });\n *\n * say(['fred', 'hello']);\n * // => 'fred says hello'\n *\n * var numbers = Promise.all([\n * Promise.resolve(40),\n * Promise.resolve(36)\n * ]);\n *\n * numbers.then(_.spread(function(x, y) {\n * return x + y;\n * }));\n * // => a Promise of 76\n */\n function spread(func, start) {\n if (typeof func != 'function') {\n throw new TypeError(FUNC_ERROR_TEXT);\n }\n start = start == null ? 0 : nativeMax(toInteger(start), 0);\n return baseRest(function(args) {\n var array = args[start],\n otherArgs = castSlice(args, 0, start);\n\n if (array) {\n arrayPush(otherArgs, array);\n }\n return apply(func, this, otherArgs);\n });\n }\n\n /**\n * Creates a throttled function that only invokes `func` at most once per\n * every `wait` milliseconds. The throttled function comes with a `cancel`\n * method to cancel delayed `func` invocations and a `flush` method to\n * immediately invoke them. Provide `options` to indicate whether `func`\n * should be invoked on the leading and/or trailing edge of the `wait`\n * timeout. The `func` is invoked with the last arguments provided to the\n * throttled function. Subsequent calls to the throttled function return the\n * result of the last `func` invocation.\n *\n * **Note:** If `leading` and `trailing` options are `true`, `func` is\n * invoked on the trailing edge of the timeout only if the throttled function\n * is invoked more than once during the `wait` timeout.\n *\n * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred\n * until to the next tick, similar to `setTimeout` with a timeout of `0`.\n *\n * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)\n * for details over the differences between `_.throttle` and `_.debounce`.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Function\n * @param {Function} func The function to throttle.\n * @param {number} [wait=0] The number of milliseconds to throttle invocations to.\n * @param {Object} [options={}] The options object.\n * @param {boolean} [options.leading=true]\n * Specify invoking on the leading edge of the timeout.\n * @param {boolean} [options.trailing=true]\n * Specify invoking on the trailing edge of the timeout.\n * @returns {Function} Returns the new throttled function.\n * @example\n *\n * // Avoid excessively updating the position while scrolling.\n * jQuery(window).on('scroll', _.throttle(updatePosition, 100));\n *\n * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.\n * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });\n * jQuery(element).on('click', throttled);\n *\n * // Cancel the trailing throttled invocation.\n * jQuery(window).on('popstate', throttled.cancel);\n */\n function throttle(func, wait, options) {\n var leading = true,\n trailing = true;\n\n if (typeof func != 'function') {\n throw new TypeError(FUNC_ERROR_TEXT);\n }\n if (isObject(options)) {\n leading = 'leading' in options ? !!options.leading : leading;\n trailing = 'trailing' in options ? !!options.trailing : trailing;\n }\n return debounce(func, wait, {\n 'leading': leading,\n 'maxWait': wait,\n 'trailing': trailing\n });\n }\n\n /**\n * Creates a function that accepts up to one argument, ignoring any\n * additional arguments.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Function\n * @param {Function} func The function to cap arguments for.\n * @returns {Function} Returns the new capped function.\n * @example\n *\n * _.map(['6', '8', '10'], _.unary(parseInt));\n * // => [6, 8, 10]\n */\n function unary(func) {\n return ary(func, 1);\n }\n\n /**\n * Creates a function that provides `value` to `wrapper` as its first\n * argument. Any additional arguments provided to the function are appended\n * to those provided to the `wrapper`. The wrapper is invoked with the `this`\n * binding of the created function.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Function\n * @param {*} value The value to wrap.\n * @param {Function} [wrapper=identity] The wrapper function.\n * @returns {Function} Returns the new function.\n * @example\n *\n * var p = _.wrap(_.escape, function(func, text) {\n * return '

      ' + func(text) + '

      ';\n * });\n *\n * p('fred, barney, & pebbles');\n * // => '

      fred, barney, & pebbles

      '\n */\n function wrap(value, wrapper) {\n return partial(castFunction(wrapper), value);\n }\n\n /*------------------------------------------------------------------------*/\n\n /**\n * Casts `value` as an array if it's not one.\n *\n * @static\n * @memberOf _\n * @since 4.4.0\n * @category Lang\n * @param {*} value The value to inspect.\n * @returns {Array} Returns the cast array.\n * @example\n *\n * _.castArray(1);\n * // => [1]\n *\n * _.castArray({ 'a': 1 });\n * // => [{ 'a': 1 }]\n *\n * _.castArray('abc');\n * // => ['abc']\n *\n * _.castArray(null);\n * // => [null]\n *\n * _.castArray(undefined);\n * // => [undefined]\n *\n * _.castArray();\n * // => []\n *\n * var array = [1, 2, 3];\n * console.log(_.castArray(array) === array);\n * // => true\n */\n function castArray() {\n if (!arguments.length) {\n return [];\n }\n var value = arguments[0];\n return isArray(value) ? value : [value];\n }\n\n /**\n * Creates a shallow clone of `value`.\n *\n * **Note:** This method is loosely based on the\n * [structured clone algorithm](https://mdn.io/Structured_clone_algorithm)\n * and supports cloning arrays, array buffers, booleans, date objects, maps,\n * numbers, `Object` objects, regexes, sets, strings, symbols, and typed\n * arrays. The own enumerable properties of `arguments` objects are cloned\n * as plain objects. An empty object is returned for uncloneable values such\n * as error objects, functions, DOM nodes, and WeakMaps.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to clone.\n * @returns {*} Returns the cloned value.\n * @see _.cloneDeep\n * @example\n *\n * var objects = [{ 'a': 1 }, { 'b': 2 }];\n *\n * var shallow = _.clone(objects);\n * console.log(shallow[0] === objects[0]);\n * // => true\n */\n function clone(value) {\n return baseClone(value, CLONE_SYMBOLS_FLAG);\n }\n\n /**\n * This method is like `_.clone` except that it accepts `customizer` which\n * is invoked to produce the cloned value. If `customizer` returns `undefined`,\n * cloning is handled by the method instead. The `customizer` is invoked with\n * up to four arguments; (value [, index|key, object, stack]).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to clone.\n * @param {Function} [customizer] The function to customize cloning.\n * @returns {*} Returns the cloned value.\n * @see _.cloneDeepWith\n * @example\n *\n * function customizer(value) {\n * if (_.isElement(value)) {\n * return value.cloneNode(false);\n * }\n * }\n *\n * var el = _.cloneWith(document.body, customizer);\n *\n * console.log(el === document.body);\n * // => false\n * console.log(el.nodeName);\n * // => 'BODY'\n * console.log(el.childNodes.length);\n * // => 0\n */\n function cloneWith(value, customizer) {\n customizer = typeof customizer == 'function' ? customizer : undefined;\n return baseClone(value, CLONE_SYMBOLS_FLAG, customizer);\n }\n\n /**\n * This method is like `_.clone` except that it recursively clones `value`.\n *\n * @static\n * @memberOf _\n * @since 1.0.0\n * @category Lang\n * @param {*} value The value to recursively clone.\n * @returns {*} Returns the deep cloned value.\n * @see _.clone\n * @example\n *\n * var objects = [{ 'a': 1 }, { 'b': 2 }];\n *\n * var deep = _.cloneDeep(objects);\n * console.log(deep[0] === objects[0]);\n * // => false\n */\n function cloneDeep(value) {\n return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG);\n }\n\n /**\n * This method is like `_.cloneWith` except that it recursively clones `value`.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to recursively clone.\n * @param {Function} [customizer] The function to customize cloning.\n * @returns {*} Returns the deep cloned value.\n * @see _.cloneWith\n * @example\n *\n * function customizer(value) {\n * if (_.isElement(value)) {\n * return value.cloneNode(true);\n * }\n * }\n *\n * var el = _.cloneDeepWith(document.body, customizer);\n *\n * console.log(el === document.body);\n * // => false\n * console.log(el.nodeName);\n * // => 'BODY'\n * console.log(el.childNodes.length);\n * // => 20\n */\n function cloneDeepWith(value, customizer) {\n customizer = typeof customizer == 'function' ? customizer : undefined;\n return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG, customizer);\n }\n\n /**\n * Checks if `object` conforms to `source` by invoking the predicate\n * properties of `source` with the corresponding property values of `object`.\n *\n * **Note:** This method is equivalent to `_.conforms` when `source` is\n * partially applied.\n *\n * @static\n * @memberOf _\n * @since 4.14.0\n * @category Lang\n * @param {Object} object The object to inspect.\n * @param {Object} source The object of property predicates to conform to.\n * @returns {boolean} Returns `true` if `object` conforms, else `false`.\n * @example\n *\n * var object = { 'a': 1, 'b': 2 };\n *\n * _.conformsTo(object, { 'b': function(n) { return n > 1; } });\n * // => true\n *\n * _.conformsTo(object, { 'b': function(n) { return n > 2; } });\n * // => false\n */\n function conformsTo(object, source) {\n return source == null || baseConformsTo(object, source, keys(source));\n }\n\n /**\n * Performs a\n * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)\n * comparison between two values to determine if they are equivalent.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to compare.\n * @param {*} other The other value to compare.\n * @returns {boolean} Returns `true` if the values are equivalent, else `false`.\n * @example\n *\n * var object = { 'a': 1 };\n * var other = { 'a': 1 };\n *\n * _.eq(object, object);\n * // => true\n *\n * _.eq(object, other);\n * // => false\n *\n * _.eq('a', 'a');\n * // => true\n *\n * _.eq('a', Object('a'));\n * // => false\n *\n * _.eq(NaN, NaN);\n * // => true\n */\n function eq(value, other) {\n return value === other || (value !== value && other !== other);\n }\n\n /**\n * Checks if `value` is greater than `other`.\n *\n * @static\n * @memberOf _\n * @since 3.9.0\n * @category Lang\n * @param {*} value The value to compare.\n * @param {*} other The other value to compare.\n * @returns {boolean} Returns `true` if `value` is greater than `other`,\n * else `false`.\n * @see _.lt\n * @example\n *\n * _.gt(3, 1);\n * // => true\n *\n * _.gt(3, 3);\n * // => false\n *\n * _.gt(1, 3);\n * // => false\n */\n var gt = createRelationalOperation(baseGt);\n\n /**\n * Checks if `value` is greater than or equal to `other`.\n *\n * @static\n * @memberOf _\n * @since 3.9.0\n * @category Lang\n * @param {*} value The value to compare.\n * @param {*} other The other value to compare.\n * @returns {boolean} Returns `true` if `value` is greater than or equal to\n * `other`, else `false`.\n * @see _.lte\n * @example\n *\n * _.gte(3, 1);\n * // => true\n *\n * _.gte(3, 3);\n * // => true\n *\n * _.gte(1, 3);\n * // => false\n */\n var gte = createRelationalOperation(function(value, other) {\n return value >= other;\n });\n\n /**\n * Checks if `value` is likely an `arguments` object.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is an `arguments` object,\n * else `false`.\n * @example\n *\n * _.isArguments(function() { return arguments; }());\n * // => true\n *\n * _.isArguments([1, 2, 3]);\n * // => false\n */\n var isArguments = baseIsArguments(function() { return arguments; }()) ? baseIsArguments : function(value) {\n return isObjectLike(value) && hasOwnProperty.call(value, 'callee') &&\n !propertyIsEnumerable.call(value, 'callee');\n };\n\n /**\n * Checks if `value` is classified as an `Array` object.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is an array, else `false`.\n * @example\n *\n * _.isArray([1, 2, 3]);\n * // => true\n *\n * _.isArray(document.body.children);\n * // => false\n *\n * _.isArray('abc');\n * // => false\n *\n * _.isArray(_.noop);\n * // => false\n */\n var isArray = Array.isArray;\n\n /**\n * Checks if `value` is classified as an `ArrayBuffer` object.\n *\n * @static\n * @memberOf _\n * @since 4.3.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is an array buffer, else `false`.\n * @example\n *\n * _.isArrayBuffer(new ArrayBuffer(2));\n * // => true\n *\n * _.isArrayBuffer(new Array(2));\n * // => false\n */\n var isArrayBuffer = nodeIsArrayBuffer ? baseUnary(nodeIsArrayBuffer) : baseIsArrayBuffer;\n\n /**\n * Checks if `value` is array-like. A value is considered array-like if it's\n * not a function and has a `value.length` that's an integer greater than or\n * equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is array-like, else `false`.\n * @example\n *\n * _.isArrayLike([1, 2, 3]);\n * // => true\n *\n * _.isArrayLike(document.body.children);\n * // => true\n *\n * _.isArrayLike('abc');\n * // => true\n *\n * _.isArrayLike(_.noop);\n * // => false\n */\n function isArrayLike(value) {\n return value != null && isLength(value.length) && !isFunction(value);\n }\n\n /**\n * This method is like `_.isArrayLike` except that it also checks if `value`\n * is an object.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is an array-like object,\n * else `false`.\n * @example\n *\n * _.isArrayLikeObject([1, 2, 3]);\n * // => true\n *\n * _.isArrayLikeObject(document.body.children);\n * // => true\n *\n * _.isArrayLikeObject('abc');\n * // => false\n *\n * _.isArrayLikeObject(_.noop);\n * // => false\n */\n function isArrayLikeObject(value) {\n return isObjectLike(value) && isArrayLike(value);\n }\n\n /**\n * Checks if `value` is classified as a boolean primitive or object.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a boolean, else `false`.\n * @example\n *\n * _.isBoolean(false);\n * // => true\n *\n * _.isBoolean(null);\n * // => false\n */\n function isBoolean(value) {\n return value === true || value === false ||\n (isObjectLike(value) && baseGetTag(value) == boolTag);\n }\n\n /**\n * Checks if `value` is a buffer.\n *\n * @static\n * @memberOf _\n * @since 4.3.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a buffer, else `false`.\n * @example\n *\n * _.isBuffer(new Buffer(2));\n * // => true\n *\n * _.isBuffer(new Uint8Array(2));\n * // => false\n */\n var isBuffer = nativeIsBuffer || stubFalse;\n\n /**\n * Checks if `value` is classified as a `Date` object.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a date object, else `false`.\n * @example\n *\n * _.isDate(new Date);\n * // => true\n *\n * _.isDate('Mon April 23 2012');\n * // => false\n */\n var isDate = nodeIsDate ? baseUnary(nodeIsDate) : baseIsDate;\n\n /**\n * Checks if `value` is likely a DOM element.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a DOM element, else `false`.\n * @example\n *\n * _.isElement(document.body);\n * // => true\n *\n * _.isElement('');\n * // => false\n */\n function isElement(value) {\n return isObjectLike(value) && value.nodeType === 1 && !isPlainObject(value);\n }\n\n /**\n * Checks if `value` is an empty object, collection, map, or set.\n *\n * Objects are considered empty if they have no own enumerable string keyed\n * properties.\n *\n * Array-like values such as `arguments` objects, arrays, buffers, strings, or\n * jQuery-like collections are considered empty if they have a `length` of `0`.\n * Similarly, maps and sets are considered empty if they have a `size` of `0`.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is empty, else `false`.\n * @example\n *\n * _.isEmpty(null);\n * // => true\n *\n * _.isEmpty(true);\n * // => true\n *\n * _.isEmpty(1);\n * // => true\n *\n * _.isEmpty([1, 2, 3]);\n * // => false\n *\n * _.isEmpty({ 'a': 1 });\n * // => false\n */\n function isEmpty(value) {\n if (value == null) {\n return true;\n }\n if (isArrayLike(value) &&\n (isArray(value) || typeof value == 'string' || typeof value.splice == 'function' ||\n isBuffer(value) || isTypedArray(value) || isArguments(value))) {\n return !value.length;\n }\n var tag = getTag(value);\n if (tag == mapTag || tag == setTag) {\n return !value.size;\n }\n if (isPrototype(value)) {\n return !baseKeys(value).length;\n }\n for (var key in value) {\n if (hasOwnProperty.call(value, key)) {\n return false;\n }\n }\n return true;\n }\n\n /**\n * Performs a deep comparison between two values to determine if they are\n * equivalent.\n *\n * **Note:** This method supports comparing arrays, array buffers, booleans,\n * date objects, error objects, maps, numbers, `Object` objects, regexes,\n * sets, strings, symbols, and typed arrays. `Object` objects are compared\n * by their own, not inherited, enumerable properties. Functions and DOM\n * nodes are compared by strict equality, i.e. `===`.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to compare.\n * @param {*} other The other value to compare.\n * @returns {boolean} Returns `true` if the values are equivalent, else `false`.\n * @example\n *\n * var object = { 'a': 1 };\n * var other = { 'a': 1 };\n *\n * _.isEqual(object, other);\n * // => true\n *\n * object === other;\n * // => false\n */\n function isEqual(value, other) {\n return baseIsEqual(value, other);\n }\n\n /**\n * This method is like `_.isEqual` except that it accepts `customizer` which\n * is invoked to compare values. If `customizer` returns `undefined`, comparisons\n * are handled by the method instead. The `customizer` is invoked with up to\n * six arguments: (objValue, othValue [, index|key, object, other, stack]).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to compare.\n * @param {*} other The other value to compare.\n * @param {Function} [customizer] The function to customize comparisons.\n * @returns {boolean} Returns `true` if the values are equivalent, else `false`.\n * @example\n *\n * function isGreeting(value) {\n * return /^h(?:i|ello)$/.test(value);\n * }\n *\n * function customizer(objValue, othValue) {\n * if (isGreeting(objValue) && isGreeting(othValue)) {\n * return true;\n * }\n * }\n *\n * var array = ['hello', 'goodbye'];\n * var other = ['hi', 'goodbye'];\n *\n * _.isEqualWith(array, other, customizer);\n * // => true\n */\n function isEqualWith(value, other, customizer) {\n customizer = typeof customizer == 'function' ? customizer : undefined;\n var result = customizer ? customizer(value, other) : undefined;\n return result === undefined ? baseIsEqual(value, other, undefined, customizer) : !!result;\n }\n\n /**\n * Checks if `value` is an `Error`, `EvalError`, `RangeError`, `ReferenceError`,\n * `SyntaxError`, `TypeError`, or `URIError` object.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is an error object, else `false`.\n * @example\n *\n * _.isError(new Error);\n * // => true\n *\n * _.isError(Error);\n * // => false\n */\n function isError(value) {\n if (!isObjectLike(value)) {\n return false;\n }\n var tag = baseGetTag(value);\n return tag == errorTag || tag == domExcTag ||\n (typeof value.message == 'string' && typeof value.name == 'string' && !isPlainObject(value));\n }\n\n /**\n * Checks if `value` is a finite primitive number.\n *\n * **Note:** This method is based on\n * [`Number.isFinite`](https://mdn.io/Number/isFinite).\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a finite number, else `false`.\n * @example\n *\n * _.isFinite(3);\n * // => true\n *\n * _.isFinite(Number.MIN_VALUE);\n * // => true\n *\n * _.isFinite(Infinity);\n * // => false\n *\n * _.isFinite('3');\n * // => false\n */\n function isFinite(value) {\n return typeof value == 'number' && nativeIsFinite(value);\n }\n\n /**\n * Checks if `value` is classified as a `Function` object.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a function, else `false`.\n * @example\n *\n * _.isFunction(_);\n * // => true\n *\n * _.isFunction(/abc/);\n * // => false\n */\n function isFunction(value) {\n if (!isObject(value)) {\n return false;\n }\n // The use of `Object#toString` avoids issues with the `typeof` operator\n // in Safari 9 which returns 'object' for typed arrays and other constructors.\n var tag = baseGetTag(value);\n return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;\n }\n\n /**\n * Checks if `value` is an integer.\n *\n * **Note:** This method is based on\n * [`Number.isInteger`](https://mdn.io/Number/isInteger).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is an integer, else `false`.\n * @example\n *\n * _.isInteger(3);\n * // => true\n *\n * _.isInteger(Number.MIN_VALUE);\n * // => false\n *\n * _.isInteger(Infinity);\n * // => false\n *\n * _.isInteger('3');\n * // => false\n */\n function isInteger(value) {\n return typeof value == 'number' && value == toInteger(value);\n }\n\n /**\n * Checks if `value` is a valid array-like length.\n *\n * **Note:** This method is loosely based on\n * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a valid length, else `false`.\n * @example\n *\n * _.isLength(3);\n * // => true\n *\n * _.isLength(Number.MIN_VALUE);\n * // => false\n *\n * _.isLength(Infinity);\n * // => false\n *\n * _.isLength('3');\n * // => false\n */\n function isLength(value) {\n return typeof value == 'number' &&\n value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;\n }\n\n /**\n * Checks if `value` is the\n * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)\n * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is an object, else `false`.\n * @example\n *\n * _.isObject({});\n * // => true\n *\n * _.isObject([1, 2, 3]);\n * // => true\n *\n * _.isObject(_.noop);\n * // => true\n *\n * _.isObject(null);\n * // => false\n */\n function isObject(value) {\n var type = typeof value;\n return value != null && (type == 'object' || type == 'function');\n }\n\n /**\n * Checks if `value` is object-like. A value is object-like if it's not `null`\n * and has a `typeof` result of \"object\".\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is object-like, else `false`.\n * @example\n *\n * _.isObjectLike({});\n * // => true\n *\n * _.isObjectLike([1, 2, 3]);\n * // => true\n *\n * _.isObjectLike(_.noop);\n * // => false\n *\n * _.isObjectLike(null);\n * // => false\n */\n function isObjectLike(value) {\n return value != null && typeof value == 'object';\n }\n\n /**\n * Checks if `value` is classified as a `Map` object.\n *\n * @static\n * @memberOf _\n * @since 4.3.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a map, else `false`.\n * @example\n *\n * _.isMap(new Map);\n * // => true\n *\n * _.isMap(new WeakMap);\n * // => false\n */\n var isMap = nodeIsMap ? baseUnary(nodeIsMap) : baseIsMap;\n\n /**\n * Performs a partial deep comparison between `object` and `source` to\n * determine if `object` contains equivalent property values.\n *\n * **Note:** This method is equivalent to `_.matches` when `source` is\n * partially applied.\n *\n * Partial comparisons will match empty array and empty object `source`\n * values against any array or object value, respectively. See `_.isEqual`\n * for a list of supported value comparisons.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Lang\n * @param {Object} object The object to inspect.\n * @param {Object} source The object of property values to match.\n * @returns {boolean} Returns `true` if `object` is a match, else `false`.\n * @example\n *\n * var object = { 'a': 1, 'b': 2 };\n *\n * _.isMatch(object, { 'b': 2 });\n * // => true\n *\n * _.isMatch(object, { 'b': 1 });\n * // => false\n */\n function isMatch(object, source) {\n return object === source || baseIsMatch(object, source, getMatchData(source));\n }\n\n /**\n * This method is like `_.isMatch` except that it accepts `customizer` which\n * is invoked to compare values. If `customizer` returns `undefined`, comparisons\n * are handled by the method instead. The `customizer` is invoked with five\n * arguments: (objValue, srcValue, index|key, object, source).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {Object} object The object to inspect.\n * @param {Object} source The object of property values to match.\n * @param {Function} [customizer] The function to customize comparisons.\n * @returns {boolean} Returns `true` if `object` is a match, else `false`.\n * @example\n *\n * function isGreeting(value) {\n * return /^h(?:i|ello)$/.test(value);\n * }\n *\n * function customizer(objValue, srcValue) {\n * if (isGreeting(objValue) && isGreeting(srcValue)) {\n * return true;\n * }\n * }\n *\n * var object = { 'greeting': 'hello' };\n * var source = { 'greeting': 'hi' };\n *\n * _.isMatchWith(object, source, customizer);\n * // => true\n */\n function isMatchWith(object, source, customizer) {\n customizer = typeof customizer == 'function' ? customizer : undefined;\n return baseIsMatch(object, source, getMatchData(source), customizer);\n }\n\n /**\n * Checks if `value` is `NaN`.\n *\n * **Note:** This method is based on\n * [`Number.isNaN`](https://mdn.io/Number/isNaN) and is not the same as\n * global [`isNaN`](https://mdn.io/isNaN) which returns `true` for\n * `undefined` and other non-number values.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is `NaN`, else `false`.\n * @example\n *\n * _.isNaN(NaN);\n * // => true\n *\n * _.isNaN(new Number(NaN));\n * // => true\n *\n * isNaN(undefined);\n * // => true\n *\n * _.isNaN(undefined);\n * // => false\n */\n function isNaN(value) {\n // An `NaN` primitive is the only value that is not equal to itself.\n // Perform the `toStringTag` check first to avoid errors with some\n // ActiveX objects in IE.\n return isNumber(value) && value != +value;\n }\n\n /**\n * Checks if `value` is a pristine native function.\n *\n * **Note:** This method can't reliably detect native functions in the presence\n * of the core-js package because core-js circumvents this kind of detection.\n * Despite multiple requests, the core-js maintainer has made it clear: any\n * attempt to fix the detection will be obstructed. As a result, we're left\n * with little choice but to throw an error. Unfortunately, this also affects\n * packages, like [babel-polyfill](https://www.npmjs.com/package/babel-polyfill),\n * which rely on core-js.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a native function,\n * else `false`.\n * @example\n *\n * _.isNative(Array.prototype.push);\n * // => true\n *\n * _.isNative(_);\n * // => false\n */\n function isNative(value) {\n if (isMaskable(value)) {\n throw new Error(CORE_ERROR_TEXT);\n }\n return baseIsNative(value);\n }\n\n /**\n * Checks if `value` is `null`.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is `null`, else `false`.\n * @example\n *\n * _.isNull(null);\n * // => true\n *\n * _.isNull(void 0);\n * // => false\n */\n function isNull(value) {\n return value === null;\n }\n\n /**\n * Checks if `value` is `null` or `undefined`.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is nullish, else `false`.\n * @example\n *\n * _.isNil(null);\n * // => true\n *\n * _.isNil(void 0);\n * // => true\n *\n * _.isNil(NaN);\n * // => false\n */\n function isNil(value) {\n return value == null;\n }\n\n /**\n * Checks if `value` is classified as a `Number` primitive or object.\n *\n * **Note:** To exclude `Infinity`, `-Infinity`, and `NaN`, which are\n * classified as numbers, use the `_.isFinite` method.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a number, else `false`.\n * @example\n *\n * _.isNumber(3);\n * // => true\n *\n * _.isNumber(Number.MIN_VALUE);\n * // => true\n *\n * _.isNumber(Infinity);\n * // => true\n *\n * _.isNumber('3');\n * // => false\n */\n function isNumber(value) {\n return typeof value == 'number' ||\n (isObjectLike(value) && baseGetTag(value) == numberTag);\n }\n\n /**\n * Checks if `value` is a plain object, that is, an object created by the\n * `Object` constructor or one with a `[[Prototype]]` of `null`.\n *\n * @static\n * @memberOf _\n * @since 0.8.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a plain object, else `false`.\n * @example\n *\n * function Foo() {\n * this.a = 1;\n * }\n *\n * _.isPlainObject(new Foo);\n * // => false\n *\n * _.isPlainObject([1, 2, 3]);\n * // => false\n *\n * _.isPlainObject({ 'x': 0, 'y': 0 });\n * // => true\n *\n * _.isPlainObject(Object.create(null));\n * // => true\n */\n function isPlainObject(value) {\n if (!isObjectLike(value) || baseGetTag(value) != objectTag) {\n return false;\n }\n var proto = getPrototype(value);\n if (proto === null) {\n return true;\n }\n var Ctor = hasOwnProperty.call(proto, 'constructor') && proto.constructor;\n return typeof Ctor == 'function' && Ctor instanceof Ctor &&\n funcToString.call(Ctor) == objectCtorString;\n }\n\n /**\n * Checks if `value` is classified as a `RegExp` object.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a regexp, else `false`.\n * @example\n *\n * _.isRegExp(/abc/);\n * // => true\n *\n * _.isRegExp('/abc/');\n * // => false\n */\n var isRegExp = nodeIsRegExp ? baseUnary(nodeIsRegExp) : baseIsRegExp;\n\n /**\n * Checks if `value` is a safe integer. An integer is safe if it's an IEEE-754\n * double precision number which isn't the result of a rounded unsafe integer.\n *\n * **Note:** This method is based on\n * [`Number.isSafeInteger`](https://mdn.io/Number/isSafeInteger).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a safe integer, else `false`.\n * @example\n *\n * _.isSafeInteger(3);\n * // => true\n *\n * _.isSafeInteger(Number.MIN_VALUE);\n * // => false\n *\n * _.isSafeInteger(Infinity);\n * // => false\n *\n * _.isSafeInteger('3');\n * // => false\n */\n function isSafeInteger(value) {\n return isInteger(value) && value >= -MAX_SAFE_INTEGER && value <= MAX_SAFE_INTEGER;\n }\n\n /**\n * Checks if `value` is classified as a `Set` object.\n *\n * @static\n * @memberOf _\n * @since 4.3.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a set, else `false`.\n * @example\n *\n * _.isSet(new Set);\n * // => true\n *\n * _.isSet(new WeakSet);\n * // => false\n */\n var isSet = nodeIsSet ? baseUnary(nodeIsSet) : baseIsSet;\n\n /**\n * Checks if `value` is classified as a `String` primitive or object.\n *\n * @static\n * @since 0.1.0\n * @memberOf _\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a string, else `false`.\n * @example\n *\n * _.isString('abc');\n * // => true\n *\n * _.isString(1);\n * // => false\n */\n function isString(value) {\n return typeof value == 'string' ||\n (!isArray(value) && isObjectLike(value) && baseGetTag(value) == stringTag);\n }\n\n /**\n * Checks if `value` is classified as a `Symbol` primitive or object.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.\n * @example\n *\n * _.isSymbol(Symbol.iterator);\n * // => true\n *\n * _.isSymbol('abc');\n * // => false\n */\n function isSymbol(value) {\n return typeof value == 'symbol' ||\n (isObjectLike(value) && baseGetTag(value) == symbolTag);\n }\n\n /**\n * Checks if `value` is classified as a typed array.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a typed array, else `false`.\n * @example\n *\n * _.isTypedArray(new Uint8Array);\n * // => true\n *\n * _.isTypedArray([]);\n * // => false\n */\n var isTypedArray = nodeIsTypedArray ? baseUnary(nodeIsTypedArray) : baseIsTypedArray;\n\n /**\n * Checks if `value` is `undefined`.\n *\n * @static\n * @since 0.1.0\n * @memberOf _\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is `undefined`, else `false`.\n * @example\n *\n * _.isUndefined(void 0);\n * // => true\n *\n * _.isUndefined(null);\n * // => false\n */\n function isUndefined(value) {\n return value === undefined;\n }\n\n /**\n * Checks if `value` is classified as a `WeakMap` object.\n *\n * @static\n * @memberOf _\n * @since 4.3.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a weak map, else `false`.\n * @example\n *\n * _.isWeakMap(new WeakMap);\n * // => true\n *\n * _.isWeakMap(new Map);\n * // => false\n */\n function isWeakMap(value) {\n return isObjectLike(value) && getTag(value) == weakMapTag;\n }\n\n /**\n * Checks if `value` is classified as a `WeakSet` object.\n *\n * @static\n * @memberOf _\n * @since 4.3.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a weak set, else `false`.\n * @example\n *\n * _.isWeakSet(new WeakSet);\n * // => true\n *\n * _.isWeakSet(new Set);\n * // => false\n */\n function isWeakSet(value) {\n return isObjectLike(value) && baseGetTag(value) == weakSetTag;\n }\n\n /**\n * Checks if `value` is less than `other`.\n *\n * @static\n * @memberOf _\n * @since 3.9.0\n * @category Lang\n * @param {*} value The value to compare.\n * @param {*} other The other value to compare.\n * @returns {boolean} Returns `true` if `value` is less than `other`,\n * else `false`.\n * @see _.gt\n * @example\n *\n * _.lt(1, 3);\n * // => true\n *\n * _.lt(3, 3);\n * // => false\n *\n * _.lt(3, 1);\n * // => false\n */\n var lt = createRelationalOperation(baseLt);\n\n /**\n * Checks if `value` is less than or equal to `other`.\n *\n * @static\n * @memberOf _\n * @since 3.9.0\n * @category Lang\n * @param {*} value The value to compare.\n * @param {*} other The other value to compare.\n * @returns {boolean} Returns `true` if `value` is less than or equal to\n * `other`, else `false`.\n * @see _.gte\n * @example\n *\n * _.lte(1, 3);\n * // => true\n *\n * _.lte(3, 3);\n * // => true\n *\n * _.lte(3, 1);\n * // => false\n */\n var lte = createRelationalOperation(function(value, other) {\n return value <= other;\n });\n\n /**\n * Converts `value` to an array.\n *\n * @static\n * @since 0.1.0\n * @memberOf _\n * @category Lang\n * @param {*} value The value to convert.\n * @returns {Array} Returns the converted array.\n * @example\n *\n * _.toArray({ 'a': 1, 'b': 2 });\n * // => [1, 2]\n *\n * _.toArray('abc');\n * // => ['a', 'b', 'c']\n *\n * _.toArray(1);\n * // => []\n *\n * _.toArray(null);\n * // => []\n */\n function toArray(value) {\n if (!value) {\n return [];\n }\n if (isArrayLike(value)) {\n return isString(value) ? stringToArray(value) : copyArray(value);\n }\n if (symIterator && value[symIterator]) {\n return iteratorToArray(value[symIterator]());\n }\n var tag = getTag(value),\n func = tag == mapTag ? mapToArray : (tag == setTag ? setToArray : values);\n\n return func(value);\n }\n\n /**\n * Converts `value` to a finite number.\n *\n * @static\n * @memberOf _\n * @since 4.12.0\n * @category Lang\n * @param {*} value The value to convert.\n * @returns {number} Returns the converted number.\n * @example\n *\n * _.toFinite(3.2);\n * // => 3.2\n *\n * _.toFinite(Number.MIN_VALUE);\n * // => 5e-324\n *\n * _.toFinite(Infinity);\n * // => 1.7976931348623157e+308\n *\n * _.toFinite('3.2');\n * // => 3.2\n */\n function toFinite(value) {\n if (!value) {\n return value === 0 ? value : 0;\n }\n value = toNumber(value);\n if (value === INFINITY || value === -INFINITY) {\n var sign = (value < 0 ? -1 : 1);\n return sign * MAX_INTEGER;\n }\n return value === value ? value : 0;\n }\n\n /**\n * Converts `value` to an integer.\n *\n * **Note:** This method is loosely based on\n * [`ToInteger`](http://www.ecma-international.org/ecma-262/7.0/#sec-tointeger).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to convert.\n * @returns {number} Returns the converted integer.\n * @example\n *\n * _.toInteger(3.2);\n * // => 3\n *\n * _.toInteger(Number.MIN_VALUE);\n * // => 0\n *\n * _.toInteger(Infinity);\n * // => 1.7976931348623157e+308\n *\n * _.toInteger('3.2');\n * // => 3\n */\n function toInteger(value) {\n var result = toFinite(value),\n remainder = result % 1;\n\n return result === result ? (remainder ? result - remainder : result) : 0;\n }\n\n /**\n * Converts `value` to an integer suitable for use as the length of an\n * array-like object.\n *\n * **Note:** This method is based on\n * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to convert.\n * @returns {number} Returns the converted integer.\n * @example\n *\n * _.toLength(3.2);\n * // => 3\n *\n * _.toLength(Number.MIN_VALUE);\n * // => 0\n *\n * _.toLength(Infinity);\n * // => 4294967295\n *\n * _.toLength('3.2');\n * // => 3\n */\n function toLength(value) {\n return value ? baseClamp(toInteger(value), 0, MAX_ARRAY_LENGTH) : 0;\n }\n\n /**\n * Converts `value` to a number.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to process.\n * @returns {number} Returns the number.\n * @example\n *\n * _.toNumber(3.2);\n * // => 3.2\n *\n * _.toNumber(Number.MIN_VALUE);\n * // => 5e-324\n *\n * _.toNumber(Infinity);\n * // => Infinity\n *\n * _.toNumber('3.2');\n * // => 3.2\n */\n function toNumber(value) {\n if (typeof value == 'number') {\n return value;\n }\n if (isSymbol(value)) {\n return NAN;\n }\n if (isObject(value)) {\n var other = typeof value.valueOf == 'function' ? value.valueOf() : value;\n value = isObject(other) ? (other + '') : other;\n }\n if (typeof value != 'string') {\n return value === 0 ? value : +value;\n }\n value = baseTrim(value);\n var isBinary = reIsBinary.test(value);\n return (isBinary || reIsOctal.test(value))\n ? freeParseInt(value.slice(2), isBinary ? 2 : 8)\n : (reIsBadHex.test(value) ? NAN : +value);\n }\n\n /**\n * Converts `value` to a plain object flattening inherited enumerable string\n * keyed properties of `value` to own properties of the plain object.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Lang\n * @param {*} value The value to convert.\n * @returns {Object} Returns the converted plain object.\n * @example\n *\n * function Foo() {\n * this.b = 2;\n * }\n *\n * Foo.prototype.c = 3;\n *\n * _.assign({ 'a': 1 }, new Foo);\n * // => { 'a': 1, 'b': 2 }\n *\n * _.assign({ 'a': 1 }, _.toPlainObject(new Foo));\n * // => { 'a': 1, 'b': 2, 'c': 3 }\n */\n function toPlainObject(value) {\n return copyObject(value, keysIn(value));\n }\n\n /**\n * Converts `value` to a safe integer. A safe integer can be compared and\n * represented correctly.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to convert.\n * @returns {number} Returns the converted integer.\n * @example\n *\n * _.toSafeInteger(3.2);\n * // => 3\n *\n * _.toSafeInteger(Number.MIN_VALUE);\n * // => 0\n *\n * _.toSafeInteger(Infinity);\n * // => 9007199254740991\n *\n * _.toSafeInteger('3.2');\n * // => 3\n */\n function toSafeInteger(value) {\n return value\n ? baseClamp(toInteger(value), -MAX_SAFE_INTEGER, MAX_SAFE_INTEGER)\n : (value === 0 ? value : 0);\n }\n\n /**\n * Converts `value` to a string. An empty string is returned for `null`\n * and `undefined` values. The sign of `-0` is preserved.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to convert.\n * @returns {string} Returns the converted string.\n * @example\n *\n * _.toString(null);\n * // => ''\n *\n * _.toString(-0);\n * // => '-0'\n *\n * _.toString([1, 2, 3]);\n * // => '1,2,3'\n */\n function toString(value) {\n return value == null ? '' : baseToString(value);\n }\n\n /*------------------------------------------------------------------------*/\n\n /**\n * Assigns own enumerable string keyed properties of source objects to the\n * destination object. Source objects are applied from left to right.\n * Subsequent sources overwrite property assignments of previous sources.\n *\n * **Note:** This method mutates `object` and is loosely based on\n * [`Object.assign`](https://mdn.io/Object/assign).\n *\n * @static\n * @memberOf _\n * @since 0.10.0\n * @category Object\n * @param {Object} object The destination object.\n * @param {...Object} [sources] The source objects.\n * @returns {Object} Returns `object`.\n * @see _.assignIn\n * @example\n *\n * function Foo() {\n * this.a = 1;\n * }\n *\n * function Bar() {\n * this.c = 3;\n * }\n *\n * Foo.prototype.b = 2;\n * Bar.prototype.d = 4;\n *\n * _.assign({ 'a': 0 }, new Foo, new Bar);\n * // => { 'a': 1, 'c': 3 }\n */\n var assign = createAssigner(function(object, source) {\n if (isPrototype(source) || isArrayLike(source)) {\n copyObject(source, keys(source), object);\n return;\n }\n for (var key in source) {\n if (hasOwnProperty.call(source, key)) {\n assignValue(object, key, source[key]);\n }\n }\n });\n\n /**\n * This method is like `_.assign` except that it iterates over own and\n * inherited source properties.\n *\n * **Note:** This method mutates `object`.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @alias extend\n * @category Object\n * @param {Object} object The destination object.\n * @param {...Object} [sources] The source objects.\n * @returns {Object} Returns `object`.\n * @see _.assign\n * @example\n *\n * function Foo() {\n * this.a = 1;\n * }\n *\n * function Bar() {\n * this.c = 3;\n * }\n *\n * Foo.prototype.b = 2;\n * Bar.prototype.d = 4;\n *\n * _.assignIn({ 'a': 0 }, new Foo, new Bar);\n * // => { 'a': 1, 'b': 2, 'c': 3, 'd': 4 }\n */\n var assignIn = createAssigner(function(object, source) {\n copyObject(source, keysIn(source), object);\n });\n\n /**\n * This method is like `_.assignIn` except that it accepts `customizer`\n * which is invoked to produce the assigned values. If `customizer` returns\n * `undefined`, assignment is handled by the method instead. The `customizer`\n * is invoked with five arguments: (objValue, srcValue, key, object, source).\n *\n * **Note:** This method mutates `object`.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @alias extendWith\n * @category Object\n * @param {Object} object The destination object.\n * @param {...Object} sources The source objects.\n * @param {Function} [customizer] The function to customize assigned values.\n * @returns {Object} Returns `object`.\n * @see _.assignWith\n * @example\n *\n * function customizer(objValue, srcValue) {\n * return _.isUndefined(objValue) ? srcValue : objValue;\n * }\n *\n * var defaults = _.partialRight(_.assignInWith, customizer);\n *\n * defaults({ 'a': 1 }, { 'b': 2 }, { 'a': 3 });\n * // => { 'a': 1, 'b': 2 }\n */\n var assignInWith = createAssigner(function(object, source, srcIndex, customizer) {\n copyObject(source, keysIn(source), object, customizer);\n });\n\n /**\n * This method is like `_.assign` except that it accepts `customizer`\n * which is invoked to produce the assigned values. If `customizer` returns\n * `undefined`, assignment is handled by the method instead. The `customizer`\n * is invoked with five arguments: (objValue, srcValue, key, object, source).\n *\n * **Note:** This method mutates `object`.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Object\n * @param {Object} object The destination object.\n * @param {...Object} sources The source objects.\n * @param {Function} [customizer] The function to customize assigned values.\n * @returns {Object} Returns `object`.\n * @see _.assignInWith\n * @example\n *\n * function customizer(objValue, srcValue) {\n * return _.isUndefined(objValue) ? srcValue : objValue;\n * }\n *\n * var defaults = _.partialRight(_.assignWith, customizer);\n *\n * defaults({ 'a': 1 }, { 'b': 2 }, { 'a': 3 });\n * // => { 'a': 1, 'b': 2 }\n */\n var assignWith = createAssigner(function(object, source, srcIndex, customizer) {\n copyObject(source, keys(source), object, customizer);\n });\n\n /**\n * Creates an array of values corresponding to `paths` of `object`.\n *\n * @static\n * @memberOf _\n * @since 1.0.0\n * @category Object\n * @param {Object} object The object to iterate over.\n * @param {...(string|string[])} [paths] The property paths to pick.\n * @returns {Array} Returns the picked values.\n * @example\n *\n * var object = { 'a': [{ 'b': { 'c': 3 } }, 4] };\n *\n * _.at(object, ['a[0].b.c', 'a[1]']);\n * // => [3, 4]\n */\n var at = flatRest(baseAt);\n\n /**\n * Creates an object that inherits from the `prototype` object. If a\n * `properties` object is given, its own enumerable string keyed properties\n * are assigned to the created object.\n *\n * @static\n * @memberOf _\n * @since 2.3.0\n * @category Object\n * @param {Object} prototype The object to inherit from.\n * @param {Object} [properties] The properties to assign to the object.\n * @returns {Object} Returns the new object.\n * @example\n *\n * function Shape() {\n * this.x = 0;\n * this.y = 0;\n * }\n *\n * function Circle() {\n * Shape.call(this);\n * }\n *\n * Circle.prototype = _.create(Shape.prototype, {\n * 'constructor': Circle\n * });\n *\n * var circle = new Circle;\n * circle instanceof Circle;\n * // => true\n *\n * circle instanceof Shape;\n * // => true\n */\n function create(prototype, properties) {\n var result = baseCreate(prototype);\n return properties == null ? result : baseAssign(result, properties);\n }\n\n /**\n * Assigns own and inherited enumerable string keyed properties of source\n * objects to the destination object for all destination properties that\n * resolve to `undefined`. Source objects are applied from left to right.\n * Once a property is set, additional values of the same property are ignored.\n *\n * **Note:** This method mutates `object`.\n *\n * @static\n * @since 0.1.0\n * @memberOf _\n * @category Object\n * @param {Object} object The destination object.\n * @param {...Object} [sources] The source objects.\n * @returns {Object} Returns `object`.\n * @see _.defaultsDeep\n * @example\n *\n * _.defaults({ 'a': 1 }, { 'b': 2 }, { 'a': 3 });\n * // => { 'a': 1, 'b': 2 }\n */\n var defaults = baseRest(function(object, sources) {\n object = Object(object);\n\n var index = -1;\n var length = sources.length;\n var guard = length > 2 ? sources[2] : undefined;\n\n if (guard && isIterateeCall(sources[0], sources[1], guard)) {\n length = 1;\n }\n\n while (++index < length) {\n var source = sources[index];\n var props = keysIn(source);\n var propsIndex = -1;\n var propsLength = props.length;\n\n while (++propsIndex < propsLength) {\n var key = props[propsIndex];\n var value = object[key];\n\n if (value === undefined ||\n (eq(value, objectProto[key]) && !hasOwnProperty.call(object, key))) {\n object[key] = source[key];\n }\n }\n }\n\n return object;\n });\n\n /**\n * This method is like `_.defaults` except that it recursively assigns\n * default properties.\n *\n * **Note:** This method mutates `object`.\n *\n * @static\n * @memberOf _\n * @since 3.10.0\n * @category Object\n * @param {Object} object The destination object.\n * @param {...Object} [sources] The source objects.\n * @returns {Object} Returns `object`.\n * @see _.defaults\n * @example\n *\n * _.defaultsDeep({ 'a': { 'b': 2 } }, { 'a': { 'b': 1, 'c': 3 } });\n * // => { 'a': { 'b': 2, 'c': 3 } }\n */\n var defaultsDeep = baseRest(function(args) {\n args.push(undefined, customDefaultsMerge);\n return apply(mergeWith, undefined, args);\n });\n\n /**\n * This method is like `_.find` except that it returns the key of the first\n * element `predicate` returns truthy for instead of the element itself.\n *\n * @static\n * @memberOf _\n * @since 1.1.0\n * @category Object\n * @param {Object} object The object to inspect.\n * @param {Function} [predicate=_.identity] The function invoked per iteration.\n * @returns {string|undefined} Returns the key of the matched element,\n * else `undefined`.\n * @example\n *\n * var users = {\n * 'barney': { 'age': 36, 'active': true },\n * 'fred': { 'age': 40, 'active': false },\n * 'pebbles': { 'age': 1, 'active': true }\n * };\n *\n * _.findKey(users, function(o) { return o.age < 40; });\n * // => 'barney' (iteration order is not guaranteed)\n *\n * // The `_.matches` iteratee shorthand.\n * _.findKey(users, { 'age': 1, 'active': true });\n * // => 'pebbles'\n *\n * // The `_.matchesProperty` iteratee shorthand.\n * _.findKey(users, ['active', false]);\n * // => 'fred'\n *\n * // The `_.property` iteratee shorthand.\n * _.findKey(users, 'active');\n * // => 'barney'\n */\n function findKey(object, predicate) {\n return baseFindKey(object, getIteratee(predicate, 3), baseForOwn);\n }\n\n /**\n * This method is like `_.findKey` except that it iterates over elements of\n * a collection in the opposite order.\n *\n * @static\n * @memberOf _\n * @since 2.0.0\n * @category Object\n * @param {Object} object The object to inspect.\n * @param {Function} [predicate=_.identity] The function invoked per iteration.\n * @returns {string|undefined} Returns the key of the matched element,\n * else `undefined`.\n * @example\n *\n * var users = {\n * 'barney': { 'age': 36, 'active': true },\n * 'fred': { 'age': 40, 'active': false },\n * 'pebbles': { 'age': 1, 'active': true }\n * };\n *\n * _.findLastKey(users, function(o) { return o.age < 40; });\n * // => returns 'pebbles' assuming `_.findKey` returns 'barney'\n *\n * // The `_.matches` iteratee shorthand.\n * _.findLastKey(users, { 'age': 36, 'active': true });\n * // => 'barney'\n *\n * // The `_.matchesProperty` iteratee shorthand.\n * _.findLastKey(users, ['active', false]);\n * // => 'fred'\n *\n * // The `_.property` iteratee shorthand.\n * _.findLastKey(users, 'active');\n * // => 'pebbles'\n */\n function findLastKey(object, predicate) {\n return baseFindKey(object, getIteratee(predicate, 3), baseForOwnRight);\n }\n\n /**\n * Iterates over own and inherited enumerable string keyed properties of an\n * object and invokes `iteratee` for each property. The iteratee is invoked\n * with three arguments: (value, key, object). Iteratee functions may exit\n * iteration early by explicitly returning `false`.\n *\n * @static\n * @memberOf _\n * @since 0.3.0\n * @category Object\n * @param {Object} object The object to iterate over.\n * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n * @returns {Object} Returns `object`.\n * @see _.forInRight\n * @example\n *\n * function Foo() {\n * this.a = 1;\n * this.b = 2;\n * }\n *\n * Foo.prototype.c = 3;\n *\n * _.forIn(new Foo, function(value, key) {\n * console.log(key);\n * });\n * // => Logs 'a', 'b', then 'c' (iteration order is not guaranteed).\n */\n function forIn(object, iteratee) {\n return object == null\n ? object\n : baseFor(object, getIteratee(iteratee, 3), keysIn);\n }\n\n /**\n * This method is like `_.forIn` except that it iterates over properties of\n * `object` in the opposite order.\n *\n * @static\n * @memberOf _\n * @since 2.0.0\n * @category Object\n * @param {Object} object The object to iterate over.\n * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n * @returns {Object} Returns `object`.\n * @see _.forIn\n * @example\n *\n * function Foo() {\n * this.a = 1;\n * this.b = 2;\n * }\n *\n * Foo.prototype.c = 3;\n *\n * _.forInRight(new Foo, function(value, key) {\n * console.log(key);\n * });\n * // => Logs 'c', 'b', then 'a' assuming `_.forIn` logs 'a', 'b', then 'c'.\n */\n function forInRight(object, iteratee) {\n return object == null\n ? object\n : baseForRight(object, getIteratee(iteratee, 3), keysIn);\n }\n\n /**\n * Iterates over own enumerable string keyed properties of an object and\n * invokes `iteratee` for each property. The iteratee is invoked with three\n * arguments: (value, key, object). Iteratee functions may exit iteration\n * early by explicitly returning `false`.\n *\n * @static\n * @memberOf _\n * @since 0.3.0\n * @category Object\n * @param {Object} object The object to iterate over.\n * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n * @returns {Object} Returns `object`.\n * @see _.forOwnRight\n * @example\n *\n * function Foo() {\n * this.a = 1;\n * this.b = 2;\n * }\n *\n * Foo.prototype.c = 3;\n *\n * _.forOwn(new Foo, function(value, key) {\n * console.log(key);\n * });\n * // => Logs 'a' then 'b' (iteration order is not guaranteed).\n */\n function forOwn(object, iteratee) {\n return object && baseForOwn(object, getIteratee(iteratee, 3));\n }\n\n /**\n * This method is like `_.forOwn` except that it iterates over properties of\n * `object` in the opposite order.\n *\n * @static\n * @memberOf _\n * @since 2.0.0\n * @category Object\n * @param {Object} object The object to iterate over.\n * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n * @returns {Object} Returns `object`.\n * @see _.forOwn\n * @example\n *\n * function Foo() {\n * this.a = 1;\n * this.b = 2;\n * }\n *\n * Foo.prototype.c = 3;\n *\n * _.forOwnRight(new Foo, function(value, key) {\n * console.log(key);\n * });\n * // => Logs 'b' then 'a' assuming `_.forOwn` logs 'a' then 'b'.\n */\n function forOwnRight(object, iteratee) {\n return object && baseForOwnRight(object, getIteratee(iteratee, 3));\n }\n\n /**\n * Creates an array of function property names from own enumerable properties\n * of `object`.\n *\n * @static\n * @since 0.1.0\n * @memberOf _\n * @category Object\n * @param {Object} object The object to inspect.\n * @returns {Array} Returns the function names.\n * @see _.functionsIn\n * @example\n *\n * function Foo() {\n * this.a = _.constant('a');\n * this.b = _.constant('b');\n * }\n *\n * Foo.prototype.c = _.constant('c');\n *\n * _.functions(new Foo);\n * // => ['a', 'b']\n */\n function functions(object) {\n return object == null ? [] : baseFunctions(object, keys(object));\n }\n\n /**\n * Creates an array of function property names from own and inherited\n * enumerable properties of `object`.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Object\n * @param {Object} object The object to inspect.\n * @returns {Array} Returns the function names.\n * @see _.functions\n * @example\n *\n * function Foo() {\n * this.a = _.constant('a');\n * this.b = _.constant('b');\n * }\n *\n * Foo.prototype.c = _.constant('c');\n *\n * _.functionsIn(new Foo);\n * // => ['a', 'b', 'c']\n */\n function functionsIn(object) {\n return object == null ? [] : baseFunctions(object, keysIn(object));\n }\n\n /**\n * Gets the value at `path` of `object`. If the resolved value is\n * `undefined`, the `defaultValue` is returned in its place.\n *\n * @static\n * @memberOf _\n * @since 3.7.0\n * @category Object\n * @param {Object} object The object to query.\n * @param {Array|string} path The path of the property to get.\n * @param {*} [defaultValue] The value returned for `undefined` resolved values.\n * @returns {*} Returns the resolved value.\n * @example\n *\n * var object = { 'a': [{ 'b': { 'c': 3 } }] };\n *\n * _.get(object, 'a[0].b.c');\n * // => 3\n *\n * _.get(object, ['a', '0', 'b', 'c']);\n * // => 3\n *\n * _.get(object, 'a.b.c', 'default');\n * // => 'default'\n */\n function get(object, path, defaultValue) {\n var result = object == null ? undefined : baseGet(object, path);\n return result === undefined ? defaultValue : result;\n }\n\n /**\n * Checks if `path` is a direct property of `object`.\n *\n * @static\n * @since 0.1.0\n * @memberOf _\n * @category Object\n * @param {Object} object The object to query.\n * @param {Array|string} path The path to check.\n * @returns {boolean} Returns `true` if `path` exists, else `false`.\n * @example\n *\n * var object = { 'a': { 'b': 2 } };\n * var other = _.create({ 'a': _.create({ 'b': 2 }) });\n *\n * _.has(object, 'a');\n * // => true\n *\n * _.has(object, 'a.b');\n * // => true\n *\n * _.has(object, ['a', 'b']);\n * // => true\n *\n * _.has(other, 'a');\n * // => false\n */\n function has(object, path) {\n return object != null && hasPath(object, path, baseHas);\n }\n\n /**\n * Checks if `path` is a direct or inherited property of `object`.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Object\n * @param {Object} object The object to query.\n * @param {Array|string} path The path to check.\n * @returns {boolean} Returns `true` if `path` exists, else `false`.\n * @example\n *\n * var object = _.create({ 'a': _.create({ 'b': 2 }) });\n *\n * _.hasIn(object, 'a');\n * // => true\n *\n * _.hasIn(object, 'a.b');\n * // => true\n *\n * _.hasIn(object, ['a', 'b']);\n * // => true\n *\n * _.hasIn(object, 'b');\n * // => false\n */\n function hasIn(object, path) {\n return object != null && hasPath(object, path, baseHasIn);\n }\n\n /**\n * Creates an object composed of the inverted keys and values of `object`.\n * If `object` contains duplicate values, subsequent values overwrite\n * property assignments of previous values.\n *\n * @static\n * @memberOf _\n * @since 0.7.0\n * @category Object\n * @param {Object} object The object to invert.\n * @returns {Object} Returns the new inverted object.\n * @example\n *\n * var object = { 'a': 1, 'b': 2, 'c': 1 };\n *\n * _.invert(object);\n * // => { '1': 'c', '2': 'b' }\n */\n var invert = createInverter(function(result, value, key) {\n if (value != null &&\n typeof value.toString != 'function') {\n value = nativeObjectToString.call(value);\n }\n\n result[value] = key;\n }, constant(identity));\n\n /**\n * This method is like `_.invert` except that the inverted object is generated\n * from the results of running each element of `object` thru `iteratee`. The\n * corresponding inverted value of each inverted key is an array of keys\n * responsible for generating the inverted value. The iteratee is invoked\n * with one argument: (value).\n *\n * @static\n * @memberOf _\n * @since 4.1.0\n * @category Object\n * @param {Object} object The object to invert.\n * @param {Function} [iteratee=_.identity] The iteratee invoked per element.\n * @returns {Object} Returns the new inverted object.\n * @example\n *\n * var object = { 'a': 1, 'b': 2, 'c': 1 };\n *\n * _.invertBy(object);\n * // => { '1': ['a', 'c'], '2': ['b'] }\n *\n * _.invertBy(object, function(value) {\n * return 'group' + value;\n * });\n * // => { 'group1': ['a', 'c'], 'group2': ['b'] }\n */\n var invertBy = createInverter(function(result, value, key) {\n if (value != null &&\n typeof value.toString != 'function') {\n value = nativeObjectToString.call(value);\n }\n\n if (hasOwnProperty.call(result, value)) {\n result[value].push(key);\n } else {\n result[value] = [key];\n }\n }, getIteratee);\n\n /**\n * Invokes the method at `path` of `object`.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Object\n * @param {Object} object The object to query.\n * @param {Array|string} path The path of the method to invoke.\n * @param {...*} [args] The arguments to invoke the method with.\n * @returns {*} Returns the result of the invoked method.\n * @example\n *\n * var object = { 'a': [{ 'b': { 'c': [1, 2, 3, 4] } }] };\n *\n * _.invoke(object, 'a[0].b.c.slice', 1, 3);\n * // => [2, 3]\n */\n var invoke = baseRest(baseInvoke);\n\n /**\n * Creates an array of the own enumerable property names of `object`.\n *\n * **Note:** Non-object values are coerced to objects. See the\n * [ES spec](http://ecma-international.org/ecma-262/7.0/#sec-object.keys)\n * for more details.\n *\n * @static\n * @since 0.1.0\n * @memberOf _\n * @category Object\n * @param {Object} object The object to query.\n * @returns {Array} Returns the array of property names.\n * @example\n *\n * function Foo() {\n * this.a = 1;\n * this.b = 2;\n * }\n *\n * Foo.prototype.c = 3;\n *\n * _.keys(new Foo);\n * // => ['a', 'b'] (iteration order is not guaranteed)\n *\n * _.keys('hi');\n * // => ['0', '1']\n */\n function keys(object) {\n return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object);\n }\n\n /**\n * Creates an array of the own and inherited enumerable property names of `object`.\n *\n * **Note:** Non-object values are coerced to objects.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Object\n * @param {Object} object The object to query.\n * @returns {Array} Returns the array of property names.\n * @example\n *\n * function Foo() {\n * this.a = 1;\n * this.b = 2;\n * }\n *\n * Foo.prototype.c = 3;\n *\n * _.keysIn(new Foo);\n * // => ['a', 'b', 'c'] (iteration order is not guaranteed)\n */\n function keysIn(object) {\n return isArrayLike(object) ? arrayLikeKeys(object, true) : baseKeysIn(object);\n }\n\n /**\n * The opposite of `_.mapValues`; this method creates an object with the\n * same values as `object` and keys generated by running each own enumerable\n * string keyed property of `object` thru `iteratee`. The iteratee is invoked\n * with three arguments: (value, key, object).\n *\n * @static\n * @memberOf _\n * @since 3.8.0\n * @category Object\n * @param {Object} object The object to iterate over.\n * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n * @returns {Object} Returns the new mapped object.\n * @see _.mapValues\n * @example\n *\n * _.mapKeys({ 'a': 1, 'b': 2 }, function(value, key) {\n * return key + value;\n * });\n * // => { 'a1': 1, 'b2': 2 }\n */\n function mapKeys(object, iteratee) {\n var result = {};\n iteratee = getIteratee(iteratee, 3);\n\n baseForOwn(object, function(value, key, object) {\n baseAssignValue(result, iteratee(value, key, object), value);\n });\n return result;\n }\n\n /**\n * Creates an object with the same keys as `object` and values generated\n * by running each own enumerable string keyed property of `object` thru\n * `iteratee`. The iteratee is invoked with three arguments:\n * (value, key, object).\n *\n * @static\n * @memberOf _\n * @since 2.4.0\n * @category Object\n * @param {Object} object The object to iterate over.\n * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n * @returns {Object} Returns the new mapped object.\n * @see _.mapKeys\n * @example\n *\n * var users = {\n * 'fred': { 'user': 'fred', 'age': 40 },\n * 'pebbles': { 'user': 'pebbles', 'age': 1 }\n * };\n *\n * _.mapValues(users, function(o) { return o.age; });\n * // => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed)\n *\n * // The `_.property` iteratee shorthand.\n * _.mapValues(users, 'age');\n * // => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed)\n */\n function mapValues(object, iteratee) {\n var result = {};\n iteratee = getIteratee(iteratee, 3);\n\n baseForOwn(object, function(value, key, object) {\n baseAssignValue(result, key, iteratee(value, key, object));\n });\n return result;\n }\n\n /**\n * This method is like `_.assign` except that it recursively merges own and\n * inherited enumerable string keyed properties of source objects into the\n * destination object. Source properties that resolve to `undefined` are\n * skipped if a destination value exists. Array and plain object properties\n * are merged recursively. Other objects and value types are overridden by\n * assignment. Source objects are applied from left to right. Subsequent\n * sources overwrite property assignments of previous sources.\n *\n * **Note:** This method mutates `object`.\n *\n * @static\n * @memberOf _\n * @since 0.5.0\n * @category Object\n * @param {Object} object The destination object.\n * @param {...Object} [sources] The source objects.\n * @returns {Object} Returns `object`.\n * @example\n *\n * var object = {\n * 'a': [{ 'b': 2 }, { 'd': 4 }]\n * };\n *\n * var other = {\n * 'a': [{ 'c': 3 }, { 'e': 5 }]\n * };\n *\n * _.merge(object, other);\n * // => { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }\n */\n var merge = createAssigner(function(object, source, srcIndex) {\n baseMerge(object, source, srcIndex);\n });\n\n /**\n * This method is like `_.merge` except that it accepts `customizer` which\n * is invoked to produce the merged values of the destination and source\n * properties. If `customizer` returns `undefined`, merging is handled by the\n * method instead. The `customizer` is invoked with six arguments:\n * (objValue, srcValue, key, object, source, stack).\n *\n * **Note:** This method mutates `object`.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Object\n * @param {Object} object The destination object.\n * @param {...Object} sources The source objects.\n * @param {Function} customizer The function to customize assigned values.\n * @returns {Object} Returns `object`.\n * @example\n *\n * function customizer(objValue, srcValue) {\n * if (_.isArray(objValue)) {\n * return objValue.concat(srcValue);\n * }\n * }\n *\n * var object = { 'a': [1], 'b': [2] };\n * var other = { 'a': [3], 'b': [4] };\n *\n * _.mergeWith(object, other, customizer);\n * // => { 'a': [1, 3], 'b': [2, 4] }\n */\n var mergeWith = createAssigner(function(object, source, srcIndex, customizer) {\n baseMerge(object, source, srcIndex, customizer);\n });\n\n /**\n * The opposite of `_.pick`; this method creates an object composed of the\n * own and inherited enumerable property paths of `object` that are not omitted.\n *\n * **Note:** This method is considerably slower than `_.pick`.\n *\n * @static\n * @since 0.1.0\n * @memberOf _\n * @category Object\n * @param {Object} object The source object.\n * @param {...(string|string[])} [paths] The property paths to omit.\n * @returns {Object} Returns the new object.\n * @example\n *\n * var object = { 'a': 1, 'b': '2', 'c': 3 };\n *\n * _.omit(object, ['a', 'c']);\n * // => { 'b': '2' }\n */\n var omit = flatRest(function(object, paths) {\n var result = {};\n if (object == null) {\n return result;\n }\n var isDeep = false;\n paths = arrayMap(paths, function(path) {\n path = castPath(path, object);\n isDeep || (isDeep = path.length > 1);\n return path;\n });\n copyObject(object, getAllKeysIn(object), result);\n if (isDeep) {\n result = baseClone(result, CLONE_DEEP_FLAG | CLONE_FLAT_FLAG | CLONE_SYMBOLS_FLAG, customOmitClone);\n }\n var length = paths.length;\n while (length--) {\n baseUnset(result, paths[length]);\n }\n return result;\n });\n\n /**\n * The opposite of `_.pickBy`; this method creates an object composed of\n * the own and inherited enumerable string keyed properties of `object` that\n * `predicate` doesn't return truthy for. The predicate is invoked with two\n * arguments: (value, key).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Object\n * @param {Object} object The source object.\n * @param {Function} [predicate=_.identity] The function invoked per property.\n * @returns {Object} Returns the new object.\n * @example\n *\n * var object = { 'a': 1, 'b': '2', 'c': 3 };\n *\n * _.omitBy(object, _.isNumber);\n * // => { 'b': '2' }\n */\n function omitBy(object, predicate) {\n return pickBy(object, negate(getIteratee(predicate)));\n }\n\n /**\n * Creates an object composed of the picked `object` properties.\n *\n * @static\n * @since 0.1.0\n * @memberOf _\n * @category Object\n * @param {Object} object The source object.\n * @param {...(string|string[])} [paths] The property paths to pick.\n * @returns {Object} Returns the new object.\n * @example\n *\n * var object = { 'a': 1, 'b': '2', 'c': 3 };\n *\n * _.pick(object, ['a', 'c']);\n * // => { 'a': 1, 'c': 3 }\n */\n var pick = flatRest(function(object, paths) {\n return object == null ? {} : basePick(object, paths);\n });\n\n /**\n * Creates an object composed of the `object` properties `predicate` returns\n * truthy for. The predicate is invoked with two arguments: (value, key).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Object\n * @param {Object} object The source object.\n * @param {Function} [predicate=_.identity] The function invoked per property.\n * @returns {Object} Returns the new object.\n * @example\n *\n * var object = { 'a': 1, 'b': '2', 'c': 3 };\n *\n * _.pickBy(object, _.isNumber);\n * // => { 'a': 1, 'c': 3 }\n */\n function pickBy(object, predicate) {\n if (object == null) {\n return {};\n }\n var props = arrayMap(getAllKeysIn(object), function(prop) {\n return [prop];\n });\n predicate = getIteratee(predicate);\n return basePickBy(object, props, function(value, path) {\n return predicate(value, path[0]);\n });\n }\n\n /**\n * This method is like `_.get` except that if the resolved value is a\n * function it's invoked with the `this` binding of its parent object and\n * its result is returned.\n *\n * @static\n * @since 0.1.0\n * @memberOf _\n * @category Object\n * @param {Object} object The object to query.\n * @param {Array|string} path The path of the property to resolve.\n * @param {*} [defaultValue] The value returned for `undefined` resolved values.\n * @returns {*} Returns the resolved value.\n * @example\n *\n * var object = { 'a': [{ 'b': { 'c1': 3, 'c2': _.constant(4) } }] };\n *\n * _.result(object, 'a[0].b.c1');\n * // => 3\n *\n * _.result(object, 'a[0].b.c2');\n * // => 4\n *\n * _.result(object, 'a[0].b.c3', 'default');\n * // => 'default'\n *\n * _.result(object, 'a[0].b.c3', _.constant('default'));\n * // => 'default'\n */\n function result(object, path, defaultValue) {\n path = castPath(path, object);\n\n var index = -1,\n length = path.length;\n\n // Ensure the loop is entered when path is empty.\n if (!length) {\n length = 1;\n object = undefined;\n }\n while (++index < length) {\n var value = object == null ? undefined : object[toKey(path[index])];\n if (value === undefined) {\n index = length;\n value = defaultValue;\n }\n object = isFunction(value) ? value.call(object) : value;\n }\n return object;\n }\n\n /**\n * Sets the value at `path` of `object`. If a portion of `path` doesn't exist,\n * it's created. Arrays are created for missing index properties while objects\n * are created for all other missing properties. Use `_.setWith` to customize\n * `path` creation.\n *\n * **Note:** This method mutates `object`.\n *\n * @static\n * @memberOf _\n * @since 3.7.0\n * @category Object\n * @param {Object} object The object to modify.\n * @param {Array|string} path The path of the property to set.\n * @param {*} value The value to set.\n * @returns {Object} Returns `object`.\n * @example\n *\n * var object = { 'a': [{ 'b': { 'c': 3 } }] };\n *\n * _.set(object, 'a[0].b.c', 4);\n * console.log(object.a[0].b.c);\n * // => 4\n *\n * _.set(object, ['x', '0', 'y', 'z'], 5);\n * console.log(object.x[0].y.z);\n * // => 5\n */\n function set(object, path, value) {\n return object == null ? object : baseSet(object, path, value);\n }\n\n /**\n * This method is like `_.set` except that it accepts `customizer` which is\n * invoked to produce the objects of `path`. If `customizer` returns `undefined`\n * path creation is handled by the method instead. The `customizer` is invoked\n * with three arguments: (nsValue, key, nsObject).\n *\n * **Note:** This method mutates `object`.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Object\n * @param {Object} object The object to modify.\n * @param {Array|string} path The path of the property to set.\n * @param {*} value The value to set.\n * @param {Function} [customizer] The function to customize assigned values.\n * @returns {Object} Returns `object`.\n * @example\n *\n * var object = {};\n *\n * _.setWith(object, '[0][1]', 'a', Object);\n * // => { '0': { '1': 'a' } }\n */\n function setWith(object, path, value, customizer) {\n customizer = typeof customizer == 'function' ? customizer : undefined;\n return object == null ? object : baseSet(object, path, value, customizer);\n }\n\n /**\n * Creates an array of own enumerable string keyed-value pairs for `object`\n * which can be consumed by `_.fromPairs`. If `object` is a map or set, its\n * entries are returned.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @alias entries\n * @category Object\n * @param {Object} object The object to query.\n * @returns {Array} Returns the key-value pairs.\n * @example\n *\n * function Foo() {\n * this.a = 1;\n * this.b = 2;\n * }\n *\n * Foo.prototype.c = 3;\n *\n * _.toPairs(new Foo);\n * // => [['a', 1], ['b', 2]] (iteration order is not guaranteed)\n */\n var toPairs = createToPairs(keys);\n\n /**\n * Creates an array of own and inherited enumerable string keyed-value pairs\n * for `object` which can be consumed by `_.fromPairs`. If `object` is a map\n * or set, its entries are returned.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @alias entriesIn\n * @category Object\n * @param {Object} object The object to query.\n * @returns {Array} Returns the key-value pairs.\n * @example\n *\n * function Foo() {\n * this.a = 1;\n * this.b = 2;\n * }\n *\n * Foo.prototype.c = 3;\n *\n * _.toPairsIn(new Foo);\n * // => [['a', 1], ['b', 2], ['c', 3]] (iteration order is not guaranteed)\n */\n var toPairsIn = createToPairs(keysIn);\n\n /**\n * An alternative to `_.reduce`; this method transforms `object` to a new\n * `accumulator` object which is the result of running each of its own\n * enumerable string keyed properties thru `iteratee`, with each invocation\n * potentially mutating the `accumulator` object. If `accumulator` is not\n * provided, a new object with the same `[[Prototype]]` will be used. The\n * iteratee is invoked with four arguments: (accumulator, value, key, object).\n * Iteratee functions may exit iteration early by explicitly returning `false`.\n *\n * @static\n * @memberOf _\n * @since 1.3.0\n * @category Object\n * @param {Object} object The object to iterate over.\n * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n * @param {*} [accumulator] The custom accumulator value.\n * @returns {*} Returns the accumulated value.\n * @example\n *\n * _.transform([2, 3, 4], function(result, n) {\n * result.push(n *= n);\n * return n % 2 == 0;\n * }, []);\n * // => [4, 9]\n *\n * _.transform({ 'a': 1, 'b': 2, 'c': 1 }, function(result, value, key) {\n * (result[value] || (result[value] = [])).push(key);\n * }, {});\n * // => { '1': ['a', 'c'], '2': ['b'] }\n */\n function transform(object, iteratee, accumulator) {\n var isArr = isArray(object),\n isArrLike = isArr || isBuffer(object) || isTypedArray(object);\n\n iteratee = getIteratee(iteratee, 4);\n if (accumulator == null) {\n var Ctor = object && object.constructor;\n if (isArrLike) {\n accumulator = isArr ? new Ctor : [];\n }\n else if (isObject(object)) {\n accumulator = isFunction(Ctor) ? baseCreate(getPrototype(object)) : {};\n }\n else {\n accumulator = {};\n }\n }\n (isArrLike ? arrayEach : baseForOwn)(object, function(value, index, object) {\n return iteratee(accumulator, value, index, object);\n });\n return accumulator;\n }\n\n /**\n * Removes the property at `path` of `object`.\n *\n * **Note:** This method mutates `object`.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Object\n * @param {Object} object The object to modify.\n * @param {Array|string} path The path of the property to unset.\n * @returns {boolean} Returns `true` if the property is deleted, else `false`.\n * @example\n *\n * var object = { 'a': [{ 'b': { 'c': 7 } }] };\n * _.unset(object, 'a[0].b.c');\n * // => true\n *\n * console.log(object);\n * // => { 'a': [{ 'b': {} }] };\n *\n * _.unset(object, ['a', '0', 'b', 'c']);\n * // => true\n *\n * console.log(object);\n * // => { 'a': [{ 'b': {} }] };\n */\n function unset(object, path) {\n return object == null ? true : baseUnset(object, path);\n }\n\n /**\n * This method is like `_.set` except that accepts `updater` to produce the\n * value to set. Use `_.updateWith` to customize `path` creation. The `updater`\n * is invoked with one argument: (value).\n *\n * **Note:** This method mutates `object`.\n *\n * @static\n * @memberOf _\n * @since 4.6.0\n * @category Object\n * @param {Object} object The object to modify.\n * @param {Array|string} path The path of the property to set.\n * @param {Function} updater The function to produce the updated value.\n * @returns {Object} Returns `object`.\n * @example\n *\n * var object = { 'a': [{ 'b': { 'c': 3 } }] };\n *\n * _.update(object, 'a[0].b.c', function(n) { return n * n; });\n * console.log(object.a[0].b.c);\n * // => 9\n *\n * _.update(object, 'x[0].y.z', function(n) { return n ? n + 1 : 0; });\n * console.log(object.x[0].y.z);\n * // => 0\n */\n function update(object, path, updater) {\n return object == null ? object : baseUpdate(object, path, castFunction(updater));\n }\n\n /**\n * This method is like `_.update` except that it accepts `customizer` which is\n * invoked to produce the objects of `path`. If `customizer` returns `undefined`\n * path creation is handled by the method instead. The `customizer` is invoked\n * with three arguments: (nsValue, key, nsObject).\n *\n * **Note:** This method mutates `object`.\n *\n * @static\n * @memberOf _\n * @since 4.6.0\n * @category Object\n * @param {Object} object The object to modify.\n * @param {Array|string} path The path of the property to set.\n * @param {Function} updater The function to produce the updated value.\n * @param {Function} [customizer] The function to customize assigned values.\n * @returns {Object} Returns `object`.\n * @example\n *\n * var object = {};\n *\n * _.updateWith(object, '[0][1]', _.constant('a'), Object);\n * // => { '0': { '1': 'a' } }\n */\n function updateWith(object, path, updater, customizer) {\n customizer = typeof customizer == 'function' ? customizer : undefined;\n return object == null ? object : baseUpdate(object, path, castFunction(updater), customizer);\n }\n\n /**\n * Creates an array of the own enumerable string keyed property values of `object`.\n *\n * **Note:** Non-object values are coerced to objects.\n *\n * @static\n * @since 0.1.0\n * @memberOf _\n * @category Object\n * @param {Object} object The object to query.\n * @returns {Array} Returns the array of property values.\n * @example\n *\n * function Foo() {\n * this.a = 1;\n * this.b = 2;\n * }\n *\n * Foo.prototype.c = 3;\n *\n * _.values(new Foo);\n * // => [1, 2] (iteration order is not guaranteed)\n *\n * _.values('hi');\n * // => ['h', 'i']\n */\n function values(object) {\n return object == null ? [] : baseValues(object, keys(object));\n }\n\n /**\n * Creates an array of the own and inherited enumerable string keyed property\n * values of `object`.\n *\n * **Note:** Non-object values are coerced to objects.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Object\n * @param {Object} object The object to query.\n * @returns {Array} Returns the array of property values.\n * @example\n *\n * function Foo() {\n * this.a = 1;\n * this.b = 2;\n * }\n *\n * Foo.prototype.c = 3;\n *\n * _.valuesIn(new Foo);\n * // => [1, 2, 3] (iteration order is not guaranteed)\n */\n function valuesIn(object) {\n return object == null ? [] : baseValues(object, keysIn(object));\n }\n\n /*------------------------------------------------------------------------*/\n\n /**\n * Clamps `number` within the inclusive `lower` and `upper` bounds.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Number\n * @param {number} number The number to clamp.\n * @param {number} [lower] The lower bound.\n * @param {number} upper The upper bound.\n * @returns {number} Returns the clamped number.\n * @example\n *\n * _.clamp(-10, -5, 5);\n * // => -5\n *\n * _.clamp(10, -5, 5);\n * // => 5\n */\n function clamp(number, lower, upper) {\n if (upper === undefined) {\n upper = lower;\n lower = undefined;\n }\n if (upper !== undefined) {\n upper = toNumber(upper);\n upper = upper === upper ? upper : 0;\n }\n if (lower !== undefined) {\n lower = toNumber(lower);\n lower = lower === lower ? lower : 0;\n }\n return baseClamp(toNumber(number), lower, upper);\n }\n\n /**\n * Checks if `n` is between `start` and up to, but not including, `end`. If\n * `end` is not specified, it's set to `start` with `start` then set to `0`.\n * If `start` is greater than `end` the params are swapped to support\n * negative ranges.\n *\n * @static\n * @memberOf _\n * @since 3.3.0\n * @category Number\n * @param {number} number The number to check.\n * @param {number} [start=0] The start of the range.\n * @param {number} end The end of the range.\n * @returns {boolean} Returns `true` if `number` is in the range, else `false`.\n * @see _.range, _.rangeRight\n * @example\n *\n * _.inRange(3, 2, 4);\n * // => true\n *\n * _.inRange(4, 8);\n * // => true\n *\n * _.inRange(4, 2);\n * // => false\n *\n * _.inRange(2, 2);\n * // => false\n *\n * _.inRange(1.2, 2);\n * // => true\n *\n * _.inRange(5.2, 4);\n * // => false\n *\n * _.inRange(-3, -2, -6);\n * // => true\n */\n function inRange(number, start, end) {\n start = toFinite(start);\n if (end === undefined) {\n end = start;\n start = 0;\n } else {\n end = toFinite(end);\n }\n number = toNumber(number);\n return baseInRange(number, start, end);\n }\n\n /**\n * Produces a random number between the inclusive `lower` and `upper` bounds.\n * If only one argument is provided a number between `0` and the given number\n * is returned. If `floating` is `true`, or either `lower` or `upper` are\n * floats, a floating-point number is returned instead of an integer.\n *\n * **Note:** JavaScript follows the IEEE-754 standard for resolving\n * floating-point values which can produce unexpected results.\n *\n * @static\n * @memberOf _\n * @since 0.7.0\n * @category Number\n * @param {number} [lower=0] The lower bound.\n * @param {number} [upper=1] The upper bound.\n * @param {boolean} [floating] Specify returning a floating-point number.\n * @returns {number} Returns the random number.\n * @example\n *\n * _.random(0, 5);\n * // => an integer between 0 and 5\n *\n * _.random(5);\n * // => also an integer between 0 and 5\n *\n * _.random(5, true);\n * // => a floating-point number between 0 and 5\n *\n * _.random(1.2, 5.2);\n * // => a floating-point number between 1.2 and 5.2\n */\n function random(lower, upper, floating) {\n if (floating && typeof floating != 'boolean' && isIterateeCall(lower, upper, floating)) {\n upper = floating = undefined;\n }\n if (floating === undefined) {\n if (typeof upper == 'boolean') {\n floating = upper;\n upper = undefined;\n }\n else if (typeof lower == 'boolean') {\n floating = lower;\n lower = undefined;\n }\n }\n if (lower === undefined && upper === undefined) {\n lower = 0;\n upper = 1;\n }\n else {\n lower = toFinite(lower);\n if (upper === undefined) {\n upper = lower;\n lower = 0;\n } else {\n upper = toFinite(upper);\n }\n }\n if (lower > upper) {\n var temp = lower;\n lower = upper;\n upper = temp;\n }\n if (floating || lower % 1 || upper % 1) {\n var rand = nativeRandom();\n return nativeMin(lower + (rand * (upper - lower + freeParseFloat('1e-' + ((rand + '').length - 1)))), upper);\n }\n return baseRandom(lower, upper);\n }\n\n /*------------------------------------------------------------------------*/\n\n /**\n * Converts `string` to [camel case](https://en.wikipedia.org/wiki/CamelCase).\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category String\n * @param {string} [string=''] The string to convert.\n * @returns {string} Returns the camel cased string.\n * @example\n *\n * _.camelCase('Foo Bar');\n * // => 'fooBar'\n *\n * _.camelCase('--foo-bar--');\n * // => 'fooBar'\n *\n * _.camelCase('__FOO_BAR__');\n * // => 'fooBar'\n */\n var camelCase = createCompounder(function(result, word, index) {\n word = word.toLowerCase();\n return result + (index ? capitalize(word) : word);\n });\n\n /**\n * Converts the first character of `string` to upper case and the remaining\n * to lower case.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category String\n * @param {string} [string=''] The string to capitalize.\n * @returns {string} Returns the capitalized string.\n * @example\n *\n * _.capitalize('FRED');\n * // => 'Fred'\n */\n function capitalize(string) {\n return upperFirst(toString(string).toLowerCase());\n }\n\n /**\n * Deburrs `string` by converting\n * [Latin-1 Supplement](https://en.wikipedia.org/wiki/Latin-1_Supplement_(Unicode_block)#Character_table)\n * and [Latin Extended-A](https://en.wikipedia.org/wiki/Latin_Extended-A)\n * letters to basic Latin letters and removing\n * [combining diacritical marks](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks).\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category String\n * @param {string} [string=''] The string to deburr.\n * @returns {string} Returns the deburred string.\n * @example\n *\n * _.deburr('déjà vu');\n * // => 'deja vu'\n */\n function deburr(string) {\n string = toString(string);\n return string && string.replace(reLatin, deburrLetter).replace(reComboMark, '');\n }\n\n /**\n * Checks if `string` ends with the given target string.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category String\n * @param {string} [string=''] The string to inspect.\n * @param {string} [target] The string to search for.\n * @param {number} [position=string.length] The position to search up to.\n * @returns {boolean} Returns `true` if `string` ends with `target`,\n * else `false`.\n * @example\n *\n * _.endsWith('abc', 'c');\n * // => true\n *\n * _.endsWith('abc', 'b');\n * // => false\n *\n * _.endsWith('abc', 'b', 2);\n * // => true\n */\n function endsWith(string, target, position) {\n string = toString(string);\n target = baseToString(target);\n\n var length = string.length;\n position = position === undefined\n ? length\n : baseClamp(toInteger(position), 0, length);\n\n var end = position;\n position -= target.length;\n return position >= 0 && string.slice(position, end) == target;\n }\n\n /**\n * Converts the characters \"&\", \"<\", \">\", '\"', and \"'\" in `string` to their\n * corresponding HTML entities.\n *\n * **Note:** No other characters are escaped. To escape additional\n * characters use a third-party library like [_he_](https://mths.be/he).\n *\n * Though the \">\" character is escaped for symmetry, characters like\n * \">\" and \"/\" don't need escaping in HTML and have no special meaning\n * unless they're part of a tag or unquoted attribute value. See\n * [Mathias Bynens's article](https://mathiasbynens.be/notes/ambiguous-ampersands)\n * (under \"semi-related fun fact\") for more details.\n *\n * When working with HTML you should always\n * [quote attribute values](http://wonko.com/post/html-escaping) to reduce\n * XSS vectors.\n *\n * @static\n * @since 0.1.0\n * @memberOf _\n * @category String\n * @param {string} [string=''] The string to escape.\n * @returns {string} Returns the escaped string.\n * @example\n *\n * _.escape('fred, barney, & pebbles');\n * // => 'fred, barney, & pebbles'\n */\n function escape(string) {\n string = toString(string);\n return (string && reHasUnescapedHtml.test(string))\n ? string.replace(reUnescapedHtml, escapeHtmlChar)\n : string;\n }\n\n /**\n * Escapes the `RegExp` special characters \"^\", \"$\", \"\\\", \".\", \"*\", \"+\",\n * \"?\", \"(\", \")\", \"[\", \"]\", \"{\", \"}\", and \"|\" in `string`.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category String\n * @param {string} [string=''] The string to escape.\n * @returns {string} Returns the escaped string.\n * @example\n *\n * _.escapeRegExp('[lodash](https://lodash.com/)');\n * // => '\\[lodash\\]\\(https://lodash\\.com/\\)'\n */\n function escapeRegExp(string) {\n string = toString(string);\n return (string && reHasRegExpChar.test(string))\n ? string.replace(reRegExpChar, '\\\\$&')\n : string;\n }\n\n /**\n * Converts `string` to\n * [kebab case](https://en.wikipedia.org/wiki/Letter_case#Special_case_styles).\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category String\n * @param {string} [string=''] The string to convert.\n * @returns {string} Returns the kebab cased string.\n * @example\n *\n * _.kebabCase('Foo Bar');\n * // => 'foo-bar'\n *\n * _.kebabCase('fooBar');\n * // => 'foo-bar'\n *\n * _.kebabCase('__FOO_BAR__');\n * // => 'foo-bar'\n */\n var kebabCase = createCompounder(function(result, word, index) {\n return result + (index ? '-' : '') + word.toLowerCase();\n });\n\n /**\n * Converts `string`, as space separated words, to lower case.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category String\n * @param {string} [string=''] The string to convert.\n * @returns {string} Returns the lower cased string.\n * @example\n *\n * _.lowerCase('--Foo-Bar--');\n * // => 'foo bar'\n *\n * _.lowerCase('fooBar');\n * // => 'foo bar'\n *\n * _.lowerCase('__FOO_BAR__');\n * // => 'foo bar'\n */\n var lowerCase = createCompounder(function(result, word, index) {\n return result + (index ? ' ' : '') + word.toLowerCase();\n });\n\n /**\n * Converts the first character of `string` to lower case.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category String\n * @param {string} [string=''] The string to convert.\n * @returns {string} Returns the converted string.\n * @example\n *\n * _.lowerFirst('Fred');\n * // => 'fred'\n *\n * _.lowerFirst('FRED');\n * // => 'fRED'\n */\n var lowerFirst = createCaseFirst('toLowerCase');\n\n /**\n * Pads `string` on the left and right sides if it's shorter than `length`.\n * Padding characters are truncated if they can't be evenly divided by `length`.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category String\n * @param {string} [string=''] The string to pad.\n * @param {number} [length=0] The padding length.\n * @param {string} [chars=' '] The string used as padding.\n * @returns {string} Returns the padded string.\n * @example\n *\n * _.pad('abc', 8);\n * // => ' abc '\n *\n * _.pad('abc', 8, '_-');\n * // => '_-abc_-_'\n *\n * _.pad('abc', 3);\n * // => 'abc'\n */\n function pad(string, length, chars) {\n string = toString(string);\n length = toInteger(length);\n\n var strLength = length ? stringSize(string) : 0;\n if (!length || strLength >= length) {\n return string;\n }\n var mid = (length - strLength) / 2;\n return (\n createPadding(nativeFloor(mid), chars) +\n string +\n createPadding(nativeCeil(mid), chars)\n );\n }\n\n /**\n * Pads `string` on the right side if it's shorter than `length`. Padding\n * characters are truncated if they exceed `length`.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category String\n * @param {string} [string=''] The string to pad.\n * @param {number} [length=0] The padding length.\n * @param {string} [chars=' '] The string used as padding.\n * @returns {string} Returns the padded string.\n * @example\n *\n * _.padEnd('abc', 6);\n * // => 'abc '\n *\n * _.padEnd('abc', 6, '_-');\n * // => 'abc_-_'\n *\n * _.padEnd('abc', 3);\n * // => 'abc'\n */\n function padEnd(string, length, chars) {\n string = toString(string);\n length = toInteger(length);\n\n var strLength = length ? stringSize(string) : 0;\n return (length && strLength < length)\n ? (string + createPadding(length - strLength, chars))\n : string;\n }\n\n /**\n * Pads `string` on the left side if it's shorter than `length`. Padding\n * characters are truncated if they exceed `length`.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category String\n * @param {string} [string=''] The string to pad.\n * @param {number} [length=0] The padding length.\n * @param {string} [chars=' '] The string used as padding.\n * @returns {string} Returns the padded string.\n * @example\n *\n * _.padStart('abc', 6);\n * // => ' abc'\n *\n * _.padStart('abc', 6, '_-');\n * // => '_-_abc'\n *\n * _.padStart('abc', 3);\n * // => 'abc'\n */\n function padStart(string, length, chars) {\n string = toString(string);\n length = toInteger(length);\n\n var strLength = length ? stringSize(string) : 0;\n return (length && strLength < length)\n ? (createPadding(length - strLength, chars) + string)\n : string;\n }\n\n /**\n * Converts `string` to an integer of the specified radix. If `radix` is\n * `undefined` or `0`, a `radix` of `10` is used unless `value` is a\n * hexadecimal, in which case a `radix` of `16` is used.\n *\n * **Note:** This method aligns with the\n * [ES5 implementation](https://es5.github.io/#x15.1.2.2) of `parseInt`.\n *\n * @static\n * @memberOf _\n * @since 1.1.0\n * @category String\n * @param {string} string The string to convert.\n * @param {number} [radix=10] The radix to interpret `value` by.\n * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n * @returns {number} Returns the converted integer.\n * @example\n *\n * _.parseInt('08');\n * // => 8\n *\n * _.map(['6', '08', '10'], _.parseInt);\n * // => [6, 8, 10]\n */\n function parseInt(string, radix, guard) {\n if (guard || radix == null) {\n radix = 0;\n } else if (radix) {\n radix = +radix;\n }\n return nativeParseInt(toString(string).replace(reTrimStart, ''), radix || 0);\n }\n\n /**\n * Repeats the given string `n` times.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category String\n * @param {string} [string=''] The string to repeat.\n * @param {number} [n=1] The number of times to repeat the string.\n * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n * @returns {string} Returns the repeated string.\n * @example\n *\n * _.repeat('*', 3);\n * // => '***'\n *\n * _.repeat('abc', 2);\n * // => 'abcabc'\n *\n * _.repeat('abc', 0);\n * // => ''\n */\n function repeat(string, n, guard) {\n if ((guard ? isIterateeCall(string, n, guard) : n === undefined)) {\n n = 1;\n } else {\n n = toInteger(n);\n }\n return baseRepeat(toString(string), n);\n }\n\n /**\n * Replaces matches for `pattern` in `string` with `replacement`.\n *\n * **Note:** This method is based on\n * [`String#replace`](https://mdn.io/String/replace).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category String\n * @param {string} [string=''] The string to modify.\n * @param {RegExp|string} pattern The pattern to replace.\n * @param {Function|string} replacement The match replacement.\n * @returns {string} Returns the modified string.\n * @example\n *\n * _.replace('Hi Fred', 'Fred', 'Barney');\n * // => 'Hi Barney'\n */\n function replace() {\n var args = arguments,\n string = toString(args[0]);\n\n return args.length < 3 ? string : string.replace(args[1], args[2]);\n }\n\n /**\n * Converts `string` to\n * [snake case](https://en.wikipedia.org/wiki/Snake_case).\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category String\n * @param {string} [string=''] The string to convert.\n * @returns {string} Returns the snake cased string.\n * @example\n *\n * _.snakeCase('Foo Bar');\n * // => 'foo_bar'\n *\n * _.snakeCase('fooBar');\n * // => 'foo_bar'\n *\n * _.snakeCase('--FOO-BAR--');\n * // => 'foo_bar'\n */\n var snakeCase = createCompounder(function(result, word, index) {\n return result + (index ? '_' : '') + word.toLowerCase();\n });\n\n /**\n * Splits `string` by `separator`.\n *\n * **Note:** This method is based on\n * [`String#split`](https://mdn.io/String/split).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category String\n * @param {string} [string=''] The string to split.\n * @param {RegExp|string} separator The separator pattern to split by.\n * @param {number} [limit] The length to truncate results to.\n * @returns {Array} Returns the string segments.\n * @example\n *\n * _.split('a-b-c', '-', 2);\n * // => ['a', 'b']\n */\n function split(string, separator, limit) {\n if (limit && typeof limit != 'number' && isIterateeCall(string, separator, limit)) {\n separator = limit = undefined;\n }\n limit = limit === undefined ? MAX_ARRAY_LENGTH : limit >>> 0;\n if (!limit) {\n return [];\n }\n string = toString(string);\n if (string && (\n typeof separator == 'string' ||\n (separator != null && !isRegExp(separator))\n )) {\n separator = baseToString(separator);\n if (!separator && hasUnicode(string)) {\n return castSlice(stringToArray(string), 0, limit);\n }\n }\n return string.split(separator, limit);\n }\n\n /**\n * Converts `string` to\n * [start case](https://en.wikipedia.org/wiki/Letter_case#Stylistic_or_specialised_usage).\n *\n * @static\n * @memberOf _\n * @since 3.1.0\n * @category String\n * @param {string} [string=''] The string to convert.\n * @returns {string} Returns the start cased string.\n * @example\n *\n * _.startCase('--foo-bar--');\n * // => 'Foo Bar'\n *\n * _.startCase('fooBar');\n * // => 'Foo Bar'\n *\n * _.startCase('__FOO_BAR__');\n * // => 'FOO BAR'\n */\n var startCase = createCompounder(function(result, word, index) {\n return result + (index ? ' ' : '') + upperFirst(word);\n });\n\n /**\n * Checks if `string` starts with the given target string.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category String\n * @param {string} [string=''] The string to inspect.\n * @param {string} [target] The string to search for.\n * @param {number} [position=0] The position to search from.\n * @returns {boolean} Returns `true` if `string` starts with `target`,\n * else `false`.\n * @example\n *\n * _.startsWith('abc', 'a');\n * // => true\n *\n * _.startsWith('abc', 'b');\n * // => false\n *\n * _.startsWith('abc', 'b', 1);\n * // => true\n */\n function startsWith(string, target, position) {\n string = toString(string);\n position = position == null\n ? 0\n : baseClamp(toInteger(position), 0, string.length);\n\n target = baseToString(target);\n return string.slice(position, position + target.length) == target;\n }\n\n /**\n * Creates a compiled template function that can interpolate data properties\n * in \"interpolate\" delimiters, HTML-escape interpolated data properties in\n * \"escape\" delimiters, and execute JavaScript in \"evaluate\" delimiters. Data\n * properties may be accessed as free variables in the template. If a setting\n * object is given, it takes precedence over `_.templateSettings` values.\n *\n * **Note:** In the development build `_.template` utilizes\n * [sourceURLs](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-sourceurl)\n * for easier debugging.\n *\n * For more information on precompiling templates see\n * [lodash's custom builds documentation](https://lodash.com/custom-builds).\n *\n * For more information on Chrome extension sandboxes see\n * [Chrome's extensions documentation](https://developer.chrome.com/extensions/sandboxingEval).\n *\n * @static\n * @since 0.1.0\n * @memberOf _\n * @category String\n * @param {string} [string=''] The template string.\n * @param {Object} [options={}] The options object.\n * @param {RegExp} [options.escape=_.templateSettings.escape]\n * The HTML \"escape\" delimiter.\n * @param {RegExp} [options.evaluate=_.templateSettings.evaluate]\n * The \"evaluate\" delimiter.\n * @param {Object} [options.imports=_.templateSettings.imports]\n * An object to import into the template as free variables.\n * @param {RegExp} [options.interpolate=_.templateSettings.interpolate]\n * The \"interpolate\" delimiter.\n * @param {string} [options.sourceURL='lodash.templateSources[n]']\n * The sourceURL of the compiled template.\n * @param {string} [options.variable='obj']\n * The data object variable name.\n * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n * @returns {Function} Returns the compiled template function.\n * @example\n *\n * // Use the \"interpolate\" delimiter to create a compiled template.\n * var compiled = _.template('hello <%= user %>!');\n * compiled({ 'user': 'fred' });\n * // => 'hello fred!'\n *\n * // Use the HTML \"escape\" delimiter to escape data property values.\n * var compiled = _.template('<%- value %>');\n * compiled({ 'value': '