{"version":3,"file":"vendor.06c5850d.js","sources":["../../node_modules/object-assign/index.js","../../node_modules/react/cjs/react.production.min.js","../../node_modules/react/index.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/tslib/tslib.es6.js","../../node_modules/@fluentui/set-version/lib/setVersion.js","../../node_modules/@fluentui/set-version/lib/index.js","../../node_modules/@fluentui/merge-styles/lib/Stylesheet.js","../../node_modules/@fluentui/merge-styles/lib/extractStyleParts.js","../../node_modules/@fluentui/merge-styles/lib/StyleOptionsState.js","../../node_modules/@fluentui/merge-styles/lib/transforms/kebabRules.js","../../node_modules/@fluentui/merge-styles/lib/getVendorSettings.js","../../node_modules/@fluentui/merge-styles/lib/transforms/prefixRules.js","../../node_modules/@fluentui/merge-styles/lib/transforms/provideUnits.js","../../node_modules/@fluentui/merge-styles/lib/transforms/rtlifyRules.js","../../node_modules/@fluentui/merge-styles/lib/tokenizeWithParentheses.js","../../node_modules/@fluentui/merge-styles/lib/styleToClassName.js","../../node_modules/@fluentui/merge-styles/lib/mergeStyles.js","../../node_modules/@fluentui/merge-styles/lib/concatStyleSets.js","../../node_modules/@fluentui/merge-styles/lib/mergeStyleSets.js","../../node_modules/@fluentui/merge-styles/lib/concatStyleSetsWithProps.js","../../node_modules/@fluentui/merge-styles/lib/fontFace.js","../../node_modules/@fluentui/merge-styles/lib/keyframes.js","../../node_modules/@fluentui/style-utilities/lib/utilities/buildClassMap.js","../../node_modules/@fluentui/utilities/lib/dom/setSSR.js","../../node_modules/@fluentui/utilities/lib/dom/getWindow.js","../../node_modules/@fluentui/utilities/lib/Async.js","../../node_modules/@fluentui/utilities/lib/object.js","../../node_modules/@fluentui/utilities/lib/EventGroup.js","../../node_modules/@fluentui/utilities/lib/dom/getDocument.js","../../node_modules/@fluentui/utilities/lib/scroll.js","../../node_modules/@fluentui/utilities/lib/dom/getRect.js","../../node_modules/@fluentui/utilities/lib/warn/warn.js","../../node_modules/@fluentui/utilities/lib/warn/warnConditionallyRequiredProps.js","../../node_modules/@fluentui/utilities/lib/BaseComponent.js","../../node_modules/@fluentui/utilities/lib/DelayedRender.js","../../node_modules/@fluentui/utilities/lib/GlobalSettings.js","../../node_modules/@fluentui/utilities/lib/KeyCodes.js","../../node_modules/@fluentui/utilities/lib/Rectangle.js","../../node_modules/@fluentui/utilities/lib/appendFunction.js","../../node_modules/@fluentui/utilities/lib/aria.js","../../node_modules/@fluentui/utilities/lib/array.js","../../node_modules/@fluentui/utilities/lib/assertNever.js","../../node_modules/@fluentui/utilities/lib/sessionStorage.js","../../node_modules/@fluentui/utilities/lib/rtl.js","../../node_modules/@fluentui/dom-utilities/lib/isVirtualElement.js","../../node_modules/@fluentui/dom-utilities/lib/getVirtualParent.js","../../node_modules/@fluentui/dom-utilities/lib/getParent.js","../../node_modules/@fluentui/dom-utilities/lib/elementContains.js","../../node_modules/@fluentui/dom-utilities/lib/findElementRecursive.js","../../node_modules/@fluentui/dom-utilities/lib/elementContainsAttribute.js","../../node_modules/@fluentui/dom-utilities/lib/setPortalAttribute.js","../../node_modules/@fluentui/dom-utilities/lib/portalContainsElement.js","../../node_modules/@fluentui/dom-utilities/lib/setVirtualParent.js","../../node_modules/@fluentui/utilities/lib/focus.js","../../node_modules/@fluentui/utilities/lib/dom/on.js","../../node_modules/@fluentui/utilities/lib/classNamesFunction.js","../../node_modules/@fluentui/utilities/lib/memoize.js","../../node_modules/@fluentui/utilities/lib/componentAs/composeComponentAs.js","../../node_modules/@fluentui/utilities/lib/controlled.js","../../node_modules/@fluentui/utilities/lib/css.js","../../node_modules/@fluentui/utilities/lib/customizations/Customizations.js","../../node_modules/@fluentui/utilities/lib/customizations/CustomizerContext.js","../../node_modules/@fluentui/utilities/lib/customizations/mergeSettings.js","../../node_modules/@fluentui/utilities/lib/customizations/mergeCustomizations.js","../../node_modules/@fluentui/utilities/lib/customizations/Customizer.js","../../node_modules/@fluentui/utilities/lib/hoistStatics.js","../../node_modules/@fluentui/utilities/lib/customizations/customizable.js","../../node_modules/@fluentui/utilities/lib/customizations/useCustomizationSettings.js","../../node_modules/@fluentui/utilities/lib/extendComponent.js","../../node_modules/@fluentui/utilities/lib/getId.js","../../node_modules/@fluentui/utilities/lib/properties.js","../../node_modules/@fluentui/utilities/lib/getNativeElementProps.js","../../node_modules/@fluentui/utilities/lib/hoist.js","../../node_modules/@fluentui/utilities/lib/initializeComponentRef.js","../../node_modules/@fluentui/utilities/lib/keyboard.js","../../node_modules/@fluentui/utilities/lib/setFocusVisibility.js","../../node_modules/@fluentui/utilities/lib/useFocusRects.js","../../node_modules/@fluentui/utilities/lib/localStorage.js","../../node_modules/@fluentui/utilities/lib/language.js","../../node_modules/@fluentui/utilities/lib/math.js","../../node_modules/@fluentui/utilities/lib/merge.js","../../node_modules/@fluentui/utilities/lib/mobileDetector.js","../../node_modules/@fluentui/utilities/lib/modalize.js","../../node_modules/@fluentui/utilities/lib/osDetector.js","../../node_modules/@fluentui/utilities/lib/overflow.js","../../node_modules/@fluentui/utilities/lib/renderFunction/composeRenderFunction.js","../../node_modules/@fluentui/utilities/lib/safeRequestAnimationFrame.js","../../node_modules/@fluentui/utilities/lib/selection/Selection.types.js","../../node_modules/@fluentui/utilities/lib/selection/Selection.js","../../node_modules/@fluentui/utilities/lib/styled.js","../../node_modules/@fluentui/utilities/lib/ie11Detector.js","../../node_modules/@fluentui/utilities/lib/getPropsWithDefaults.js","../../node_modules/@fluentui/utilities/lib/createMergedRef.js","../../node_modules/@fluentui/utilities/lib/useIsomorphicLayoutEffect.js","../../node_modules/@fluentui/style-utilities/lib/utilities/icons.js","../../node_modules/@fluentui/theme/lib/utilities/makeSemanticColors.js","../../node_modules/@fluentui/theme/lib/mergeThemes.js","../../node_modules/@fluentui/theme/lib/colors/DefaultPalette.js","../../node_modules/@fluentui/theme/lib/effects/FluentDepths.js","../../node_modules/@fluentui/theme/lib/effects/DefaultEffects.js","../../node_modules/@fluentui/theme/lib/spacing/DefaultSpacing.js","../../node_modules/@fluentui/theme/lib/motion/AnimationStyles.js","../../node_modules/@fluentui/theme/lib/fonts/FluentFonts.js","../../node_modules/@fluentui/theme/lib/fonts/createFontStyles.js","../../node_modules/@fluentui/theme/lib/fonts/DefaultFontStyles.js","../../node_modules/@fluentui/theme/lib/createTheme.js","../../node_modules/@fluentui/style-utilities/lib/styles/CommonStyles.js","../../node_modules/@fluentui/style-utilities/lib/styles/zIndexes.js","../../node_modules/@fluentui/style-utilities/lib/styles/getFocusStyle.js","../../node_modules/@fluentui/style-utilities/lib/styles/hiddenContentStyle.js","../../node_modules/@fluentui/style-utilities/lib/styles/getGlobalClassNames.js","../../node_modules/@microsoft/load-themed-styles/lib-es6/index.js","../../node_modules/@fluentui/style-utilities/lib/styles/theme.js","../../node_modules/@fluentui/style-utilities/lib/styles/GeneralStyles.js","../../node_modules/@fluentui/style-utilities/lib/styles/getPlaceholderStyles.js","../../node_modules/@fluentui/style-utilities/lib/classNames/AnimationClassNames.js","../../node_modules/@fluentui/style-utilities/lib/version.js","../../node_modules/@fluentui/style-utilities/lib/index.js","../../node_modules/@fluentui/react/lib/common/DirectionalHint.js","../../node_modules/@fluentui/react/lib/utilities/positioning/positioning.types.js","../../node_modules/@fluentui/react/lib/utilities/positioning/positioning.js","../../node_modules/@fluentui/react-hooks/lib/useConst.js","../../node_modules/@fluentui/react-hooks/lib/useAsync.js","../../node_modules/@fluentui/react-hooks/lib/useBoolean.js","../../node_modules/@fluentui/react-hooks/lib/useControllableValue.js","../../node_modules/@fluentui/react-hooks/lib/useId.js","../../node_modules/@fluentui/react-hooks/lib/useMergedRefs.js","../../node_modules/@fluentui/react-hooks/lib/useOnEvent.js","../../node_modules/@fluentui/react-hooks/lib/usePrevious.js","../../node_modules/@fluentui/react-hooks/lib/useRefEffect.js","../../node_modules/@fluentui/react-hooks/lib/useSetTimeout.js","../../node_modules/@fluentui/react-window-provider/lib/WindowProvider.js","../../node_modules/@fluentui/react-hooks/lib/useTarget.js","../../node_modules/@fluentui/react-hooks/lib/useUnmount.js","../../node_modules/@fluentui/react/lib/components/Popup/Popup.js","../../node_modules/@fluentui/react/lib/components/Callout/CalloutContent.base.js","../../node_modules/@fluentui/react/lib/components/Callout/CalloutContent.styles.js","../../node_modules/@fluentui/react/lib/components/Callout/CalloutContent.js","../../node_modules/@fluentui/react/lib/components/Fabric/Fabric.base.js","../../node_modules/@fluentui/react/lib/components/Fabric/Fabric.styles.js","../../node_modules/@fluentui/react/lib/components/Fabric/Fabric.js","../../node_modules/@fluentui/react/lib/components/Layer/Layer.notification.js","../../node_modules/@fluentui/react/lib/components/Layer/Layer.base.js","../../node_modules/@fluentui/react/lib/components/Layer/Layer.styles.js","../../node_modules/@fluentui/react/lib/components/Layer/Layer.js","../../node_modules/@fluentui/react/lib/components/Callout/Callout.js","../../node_modules/@fluentui/react/lib/components/FocusTrapZone/FocusTrapZone.js","../../node_modules/@fluentui/react/lib/components/Tooltip/Tooltip.base.js","../../node_modules/@fluentui/react/lib/components/Tooltip/Tooltip.styles.js","../../node_modules/@fluentui/react/lib/components/Tooltip/Tooltip.js","../../node_modules/@fluentui/react/lib/components/Tooltip/Tooltip.types.js","../../node_modules/@fluentui/react/lib/components/Tooltip/TooltipHost.types.js","../../node_modules/@fluentui/react/lib/components/Tooltip/TooltipHost.base.js","../../node_modules/@fluentui/react/lib/components/Tooltip/TooltipHost.styles.js","../../node_modules/@fluentui/react/lib/components/Tooltip/TooltipHost.js","../../node_modules/@fluentui/react/lib/components/Icon/Icon.types.js","../../node_modules/@fluentui/react/lib/components/Image/Image.types.js","../../node_modules/@fluentui/react/lib/components/Image/Image.base.js","../../node_modules/@fluentui/react/lib/components/Image/Image.styles.js","../../node_modules/@fluentui/react/lib/components/Image/Image.js","../../node_modules/@fluentui/react/lib/components/Icon/Icon.styles.js","../../node_modules/@fluentui/react/lib/components/Icon/FontIcon.js","../../node_modules/@fluentui/react/lib/components/Icon/Icon.base.js","../../node_modules/@fluentui/react/lib/components/Icon/Icon.js","../../node_modules/@fluentui/react/lib/components/Icon/ImageIcon.js","../../node_modules/@fluentui/react-focus/lib/components/FocusZone/FocusZone.types.js","../../node_modules/@fluentui/react-focus/lib/components/FocusZone/FocusZone.js","../../node_modules/@fluentui/react/lib/components/Link/useLink.js","../../node_modules/@fluentui/react/lib/components/Link/Link.base.js","../../node_modules/@fluentui/react/lib/components/Link/Link.styles.js","../../node_modules/@fluentui/react/lib/components/Link/Link.js","../../node_modules/@fluentui/react/lib/components/ContextualMenu/ContextualMenu.types.js","../../node_modules/@fluentui/react/lib/utilities/contextualMenu/contextualMenuUtility.js","../../node_modules/@fluentui/react/lib/components/ContextualMenu/ContextualMenuItem.base.js","../../node_modules/@fluentui/react/lib/components/Divider/VerticalDivider.classNames.js","../../node_modules/@fluentui/react/lib/components/ContextualMenu/ContextualMenu.cnstyles.js","../../node_modules/@fluentui/react/lib/components/ContextualMenu/ContextualMenu.classNames.js","../../node_modules/@fluentui/react/lib/components/ContextualMenu/ContextualMenuItem.js","../../node_modules/@fluentui/react/lib/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.js","../../node_modules/@fluentui/react/lib/utilities/keytips/KeytipConstants.js","../../node_modules/@fluentui/react/lib/utilities/keytips/KeytipManager.js","../../node_modules/@fluentui/react/lib/utilities/keytips/KeytipUtils.js","../../node_modules/@fluentui/react/lib/components/KeytipData/useKeytipData.js","../../node_modules/@fluentui/react/lib/components/KeytipData/KeytipData.js","../../node_modules/@fluentui/react/lib/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.js","../../node_modules/@fluentui/react/lib/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.js","../../node_modules/@fluentui/react/lib/components/Divider/VerticalDivider.styles.js","../../node_modules/@fluentui/react/lib/components/Divider/VerticalDivider.base.js","../../node_modules/@fluentui/react/lib/components/Divider/VerticalDivider.js","../../node_modules/@fluentui/react/lib/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.js","../../node_modules/@fluentui/react/lib/utilities/decorators/BaseDecorator.js","../../node_modules/@fluentui/react/lib/utilities/decorators/withResponsiveMode.js","../../node_modules/@fluentui/react/lib/utilities/hooks/useResponsiveMode.js","../../node_modules/@fluentui/react/lib/utilities/MenuContext/MenuContext.js","../../node_modules/@fluentui/react/lib/components/ContextualMenu/ContextualMenu.base.js","../../node_modules/@fluentui/react/lib/components/ContextualMenu/ContextualMenu.styles.js","../../node_modules/@fluentui/react/lib/components/ContextualMenu/ContextualMenu.js","../../node_modules/@fluentui/react/lib/components/Button/BaseButton.classNames.js","../../node_modules/@fluentui/react/lib/components/Button/SplitButton/SplitButton.classNames.js","../../node_modules/@fluentui/react/lib/components/Button/BaseButton.js","../../node_modules/@fluentui/react/lib/components/Button/BaseButton.styles.js","../../node_modules/@fluentui/react/lib/components/Button/SplitButton/SplitButton.styles.js","../../node_modules/@fluentui/react/lib/components/Button/ButtonThemes.js","../../node_modules/@fluentui/react/lib/components/Button/DefaultButton/DefaultButton.styles.js","../../node_modules/@fluentui/react/lib/components/Button/DefaultButton/DefaultButton.js","../../node_modules/@fluentui/react/lib/components/Button/ActionButton/ActionButton.styles.js","../../node_modules/@fluentui/react/lib/components/Button/ActionButton/ActionButton.js","../../node_modules/@fluentui/react/lib/components/Button/IconButton/IconButton.styles.js","../../node_modules/@fluentui/react/lib/components/Button/IconButton/IconButton.js","../../node_modules/@fluentui/react/lib/components/Button/PrimaryButton/PrimaryButton.js","../../node_modules/@fluentui/react/lib/components/Button/CommandBarButton/CommandBarButton.styles.js","../../node_modules/@fluentui/react/lib/components/Button/CommandBarButton/CommandBarButton.js","../../node_modules/@fluentui/react/lib/components/Button/CommandButton/CommandButton.js","../../node_modules/@fluentui/react/lib/components/ResizeGroup/ResizeGroup.types.js","../../node_modules/@fluentui/react/lib/components/ResizeGroup/ResizeGroup.base.js","../../node_modules/@fluentui/react/lib/components/ResizeGroup/ResizeGroup.js","../../node_modules/@fluentui/react/lib/components/Check/Check.base.js","../../node_modules/@fluentui/react/lib/components/Check/Check.styles.js","../../node_modules/@fluentui/react/lib/components/Check/Check.js","../../node_modules/@fluentui/react/lib/components/Checkbox/Checkbox.base.js","../../node_modules/@fluentui/react/lib/components/Checkbox/Checkbox.styles.js","../../node_modules/@fluentui/react/lib/components/Checkbox/Checkbox.js","../../node_modules/@fluentui/react/lib/components/Label/Label.base.js","../../node_modules/@fluentui/react/lib/components/Label/Label.styles.js","../../node_modules/@fluentui/react/lib/components/Label/Label.js","../../node_modules/@fluentui/react/lib/components/TextField/TextField.base.js","../../node_modules/@fluentui/react/lib/components/TextField/TextField.styles.js","../../node_modules/@fluentui/react/lib/components/TextField/TextField.js","../../node_modules/@fluentui/react/lib/utilities/selectableOption/SelectableOption.js","../../node_modules/@fluentui/react/lib/utilities/selectableOption/SelectableOption.types.js","../../node_modules/@fluentui/react/lib/components/List/List.types.js","../../node_modules/@fluentui/react/lib/components/List/List.js","../../node_modules/@fluentui/react/lib/components/OverflowSet/OverflowButton.js","../../node_modules/@fluentui/react/lib/components/OverflowSet/OverflowSet.base.js","../../node_modules/@fluentui/react/lib/components/OverflowSet/OverflowSet.styles.js","../../node_modules/@fluentui/react/lib/components/OverflowSet/OverflowSet.js","../../node_modules/@fluentui/react/lib/components/CommandBar/CommandBar.styles.js","../../node_modules/@fluentui/react/lib/components/CommandBar/CommandBar.base.js","../../node_modules/@fluentui/react/lib/components/CommandBar/CommandBar.js","../../node_modules/@fluentui/react/lib/utilities/selection/SelectionZone.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupedList.types.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsList.types.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupSpacer.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupedList.styles.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsRow.styles.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsHeader.styles.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsRowCheck.styles.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupHeader.styles.js","../../node_modules/@fluentui/react/lib/components/Spinner/Spinner.types.js","../../node_modules/@fluentui/react/lib/components/Spinner/Spinner.base.js","../../node_modules/@fluentui/react/lib/components/Spinner/Spinner.styles.js","../../node_modules/@fluentui/react/lib/components/Spinner/Spinner.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupHeader.base.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupHeader.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupShowAll.styles.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupShowAll.base.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupShowAll.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupFooter.styles.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupFooter.base.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupFooter.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupedListSection.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupedList.base.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupedList.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsRowCheck.js","../../node_modules/@fluentui/react/lib/utilities/dragdrop/DragDropHelper.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsColumn.base.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsColumn.styles.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsColumn.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsHeader.types.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsHeader.base.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsHeader.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsRowFields.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsRow.base.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsRow.js","../../node_modules/@fluentui/react/lib/utilities/decorators/withViewport.js","../../node_modules/@fluentui/react/lib/utilities/groupedList/GroupedListUtility.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsList.base.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsList.styles.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsList.js","../../node_modules/@fluentui/react/lib/components/Dialog/DialogContent.types.js","../../node_modules/@fluentui/react/lib/components/Modal/Modal.styles.js","../../node_modules/@fluentui/react/lib/components/Overlay/Overlay.base.js","../../node_modules/@fluentui/react/lib/components/Overlay/Overlay.styles.js","../../node_modules/@fluentui/react/lib/components/Overlay/Overlay.js","../../node_modules/@fluentui/react/lib/utilities/DraggableZone/DraggableZone.styles.js","../../node_modules/@fluentui/react/lib/utilities/DraggableZone/DraggableZone.js","../../node_modules/@fluentui/react/lib/components/Modal/Modal.base.js","../../node_modules/@fluentui/react/lib/components/Modal/Modal.js","../../node_modules/@fluentui/react/lib/components/Dialog/DialogFooter.base.js","../../node_modules/@fluentui/react/lib/components/Dialog/DialogFooter.styles.js","../../node_modules/@fluentui/react/lib/components/Dialog/DialogFooter.js","../../node_modules/@fluentui/react/lib/components/Dialog/DialogContent.base.js","../../node_modules/@fluentui/react/lib/components/Dialog/DialogContent.styles.js","../../node_modules/@fluentui/react/lib/components/Dialog/DialogContent.js","../../node_modules/@fluentui/react/lib/components/Dialog/Dialog.base.js","../../node_modules/@fluentui/react/lib/components/Dialog/Dialog.styles.js","../../node_modules/@fluentui/react/lib/components/Dialog/Dialog.js","../../node_modules/@fluentui/react/lib/components/Dropdown/utilities/DropdownSizePosCache.js","../../node_modules/@fluentui/react/lib/components/Panel/Panel.types.js","../../node_modules/@fluentui/react/lib/components/Panel/Panel.base.js","../../node_modules/@fluentui/react/lib/components/Panel/Panel.styles.js","../../node_modules/@fluentui/react/lib/components/Panel/Panel.js","../../node_modules/@fluentui/react/lib/components/Dropdown/Dropdown.base.js","../../node_modules/@fluentui/react/lib/components/Dropdown/Dropdown.styles.js","../../node_modules/@fluentui/react/lib/components/Dropdown/Dropdown.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-0.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-1.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-2.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-3.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-4.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-5.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-6.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-7.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-8.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-9.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-10.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-11.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-12.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-13.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-14.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-15.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-16.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-17.js","../../node_modules/@fluentui/font-icons-mdl2/lib/iconAliases.js","../../node_modules/@fluentui/font-icons-mdl2/lib/version.js","../../node_modules/@fluentui/font-icons-mdl2/lib/index.js","../../node_modules/@fluentui/react/lib/utilities/observeResize.js","../../node_modules/@fluentui/react/lib/utilities/useOverflow.js","../../node_modules/@fluentui/react/lib/components/Pivot/PivotItem.js","../../node_modules/@fluentui/react/lib/components/Pivot/Pivot.base.js","../../node_modules/@fluentui/react/lib/components/Pivot/Pivot.styles.js","../../node_modules/@fluentui/react/lib/components/Pivot/Pivot.js","../../node_modules/@fluentui/react/lib/components/Separator/Separator.base.js","../../node_modules/@fluentui/react/lib/components/Separator/Separator.styles.js","../../node_modules/@fluentui/react/lib/components/Separator/Separator.js","../../node_modules/@fluentui/react/lib/components/SpinButton/SpinButton.styles.js","../../node_modules/@fluentui/react/lib/components/SpinButton/SpinButton.types.js","../../node_modules/@fluentui/react/lib/components/SpinButton/SpinButton.base.js","../../node_modules/@fluentui/react/lib/components/SpinButton/SpinButton.js","../../node_modules/@fluentui/foundation-legacy/lib/utilities.js","../../node_modules/@fluentui/foundation-legacy/lib/slots.js","../../node_modules/@fluentui/foundation-legacy/lib/createComponent.js","../../node_modules/@fluentui/react/lib/components/Stack/StackItem/StackItem.styles.js","../../node_modules/@fluentui/react/lib/components/Stack/StackItem/StackItem.js","../../node_modules/@fluentui/react/lib/components/Stack/StackUtils.js","../../node_modules/@fluentui/react/lib/components/Stack/Stack.styles.js","../../node_modules/@fluentui/react/lib/components/Stack/Stack.js","../../node_modules/@fluentui/react/lib/components/Text/Text.view.js","../../node_modules/@fluentui/react/lib/components/Text/Text.styles.js","../../node_modules/@fluentui/react/lib/components/Text/Text.js","../../node_modules/@fluentui/react/lib/utilities/ThemeProvider/ThemeContext.js","../../node_modules/@fluentui/react/lib/utilities/ThemeProvider/useTheme.js","../../node_modules/@fluentui/react/lib/utilities/ThemeProvider/styleRenderers/mergeStylesRenderer.js","../../node_modules/@fluentui/react/lib/utilities/ThemeProvider/makeStyles.js","../../node_modules/@fluentui/react/lib/utilities/ThemeProvider/useThemeProviderClasses.js","../../node_modules/@fluentui/react/lib/utilities/ThemeProvider/renderThemeProvider.js","../../node_modules/@fluentui/react/lib/utilities/ThemeProvider/useThemeProviderState.js","../../node_modules/@fluentui/react/lib/utilities/ThemeProvider/useThemeProvider.js","../../node_modules/@fluentui/react/lib/utilities/ThemeProvider/ThemeProvider.js","../../node_modules/mobx-sync/node_modules/tslib/tslib.es6.js","../../node_modules/mobx/dist/mobx.esm.js","../../node_modules/mobx-sync/dist/mobx-sync.esm.js","../../node_modules/mobx-react-lite/es/utils/assertEnvironment.js","../../node_modules/mobx-react-lite/es/utils/observerBatching.js","../../node_modules/mobx-react-lite/es/utils/printDebugValue.js","../../node_modules/mobx-react-lite/es/utils/FinalizationRegistryWrapper.js","../../node_modules/mobx-react-lite/es/utils/reactionCleanupTrackingCommon.js","../../node_modules/mobx-react-lite/es/utils/createReactionCleanupTrackingUsingFinalizationRegister.js","../../node_modules/mobx-react-lite/es/utils/createTimerBasedReactionCleanupTracking.js","../../node_modules/mobx-react-lite/es/utils/reactionCleanupTracking.js","../../node_modules/mobx-react-lite/es/useObserver.js","../../node_modules/mobx-react-lite/es/observer.js","../../node_modules/mobx-react-lite/es/useAsObservableSource.js","../../node_modules/mobx-react-lite/es/index.js","../../node_modules/he/he.js","../../node_modules/react/cjs/react-jsx-runtime.production.min.js","../../node_modules/react/jsx-runtime.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.1\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.1\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--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __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}\r\n\r\nexport function __generator(thisArg, body) {\r\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n function verb(n) { return function (v) { return step([n, v]); }; }\r\n function step(op) {\r\n if (f) throw new TypeError(\"Generator is already executing.\");\r\n while (_) try {\r\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;\r\n if (y = 0, t) op = [op[0] & 2, t.value];\r\n switch (op[0]) {\r\n case 0: case 1: t = op; break;\r\n case 4: _.label++; return { value: op[1], done: false };\r\n case 5: _.label++; y = op[1]; op = [0]; continue;\r\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n default:\r\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n if (t[2]) _.ops.pop();\r\n _.trys.pop(); continue;\r\n }\r\n op = body.call(thisArg, _);\r\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n }\r\n}\r\n\r\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });\r\n}) : (function(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n o[k2] = m[k];\r\n});\r\n\r\nexport function __exportStar(m, o) {\r\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\r\n}\r\n\r\nexport function __values(o) {\r\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n if (m) return m.call(o);\r\n if (o && typeof o.length === \"number\") return {\r\n next: function () {\r\n if (o && i >= o.length) o = void 0;\r\n return { value: o && o[i++], done: !o };\r\n }\r\n };\r\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n if (!m) return o;\r\n var i = m.call(o), r, ar = [], e;\r\n try {\r\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n }\r\n catch (error) { e = { error: error }; }\r\n finally {\r\n try {\r\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n }\r\n finally { if (e) throw e.error; }\r\n }\r\n return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spread() {\r\n for (var ar = [], i = 0; i < arguments.length; i++)\r\n ar = ar.concat(__read(arguments[i]));\r\n return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spreadArrays() {\r\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n r[k] = a[j];\r\n return r;\r\n}\r\n\r\nexport function __spreadArray(to, from, pack) {\r\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\r\n if (ar || !(i in from)) {\r\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\r\n ar[i] = from[i];\r\n }\r\n }\r\n return to.concat(ar || Array.prototype.slice.call(from));\r\n}\r\n\r\nexport function __await(v) {\r\n return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\r\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n function fulfill(value) { resume(\"next\", value); }\r\n function reject(value) { resume(\"throw\", value); }\r\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n var i, p;\r\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === \"return\" } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var m = o[Symbol.asyncIterator], i;\r\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);\r\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); }); }; }\r\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n return cooked;\r\n};\r\n\r\nvar __setModuleDefault = Object.create ? (function(o, v) {\r\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\r\n}) : function(o, v) {\r\n o[\"default\"] = v;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n if (mod && mod.__esModule) return mod;\r\n var result = {};\r\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\r\n __setModuleDefault(result, mod);\r\n return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\r\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\r\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\");\r\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\r\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\r\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\r\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\");\r\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\r\n}\r\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\nvar packagesCache = {};\n// Cache access to window to avoid IE11 memory leak.\nvar _win = undefined;\ntry {\n _win = window;\n}\ncatch (e) {\n /* no-op */\n}\nexport function setVersion(packageName, packageVersion) {\n if (typeof _win !== 'undefined') {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var packages = (_win.__packages__ = _win.__packages__ || {});\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 var versions = (packages[packageName] = packages[packageName] || []);\n versions.push(packageVersion);\n }\n }\n}\n//# sourceMappingURL=setVersion.js.map","import { setVersion } from './setVersion';\nexport { setVersion };\nsetVersion('@fluentui/set-version', '6.0.0');\n//# sourceMappingURL=index.js.map","import { __assign } from \"tslib\";\nexport var InjectionMode = {\n /**\n * Avoids style injection, use getRules() to read the styles.\n */\n none: 0,\n /**\n * Inserts rules using the insertRule api.\n */\n insertNode: 1,\n /**\n * Appends rules using appendChild.\n */\n appendChild: 2,\n};\nvar STYLESHEET_SETTING = '__stylesheet__';\n/**\n * MSIE 11 doesn't cascade styles based on DOM ordering, but rather on the order that each style node\n * is created. As such, to maintain consistent priority, IE11 should reuse a single style node.\n */\nvar REUSE_STYLE_NODE = typeof navigator !== 'undefined' && /rv:11.0/.test(navigator.userAgent);\nvar _global = {};\n// Grab window.\ntry {\n _global = window || {};\n}\ncatch (_a) {\n /* leave as blank object */\n}\nvar _stylesheet;\n/**\n * Represents the state of styles registered in the page. Abstracts\n * the surface for adding styles to the stylesheet, exposes helpers\n * for reading the styles registered in server rendered scenarios.\n *\n * @public\n */\nvar Stylesheet = /** @class */ (function () {\n function Stylesheet(config, serializedStylesheet) {\n var _a, _b, _c, _d, _e, _f;\n this._rules = [];\n this._preservedRules = [];\n this._counter = 0;\n this._keyToClassName = {};\n this._onInsertRuleCallbacks = [];\n this._onResetCallbacks = [];\n this._classNameToArgs = {};\n this._config = __assign({ \n // If there is no document we won't have an element to inject into.\n injectionMode: typeof document === 'undefined' ? InjectionMode.none : InjectionMode.insertNode, defaultPrefix: 'css', namespace: undefined, cspSettings: undefined }, config);\n this._classNameToArgs = (_a = serializedStylesheet === null || serializedStylesheet === void 0 ? void 0 : serializedStylesheet.classNameToArgs) !== null && _a !== void 0 ? _a : this._classNameToArgs;\n this._counter = (_b = serializedStylesheet === null || serializedStylesheet === void 0 ? void 0 : serializedStylesheet.counter) !== null && _b !== void 0 ? _b : this._counter;\n this._keyToClassName = (_d = (_c = this._config.classNameCache) !== null && _c !== void 0 ? _c : serializedStylesheet === null || serializedStylesheet === void 0 ? void 0 : serializedStylesheet.keyToClassName) !== null && _d !== void 0 ? _d : this._keyToClassName;\n this._preservedRules = (_e = serializedStylesheet === null || serializedStylesheet === void 0 ? void 0 : serializedStylesheet.preservedRules) !== null && _e !== void 0 ? _e : this._preservedRules;\n this._rules = (_f = serializedStylesheet === null || serializedStylesheet === void 0 ? void 0 : serializedStylesheet.rules) !== null && _f !== void 0 ? _f : this._rules;\n }\n /**\n * Gets the singleton instance.\n */\n Stylesheet.getInstance = function () {\n _stylesheet = _global[STYLESHEET_SETTING];\n if (!_stylesheet || (_stylesheet._lastStyleElement && _stylesheet._lastStyleElement.ownerDocument !== document)) {\n var fabricConfig = (_global === null || _global === void 0 ? void 0 : _global.FabricConfig) || {};\n var stylesheet = new Stylesheet(fabricConfig.mergeStyles, fabricConfig.serializedStylesheet);\n _stylesheet = stylesheet;\n _global[STYLESHEET_SETTING] = stylesheet;\n }\n return _stylesheet;\n };\n /**\n * Serializes the Stylesheet instance into a format which allows rehydration on creation.\n * @returns string representation of `ISerializedStylesheet` interface.\n */\n Stylesheet.prototype.serialize = function () {\n return JSON.stringify({\n classNameToArgs: this._classNameToArgs,\n counter: this._counter,\n keyToClassName: this._keyToClassName,\n preservedRules: this._preservedRules,\n rules: this._rules,\n });\n };\n /**\n * Configures the stylesheet.\n */\n Stylesheet.prototype.setConfig = function (config) {\n this._config = __assign(__assign({}, this._config), config);\n };\n /**\n * Configures a reset callback.\n *\n * @param callback - A callback which will be called when the Stylesheet is reset.\n * @returns function which when called un-registers provided callback.\n */\n Stylesheet.prototype.onReset = function (callback) {\n var _this = this;\n this._onResetCallbacks.push(callback);\n return function () {\n _this._onResetCallbacks = _this._onResetCallbacks.filter(function (cb) { return cb !== callback; });\n };\n };\n /**\n * Configures an insert rule callback.\n *\n * @param callback - A callback which will be called when a rule is inserted.\n * @returns function which when called un-registers provided callback.\n */\n Stylesheet.prototype.onInsertRule = function (callback) {\n var _this = this;\n this._onInsertRuleCallbacks.push(callback);\n return function () {\n _this._onInsertRuleCallbacks = _this._onInsertRuleCallbacks.filter(function (cb) { return cb !== callback; });\n };\n };\n /**\n * Generates a unique classname.\n *\n * @param displayName - Optional value to use as a prefix.\n */\n Stylesheet.prototype.getClassName = function (displayName) {\n var namespace = this._config.namespace;\n var prefix = displayName || this._config.defaultPrefix;\n return \"\" + (namespace ? namespace + '-' : '') + prefix + \"-\" + this._counter++;\n };\n /**\n * Used internally to cache information about a class which was\n * registered with the stylesheet.\n */\n Stylesheet.prototype.cacheClassName = function (className, key, args, rules) {\n this._keyToClassName[key] = className;\n this._classNameToArgs[className] = {\n args: args,\n rules: rules,\n };\n };\n /**\n * Gets the appropriate classname given a key which was previously\n * registered using cacheClassName.\n */\n Stylesheet.prototype.classNameFromKey = function (key) {\n return this._keyToClassName[key];\n };\n /**\n * Gets all classnames cache with the stylesheet.\n */\n Stylesheet.prototype.getClassNameCache = function () {\n return this._keyToClassName;\n };\n /**\n * Gets the arguments associated with a given classname which was\n * previously registered using cacheClassName.\n */\n Stylesheet.prototype.argsFromClassName = function (className) {\n var entry = this._classNameToArgs[className];\n return entry && entry.args;\n };\n /**\n * Gets the rules associated with a given classname which was\n * previously registered using cacheClassName.\n */\n Stylesheet.prototype.insertedRulesFromClassName = function (className) {\n var entry = this._classNameToArgs[className];\n return entry && entry.rules;\n };\n /**\n * Inserts a css rule into the stylesheet.\n * @param preserve - Preserves the rule beyond a reset boundary.\n */\n Stylesheet.prototype.insertRule = function (rule, preserve) {\n var injectionMode = this._config.injectionMode;\n var element = injectionMode !== InjectionMode.none ? this._getStyleElement() : undefined;\n if (preserve) {\n this._preservedRules.push(rule);\n }\n if (element) {\n switch (injectionMode) {\n case InjectionMode.insertNode:\n var sheet = element.sheet;\n try {\n sheet.insertRule(rule, sheet.cssRules.length);\n }\n catch (e) {\n // The browser will throw exceptions on unsupported rules (such as a moz prefix in webkit.)\n // We need to swallow the exceptions for this scenario, otherwise we'd need to filter\n // which could be slower and bulkier.\n }\n break;\n case InjectionMode.appendChild:\n element.appendChild(document.createTextNode(rule));\n break;\n }\n }\n else {\n this._rules.push(rule);\n }\n // eslint-disable-next-line deprecation/deprecation\n if (this._config.onInsertRule) {\n // eslint-disable-next-line deprecation/deprecation\n this._config.onInsertRule(rule);\n }\n this._onInsertRuleCallbacks.forEach(function (callback) { return callback(); });\n };\n /**\n * Gets all rules registered with the stylesheet; only valid when\n * using InsertionMode.none.\n */\n Stylesheet.prototype.getRules = function (includePreservedRules) {\n return (includePreservedRules ? this._preservedRules.join('') : '') + this._rules.join('');\n };\n /**\n * Resets the internal state of the stylesheet. Only used in server\n * rendered scenarios where we're using InsertionMode.none.\n */\n Stylesheet.prototype.reset = function () {\n this._rules = [];\n this._counter = 0;\n this._classNameToArgs = {};\n this._keyToClassName = {};\n this._onResetCallbacks.forEach(function (callback) { return callback(); });\n };\n // Forces the regeneration of incoming styles without totally resetting the stylesheet.\n Stylesheet.prototype.resetKeys = function () {\n this._keyToClassName = {};\n };\n Stylesheet.prototype._getStyleElement = function () {\n var _this = this;\n if (!this._styleElement && typeof document !== 'undefined') {\n this._styleElement = this._createStyleElement();\n if (!REUSE_STYLE_NODE) {\n // Reset the style element on the next frame.\n window.requestAnimationFrame(function () {\n _this._styleElement = undefined;\n });\n }\n }\n return this._styleElement;\n };\n Stylesheet.prototype._createStyleElement = function () {\n var head = document.head;\n var styleElement = document.createElement('style');\n var nodeToInsertBefore = null;\n styleElement.setAttribute('data-merge-styles', 'true');\n var cspSettings = this._config.cspSettings;\n if (cspSettings) {\n if (cspSettings.nonce) {\n styleElement.setAttribute('nonce', cspSettings.nonce);\n }\n }\n if (this._lastStyleElement) {\n // If the `nextElementSibling` is null, then the insertBefore will act as a regular append.\n // https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore#Syntax\n nodeToInsertBefore = this._lastStyleElement.nextElementSibling;\n }\n else {\n var placeholderStyleTag = this._findPlaceholderStyleTag();\n if (placeholderStyleTag) {\n nodeToInsertBefore = placeholderStyleTag.nextElementSibling;\n }\n else {\n nodeToInsertBefore = head.childNodes[0];\n }\n }\n head.insertBefore(styleElement, head.contains(nodeToInsertBefore) ? nodeToInsertBefore : null);\n this._lastStyleElement = styleElement;\n return styleElement;\n };\n Stylesheet.prototype._findPlaceholderStyleTag = function () {\n var head = document.head;\n if (head) {\n return head.querySelector('style[data-merge-styles]');\n }\n return null;\n };\n return Stylesheet;\n}());\nexport { Stylesheet };\n//# sourceMappingURL=Stylesheet.js.map","import { Stylesheet } from './Stylesheet';\n/**\n * Separates the classes and style objects. Any classes that are pre-registered\n * args are auto expanded into objects.\n */\nexport function extractStyleParts() {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n var classes = [];\n var objects = [];\n var stylesheet = Stylesheet.getInstance();\n function _processArgs(argsList) {\n for (var _i = 0, argsList_1 = argsList; _i < argsList_1.length; _i++) {\n var arg = argsList_1[_i];\n if (arg) {\n if (typeof arg === 'string') {\n if (arg.indexOf(' ') >= 0) {\n _processArgs(arg.split(' '));\n }\n else {\n var translatedArgs = stylesheet.argsFromClassName(arg);\n if (translatedArgs) {\n _processArgs(translatedArgs);\n }\n else {\n // Avoid adding the same class twice.\n if (classes.indexOf(arg) === -1) {\n classes.push(arg);\n }\n }\n }\n }\n else if (Array.isArray(arg)) {\n _processArgs(arg);\n }\n else if (typeof arg === 'object') {\n objects.push(arg);\n }\n }\n }\n }\n _processArgs(args);\n return {\n classes: classes,\n objects: objects,\n };\n}\n//# sourceMappingURL=extractStyleParts.js.map","/**\n * Sets the current RTL value.\n */\nexport function setRTL(isRTL) {\n if (_rtl !== isRTL) {\n _rtl = isRTL;\n }\n}\n/**\n * Gets the current RTL value.\n */\nexport function getRTL() {\n if (_rtl === undefined) {\n _rtl =\n typeof document !== 'undefined' &&\n !!document.documentElement &&\n document.documentElement.getAttribute('dir') === 'rtl';\n }\n return _rtl;\n}\n// This has been split into 2 lines because it was working in Fabric due to the code being transpiled to es5, so this\n// was converted to var while not working in Fluent that uses babel to transpile the code to be es6-like. Splitting the\n// logic into two lines, however, allows it to work in both scenarios.\nvar _rtl;\n_rtl = getRTL();\nexport function getStyleOptions() {\n return {\n rtl: getRTL(),\n };\n}\n//# sourceMappingURL=StyleOptionsState.js.map","var rules = {};\nexport function kebabRules(rulePairs, index) {\n var rule = rulePairs[index];\n if (rule.charAt(0) !== '-') {\n rulePairs[index] = rules[rule] = rules[rule] || rule.replace(/([A-Z])/g, '-$1').toLowerCase();\n }\n}\n//# sourceMappingURL=kebabRules.js.map","var _vendorSettings;\nexport function getVendorSettings() {\n var _a;\n if (!_vendorSettings) {\n var doc = typeof document !== 'undefined' ? document : undefined;\n var nav = typeof navigator !== 'undefined' ? navigator : undefined;\n var userAgent = (_a = nav === null || nav === void 0 ? void 0 : nav.userAgent) === null || _a === void 0 ? void 0 : _a.toLowerCase();\n if (!doc) {\n _vendorSettings = {\n isWebkit: true,\n isMoz: true,\n isOpera: true,\n isMs: true,\n };\n }\n else {\n _vendorSettings = {\n isWebkit: !!(doc && 'WebkitAppearance' in doc.documentElement.style),\n isMoz: !!(userAgent && userAgent.indexOf('firefox') > -1),\n isOpera: !!(userAgent && userAgent.indexOf('opera') > -1),\n isMs: !!(nav && (/rv:11.0/i.test(nav.userAgent) || /Edge\\/\\d./i.test(navigator.userAgent))),\n };\n }\n }\n return _vendorSettings;\n}\n/**\n * Sets the vendor settings for prefixing and vendor specific operations.\n */\nexport function setVendorSettings(vendorSettings) {\n _vendorSettings = vendorSettings;\n}\n//# sourceMappingURL=getVendorSettings.js.map","import { getVendorSettings } from '../getVendorSettings';\nvar autoPrefixNames = {\n 'user-select': 1,\n};\nexport function prefixRules(rulePairs, index) {\n var vendorSettings = getVendorSettings();\n var name = rulePairs[index];\n if (autoPrefixNames[name]) {\n var value = rulePairs[index + 1];\n if (autoPrefixNames[name]) {\n if (vendorSettings.isWebkit) {\n rulePairs.push('-webkit-' + name, value);\n }\n if (vendorSettings.isMoz) {\n rulePairs.push('-moz-' + name, value);\n }\n if (vendorSettings.isMs) {\n rulePairs.push('-ms-' + name, value);\n }\n if (vendorSettings.isOpera) {\n rulePairs.push('-o-' + name, value);\n }\n }\n }\n}\n//# sourceMappingURL=prefixRules.js.map","var NON_PIXEL_NUMBER_PROPS = [\n 'column-count',\n 'font-weight',\n 'flex',\n 'flex-grow',\n 'flex-shrink',\n 'fill-opacity',\n 'opacity',\n 'order',\n 'z-index',\n 'zoom',\n];\nexport function provideUnits(rulePairs, index) {\n var name = rulePairs[index];\n var value = rulePairs[index + 1];\n if (typeof value === 'number') {\n var isNonPixelProp = NON_PIXEL_NUMBER_PROPS.indexOf(name) > -1;\n var isVariableOrPrefixed = name.indexOf('--') > -1;\n var unit = isNonPixelProp || isVariableOrPrefixed ? '' : 'px';\n rulePairs[index + 1] = \"\" + value + unit;\n }\n}\n//# sourceMappingURL=provideUnits.js.map","var _a;\nvar LEFT = 'left';\nvar RIGHT = 'right';\nvar NO_FLIP = '@noflip';\nvar NAME_REPLACEMENTS = (_a = {},\n _a[LEFT] = RIGHT,\n _a[RIGHT] = LEFT,\n _a);\nvar VALUE_REPLACEMENTS = {\n 'w-resize': 'e-resize',\n 'sw-resize': 'se-resize',\n 'nw-resize': 'ne-resize',\n};\n/**\n * RTLifies the rulePair in the array at the current index. This mutates the array for performance\n * reasons.\n */\nexport function rtlifyRules(options, rulePairs, index) {\n if (options.rtl) {\n var name_1 = rulePairs[index];\n if (!name_1) {\n return;\n }\n var value = rulePairs[index + 1];\n if (typeof value === 'string' && value.indexOf(NO_FLIP) >= 0) {\n rulePairs[index + 1] = value.replace(/\\s*(?:\\/\\*\\s*)?\\@noflip\\b(?:\\s*\\*\\/)?\\s*?/g, '');\n }\n else if (name_1.indexOf(LEFT) >= 0) {\n rulePairs[index] = name_1.replace(LEFT, RIGHT);\n }\n else if (name_1.indexOf(RIGHT) >= 0) {\n rulePairs[index] = name_1.replace(RIGHT, LEFT);\n }\n else if (String(value).indexOf(LEFT) >= 0) {\n rulePairs[index + 1] = value.replace(LEFT, RIGHT);\n }\n else if (String(value).indexOf(RIGHT) >= 0) {\n rulePairs[index + 1] = value.replace(RIGHT, LEFT);\n }\n else if (NAME_REPLACEMENTS[name_1]) {\n rulePairs[index] = NAME_REPLACEMENTS[name_1];\n }\n else if (VALUE_REPLACEMENTS[value]) {\n rulePairs[index + 1] = VALUE_REPLACEMENTS[value];\n }\n else {\n switch (name_1) {\n case 'margin':\n case 'padding':\n rulePairs[index + 1] = flipQuad(value);\n break;\n case 'box-shadow':\n rulePairs[index + 1] = negateNum(value, 0);\n break;\n }\n }\n }\n}\n/**\n * Given a string value in a space delimited format (e.g. \"1 2 3 4\"), negates a particular value.\n */\nfunction negateNum(value, partIndex) {\n var parts = value.split(' ');\n var numberVal = parseInt(parts[partIndex], 10);\n parts[0] = parts[0].replace(String(numberVal), String(numberVal * -1));\n return parts.join(' ');\n}\n/**\n * Given a string quad, flips the left and right values.\n */\nfunction flipQuad(value) {\n if (typeof value === 'string') {\n var parts = value.split(' ');\n if (parts.length === 4) {\n return parts[0] + \" \" + parts[3] + \" \" + parts[2] + \" \" + parts[1];\n }\n }\n return value;\n}\n//# sourceMappingURL=rtlifyRules.js.map","/**\n * Split a string into tokens separated by whitespace, except all text within parentheses\n * is treated as a single token (whitespace is ignored within parentheses).\n *\n * Unlike String.split(' '), multiple consecutive space characters are collapsed and\n * removed from the returned array (including leading and trailing spaces).\n *\n * For example:\n * `tokenizeWithParentheses(\"3px calc(var(--x) / 2) 9px 0 \")`\n * => `[\"3px\", \"calc(var(--x) / 2)\", \"9px\", \"0\"]`\n *\n * @returns The array of tokens. Returns an empty array if the string was empty or contained only whitespace.\n */\nexport function tokenizeWithParentheses(value) {\n var parts = [];\n var partStart = 0;\n var parens = 0;\n for (var i = 0; i < value.length; i++) {\n switch (value[i]) {\n case '(':\n parens++;\n break;\n case ')':\n if (parens) {\n parens--;\n }\n break;\n case '\\t':\n case ' ':\n if (!parens) {\n // Add the new part if it's not an empty string\n if (i > partStart) {\n parts.push(value.substring(partStart, i));\n }\n partStart = i + 1;\n }\n break;\n }\n }\n // Add the last part\n if (partStart < value.length) {\n parts.push(value.substring(partStart));\n }\n return parts;\n}\n//# sourceMappingURL=tokenizeWithParentheses.js.map","import { __spreadArray } from \"tslib\";\nimport { Stylesheet } from './Stylesheet';\nimport { kebabRules } from './transforms/kebabRules';\nimport { prefixRules } from './transforms/prefixRules';\nimport { provideUnits } from './transforms/provideUnits';\nimport { rtlifyRules } from './transforms/rtlifyRules';\nimport { tokenizeWithParentheses } from './tokenizeWithParentheses';\nvar DISPLAY_NAME = 'displayName';\nfunction getDisplayName(rules) {\n var rootStyle = rules && rules['&'];\n return rootStyle ? rootStyle.displayName : undefined;\n}\nvar globalSelectorRegExp = /\\:global\\((.+?)\\)/g;\n/**\n * Finds comma separated selectors in a :global() e.g. \":global(.class1, .class2, .class3)\"\n * and wraps them each in their own global \":global(.class1), :global(.class2), :global(.class3)\"\n *\n * @param selectorWithGlobals The selector to process\n * @returns The updated selector\n */\nfunction expandCommaSeparatedGlobals(selectorWithGlobals) {\n // We the selector does not have a :global() we can shortcut\n if (!globalSelectorRegExp.test(selectorWithGlobals)) {\n return selectorWithGlobals;\n }\n var replacementInfo = [];\n var findGlobal = /\\:global\\((.+?)\\)/g;\n var match = null;\n // Create a result list for global selectors so we can replace them.\n while ((match = findGlobal.exec(selectorWithGlobals))) {\n // Only if the found selector is a comma separated list we'll process it.\n if (match[1].indexOf(',') > -1) {\n replacementInfo.push([\n match.index,\n match.index + match[0].length,\n // Wrap each of the found selectors in :global()\n match[1]\n .split(',')\n .map(function (v) { return \":global(\" + v.trim() + \")\"; })\n .join(', '),\n ]);\n }\n }\n // Replace the found selectors with their wrapped variants in reverse order\n return replacementInfo\n .reverse()\n .reduce(function (selector, _a) {\n var matchIndex = _a[0], matchEndIndex = _a[1], replacement = _a[2];\n var prefix = selector.slice(0, matchIndex);\n var suffix = selector.slice(matchEndIndex);\n return prefix + replacement + suffix;\n }, selectorWithGlobals);\n}\nfunction expandSelector(newSelector, currentSelector) {\n if (newSelector.indexOf(':global(') >= 0) {\n return newSelector.replace(globalSelectorRegExp, '$1');\n }\n else if (newSelector.indexOf(':') === 0) {\n return currentSelector + newSelector;\n }\n else if (newSelector.indexOf('&') < 0) {\n return currentSelector + ' ' + newSelector;\n }\n return newSelector;\n}\nfunction extractSelector(currentSelector, rules, selector, value) {\n if (rules === void 0) { rules = { __order: [] }; }\n if (selector.indexOf('@') === 0) {\n selector = selector + '{' + currentSelector;\n extractRules([value], rules, selector);\n }\n else if (selector.indexOf(',') > -1) {\n expandCommaSeparatedGlobals(selector)\n .split(',')\n .map(function (s) { return s.trim(); })\n .forEach(function (separatedSelector) {\n return extractRules([value], rules, expandSelector(separatedSelector, currentSelector));\n });\n }\n else {\n extractRules([value], rules, expandSelector(selector, currentSelector));\n }\n}\nfunction extractRules(args, rules, currentSelector) {\n if (rules === void 0) { rules = { __order: [] }; }\n if (currentSelector === void 0) { currentSelector = '&'; }\n var stylesheet = Stylesheet.getInstance();\n var currentRules = rules[currentSelector];\n if (!currentRules) {\n currentRules = {};\n rules[currentSelector] = currentRules;\n rules.__order.push(currentSelector);\n }\n for (var _i = 0, args_1 = args; _i < args_1.length; _i++) {\n var arg = args_1[_i];\n // If the arg is a string, we need to look up the class map and merge.\n if (typeof arg === 'string') {\n var expandedRules = stylesheet.argsFromClassName(arg);\n if (expandedRules) {\n extractRules(expandedRules, rules, currentSelector);\n }\n // Else if the arg is an array, we need to recurse in.\n }\n else if (Array.isArray(arg)) {\n extractRules(arg, rules, currentSelector);\n }\n else {\n for (var prop in arg) {\n if (arg.hasOwnProperty(prop)) {\n var propValue = arg[prop];\n if (prop === 'selectors') {\n // every child is a selector.\n var selectors = arg.selectors;\n for (var newSelector in selectors) {\n if (selectors.hasOwnProperty(newSelector)) {\n extractSelector(currentSelector, rules, newSelector, selectors[newSelector]);\n }\n }\n }\n else if (typeof propValue === 'object') {\n // prop is a selector.\n if (propValue !== null) {\n extractSelector(currentSelector, rules, prop, propValue);\n }\n }\n else {\n if (propValue !== undefined) {\n // Else, add the rule to the currentSelector.\n if (prop === 'margin' || prop === 'padding') {\n expandQuads(currentRules, prop, propValue);\n }\n else {\n currentRules[prop] = propValue;\n }\n }\n }\n }\n }\n }\n }\n return rules;\n}\nfunction expandQuads(currentRules, name, value) {\n var parts = typeof value === 'string' ? tokenizeWithParentheses(value) : [value];\n if (parts.length === 0) {\n parts.push(value);\n }\n if (parts[parts.length - 1] === '!important') {\n // Remove !important from parts, and append it to each part individually\n parts = parts.slice(0, -1).map(function (p) { return p + ' !important'; });\n }\n currentRules[name + 'Top'] = parts[0];\n currentRules[name + 'Right'] = parts[1] || parts[0];\n currentRules[name + 'Bottom'] = parts[2] || parts[0];\n currentRules[name + 'Left'] = parts[3] || parts[1] || parts[0];\n}\nfunction getKeyForRules(options, rules) {\n var serialized = [options.rtl ? 'rtl' : 'ltr'];\n var hasProps = false;\n for (var _i = 0, _a = rules.__order; _i < _a.length; _i++) {\n var selector = _a[_i];\n serialized.push(selector);\n var rulesForSelector = rules[selector];\n for (var propName in rulesForSelector) {\n if (rulesForSelector.hasOwnProperty(propName) && rulesForSelector[propName] !== undefined) {\n hasProps = true;\n serialized.push(propName, rulesForSelector[propName]);\n }\n }\n }\n return hasProps ? serialized.join('') : undefined;\n}\nfunction repeatString(target, count) {\n if (count <= 0) {\n return '';\n }\n if (count === 1) {\n return target;\n }\n return target + repeatString(target, count - 1);\n}\nexport function serializeRuleEntries(options, ruleEntries) {\n if (!ruleEntries) {\n return '';\n }\n var allEntries = [];\n for (var entry in ruleEntries) {\n if (ruleEntries.hasOwnProperty(entry) && entry !== DISPLAY_NAME && ruleEntries[entry] !== undefined) {\n allEntries.push(entry, ruleEntries[entry]);\n }\n }\n // Apply transforms.\n for (var i = 0; i < allEntries.length; i += 2) {\n kebabRules(allEntries, i);\n provideUnits(allEntries, i);\n rtlifyRules(options, allEntries, i);\n prefixRules(allEntries, i);\n }\n // Apply punctuation.\n for (var i = 1; i < allEntries.length; i += 4) {\n allEntries.splice(i, 1, ':', allEntries[i], ';');\n }\n return allEntries.join('');\n}\nexport function styleToRegistration(options) {\n var args = [];\n for (var _i = 1; _i < arguments.length; _i++) {\n args[_i - 1] = arguments[_i];\n }\n var rules = extractRules(args);\n var key = getKeyForRules(options, rules);\n if (key) {\n var stylesheet = Stylesheet.getInstance();\n var registration = {\n className: stylesheet.classNameFromKey(key),\n key: key,\n args: args,\n };\n if (!registration.className) {\n registration.className = stylesheet.getClassName(getDisplayName(rules));\n var rulesToInsert = [];\n for (var _a = 0, _b = rules.__order; _a < _b.length; _a++) {\n var selector = _b[_a];\n rulesToInsert.push(selector, serializeRuleEntries(options, rules[selector]));\n }\n registration.rulesToInsert = rulesToInsert;\n }\n return registration;\n }\n return undefined;\n}\n/**\n * Insert style to stylesheet.\n * @param registration Style registration.\n * @param specificityMultiplier Number of times classname selector is repeated in the css rule.\n * This is to increase css specificity in case it's needed. Default to 1.\n */\nexport function applyRegistration(registration, specificityMultiplier) {\n if (specificityMultiplier === void 0) { specificityMultiplier = 1; }\n var stylesheet = Stylesheet.getInstance();\n var className = registration.className, key = registration.key, args = registration.args, rulesToInsert = registration.rulesToInsert;\n if (rulesToInsert) {\n // rulesToInsert is an ordered array of selector/rule pairs.\n for (var i = 0; i < rulesToInsert.length; i += 2) {\n var rules = rulesToInsert[i + 1];\n if (rules) {\n var selector = rulesToInsert[i];\n selector = selector.replace(/&/g, repeatString(\".\" + registration.className, specificityMultiplier));\n // Insert. Note if a media query, we must close the query with a final bracket.\n var processedRule = selector + \"{\" + rules + \"}\" + (selector.indexOf('@') === 0 ? '}' : '');\n stylesheet.insertRule(processedRule);\n }\n }\n stylesheet.cacheClassName(className, key, args, rulesToInsert);\n }\n}\nexport function styleToClassName(options) {\n var args = [];\n for (var _i = 1; _i < arguments.length; _i++) {\n args[_i - 1] = arguments[_i];\n }\n var registration = styleToRegistration.apply(void 0, __spreadArray([options], args));\n if (registration) {\n applyRegistration(registration, options.specificityMultiplier);\n return registration.className;\n }\n return '';\n}\n//# sourceMappingURL=styleToClassName.js.map","import { extractStyleParts } from './extractStyleParts';\nimport { getStyleOptions } from './StyleOptionsState';\nimport { styleToClassName } from './styleToClassName';\n/**\n * Concatenation helper, which can merge class names together. Skips over falsey values.\n *\n * @public\n */\nexport function mergeStyles() {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n return mergeCss(args, getStyleOptions());\n}\n/**\n * Concatenation helper, which can merge class names together. Skips over falsey values.\n * Accepts a set of options that will be used when calculating styles.\n *\n * @public\n */\nexport function mergeCss(args, options) {\n var styleArgs = args instanceof Array ? args : [args];\n var _a = extractStyleParts(styleArgs), classes = _a.classes, objects = _a.objects;\n if (objects.length) {\n classes.push(styleToClassName(options || {}, objects));\n }\n return classes.join(' ');\n}\n//# sourceMappingURL=mergeStyles.js.map","import { __spreadArray } from \"tslib\";\n/**\n * Combine a set of styles together (but does not register css classes).\n * @param styleSets - One or more stylesets to be merged (each param can also be falsy).\n */\nexport function concatStyleSets() {\n var styleSets = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n styleSets[_i] = arguments[_i];\n }\n if (styleSets && styleSets.length === 1 && styleSets[0] && !styleSets[0].subComponentStyles) {\n return styleSets[0];\n }\n var mergedSet = {};\n // We process sub component styles in two phases. First we collect them, then we combine them into 1 style function.\n var workingSubcomponentStyles = {};\n for (var _a = 0, styleSets_1 = styleSets; _a < styleSets_1.length; _a++) {\n var currentSet = styleSets_1[_a];\n if (currentSet) {\n for (var prop in currentSet) {\n if (currentSet.hasOwnProperty(prop)) {\n if (prop === 'subComponentStyles' && currentSet.subComponentStyles !== undefined) {\n // subcomponent styles - style functions or objects\n var currentComponentStyles = currentSet.subComponentStyles;\n for (var subCompProp in currentComponentStyles) {\n if (currentComponentStyles.hasOwnProperty(subCompProp)) {\n if (workingSubcomponentStyles.hasOwnProperty(subCompProp)) {\n workingSubcomponentStyles[subCompProp].push(currentComponentStyles[subCompProp]);\n }\n else {\n workingSubcomponentStyles[subCompProp] = [currentComponentStyles[subCompProp]];\n }\n }\n }\n continue;\n }\n // the as any casts below is a workaround for ts 2.8.\n // todo: remove cast to any in ts 2.9.\n var mergedValue = mergedSet[prop];\n var currentValue = currentSet[prop];\n if (mergedValue === undefined) {\n mergedSet[prop] = currentValue;\n }\n else {\n mergedSet[prop] = __spreadArray(__spreadArray([], (Array.isArray(mergedValue) ? mergedValue : [mergedValue])), (Array.isArray(currentValue) ? currentValue : [currentValue]));\n }\n }\n }\n }\n }\n if (Object.keys(workingSubcomponentStyles).length > 0) {\n mergedSet.subComponentStyles = {};\n var mergedSubStyles = mergedSet.subComponentStyles;\n var _loop_1 = function (subCompProp) {\n if (workingSubcomponentStyles.hasOwnProperty(subCompProp)) {\n var workingSet_1 = workingSubcomponentStyles[subCompProp];\n mergedSubStyles[subCompProp] = function (styleProps) {\n return concatStyleSets.apply(void 0, workingSet_1.map(function (styleFunctionOrObject) {\n return typeof styleFunctionOrObject === 'function' ? styleFunctionOrObject(styleProps) : styleFunctionOrObject;\n }));\n };\n }\n };\n // now we process the subcomponent styles if there are any\n for (var subCompProp in workingSubcomponentStyles) {\n _loop_1(subCompProp);\n }\n }\n return mergedSet;\n}\n//# sourceMappingURL=concatStyleSets.js.map","import { concatStyleSets } from './concatStyleSets';\nimport { extractStyleParts } from './extractStyleParts';\nimport { getStyleOptions } from './StyleOptionsState';\nimport { applyRegistration, styleToRegistration } from './styleToClassName';\n/**\n * Takes in one or more style set objects, each consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeStyles` for each property in the object, but ensures we maintain the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSets - One or more style sets to be merged.\n */\nexport function mergeStyleSets() {\n var styleSets = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n styleSets[_i] = arguments[_i];\n }\n return mergeCssSets(styleSets, getStyleOptions());\n}\n/**\n * Takes in one or more style set objects, each1consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeCss` for each property in the object, but ensures the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSets - One or more style sets to be merged.\n * @param options - (optional) Options to use when creating rules.\n */\nexport function mergeCssSets(styleSets, options) {\n var classNameSet = { subComponentStyles: {} };\n var styleSet = styleSets[0];\n if (!styleSet && styleSets.length <= 1) {\n return { subComponentStyles: {} };\n }\n var concatenatedStyleSet = concatStyleSets.apply(void 0, styleSets);\n var registrations = [];\n for (var styleSetArea in concatenatedStyleSet) {\n if (concatenatedStyleSet.hasOwnProperty(styleSetArea)) {\n if (styleSetArea === 'subComponentStyles') {\n classNameSet.subComponentStyles = concatenatedStyleSet.subComponentStyles || {};\n continue;\n }\n var styles = concatenatedStyleSet[styleSetArea];\n var _a = extractStyleParts(styles), classes = _a.classes, objects = _a.objects;\n if (objects === null || objects === void 0 ? void 0 : objects.length) {\n var registration = styleToRegistration(options || {}, { displayName: styleSetArea }, objects);\n if (registration) {\n registrations.push(registration);\n classNameSet[styleSetArea] = classes.concat([registration.className]).join(' ');\n }\n }\n else {\n classNameSet[styleSetArea] = classes.join(' ');\n }\n }\n }\n for (var _i = 0, registrations_1 = registrations; _i < registrations_1.length; _i++) {\n var registration = registrations_1[_i];\n if (registration) {\n applyRegistration(registration, options === null || options === void 0 ? void 0 : options.specificityMultiplier);\n }\n }\n return classNameSet;\n}\n//# sourceMappingURL=mergeStyleSets.js.map","import { concatStyleSets } from './concatStyleSets';\n/**\n * Concatenates style sets into one, but resolves functional sets using the given props.\n * @param styleProps - Props used to resolve functional sets.\n * @param allStyles - Style sets, which can be functions or objects.\n */\nexport function concatStyleSetsWithProps(styleProps) {\n var allStyles = [];\n for (var _i = 1; _i < arguments.length; _i++) {\n allStyles[_i - 1] = arguments[_i];\n }\n var result = [];\n for (var _a = 0, allStyles_1 = allStyles; _a < allStyles_1.length; _a++) {\n var styles = allStyles_1[_a];\n if (styles) {\n result.push(typeof styles === 'function' ? styles(styleProps) : styles);\n }\n }\n if (result.length === 1) {\n return result[0];\n }\n else if (result.length) {\n // cliffkoh: I cannot figure out how to avoid the cast to any here.\n // It is something to do with the use of Omit in IStyleSet.\n // It might not be necessary once Omit becomes part of lib.d.ts (when we remove our own Omit and rely on\n // the official version).\n return concatStyleSets.apply(void 0, result);\n }\n return {};\n}\n//# sourceMappingURL=concatStyleSetsWithProps.js.map","import { getStyleOptions } from './StyleOptionsState';\nimport { Stylesheet } from './Stylesheet';\nimport { serializeRuleEntries } from './styleToClassName';\n/**\n * Registers a font face.\n * @public\n */\nexport function fontFace(font) {\n var stylesheet = Stylesheet.getInstance();\n var rule = serializeRuleEntries(getStyleOptions(), font);\n var className = stylesheet.classNameFromKey(rule);\n if (className) {\n return;\n }\n var name = stylesheet.getClassName();\n stylesheet.insertRule(\"@font-face{\" + rule + \"}\", true);\n stylesheet.cacheClassName(name, rule, [], ['font-face', rule]);\n}\n//# sourceMappingURL=fontFace.js.map","import { getStyleOptions } from './StyleOptionsState';\nimport { Stylesheet } from './Stylesheet';\nimport { serializeRuleEntries } from './styleToClassName';\n/**\n * Registers keyframe definitions.\n *\n * @public\n */\nexport function keyframes(timeline) {\n var stylesheet = Stylesheet.getInstance();\n var rulesArray = [];\n for (var prop in timeline) {\n if (timeline.hasOwnProperty(prop)) {\n rulesArray.push(prop, '{', serializeRuleEntries(getStyleOptions(), timeline[prop]), '}');\n }\n }\n var rules = rulesArray.join('');\n var className = stylesheet.classNameFromKey(rules);\n if (className) {\n return className;\n }\n var name = stylesheet.getClassName();\n stylesheet.insertRule(\"@keyframes \" + name + \"{\" + rules + \"}\", true);\n stylesheet.cacheClassName(name, rules, [], ['keyframes', rules]);\n return name;\n}\n//# sourceMappingURL=keyframes.js.map","import { mergeStyles } from '../MergeStyles';\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) {\n var classes = {};\n var _loop_1 = function (styleName) {\n if (styles.hasOwnProperty(styleName)) {\n var className_1;\n Object.defineProperty(classes, styleName, {\n get: function () {\n if (className_1 === undefined) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n className_1 = mergeStyles(styles[styleName]).toString();\n }\n return className_1;\n },\n enumerable: true,\n configurable: true,\n });\n }\n };\n for (var styleName in styles) {\n _loop_1(styleName);\n }\n return classes;\n}\n//# sourceMappingURL=buildClassMap.js.map","export var _isSSR = false;\n/**\n * Helper to set ssr mode to simulate no window object returned from getWindow helper.\n *\n * @public\n */\nexport function setSSR(isEnabled) {\n _isSSR = isEnabled;\n}\n//# sourceMappingURL=setSSR.js.map","import { _isSSR } from './setSSR';\nvar _window = undefined;\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 _window = window;\n}\ncatch (e) {\n /* no-op */\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) {\n if (_isSSR || typeof _window === 'undefined') {\n return undefined;\n }\n else {\n var el = rootElement;\n return el && el.ownerDocument && el.ownerDocument.defaultView ? el.ownerDocument.defaultView : _window;\n }\n}\n//# sourceMappingURL=getWindow.js.map","import { getWindow } from './dom/getWindow';\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 */\nvar Async = /** @class */ (function () {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n function Async(parent, onError) {\n this._timeoutIds = null;\n this._immediateIds = null;\n this._intervalIds = null;\n this._animationFrameIds = null;\n this._isDisposed = false;\n this._parent = parent || null;\n this._onErrorHandler = onError;\n this._noop = function () {\n /* do nothing */\n };\n }\n /**\n * Dispose function, clears all async operations.\n */\n Async.prototype.dispose = function () {\n var id;\n this._isDisposed = true;\n this._parent = null;\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 this._timeoutIds = null;\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 this._immediateIds = null;\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 // 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 this._animationFrameIds = null;\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 Async.prototype.setTimeout = function (callback, duration) {\n var _this = this;\n var timeoutId = 0;\n if (!this._isDisposed) {\n if (!this._timeoutIds) {\n this._timeoutIds = {};\n }\n timeoutId = setTimeout(function () {\n // Time to execute the timeout, enqueue it as a foreground task to be executed.\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 }\n catch (e) {\n _this._logError(e);\n }\n }, duration);\n this._timeoutIds[timeoutId] = true;\n }\n return timeoutId;\n };\n /**\n * Clears the timeout.\n * @param id - Id to cancel.\n */\n Async.prototype.clearTimeout = function (id) {\n if (this._timeoutIds && this._timeoutIds[id]) {\n clearTimeout(id);\n delete this._timeoutIds[id];\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 Async.prototype.setImmediate = function (callback, targetElement) {\n var _this = this;\n var immediateId = 0;\n var win = getWindow(targetElement);\n if (!this._isDisposed) {\n if (!this._immediateIds) {\n this._immediateIds = {};\n }\n var setImmediateCallback = function () {\n // Time to execute the timeout, enqueue it as a foreground task to be executed.\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 }\n catch (e) {\n _this._logError(e);\n }\n };\n immediateId = win.setTimeout(setImmediateCallback, 0);\n this._immediateIds[immediateId] = true;\n }\n return immediateId;\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 Async.prototype.clearImmediate = function (id, targetElement) {\n var win = getWindow(targetElement);\n if (this._immediateIds && this._immediateIds[id]) {\n win.clearTimeout(id);\n delete this._immediateIds[id];\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 Async.prototype.setInterval = function (callback, duration) {\n var _this = this;\n var intervalId = 0;\n if (!this._isDisposed) {\n if (!this._intervalIds) {\n this._intervalIds = {};\n }\n intervalId = setInterval(function () {\n // Time to execute the interval callback, enqueue it as a foreground task to be executed.\n try {\n callback.apply(_this._parent);\n }\n catch (e) {\n _this._logError(e);\n }\n }, duration);\n this._intervalIds[intervalId] = true;\n }\n return intervalId;\n };\n /**\n * Clears the interval.\n * @param id - Id to cancel.\n */\n Async.prototype.clearInterval = function (id) {\n if (this._intervalIds && this._intervalIds[id]) {\n clearInterval(id);\n delete this._intervalIds[id];\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 Async.prototype.throttle = function (func, wait, options) {\n var _this = this;\n if (this._isDisposed) {\n return this._noop;\n }\n var waitMS = wait || 0;\n var leading = true;\n var trailing = true;\n var lastExecuteTime = 0;\n var lastResult;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var lastArgs;\n var timeoutId = null;\n if (options && typeof options.leading === 'boolean') {\n leading = options.leading;\n }\n if (options && typeof options.trailing === 'boolean') {\n trailing = options.trailing;\n }\n var callback = function (userCall) {\n var now = Date.now();\n var delta = now - lastExecuteTime;\n var 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 }\n else if (timeoutId === null && trailing) {\n timeoutId = _this.setTimeout(callback, waitLength);\n }\n return lastResult;\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var resultFunction = (function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n lastArgs = args;\n return callback(true);\n });\n return resultFunction;\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 Async.prototype.debounce = function (func, wait, options) {\n var _this = this;\n if (this._isDisposed) {\n var noOpFunction = (function () {\n /** Do nothing */\n });\n noOpFunction.cancel = function () {\n return;\n };\n noOpFunction.flush = (function () { return null; });\n noOpFunction.pending = function () { return false; };\n return noOpFunction;\n }\n var waitMS = wait || 0;\n var leading = false;\n var trailing = true;\n var maxWait = null;\n var lastCallTime = 0;\n var lastExecuteTime = Date.now();\n var lastResult;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var lastArgs;\n var timeoutId = null;\n if (options && typeof options.leading === 'boolean') {\n leading = options.leading;\n }\n if (options && typeof options.trailing === 'boolean') {\n trailing = options.trailing;\n }\n if (options && typeof options.maxWait === 'number' && !isNaN(options.maxWait)) {\n maxWait = options.maxWait;\n }\n var markExecuted = function (time) {\n if (timeoutId) {\n _this.clearTimeout(timeoutId);\n timeoutId = null;\n }\n lastExecuteTime = time;\n };\n var invokeFunction = function (time) {\n markExecuted(time);\n lastResult = func.apply(_this._parent, lastArgs);\n };\n var callback = function (userCall) {\n var now = Date.now();\n var executeImmediately = false;\n if (userCall) {\n if (leading && now - lastCallTime >= waitMS) {\n executeImmediately = true;\n }\n lastCallTime = now;\n }\n var delta = now - lastCallTime;\n var waitLength = waitMS - delta;\n var maxWaitDelta = now - lastExecuteTime;\n var maxWaitExpired = false;\n if (maxWait !== null) {\n // maxWait only matters when there is a pending callback\n if (maxWaitDelta >= maxWait && timeoutId) {\n maxWaitExpired = true;\n }\n else {\n waitLength = Math.min(waitLength, maxWait - maxWaitDelta);\n }\n }\n if (delta >= waitMS || maxWaitExpired || executeImmediately) {\n invokeFunction(now);\n }\n else if ((timeoutId === null || !userCall) && trailing) {\n timeoutId = _this.setTimeout(callback, waitLength);\n }\n return lastResult;\n };\n var pending = function () {\n return !!timeoutId;\n };\n var cancel = function () {\n if (pending()) {\n // Mark the debounced function as having executed\n markExecuted(Date.now());\n }\n };\n var flush = function () {\n if (pending()) {\n invokeFunction(Date.now());\n }\n return lastResult;\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var resultFunction = (function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n lastArgs = args;\n return callback(true);\n });\n resultFunction.cancel = cancel;\n resultFunction.flush = flush;\n resultFunction.pending = pending;\n return resultFunction;\n };\n Async.prototype.requestAnimationFrame = function (callback, targetElement) {\n var _this = this;\n var animationFrameId = 0;\n var win = getWindow(targetElement);\n if (!this._isDisposed) {\n if (!this._animationFrameIds) {\n this._animationFrameIds = {};\n }\n var animationFrameCallback = function () {\n try {\n // Now delete the record and call the callback.\n if (_this._animationFrameIds) {\n delete _this._animationFrameIds[animationFrameId];\n }\n callback.apply(_this._parent);\n }\n catch (e) {\n _this._logError(e);\n }\n };\n animationFrameId = win.requestAnimationFrame\n ? win.requestAnimationFrame(animationFrameCallback)\n : win.setTimeout(animationFrameCallback, 0);\n this._animationFrameIds[animationFrameId] = true;\n }\n return animationFrameId;\n };\n Async.prototype.cancelAnimationFrame = function (id, targetElement) {\n var win = getWindow(targetElement);\n if (this._animationFrameIds && this._animationFrameIds[id]) {\n win.cancelAnimationFrame ? win.cancelAnimationFrame(id) : win.clearTimeout(id);\n delete this._animationFrameIds[id];\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Async.prototype._logError = function (e) {\n if (this._onErrorHandler) {\n this._onErrorHandler(e);\n }\n };\n return Async;\n}());\nexport { Async };\n//# sourceMappingURL=Async.js.map","/**\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, b) {\n for (var propName in a) {\n if (a.hasOwnProperty(propName)) {\n if (!b.hasOwnProperty(propName) || b[propName] !== a[propName]) {\n return false;\n }\n }\n }\n for (var propName in b) {\n if (b.hasOwnProperty(propName)) {\n if (!a.hasOwnProperty(propName)) {\n return false;\n }\n }\n }\n return true;\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(target) {\n var args = [];\n for (var _i = 1; _i < arguments.length; _i++) {\n args[_i - 1] = arguments[_i];\n }\n return filteredAssign.apply(this, [null, target].concat(args));\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, target) {\n var args = [];\n for (var _i = 2; _i < arguments.length; _i++) {\n args[_i - 2] = arguments[_i];\n }\n target = target || {};\n for (var _a = 0, args_1 = args; _a < args_1.length; _a++) {\n var sourceObject = args_1[_a];\n if (sourceObject) {\n for (var propName in sourceObject) {\n if (sourceObject.hasOwnProperty(propName) && (!isAllowed || isAllowed(propName))) {\n target[propName] = sourceObject[propName];\n }\n }\n }\n }\n return target;\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\ntheEnum, callback) {\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(function (p) {\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, theEnum[p]);\n }\n return undefined;\n })\n .filter(function (v) { return !!v; }); // only return elements with values\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) {\n return Object.keys(obj).reduce(function (arr, key) {\n arr.push(obj[key]);\n return arr;\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, exclusions) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var result = {};\n for (var key in obj) {\n if (exclusions.indexOf(key) === -1 && obj.hasOwnProperty(key)) {\n result[key] = obj[key];\n }\n }\n return result;\n}\n//# sourceMappingURL=object.js.map","import { assign } from './object';\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 */\nvar EventGroup = /** @class */ (function () {\n /** parent: the context in which events attached to non-HTMLElements are called */\n function EventGroup(parent) {\n this._id = EventGroup._uniqueId++;\n this._parent = parent;\n this._eventRecords = [];\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 EventGroup.raise = function (target, eventName, eventArgs, bubbleEvent) {\n var retVal;\n if (EventGroup._isElement(target)) {\n if (typeof document !== 'undefined' && document.createEvent) {\n var ev = document.createEvent('HTMLEvents');\n ev.initEvent(eventName, bubbleEvent || false, true);\n assign(ev, eventArgs);\n retVal = target.dispatchEvent(ev);\n }\n else if (typeof document !== 'undefined' && document.createEventObject) {\n // IE8\n var evObj = document.createEventObject(eventArgs);\n // cannot set cancelBubble on evObj, fireEvent will overwrite it\n target.fireEvent('on' + eventName, evObj);\n }\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 var events = target.__events__;\n var eventRecords = events ? events[eventName] : null;\n if (eventRecords) {\n for (var id in eventRecords) {\n if (eventRecords.hasOwnProperty(id)) {\n var eventRecordList = eventRecords[id];\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 (var listIndex = 0; retVal !== false && listIndex < eventRecordList.length; listIndex++) {\n var record = eventRecordList[listIndex];\n if (record.objectCallback) {\n retVal = record.objectCallback.call(record.parent, eventArgs);\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 return retVal;\n };\n EventGroup.isObserved = function (target, eventName) {\n var events = target && target.__events__;\n return !!events && !!events[eventName];\n };\n /** Check to see if the target has declared support of the given event. */\n EventGroup.isDeclared = function (target, eventName) {\n var declaredEvents = target && target.__declaredEvents;\n return !!declaredEvents && !!declaredEvents[eventName];\n };\n EventGroup.stopPropagation = function (event) {\n if (event.stopPropagation) {\n event.stopPropagation();\n }\n else {\n // IE8\n event.cancelBubble = true;\n }\n };\n EventGroup._isElement = function (target) {\n return (!!target && (!!target.addEventListener || (typeof HTMLElement !== 'undefined' && target instanceof HTMLElement)));\n };\n EventGroup.prototype.dispose = function () {\n if (!this._isDisposed) {\n this._isDisposed = true;\n this.off();\n this._parent = null;\n }\n };\n /** On the target, attach a set of events, where the events object is a name to function mapping. */\n EventGroup.prototype.onAll = function (target, events, useCapture) {\n for (var eventName in events) {\n if (events.hasOwnProperty(eventName)) {\n this.on(target, eventName, events[eventName], useCapture);\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 EventGroup.prototype.on = function (target, eventName, callback, options) {\n var _this = this;\n if (eventName.indexOf(',') > -1) {\n var events = eventName.split(/[ ,]+/);\n for (var i = 0; i < events.length; i++) {\n this.on(target, events[i], callback, options);\n }\n }\n else {\n var parent_1 = this._parent;\n var eventRecord = {\n target: target,\n eventName: eventName,\n parent: parent_1,\n callback: callback,\n options: options,\n };\n // Initialize and wire up the record on the target, so that it can call the callback if the event fires.\n var 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 if (EventGroup._isElement(target)) {\n var processElementEvent = function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n if (_this._isDisposed) {\n return;\n }\n var result;\n try {\n result = callback.apply(parent_1, 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 var e = args[0];\n if (e.preventDefault) {\n e.preventDefault();\n }\n if (e.stopPropagation) {\n e.stopPropagation();\n }\n e.cancelBubble = true;\n }\n }\n catch (e) {\n // ignore\n }\n return result;\n };\n eventRecord.elementCallback = processElementEvent;\n if (target.addEventListener) {\n target.addEventListener(eventName, processElementEvent, options);\n }\n else if (target.attachEvent) {\n // IE8\n target.attachEvent('on' + eventName, processElementEvent);\n }\n }\n else {\n var processObjectEvent = function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n if (_this._isDisposed) {\n return;\n }\n return callback.apply(parent_1, args);\n };\n eventRecord.objectCallback = processObjectEvent;\n }\n // Remember the record locally, so that it can be removed.\n this._eventRecords.push(eventRecord);\n }\n };\n EventGroup.prototype.off = function (target, eventName, callback, options) {\n for (var i = 0; i < this._eventRecords.length; i++) {\n var eventRecord = this._eventRecords[i];\n if ((!target || target === eventRecord.target) &&\n (!eventName || eventName === eventRecord.eventName) &&\n (!callback || callback === eventRecord.callback) &&\n (typeof options !== 'boolean' || options === eventRecord.options)) {\n var events = eventRecord.target.__events__;\n var targetArrayLookup = events[eventRecord.eventName];\n var targetArray = targetArrayLookup ? targetArrayLookup[this._id] : null;\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 }\n else {\n targetArrayLookup.count--;\n targetArray.splice(targetArray.indexOf(eventRecord), 1);\n }\n if (!targetArrayLookup.count) {\n delete events[eventRecord.eventName];\n }\n }\n if (eventRecord.elementCallback) {\n if (eventRecord.target.removeEventListener) {\n eventRecord.target.removeEventListener(eventRecord.eventName, eventRecord.elementCallback, eventRecord.options);\n }\n else if (eventRecord.target.detachEvent) {\n // IE8\n eventRecord.target.detachEvent('on' + eventRecord.eventName, eventRecord.elementCallback);\n }\n }\n this._eventRecords.splice(i--, 1);\n }\n }\n };\n /** Trigger the given event in the context of this instance of EventGroup. */\n EventGroup.prototype.raise = function (eventName, eventArgs, bubbleEvent) {\n return EventGroup.raise(this._parent, eventName, eventArgs, bubbleEvent);\n };\n /** Declare an event as being supported by this instance of EventGroup. */\n EventGroup.prototype.declare = function (event) {\n var declaredEvents = (this._parent.__declaredEvents = this._parent.__declaredEvents || {});\n if (typeof event === 'string') {\n declaredEvents[event] = true;\n }\n else {\n for (var i = 0; i < event.length; i++) {\n declaredEvents[event[i]] = true;\n }\n }\n };\n EventGroup._uniqueId = 0;\n return EventGroup;\n}());\nexport { EventGroup };\n//# sourceMappingURL=EventGroup.js.map","import { _isSSR } from './setSSR';\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. Also note that the SSR flag is used to test ssr scenarios even if\n * document is defined (from JSDOM for example.)\n *\n * @public\n */\nexport function getDocument(rootElement) {\n if (_isSSR || typeof document === 'undefined') {\n return undefined;\n }\n else {\n var el = rootElement;\n return el && el.ownerDocument ? el.ownerDocument : document;\n }\n}\n//# sourceMappingURL=getDocument.js.map","import { getDocument } from './dom/getDocument';\nimport { mergeStyles } from '@fluentui/merge-styles';\nimport { getWindow } from './dom/getWindow';\nvar _scrollbarWidth;\nvar _bodyScrollDisabledCount = 0;\nvar DisabledScrollClassName = mergeStyles({\n overflow: 'hidden !important',\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 var DATA_IS_SCROLLABLE_ATTRIBUTE = 'data-is-scrollable';\n/**\n * Allows the user to scroll within a element,\n * while preventing the user from scrolling the body\n */\nexport var allowScrollOnElement = function (element, events) {\n if (!element) {\n return;\n }\n var _previousClientY = 0;\n var _element = null;\n // remember the clientY for future calls of _preventOverscrolling\n var _saveClientY = function (event) {\n if (event.targetTouches.length === 1) {\n _previousClientY = event.targetTouches[0].clientY;\n }\n };\n // prevent the body from scrolling when the user attempts\n // to scroll past the top or bottom of the element\n var _preventOverscrolling = function (event) {\n // only respond to a single-finger touch\n if (event.targetTouches.length !== 1) {\n return;\n }\n // prevent the body touchmove handler from firing\n // so that scrolling is allowed within the element\n event.stopPropagation();\n if (!_element) {\n return;\n }\n var clientY = event.targetTouches[0].clientY - _previousClientY;\n var scrollableParent = findScrollableParent(event.target);\n if (scrollableParent) {\n _element = scrollableParent;\n }\n // if the element is scrolled to the top,\n // prevent the user from scrolling up\n if (_element.scrollTop === 0 && clientY > 0) {\n event.preventDefault();\n }\n // if the element is scrolled to the bottom,\n // prevent the user from scrolling down\n if (_element.scrollHeight - Math.ceil(_element.scrollTop) <= _element.clientHeight && clientY < 0) {\n event.preventDefault();\n }\n };\n events.on(element, 'touchstart', _saveClientY, { passive: false });\n events.on(element, 'touchmove', _preventOverscrolling, { passive: false });\n _element = element;\n};\n/**\n * Same as allowScrollOnElement but does not prevent overscrolling.\n */\nexport var allowOverscrollOnElement = function (element, events) {\n if (!element) {\n return;\n }\n var _allowElementScroll = function (event) {\n event.stopPropagation();\n };\n events.on(element, 'touchmove', _allowElementScroll, { passive: false });\n};\nvar _disableIosBodyScroll = function (event) {\n event.preventDefault();\n};\n/**\n * Disables the body scrolling.\n *\n * @public\n */\nexport function disableBodyScroll() {\n var doc = getDocument();\n if (doc && doc.body && !_bodyScrollDisabledCount) {\n doc.body.classList.add(DisabledScrollClassName);\n doc.body.addEventListener('touchmove', _disableIosBodyScroll, { passive: false, capture: false });\n }\n _bodyScrollDisabledCount++;\n}\n/**\n * Enables the body scrolling.\n *\n * @public\n */\nexport function enableBodyScroll() {\n if (_bodyScrollDisabledCount > 0) {\n var doc = getDocument();\n if (doc && doc.body && _bodyScrollDisabledCount === 1) {\n doc.body.classList.remove(DisabledScrollClassName);\n doc.body.removeEventListener('touchmove', _disableIosBodyScroll);\n }\n _bodyScrollDisabledCount--;\n }\n}\n/**\n * Calculates the width of a scrollbar for the browser/os.\n *\n * @public\n */\nexport function getScrollbarWidth() {\n if (_scrollbarWidth === undefined) {\n var scrollDiv = document.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 document.body.appendChild(scrollDiv);\n // Get the scrollbar width\n _scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;\n // Delete the DIV\n document.body.removeChild(scrollDiv);\n }\n return _scrollbarWidth;\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) {\n var el = startingElement;\n var doc = getDocument(startingElement);\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 // If we haven't found it, the use the slower method: compute styles to evaluate if overflow is set.\n el = startingElement;\n while (el && el !== doc.body) {\n if (el.getAttribute(DATA_IS_SCROLLABLE_ATTRIBUTE) !== 'false') {\n var computedStyles = getComputedStyle(el);\n var overflowY = computedStyles ? computedStyles.getPropertyValue('overflow-y') : '';\n if (overflowY && (overflowY === 'scroll' || overflowY === 'auto')) {\n return el;\n }\n }\n el = el.parentElement;\n }\n // Fall back to window scroll.\n if (!el || el === doc.body) {\n el = getWindow(startingElement);\n }\n return el;\n}\n//# sourceMappingURL=scroll.js.map","/**\n * Helper to get bounding client rect. Passing in window will get the window size.\n *\n * @public\n */\nexport function getRect(element) {\n var rect;\n if (element) {\n if (element === window) {\n rect = {\n left: 0,\n top: 0,\n width: window.innerWidth,\n height: window.innerHeight,\n right: window.innerWidth,\n bottom: window.innerHeight,\n };\n }\n else if (element.getBoundingClientRect) {\n rect = element.getBoundingClientRect();\n }\n }\n return rect;\n}\n//# sourceMappingURL=getRect.js.map","/* eslint-disable no-console */\nvar _warningCallback = undefined;\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) {\n if (_warningCallback && process.env.NODE_ENV !== 'production') {\n _warningCallback(message);\n }\n else if (console && console.warn) {\n console.warn(message);\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) {\n _warningCallback = warningCallback;\n}\n//# sourceMappingURL=warn.js.map","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(componentName, props, requiredProps, conditionalPropName, condition) {\n if (condition === true && process.env.NODE_ENV !== 'production') {\n for (var _i = 0, requiredProps_1 = requiredProps; _i < requiredProps_1.length; _i++) {\n var requiredPropName = requiredProps_1[_i];\n if (!(requiredPropName in props)) {\n warn(componentName + \" property '\" + requiredPropName + \"' is required when '\" + conditionalPropName + \"' is used.'\");\n }\n }\n }\n}\n//# sourceMappingURL=warnConditionallyRequiredProps.js.map","import { __extends } from \"tslib\";\nimport * 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';\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 */\nvar BaseComponent = /** @class */ (function (_super) {\n __extends(BaseComponent, _super);\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 function BaseComponent(props, context) {\n var _this = _super.call(this, props, context) || this;\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 return _this;\n }\n /**\n * When the component receives props, make sure the componentRef is updated.\n */\n BaseComponent.prototype.componentDidUpdate = function (prevProps, prevState) {\n this._updateComponentRef(prevProps, this.props);\n };\n /**\n * When the component has mounted, update the componentRef.\n */\n BaseComponent.prototype.componentDidMount = function () {\n this._setComponentRef(this.props.componentRef, this);\n };\n /**\n * If we have disposables, dispose them automatically on unmount.\n */\n BaseComponent.prototype.componentWillUnmount = function () {\n this._setComponentRef(this.props.componentRef, null);\n if (this.__disposables) {\n for (var i = 0, len = this._disposables.length; i < len; i++) {\n var disposable = this.__disposables[i];\n if (disposable.dispose) {\n disposable.dispose();\n }\n }\n this.__disposables = null;\n }\n };\n Object.defineProperty(BaseComponent.prototype, \"className\", {\n /**\n * Gets the object's class name.\n */\n get: function () {\n if (!this.__className) {\n var funcNameRegex = /function (.{1,})\\(/;\n var results = funcNameRegex.exec(this.constructor.toString());\n this.__className = results && results.length > 1 ? results[1] : '';\n }\n return this.__className;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(BaseComponent.prototype, \"_disposables\", {\n /**\n * Allows subclasses to push things to this._disposables to be auto disposed.\n */\n get: function () {\n if (!this.__disposables) {\n this.__disposables = [];\n }\n return this.__disposables;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(BaseComponent.prototype, \"_async\", {\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 get: function () {\n if (!this.__async) {\n this.__async = new Async(this);\n this._disposables.push(this.__async);\n }\n return this.__async;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(BaseComponent.prototype, \"_events\", {\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 get: function () {\n if (!this.__events) {\n this.__events = new EventGroup(this);\n this._disposables.push(this.__events);\n }\n return this.__events;\n },\n enumerable: false,\n configurable: true\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 BaseComponent.prototype._resolveRef = function (refName) {\n var _this = this;\n if (!this.__resolves) {\n this.__resolves = {};\n }\n if (!this.__resolves[refName]) {\n this.__resolves[refName] = function (ref) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return (_this[refName] = ref);\n };\n }\n return this.__resolves[refName];\n };\n /**\n * Updates the componentRef (by calling it with \"this\" when necessary.)\n */\n BaseComponent.prototype._updateComponentRef = function (currentProps, newProps) {\n if (newProps === void 0) { newProps = {}; }\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 * 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 BaseComponent.prototype._warnDeprecations = function (deprecationMap) {\n warnDeprecations(this.className, this.props, deprecationMap);\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 BaseComponent.prototype._warnMutuallyExclusive = function (mutuallyExclusiveMap) {\n warnMutuallyExclusive(this.className, this.props, mutuallyExclusiveMap);\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 BaseComponent.prototype._warnConditionallyRequiredProps = function (requiredProps, conditionalPropName, condition) {\n warnConditionallyRequiredProps(this.className, this.props, requiredProps, conditionalPropName, condition);\n };\n BaseComponent.prototype._setComponentRef = function (ref, value) {\n if (!this._skipComponentRefResolution && ref) {\n if (typeof ref === 'function') {\n ref(value);\n }\n if (typeof ref === 'object') {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref.current = value;\n }\n }\n };\n return BaseComponent;\n}(React.Component));\nexport { BaseComponent };\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, prototype, methodNames) {\n for (var i = 0, len = methodNames.length; i < len; i++) {\n _makeSafe(obj, prototype, methodNames[i]);\n }\n}\n// eslint-disable-next-line deprecation/deprecation\nfunction _makeSafe(obj, prototype, methodName) {\n /* eslint-disable @typescript-eslint/no-explicit-any */\n var classMethod = obj[methodName];\n var prototypeMethod = prototype[methodName];\n if (classMethod || prototypeMethod) {\n obj[methodName] = function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n /* eslint-enable @typescript-eslint/no-explicit-any */\n var retVal;\n if (prototypeMethod) {\n retVal = prototypeMethod.apply(this, args);\n }\n if (classMethod !== prototypeMethod) {\n retVal = classMethod.apply(this, args);\n }\n return retVal;\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() {\n return null;\n}\n//# sourceMappingURL=BaseComponent.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { getWindow } from './dom/getWindow';\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 */\nvar DelayedRender = /** @class */ (function (_super) {\n __extends(DelayedRender, _super);\n function DelayedRender(props) {\n var _this = _super.call(this, props) || this;\n _this.state = {\n isRendered: getWindow() === undefined,\n };\n return _this;\n }\n DelayedRender.prototype.componentDidMount = function () {\n var _this = this;\n var delay = this.props.delay;\n this._timeoutId = window.setTimeout(function () {\n _this.setState({\n isRendered: true,\n });\n }, delay);\n };\n DelayedRender.prototype.componentWillUnmount = function () {\n if (this._timeoutId) {\n clearTimeout(this._timeoutId);\n }\n };\n DelayedRender.prototype.render = function () {\n return this.state.isRendered ? React.Children.only(this.props.children) : null;\n };\n DelayedRender.defaultProps = {\n delay: 0,\n };\n return DelayedRender;\n}(React.Component));\nexport { DelayedRender };\n//# sourceMappingURL=DelayedRender.js.map","import { getWindow } from './dom/getWindow';\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 */\nvar GLOBAL_SETTINGS_PROP_NAME = '__globalSettings__';\nvar CALLBACK_STATE_PROP_NAME = '__callbacks__';\nvar _counter = 0;\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 */\nvar GlobalSettings = /** @class */ (function () {\n function GlobalSettings() {\n }\n GlobalSettings.getValue = function (key, defaultValue) {\n var globalSettings = _getGlobalSettings();\n if (globalSettings[key] === undefined) {\n globalSettings[key] = typeof defaultValue === 'function' ? defaultValue() : defaultValue;\n }\n return globalSettings[key];\n };\n GlobalSettings.setValue = function (key, value) {\n var globalSettings = _getGlobalSettings();\n var callbacks = globalSettings[CALLBACK_STATE_PROP_NAME];\n var oldValue = globalSettings[key];\n if (value !== oldValue) {\n globalSettings[key] = value;\n var changeDescription = {\n oldValue: oldValue,\n value: value,\n key: key,\n };\n for (var id in callbacks) {\n if (callbacks.hasOwnProperty(id)) {\n callbacks[id](changeDescription);\n }\n }\n }\n return value;\n };\n GlobalSettings.addChangeListener = function (cb) {\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 var id = cb.__id__;\n var callbacks = _getCallbacks();\n if (!id) {\n id = cb.__id__ = String(_counter++);\n }\n callbacks[id] = cb;\n };\n GlobalSettings.removeChangeListener = function (cb) {\n var callbacks = _getCallbacks();\n delete callbacks[cb.__id__];\n };\n return GlobalSettings;\n}());\nexport { GlobalSettings };\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction _getGlobalSettings() {\n var _a;\n var win = getWindow();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var globalObj = win || {};\n if (!globalObj[GLOBAL_SETTINGS_PROP_NAME]) {\n globalObj[GLOBAL_SETTINGS_PROP_NAME] = (_a = {},\n _a[CALLBACK_STATE_PROP_NAME] = {},\n _a);\n }\n return globalObj[GLOBAL_SETTINGS_PROP_NAME];\n}\nfunction _getCallbacks() {\n var globalSettings = _getGlobalSettings();\n return globalSettings[CALLBACK_STATE_PROP_NAME];\n}\n//# sourceMappingURL=GlobalSettings.js.map","/**\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 var KeyCodes = {\n backspace: 8,\n tab: 9,\n enter: 13,\n shift: 16,\n ctrl: 17,\n alt: 18,\n pauseBreak: 19,\n capslock: 20,\n escape: 27,\n space: 32,\n pageUp: 33,\n pageDown: 34,\n end: 35,\n home: 36,\n left: 37,\n up: 38,\n right: 39,\n down: 40,\n insert: 45,\n del: 46,\n zero: 48,\n one: 49,\n two: 50,\n three: 51,\n four: 52,\n five: 53,\n six: 54,\n seven: 55,\n eight: 56,\n nine: 57,\n colon: 58,\n a: 65,\n b: 66,\n c: 67,\n d: 68,\n e: 69,\n f: 70,\n g: 71,\n h: 72,\n i: 73,\n j: 74,\n k: 75,\n l: 76,\n m: 77,\n n: 78,\n o: 79,\n p: 80,\n q: 81,\n r: 82,\n s: 83,\n t: 84,\n u: 85,\n v: 86,\n w: 87,\n x: 88,\n y: 89,\n z: 90,\n leftWindow: 91,\n rightWindow: 92,\n select: 93,\n /* eslint-disable @typescript-eslint/naming-convention */\n zero_numpad: 96,\n one_numpad: 97,\n two_numpad: 98,\n three_numpad: 99,\n four_numpad: 100,\n five_numpad: 101,\n six_numpad: 102,\n seven_numpad: 103,\n eight_numpad: 104,\n nine_numpad: 105,\n /* eslint-enable @typescript-eslint/naming-convention */\n multiply: 106,\n add: 107,\n subtract: 109,\n decimalPoint: 110,\n divide: 111,\n f1: 112,\n f2: 113,\n f3: 114,\n f4: 115,\n f5: 116,\n f6: 117,\n f7: 118,\n f8: 119,\n f9: 120,\n f10: 121,\n f11: 122,\n f12: 123,\n numlock: 144,\n scrollLock: 145,\n semicolon: 186,\n equalSign: 187,\n comma: 188,\n dash: 189,\n period: 190,\n forwardSlash: 191,\n graveAccent: 192,\n openBracket: 219,\n backSlash: 220,\n closeBracket: 221,\n singleQuote: 222,\n};\n//# sourceMappingURL=KeyCodes.js.map","/**\n * Rectangle helper class.\n *\n * @public\n * {@docCategory Rectangle}\n */\nvar Rectangle = /** @class */ (function () {\n function Rectangle(left, right, top, bottom) {\n if (left === void 0) { left = 0; }\n if (right === void 0) { right = 0; }\n if (top === void 0) { top = 0; }\n if (bottom === void 0) { bottom = 0; }\n this.top = top;\n this.bottom = bottom;\n this.left = left;\n this.right = right;\n }\n Object.defineProperty(Rectangle.prototype, \"width\", {\n /**\n * Calculated automatically by subtracting the right from left\n */\n get: function () {\n return this.right - this.left;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(Rectangle.prototype, \"height\", {\n /**\n * Calculated automatically by subtracting the bottom from top.\n */\n get: function () {\n return this.bottom - this.top;\n },\n enumerable: false,\n configurable: true\n });\n /**\n * Tests if another rect is approximately equal to this rect (within 4 decimal places.)\n */\n Rectangle.prototype.equals = function (rect) {\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 (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 return Rectangle;\n}());\nexport { Rectangle };\n//# sourceMappingURL=Rectangle.js.map","/* eslint-disable @typescript-eslint/no-explicit-any */\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) {\n var functions = [];\n for (var _i = 1; _i < arguments.length; _i++) {\n functions[_i - 1] = arguments[_i];\n }\n if (functions.length < 2) {\n return functions[0];\n }\n return function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n functions.forEach(function (f) { return f && f.apply(parent, args); });\n };\n}\n//# sourceMappingURL=appendFunction.js.map","/**\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() {\n var ariaAttributes = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n ariaAttributes[_i] = arguments[_i];\n }\n var mergedAttribute = ariaAttributes\n .filter(function (arg) { return arg; })\n .join(' ')\n .trim();\n return mergedAttribute === '' ? undefined : mergedAttribute;\n}\n//# sourceMappingURL=aria.js.map","/**\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, cb, fromIndex) {\n if (fromIndex === void 0) { fromIndex = 0; }\n var index = -1;\n for (var i = fromIndex; array && i < array.length; i++) {\n if (cb(array[i], i)) {\n index = i;\n break;\n }\n }\n return index;\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, cb) {\n var index = findIndex(array, cb);\n if (index < 0) {\n return undefined;\n }\n return array[index];\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, getItem) {\n var array = [];\n for (var i = 0; i < size; i++) {\n array.push(getItem(i));\n }\n return array;\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, columnCount) {\n return items.reduce(function (rows, currentValue, index) {\n if (index % columnCount === 0) {\n rows.push([currentValue]);\n }\n else {\n rows[rows.length - 1].push(currentValue);\n }\n return rows;\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, index) {\n return array.filter(function (_, i) { return index !== i; });\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, newElement, index) {\n var copy = array.slice();\n copy[index] = newElement;\n return copy;\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, index, itemToAdd) {\n var copy = array.slice();\n copy.splice(index, 0, itemToAdd);\n return copy;\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) {\n var result = [];\n array.forEach(function (item) { return (result = result.concat(item)); });\n return result;\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, array2) {\n if (array1.length !== array2.length) {\n return false;\n }\n for (var i = 0; i < array1.length; i++) {\n if (array1[i] !== array2[i]) {\n return false;\n }\n }\n return true;\n}\n//# sourceMappingURL=array.js.map","/**\n * AssertNever is a utility function that can be used for exhaustiveness checks in switch statements.\n *\n * @public\n */\nexport function assertNever(x) {\n throw new Error('Unexpected object: ' + x);\n}\n//# sourceMappingURL=assertNever.js.map","import { getWindow } from './dom/getWindow';\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) {\n var result = null;\n try {\n var win = getWindow();\n result = win ? win.sessionStorage.getItem(key) : null;\n }\n catch (e) {\n /* Eat the exception */\n }\n return result;\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, data) {\n var _a;\n try {\n (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.sessionStorage.setItem(key, data);\n }\n catch (e) {\n /* Eat the exception */\n }\n}\n//# sourceMappingURL=sessionStorage.js.map","import { KeyCodes } from './KeyCodes';\nimport { getDocument } from './dom/getDocument';\nimport { getItem, setItem } from './sessionStorage';\nimport { setRTL as mergeStylesSetRTL } from '@fluentui/merge-styles';\nvar RTL_LOCAL_STORAGE_KEY = 'isRTL';\n// Default to undefined so that we initialize on first read.\nvar _isRTL;\n/**\n * Gets the rtl state of the page (returns true if in rtl.)\n */\nexport function getRTL(theme) {\n if (theme === void 0) { theme = {}; }\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 var savedRTL = getItem(RTL_LOCAL_STORAGE_KEY);\n if (savedRTL !== null) {\n _isRTL = savedRTL === '1';\n setRTL(_isRTL);\n }\n var 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 return !!_isRTL;\n}\n/**\n * Sets the rtl state of the page (by adjusting the dir attribute of the html element.)\n */\nexport function setRTL(isRTL, persistSetting) {\n if (persistSetting === void 0) { persistSetting = false; }\n var doc = getDocument();\n if (doc) {\n doc.documentElement.setAttribute('dir', isRTL ? 'rtl' : 'ltr');\n }\n if (persistSetting) {\n setItem(RTL_LOCAL_STORAGE_KEY, isRTL ? '1' : '0');\n }\n _isRTL = isRTL;\n mergeStylesSetRTL(_isRTL);\n}\n/**\n * Returns the given key, but flips right/left arrows if necessary.\n */\nexport function getRTLSafeKeyCode(key, theme) {\n if (theme === void 0) { theme = {}; }\n if (getRTL(theme)) {\n if (key === KeyCodes.left) {\n key = KeyCodes.right;\n }\n else if (key === KeyCodes.right) {\n key = KeyCodes.left;\n }\n }\n return key;\n}\n//# sourceMappingURL=rtl.js.map","/**\n * Determines whether or not an element has the virtual hierarchy extension.\n *\n * @public\n */\nexport function isVirtualElement(element) {\n return element && !!element._virtual;\n}\n//# sourceMappingURL=isVirtualElement.js.map","import { isVirtualElement } from './isVirtualElement';\n/**\n * Gets the virtual parent given the child element, if it exists.\n *\n * @public\n */\nexport function getVirtualParent(child) {\n var parent;\n if (child && isVirtualElement(child)) {\n parent = child._virtual.parent;\n }\n return parent;\n}\n//# sourceMappingURL=getVirtualParent.js.map","import { getVirtualParent } from './getVirtualParent';\n/**\n * Gets the element which is the parent of a given element.\n * If `allowVirtuaParents` is `true`, this method prefers the virtual parent over\n * real DOM parent when present.\n *\n * @public\n */\nexport function getParent(child, allowVirtualParents) {\n if (allowVirtualParents === void 0) { allowVirtualParents = true; }\n return (child &&\n ((allowVirtualParents && getVirtualParent(child)) || (child.parentNode && child.parentNode)));\n}\n//# sourceMappingURL=getParent.js.map","import { getParent } from './getParent';\n/**\n * Determines whether or not a parent element contains a given child element.\n * If `allowVirtualParents` is true, this method may return `true` if the child\n * has the parent in its virtual element hierarchy.\n *\n * @public\n */\nexport function elementContains(parent, child, allowVirtualParents) {\n if (allowVirtualParents === void 0) { allowVirtualParents = true; }\n var isContained = false;\n if (parent && child) {\n if (allowVirtualParents) {\n if (parent === child) {\n isContained = true;\n }\n else {\n isContained = false;\n while (child) {\n var nextParent = getParent(child);\n if (nextParent === parent) {\n isContained = true;\n break;\n }\n child = nextParent;\n }\n }\n }\n else if (parent.contains) {\n isContained = parent.contains(child);\n }\n }\n return isContained;\n}\n//# sourceMappingURL=elementContains.js.map","import { getParent } from './getParent';\n/**\n * Finds the first parent element where the matchFunction returns true\n * @param element - element to start searching at\n * @param matchFunction - the function that determines if the element is a match\n * @returns the matched element or null no match was found\n */\nexport function findElementRecursive(element, matchFunction) {\n if (!element || element === document.body) {\n return null;\n }\n return matchFunction(element) ? element : findElementRecursive(getParent(element), matchFunction);\n}\n//# sourceMappingURL=findElementRecursive.js.map","import { findElementRecursive } from './findElementRecursive';\n/**\n * Determines if an element, or any of its ancestors, contain the given attribute\n * @param element - element to start searching at\n * @param attribute - the attribute to search for\n * @returns the value of the first instance found\n */\nexport function elementContainsAttribute(element, attribute) {\n var elementMatch = findElementRecursive(element, function (testElement) { return testElement.hasAttribute(attribute); });\n return elementMatch && elementMatch.getAttribute(attribute);\n}\n//# sourceMappingURL=elementContainsAttribute.js.map","export var DATA_PORTAL_ATTRIBUTE = 'data-portal-element';\n/**\n * Identify element as a portal by setting an attribute.\n * @param element - Element to mark as a portal.\n */\nexport function setPortalAttribute(element) {\n element.setAttribute(DATA_PORTAL_ATTRIBUTE, 'true');\n}\n//# sourceMappingURL=setPortalAttribute.js.map","import { findElementRecursive } from './findElementRecursive';\nimport { DATA_PORTAL_ATTRIBUTE } from './setPortalAttribute';\n/**\n * Determine whether a target is within a portal from perspective of root or optional parent.\n * This function only works against portal components that use the setPortalAttribute function.\n * If both parent and child are within the same portal this function will return false.\n * @param target - Element to query portal containment status of.\n * @param parent - Optional parent perspective. Search for containing portal stops at parent\n * (or root if parent is undefined or invalid.)\n */\nexport function portalContainsElement(target, parent) {\n var elementMatch = findElementRecursive(target, function (testElement) { return parent === testElement || testElement.hasAttribute(DATA_PORTAL_ATTRIBUTE); });\n return elementMatch !== null && elementMatch.hasAttribute(DATA_PORTAL_ATTRIBUTE);\n}\n//# sourceMappingURL=portalContainsElement.js.map","/**\n * Sets the virtual parent of an element.\n * Pass `undefined` as the `parent` to clear the virtual parent.\n *\n * @public\n */\nexport function setVirtualParent(child, parent) {\n var virtualChild = child;\n var virtualParent = parent;\n if (!virtualChild._virtual) {\n virtualChild._virtual = {\n children: [],\n };\n }\n var oldParent = virtualChild._virtual.parent;\n if (oldParent && oldParent !== parent) {\n // Remove the child from its old parent.\n var index = oldParent._virtual.children.indexOf(virtualChild);\n if (index > -1) {\n oldParent._virtual.children.splice(index, 1);\n }\n }\n virtualChild._virtual.parent = virtualParent || undefined;\n if (virtualParent) {\n if (!virtualParent._virtual) {\n virtualParent._virtual = {\n children: [],\n };\n }\n virtualParent._virtual.children.push(virtualChild);\n }\n}\n//# sourceMappingURL=setVirtualParent.js.map","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';\nvar IS_FOCUSABLE_ATTRIBUTE = 'data-is-focusable';\nvar IS_VISIBLE_ATTRIBUTE = 'data-is-visible';\nvar FOCUSZONE_ID_ATTRIBUTE = 'data-focuszone-id';\nvar FOCUSZONE_SUB_ATTRIBUTE = 'data-is-sub-focuszone';\n/**\n * Gets the first focusable element.\n *\n * @public\n */\nexport function getFirstFocusable(rootElement, currentElement, includeElementsInFocusZones) {\n return getNextElement(rootElement, currentElement, true /*checkNode*/, false /*suppressParentTraversal*/, false /*suppressChildTraversal*/, includeElementsInFocusZones);\n}\n/**\n * Gets the last focusable element.\n *\n * @public\n */\nexport function getLastFocusable(rootElement, currentElement, includeElementsInFocusZones) {\n return getPreviousElement(rootElement, currentElement, true /*checkNode*/, false /*suppressParentTraversal*/, true /*traverseChildren*/, includeElementsInFocusZones);\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(rootElement, currentElement, includeElementsInFocusZones, checkNode) {\n if (checkNode === void 0) { checkNode = true; }\n return getNextElement(rootElement, currentElement, checkNode, false /*suppressParentTraversal*/, false /*suppressChildTraversal*/, includeElementsInFocusZones, false /*allowFocusRoot*/, true /*tabbable*/);\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(rootElement, currentElement, includeElementsInFocusZones, checkNode) {\n if (checkNode === void 0) { checkNode = true; }\n return getPreviousElement(rootElement, currentElement, checkNode, false /*suppressParentTraversal*/, true /*traverseChildren*/, includeElementsInFocusZones, false /*allowFocusRoot*/, true /*tabbable*/);\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 * @returns True if focus was set, false if it was not.\n */\nexport function focusFirstChild(rootElement) {\n var element = getNextElement(rootElement, rootElement, true, false, false, true);\n if (element) {\n focusAsync(element);\n return true;\n }\n return false;\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(rootElement, currentElement, checkNode, suppressParentTraversal, traverseChildren, includeElementsInFocusZones, allowFocusRoot, tabbable) {\n if (!currentElement || (!allowFocusRoot && currentElement === rootElement)) {\n return null;\n }\n var isCurrentElementVisible = isElementVisible(currentElement);\n // Check its children.\n if (traverseChildren &&\n isCurrentElementVisible &&\n (includeElementsInFocusZones || !(isElementFocusZone(currentElement) || isElementFocusSubZone(currentElement)))) {\n var childMatch = getPreviousElement(rootElement, currentElement.lastElementChild, true, true, true, includeElementsInFocusZones, allowFocusRoot, tabbable);\n if (childMatch) {\n if ((tabbable && isElementTabbable(childMatch, true)) || !tabbable) {\n return childMatch;\n }\n var childMatchSiblingMatch = getPreviousElement(rootElement, childMatch.previousElementSibling, true, true, true, includeElementsInFocusZones, allowFocusRoot, tabbable);\n if (childMatchSiblingMatch) {\n return childMatchSiblingMatch;\n }\n var childMatchParent = childMatch.parentElement;\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 var childMatchParentMatch = getPreviousElement(rootElement, childMatchParent.previousElementSibling, true, true, true, includeElementsInFocusZones, allowFocusRoot, tabbable);\n if (childMatchParentMatch) {\n return childMatchParentMatch;\n }\n childMatchParent = childMatchParent.parentElement;\n }\n }\n }\n // Check the current node, if it's not the first traversal.\n if (checkNode && isCurrentElementVisible && isElementTabbable(currentElement, tabbable)) {\n return currentElement;\n }\n // Check its previous sibling.\n var siblingMatch = getPreviousElement(rootElement, currentElement.previousElementSibling, true, true, true, includeElementsInFocusZones, allowFocusRoot, tabbable);\n if (siblingMatch) {\n return siblingMatch;\n }\n // Check its parent.\n if (!suppressParentTraversal) {\n return getPreviousElement(rootElement, currentElement.parentElement, true, false, false, includeElementsInFocusZones, allowFocusRoot, tabbable);\n }\n return null;\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(rootElement, currentElement, checkNode, suppressParentTraversal, suppressChildTraversal, includeElementsInFocusZones, allowFocusRoot, tabbable) {\n if (!currentElement || (currentElement === rootElement && suppressChildTraversal && !allowFocusRoot)) {\n return null;\n }\n var isCurrentElementVisible = isElementVisible(currentElement);\n // Check the current node, if it's not the first traversal.\n if (checkNode && isCurrentElementVisible && isElementTabbable(currentElement, tabbable)) {\n return currentElement;\n }\n // Check its children.\n if (!suppressChildTraversal &&\n isCurrentElementVisible &&\n (includeElementsInFocusZones || !(isElementFocusZone(currentElement) || isElementFocusSubZone(currentElement)))) {\n var childMatch = getNextElement(rootElement, currentElement.firstElementChild, true, true, false, includeElementsInFocusZones, allowFocusRoot, tabbable);\n if (childMatch) {\n return childMatch;\n }\n }\n if (currentElement === rootElement) {\n return null;\n }\n // Check its sibling.\n var siblingMatch = getNextElement(rootElement, currentElement.nextElementSibling, true, true, false, includeElementsInFocusZones, allowFocusRoot, tabbable);\n if (siblingMatch) {\n return siblingMatch;\n }\n if (!suppressParentTraversal) {\n return getNextElement(rootElement, currentElement.parentElement, false, false, true, includeElementsInFocusZones, allowFocusRoot, tabbable);\n }\n return null;\n}\n/**\n * Determines if an element is visible.\n *\n * @public\n */\nexport function isElementVisible(element) {\n // If the element is not valid, return false.\n if (!element || !element.getAttribute) {\n return false;\n }\n var visibilityAttribute = element.getAttribute(IS_VISIBLE_ATTRIBUTE);\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 // Fallback to other methods of determining actual visibility.\n return (element.offsetHeight !== 0 ||\n element.offsetParent !== null ||\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n element.isVisible === true); // used as a workaround for testing.\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) {\n return (!!element &&\n isElementVisible(element) &&\n !element.hidden &&\n window.getComputedStyle(element).visibility !== 'hidden');\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(element, checkTabIndex) {\n // If this element is null or is disabled, it is not considered tabbable.\n if (!element || element.disabled) {\n return false;\n }\n var tabIndex = 0;\n var tabIndexAttributeValue = null;\n if (element && element.getAttribute) {\n tabIndexAttributeValue = element.getAttribute('tabIndex');\n if (tabIndexAttributeValue) {\n tabIndex = parseInt(tabIndexAttributeValue, 10);\n }\n }\n var isFocusableAttribute = element.getAttribute ? element.getAttribute(IS_FOCUSABLE_ATTRIBUTE) : null;\n var isTabIndexSet = tabIndexAttributeValue !== null && tabIndex >= 0;\n var result = !!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 return checkTabIndex ? tabIndex !== -1 && result : result;\n}\n/**\n * Determines if a given element is a focus zone.\n *\n * @public\n */\nexport function isElementFocusZone(element) {\n return !!(element && element.getAttribute && !!element.getAttribute(FOCUSZONE_ID_ATTRIBUTE));\n}\n/**\n * Determines if a given element is a focus sub zone.\n *\n * @public\n */\nexport function isElementFocusSubZone(element) {\n return !!(element && element.getAttribute && element.getAttribute(FOCUSZONE_SUB_ATTRIBUTE) === 'true');\n}\n/**\n * Determines if an element, or any of its children, contain focus.\n *\n * @public\n */\nexport function doesElementContainFocus(element) {\n var document = getDocument(element);\n var currentActiveElement = document && document.activeElement;\n if (currentActiveElement && elementContains(element, currentActiveElement)) {\n return true;\n }\n return false;\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(element, noWrapDataAttribute) {\n return elementContainsAttribute(element, noWrapDataAttribute) === 'true' ? false : true;\n}\nvar targetToFocusOnNextRepaint = undefined;\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) {\n if (element) {\n // An element was already queued to be focused, so replace that one with the new element\n if (targetToFocusOnNextRepaint) {\n targetToFocusOnNextRepaint = element;\n return;\n }\n targetToFocusOnNextRepaint = element;\n var win = getWindow(element);\n if (win) {\n // element.focus() is a no-op if the element is no longer in the DOM, meaning this is always safe\n win.requestAnimationFrame(function () {\n targetToFocusOnNextRepaint && targetToFocusOnNextRepaint.focus();\n // We are done focusing for this frame, so reset the queued focus element\n targetToFocusOnNextRepaint = undefined;\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, path) {\n var element = parent;\n for (var _i = 0, path_1 = path; _i < path_1.length; _i++) {\n var index = path_1[_i];\n var nextChild = element.children[Math.min(index, element.children.length - 1)];\n if (!nextChild) {\n break;\n }\n element = nextChild;\n }\n element =\n isElementTabbable(element) && isElementVisible(element)\n ? element\n : getNextElement(parent, element, true) || getPreviousElement(parent, element);\n return element;\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, toElement) {\n var path = [];\n while (toElement && fromElement && toElement !== fromElement) {\n var parent_1 = getParent(toElement, true);\n if (parent_1 === null) {\n return [];\n }\n path.unshift(Array.prototype.indexOf.call(parent_1.children, toElement));\n toElement = parent_1;\n }\n return path;\n}\n//# sourceMappingURL=focus.js.map","export function on(element, eventName, callback, options) {\n element.addEventListener(eventName, callback, options);\n return function () { return element.removeEventListener(eventName, callback, options); };\n}\n//# sourceMappingURL=on.js.map","import { mergeCssSets, Stylesheet } from '@fluentui/merge-styles';\nimport { getRTL } from './rtl';\nimport { getWindow } from './dom';\nvar MAX_CACHE_COUNT = 50;\nvar DEFAULT_SPECIFICITY_MULTIPLIER = 5;\nvar _memoizedClassNames = 0;\nvar stylesheet = Stylesheet.getInstance();\nif (stylesheet && stylesheet.onReset) {\n stylesheet.onReset(function () { return _memoizedClassNames++; });\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// This represents a prop we attach to each Map to indicate the cached return value\n// associated with the graph node.\nvar retVal = '__retval__';\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(options) {\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 if (options === void 0) { options = {}; }\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 var map = new Map();\n var styleCalcCount = 0;\n var getClassNamesCount = 0;\n var currentMemoizedClassNames = _memoizedClassNames;\n var getClassNames = function (styleFunctionOrObject, styleProps) {\n var _a;\n if (styleProps === void 0) { styleProps = {}; }\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 (options.useStaticStyles &&\n typeof styleFunctionOrObject === 'function' &&\n styleFunctionOrObject.__noStyleOverride__) {\n return styleFunctionOrObject(styleProps);\n }\n getClassNamesCount++;\n var current = map;\n var theme = styleProps.theme;\n var rtl = theme && theme.rtl !== undefined ? theme.rtl : getRTL();\n var disableCaching = options.disableCaching;\n // On reset of our stylesheet, reset memoized cache.\n if (currentMemoizedClassNames !== _memoizedClassNames) {\n currentMemoizedClassNames = _memoizedClassNames;\n map = new Map();\n styleCalcCount = 0;\n }\n if (!options.disableCaching) {\n current = _traverseMap(map, styleFunctionOrObject);\n current = _traverseMap(current, styleProps);\n }\n if (disableCaching || !current[retVal]) {\n if (styleFunctionOrObject === undefined) {\n current[retVal] = {};\n }\n else {\n current[retVal] = mergeCssSets([\n (typeof styleFunctionOrObject === 'function'\n ? styleFunctionOrObject(styleProps)\n : styleFunctionOrObject),\n ], { rtl: !!rtl, specificityMultiplier: options.useStaticStyles ? DEFAULT_SPECIFICITY_MULTIPLIER : undefined });\n }\n if (!disableCaching) {\n styleCalcCount++;\n }\n }\n if (styleCalcCount > (options.cacheSize || MAX_CACHE_COUNT)) {\n var win = getWindow();\n if ((_a = win === null || win === void 0 ? void 0 : win.FabricConfig) === null || _a === void 0 ? void 0 : _a.enableClassNameCacheFullWarning) {\n // eslint-disable-next-line no-console\n console.warn(\"Styles are being recalculated too frequently. Cache miss rate is \" + styleCalcCount + \"/\" + getClassNamesCount + \".\");\n // eslint-disable-next-line no-console\n console.trace();\n }\n map.clear();\n styleCalcCount = 0;\n // Mutate the options passed in, that's all we can do.\n options.disableCaching = true;\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[retVal];\n };\n return getClassNames;\n}\nfunction _traverseEdge(current, value) {\n value = _normalizeValue(value);\n if (!current.has(value)) {\n current.set(value, new Map());\n }\n return current.get(value);\n}\nfunction _traverseMap(current, inputs) {\n if (typeof inputs === 'function') {\n var cachedInputsFromStyled = inputs.__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 (var _i = 0, _a = inputs.__cachedInputs__; _i < _a.length; _i++) {\n var input = _a[_i];\n current = _traverseEdge(current, input);\n }\n }\n else {\n current = _traverseEdge(current, inputs);\n }\n }\n else if (typeof inputs === 'object') {\n for (var propName in inputs) {\n if (inputs.hasOwnProperty(propName)) {\n current = _traverseEdge(current, inputs[propName]);\n }\n }\n }\n return current;\n}\nfunction _normalizeValue(value) {\n switch (value) {\n case undefined:\n return '__undefined__';\n case null:\n return '__null__';\n default:\n return value;\n }\n}\n//# sourceMappingURL=classNamesFunction.js.map","import { Stylesheet } from '@fluentui/merge-styles';\nvar _initializedStylesheetResets = false;\nvar _resetCounter = 0;\nvar _emptyObject = { empty: true };\nvar _dictionary = {};\nvar _weakMap = typeof WeakMap === 'undefined' ? null : WeakMap;\n/**\n * Test utility for providing a custom weakmap.\n *\n * @internal\n * */\nexport function setMemoizeWeakMap(weakMap) {\n _weakMap = weakMap;\n}\n/**\n * Reset memoizations.\n */\nexport function resetMemoizations() {\n _resetCounter++;\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(_target, _key, descriptor) {\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 var fn = memoizeFunction(descriptor.value && descriptor.value.bind(null));\n return {\n configurable: true,\n get: function () {\n return fn;\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(cb, maxCacheSize, ignoreNullOrUndefinedResult) {\n if (maxCacheSize === void 0) { maxCacheSize = 100; }\n if (ignoreNullOrUndefinedResult === void 0) { ignoreNullOrUndefinedResult = false; }\n // Avoid breaking scenarios which don't have weak map.\n if (!_weakMap) {\n return cb;\n }\n if (!_initializedStylesheetResets) {\n var stylesheet = Stylesheet.getInstance();\n if (stylesheet && stylesheet.onReset) {\n Stylesheet.getInstance().onReset(resetMemoizations);\n }\n _initializedStylesheetResets = true;\n }\n var rootNode;\n var cacheSize = 0;\n var localResetCounter = _resetCounter;\n return function memoizedFunction() {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n var currentNode = rootNode;\n if (rootNode === undefined ||\n localResetCounter !== _resetCounter ||\n (maxCacheSize > 0 && cacheSize > maxCacheSize)) {\n rootNode = _createNode();\n cacheSize = 0;\n localResetCounter = _resetCounter;\n }\n currentNode = rootNode;\n // Traverse the tree until we find the match.\n for (var i = 0; i < args.length; i++) {\n var arg = _normalizeArg(args[i]);\n if (!currentNode.map.has(arg)) {\n currentNode.map.set(arg, _createNode());\n }\n currentNode = currentNode.map.get(arg);\n }\n if (!currentNode.hasOwnProperty('value')) {\n currentNode.value = cb.apply(void 0, args);\n cacheSize++;\n }\n if (ignoreNullOrUndefinedResult && (currentNode.value === null || currentNode.value === undefined)) {\n currentNode.value = cb.apply(void 0, args);\n }\n return currentNode.value;\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(getValue) {\n if (!_weakMap) {\n // Without a `WeakMap` implementation, memoization is not possible.\n return getValue;\n }\n var cache = new _weakMap();\n function memoizedGetValue(input) {\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 if (cache.has(input)) {\n return cache.get(input);\n }\n var value = getValue(input);\n cache.set(input, value);\n return value;\n }\n return memoizedGetValue;\n}\nfunction _normalizeArg(val) {\n if (!val) {\n return _emptyObject;\n }\n else if (typeof val === 'object' || typeof val === 'function') {\n return val;\n }\n else if (!_dictionary[val]) {\n _dictionary[val] = { val: val };\n }\n return _dictionary[val];\n}\nfunction _createNode() {\n return {\n map: _weakMap ? new _weakMap() : null,\n };\n}\n//# sourceMappingURL=memoize.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { createMemoizer } from '../memoize';\nfunction createComposedComponent(outer) {\n var Outer = outer;\n var outerMemoizer = createMemoizer(function (inner) {\n if (outer === inner) {\n throw new Error('Attempted to compose a component with itself.');\n }\n var Inner = inner;\n var innerMemoizer = createMemoizer(function (defaultRender) {\n var InnerWithDefaultRender = function (innerProps) {\n return React.createElement(Inner, __assign({}, innerProps, { defaultRender: defaultRender }));\n };\n return InnerWithDefaultRender;\n });\n var OuterWithDefaultRender = function (outerProps) {\n var defaultRender = outerProps.defaultRender;\n return React.createElement(Outer, __assign({}, outerProps, { defaultRender: defaultRender ? innerMemoizer(defaultRender) : Inner }));\n };\n return OuterWithDefaultRender;\n });\n return outerMemoizer;\n}\nvar componentAsMemoizer = createMemoizer(createComposedComponent);\n/**\n * Composes two components which conform to the `IComponentAs` specification; that is, two\n * components which accept a `defaultRender` prop, which is a 'default' implementation of\n * a component which accepts the same overall props.\n *\n * @public\n */\nexport function composeComponentAs(outer, inner) {\n return componentAsMemoizer(outer)(inner);\n}\n//# sourceMappingURL=composeComponentAs.js.map","/**\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, valueProp) {\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//# sourceMappingURL=controlled.js.map","/**\n * Concatination helper, which can merge class names together. Skips over falsey values.\n *\n * @public\n */\nexport function css() {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n var classes = [];\n for (var _a = 0, args_1 = args; _a < args_1.length; _a++) {\n var arg = args_1[_a];\n if (arg) {\n if (typeof arg === 'string') {\n classes.push(arg);\n }\n else if (arg.hasOwnProperty('toString') && typeof arg.toString === 'function') {\n classes.push(arg.toString());\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n for (var key in arg) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (arg[key]) {\n classes.push(key);\n }\n }\n }\n }\n }\n return classes.join(' ');\n}\n//# sourceMappingURL=css.js.map","import { __assign } from \"tslib\";\nimport { GlobalSettings } from '../GlobalSettings';\nvar CustomizationsGlobalKey = 'customizations';\nvar NO_CUSTOMIZATIONS = { settings: {}, scopedSettings: {}, inCustomizerContext: false };\nvar _allSettings = GlobalSettings.getValue(CustomizationsGlobalKey, {\n settings: {},\n scopedSettings: {},\n inCustomizerContext: false,\n});\nvar _events = [];\nvar Customizations = /** @class */ (function () {\n function Customizations() {\n }\n Customizations.reset = function () {\n _allSettings.settings = {};\n _allSettings.scopedSettings = {};\n };\n /** Apply global Customization settings.\n * @example Customizations.applySettings(\\{ theme: \\{...\\} \\});\n */\n Customizations.applySettings = function (settings) {\n _allSettings.settings = __assign(__assign({}, _allSettings.settings), settings);\n Customizations._raiseChange();\n };\n /** Apply Customizations to a particular named scope, like a component.\n * @example Customizations.applyScopedSettings('Nav', \\{ styles: () =\\> \\{\\} \\});\n */\n Customizations.applyScopedSettings = function (scopeName, settings) {\n _allSettings.scopedSettings[scopeName] = __assign(__assign({}, _allSettings.scopedSettings[scopeName]), settings);\n Customizations._raiseChange();\n };\n Customizations.getSettings = function (properties, scopeName, localSettings) {\n if (localSettings === void 0) { localSettings = NO_CUSTOMIZATIONS; }\n var settings = {};\n var localScopedSettings = (scopeName && localSettings.scopedSettings[scopeName]) || {};\n var globalScopedSettings = (scopeName && _allSettings.scopedSettings[scopeName]) || {};\n for (var _i = 0, properties_1 = properties; _i < properties_1.length; _i++) {\n var property = properties_1[_i];\n settings[property] =\n localScopedSettings[property] ||\n localSettings.settings[property] ||\n globalScopedSettings[property] ||\n _allSettings.settings[property];\n }\n return settings;\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 Customizations.applyBatchedUpdates = function (code, suppressUpdate) {\n Customizations._suppressUpdates = true;\n try {\n code();\n }\n catch (_a) {\n /* do nothing */\n }\n Customizations._suppressUpdates = false;\n if (!suppressUpdate) {\n Customizations._raiseChange();\n }\n };\n Customizations.observe = function (onChange) {\n _events.push(onChange);\n };\n Customizations.unobserve = function (onChange) {\n _events = _events.filter(function (cb) { return cb !== onChange; });\n };\n Customizations._raiseChange = function () {\n if (!Customizations._suppressUpdates) {\n _events.forEach(function (cb) { return cb(); });\n }\n };\n return Customizations;\n}());\nexport { Customizations };\n//# sourceMappingURL=Customizations.js.map","import * as React from 'react';\nexport var CustomizerContext = React.createContext({\n customizations: {\n inCustomizerContext: false,\n settings: {},\n scopedSettings: {},\n },\n});\n//# sourceMappingURL=CustomizerContext.js.map","import { __assign } from \"tslib\";\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, newSettings) {\n if (oldSettings === void 0) { oldSettings = {}; }\n var mergeSettingsWith = _isSettingsFunction(newSettings) ? newSettings : _settingsMergeWith(newSettings);\n return mergeSettingsWith(oldSettings);\n}\nexport function mergeScopedSettings(oldSettings, newSettings) {\n if (oldSettings === void 0) { oldSettings = {}; }\n var mergeSettingsWith = _isSettingsFunction(newSettings) ? newSettings : _scopedSettingsMergeWith(newSettings);\n return mergeSettingsWith(oldSettings);\n}\nfunction _isSettingsFunction(settings) {\n return typeof settings === 'function';\n}\nfunction _settingsMergeWith(newSettings) {\n return function (settings) { return (newSettings ? __assign(__assign({}, settings), newSettings) : settings); };\n}\nfunction _scopedSettingsMergeWith(scopedSettingsFromProps) {\n if (scopedSettingsFromProps === void 0) { scopedSettingsFromProps = {}; }\n return function (oldScopedSettings) {\n var newScopedSettings = __assign({}, oldScopedSettings);\n for (var scopeName in scopedSettingsFromProps) {\n if (scopedSettingsFromProps.hasOwnProperty(scopeName)) {\n newScopedSettings[scopeName] = __assign(__assign({}, oldScopedSettings[scopeName]), scopedSettingsFromProps[scopeName]);\n }\n }\n return newScopedSettings;\n };\n}\n//# sourceMappingURL=mergeSettings.js.map","import { mergeSettings, mergeScopedSettings } from './mergeSettings';\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, parentContext) {\n var _a = (parentContext || {}).customizations, customizations = _a === void 0 ? { settings: {}, scopedSettings: {} } : _a;\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//# sourceMappingURL=mergeCustomizations.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { Customizations } from './Customizations';\nimport { CustomizerContext } from './CustomizerContext';\nimport { mergeCustomizations } from './mergeCustomizations';\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 */\nvar Customizer = /** @class */ (function (_super) {\n __extends(Customizer, _super);\n function Customizer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this._onCustomizationChange = function () { return _this.forceUpdate(); };\n return _this;\n }\n Customizer.prototype.componentDidMount = function () {\n Customizations.observe(this._onCustomizationChange);\n };\n Customizer.prototype.componentWillUnmount = function () {\n Customizations.unobserve(this._onCustomizationChange);\n };\n Customizer.prototype.render = function () {\n var _this = this;\n var contextTransform = this.props.contextTransform;\n return (React.createElement(CustomizerContext.Consumer, null, function (parentContext) {\n var newContext = mergeCustomizations(_this.props, parentContext);\n if (contextTransform) {\n newContext = contextTransform(newContext);\n }\n return React.createElement(CustomizerContext.Provider, { value: newContext }, _this.props.children);\n }));\n };\n return Customizer;\n}(React.Component));\nexport { Customizer };\n//# sourceMappingURL=Customizer.js.map","/**\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 */\nexport function hoistStatics(source, dest) {\n for (var name_1 in source) {\n if (source.hasOwnProperty(name_1)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n dest[name_1] = source[name_1];\n }\n }\n return dest;\n}\n//# sourceMappingURL=hoistStatics.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { Customizations } from './Customizations';\nimport { hoistStatics } from '../hoistStatics';\nimport { CustomizerContext } from './CustomizerContext';\nimport { concatStyleSets } from '@fluentui/merge-styles';\nexport function customizable(scope, fields, concatStyles) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return function customizableFactory(ComposedComponent) {\n var _a;\n var resultClass = (_a = /** @class */ (function (_super) {\n __extends(ComponentWithInjectedProps, _super);\n function ComponentWithInjectedProps(props) {\n var _this = _super.call(this, props) || this;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n _this._styleCache = {};\n _this._onSettingChanged = _this._onSettingChanged.bind(_this);\n return _this;\n }\n ComponentWithInjectedProps.prototype.componentDidMount = function () {\n Customizations.observe(this._onSettingChanged);\n };\n ComponentWithInjectedProps.prototype.componentWillUnmount = function () {\n Customizations.unobserve(this._onSettingChanged);\n };\n ComponentWithInjectedProps.prototype.render = function () {\n var _this = this;\n return (React.createElement(CustomizerContext.Consumer, null, function (context) {\n var defaultProps = Customizations.getSettings(fields, scope, context.customizations);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var componentProps = _this.props;\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(__assign(__assign({}, defaultProps), componentProps));\n }\n // If concatStyles is true and custom styles have been defined compute those styles\n if (concatStyles && defaultProps.styles) {\n if (_this._styleCache.default !== defaultProps.styles ||\n _this._styleCache.component !== componentProps.styles) {\n var mergedStyles = concatStyleSets(defaultProps.styles, componentProps.styles);\n _this._styleCache.default = defaultProps.styles;\n _this._styleCache.component = componentProps.styles;\n _this._styleCache.merged = mergedStyles;\n }\n return React.createElement(ComposedComponent, __assign({}, defaultProps, componentProps, { styles: _this._styleCache.merged }));\n }\n return React.createElement(ComposedComponent, __assign({}, defaultProps, componentProps));\n }));\n };\n ComponentWithInjectedProps.prototype._onSettingChanged = function () {\n this.forceUpdate();\n };\n return ComponentWithInjectedProps;\n }(React.Component)),\n _a.displayName = 'Customized' + scope,\n _a);\n return hoistStatics(ComposedComponent, resultClass);\n };\n}\n//# sourceMappingURL=customizable.js.map","import * as React from 'react';\nimport { Customizations } from './Customizations';\nimport { CustomizerContext } from './CustomizerContext';\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, scopeName) {\n var forceUpdate = useForceUpdate();\n var customizations = React.useContext(CustomizerContext).customizations;\n var inCustomizerContext = customizations.inCustomizerContext;\n React.useEffect(function () {\n if (!inCustomizerContext) {\n Customizations.observe(forceUpdate);\n }\n return function () {\n if (!inCustomizerContext) {\n Customizations.unobserve(forceUpdate);\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- exclude forceUpdate\n }, [inCustomizerContext]);\n return Customizations.getSettings(properties, scopeName, customizations);\n}\nfunction useForceUpdate() {\n var _a = React.useState(0), setValue = _a[1];\n return function () { return setValue(function (value) { return ++value; }); };\n}\n//# sourceMappingURL=useCustomizationSettings.js.map","import { appendFunction } from './appendFunction';\n/**\n * Extends a component's lifetime methods by appending new functions to the existing lifetime functions.\n */\nexport function extendComponent(parent, methods) {\n for (var name_1 in methods) {\n if (methods.hasOwnProperty(name_1)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n parent[name_1] = appendFunction(parent, parent[name_1], methods[name_1]);\n }\n }\n}\n//# sourceMappingURL=extendComponent.js.map","import { getWindow } from './dom/getWindow';\nimport { Stylesheet } from '@fluentui/merge-styles';\n// Initialize global window id.\nvar CURRENT_ID_PROPERTY = '__currentId__';\nvar DEFAULT_ID_STRING = 'id__';\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nvar _global = getWindow() || {};\nif (_global[CURRENT_ID_PROPERTY] === undefined) {\n _global[CURRENT_ID_PROPERTY] = 0;\n}\nvar _initializedStylesheetResets = false;\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) {\n if (!_initializedStylesheetResets) {\n // Configure ids to reset on stylesheet resets.\n var stylesheet = Stylesheet.getInstance();\n if (stylesheet && stylesheet.onReset) {\n stylesheet.onReset(resetIds);\n }\n _initializedStylesheetResets = true;\n }\n var index = _global[CURRENT_ID_PROPERTY]++;\n return (prefix === undefined ? DEFAULT_ID_STRING : prefix) + index;\n}\n/**\n * Resets id counter to an (optional) number.\n *\n * @public\n */\nexport function resetIds(counter) {\n if (counter === void 0) { counter = 0; }\n _global[CURRENT_ID_PROPERTY] = counter;\n}\n//# sourceMappingURL=getId.js.map","var toObjectMap = function () {\n var items = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n items[_i] = arguments[_i];\n }\n var result = {};\n for (var _a = 0, items_1 = items; _a < items_1.length; _a++) {\n var item = items_1[_a];\n var keys = Array.isArray(item) ? item : Object.keys(item);\n for (var _b = 0, keys_1 = keys; _b < keys_1.length; _b++) {\n var key = keys_1[_b];\n result[key] = 1;\n }\n }\n return result;\n};\n/**\n * An array of events that are allowed on every html element type.\n *\n * @public\n */\nexport var 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 * An array of element attributes which are allowed on every html element type.\n *\n * @public\n */\nexport var baseElementProperties = toObjectMap([\n 'accessKey',\n 'children',\n 'className',\n 'contentEditable',\n 'dir',\n 'draggable',\n 'hidden',\n 'htmlFor',\n 'id',\n 'lang',\n 'ref',\n 'role',\n 'style',\n 'tabIndex',\n 'title',\n 'translate',\n 'spellCheck',\n 'name', // global\n]);\n/**\n * An array of HTML element properties and events.\n *\n * @public\n */\nexport var htmlElementProperties = toObjectMap(baseElementProperties, baseElementEvents);\n/**\n * An array of LABEL tag properties and events.\n *\n * @public\n */\nexport var labelProperties = toObjectMap(htmlElementProperties, [\n 'form', // button, fieldset, input, label, meter, object, output, select, textarea\n]);\n/**\n * An array of AUDIO tag properties and events.\n\n * @public\n */\nexport var audioProperties = toObjectMap(htmlElementProperties, [\n 'height',\n 'loop',\n 'muted',\n 'preload',\n 'src',\n 'width', // canvas, embed, iframe, img, input, object, video\n]);\n/**\n * An array of VIDEO tag properties and events.\n *\n * @public\n */\nexport var videoProperties = toObjectMap(audioProperties, [\n 'poster', // video\n]);\n/**\n * An array of OL tag properties and events.\n *\n * @public\n */\nexport var olProperties = toObjectMap(htmlElementProperties, [\n 'start', // ol\n]);\n/**\n * An array of LI tag properties and events.\n *\n * @public\n */\nexport var liProperties = toObjectMap(htmlElementProperties, [\n 'value', // button, input, li, option, meter, progress, param\n]);\n/**\n * An array of A tag properties and events.\n *\n * @public\n */\nexport var anchorProperties = toObjectMap(htmlElementProperties, [\n 'download',\n 'href',\n 'hrefLang',\n 'media',\n 'rel',\n 'target',\n 'type', // a, button, input, link, menu, object, script, source, style\n]);\n/**\n * An array of BUTTON tag properties and events.\n *\n * @public\n */\nexport var buttonProperties = toObjectMap(htmlElementProperties, [\n 'autoFocus',\n 'disabled',\n 'form',\n 'formAction',\n 'formEncType',\n 'formMethod',\n 'formNoValidate',\n 'formTarget',\n 'type',\n 'value', // button, input, li, option, meter, progress, param,\n]);\n/**\n * An array of INPUT tag properties and events.\n *\n * @public\n */\nexport var inputProperties = toObjectMap(buttonProperties, [\n 'accept',\n 'alt',\n 'autoCapitalize',\n 'autoComplete',\n 'checked',\n 'dirname',\n 'form',\n 'height',\n 'inputMode',\n 'list',\n 'max',\n 'maxLength',\n 'min',\n 'minLength',\n 'multiple',\n 'pattern',\n 'placeholder',\n 'readOnly',\n 'required',\n 'src',\n 'step',\n 'size',\n 'type',\n 'value',\n 'width', // canvas, embed, iframe, img, input, object, video\n]);\n/**\n * An array of TEXTAREA tag properties and events.\n *\n * @public\n */\nexport var textAreaProperties = toObjectMap(buttonProperties, [\n 'autoCapitalize',\n 'cols',\n 'dirname',\n 'form',\n 'maxLength',\n 'minLength',\n 'placeholder',\n 'readOnly',\n 'required',\n 'rows',\n 'wrap', // textarea\n]);\n/**\n * An array of SELECT tag properties and events.\n *\n * @public\n */\nexport var selectProperties = toObjectMap(buttonProperties, [\n 'form',\n 'multiple',\n 'required', // input, select, textarea\n]);\nexport var optionProperties = toObjectMap(htmlElementProperties, [\n 'selected',\n 'value', // button, input, li, option, meter, progress, param\n]);\n/**\n * An array of TABLE tag properties and events.\n *\n * @public\n */\nexport var tableProperties = toObjectMap(htmlElementProperties, [\n 'cellPadding',\n 'cellSpacing', // table\n]);\n/**\n * An array of TR tag properties and events.\n *\n * @public\n */\nexport var trProperties = htmlElementProperties;\n/**\n * An array of TH tag properties and events.\n *\n * @public\n */\nexport var thProperties = toObjectMap(htmlElementProperties, [\n 'rowSpan',\n 'scope', // th\n]);\n/**\n * An array of TD tag properties and events.\n *\n * @public\n */\nexport var tdProperties = toObjectMap(htmlElementProperties, [\n 'colSpan',\n 'headers',\n 'rowSpan',\n 'scope', // th\n]);\nexport var colGroupProperties = toObjectMap(htmlElementProperties, [\n 'span', // col, colgroup\n]);\nexport var colProperties = toObjectMap(htmlElementProperties, [\n 'span', // col, colgroup\n]);\n/**\n * An array of FORM tag properties and events.\n *\n * @public\n */\nexport var formProperties = toObjectMap(htmlElementProperties, [\n 'acceptCharset',\n 'action',\n 'encType',\n 'encType',\n 'method',\n 'noValidate',\n 'target', // form\n]);\n/**\n * An array of IFRAME tag properties and events.\n *\n * @public\n */\nexport var iframeProperties = toObjectMap(htmlElementProperties, [\n 'allow',\n 'allowFullScreen',\n 'allowPaymentRequest',\n 'allowTransparency',\n 'csp',\n 'height',\n 'importance',\n 'referrerPolicy',\n 'sandbox',\n 'src',\n 'srcDoc',\n 'width', // canvas, embed, iframe, img, input, object, video,\n]);\n/**\n * An array of IMAGE tag properties and events.\n *\n * @public\n */\nexport var imgProperties = toObjectMap(htmlElementProperties, [\n 'alt',\n 'crossOrigin',\n 'height',\n 'src',\n 'srcSet',\n 'useMap',\n 'width', // canvas, embed, iframe, img, input, object, video\n]);\n/**\n * @deprecated Use imgProperties for img elements.\n */\nexport var imageProperties = imgProperties;\n/**\n * An array of DIV tag properties and events.\n *\n * @public\n */\nexport var divProperties = htmlElementProperties;\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\nprops, allowedPropNames, excludedPropNames) {\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 var isArray = Array.isArray(allowedPropNames);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var result = {};\n var keys = Object.keys(props);\n for (var _i = 0, keys_2 = keys; _i < keys_2.length; _i++) {\n var key = keys_2[_i];\n var isNativeProp = (!isArray && allowedPropNames[key]) ||\n (isArray && allowedPropNames.indexOf(key) >= 0) ||\n key.indexOf('data-') === 0 ||\n key.indexOf('aria-') === 0;\n if (isNativeProp && (!excludedPropNames || (excludedPropNames === null || excludedPropNames === void 0 ? void 0 : excludedPropNames.indexOf(key)) === -1)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n result[key] = props[key];\n }\n }\n return result;\n}\n//# sourceMappingURL=properties.js.map","import { labelProperties, audioProperties, videoProperties, olProperties, liProperties, anchorProperties, buttonProperties, inputProperties, textAreaProperties, selectProperties, optionProperties, tableProperties, trProperties, thProperties, tdProperties, colGroupProperties, colProperties, formProperties, iframeProperties, imgProperties, htmlElementProperties, getNativeProps, } from './properties';\nvar nativeElementMap = {\n label: labelProperties,\n audio: audioProperties,\n video: videoProperties,\n ol: olProperties,\n li: liProperties,\n a: anchorProperties,\n button: buttonProperties,\n input: inputProperties,\n textarea: textAreaProperties,\n select: selectProperties,\n option: optionProperties,\n table: tableProperties,\n tr: trProperties,\n th: thProperties,\n td: tdProperties,\n colGroup: colGroupProperties,\n col: colProperties,\n form: formProperties,\n iframe: iframeProperties,\n img: imgProperties,\n};\n/**\n * Given an element tagname and user props, filters the props to only allowed props for the given\n * element type.\n * @param tagName - Tag name (e.g. \"div\")\n * @param props - Props object\n * @param excludedPropNames - List of props to disallow\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function getNativeElementProps(tagName, props, excludedPropNames) {\n var allowedPropNames = (tagName && nativeElementMap[tagName]) || htmlElementProperties;\n return getNativeProps(props, allowedPropNames, excludedPropNames);\n}\n//# sourceMappingURL=getNativeElementProps.js.map","var 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 * 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\ndestination, \n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nsource, exclusions) {\n if (exclusions === void 0) { exclusions = REACT_LIFECYCLE_EXCLUSIONS; }\n var hoisted = [];\n var _loop_1 = function (methodName) {\n if (typeof source[methodName] === 'function' &&\n destination[methodName] === undefined &&\n (!exclusions || exclusions.indexOf(methodName) === -1)) {\n hoisted.push(methodName);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n destination[methodName] = function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n source[methodName].apply(source, args);\n };\n }\n };\n for (var methodName in source) {\n _loop_1(methodName);\n }\n return hoisted;\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, methodNames) {\n methodNames.forEach(function (methodName) { return delete source[methodName]; });\n}\n//# sourceMappingURL=hoist.js.map","import { extendComponent } from './extendComponent';\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) {\n extendComponent(obj, {\n componentDidMount: _onMount,\n componentDidUpdate: _onUpdate,\n componentWillUnmount: _onUnmount,\n });\n}\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction _onMount() {\n _setComponentRef(this.props.componentRef, this);\n}\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction _onUpdate(prevProps) {\n if (prevProps.componentRef !== this.props.componentRef) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n _setComponentRef(prevProps.componentRef, null);\n _setComponentRef(this.props.componentRef, this);\n }\n}\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction _onUnmount() {\n _setComponentRef(this.props.componentRef, null);\n}\nfunction _setComponentRef(componentRef, value) {\n if (componentRef) {\n if (typeof componentRef === 'object') {\n componentRef.current = value;\n }\n else if (typeof componentRef === 'function') {\n componentRef(value);\n }\n }\n}\n//# sourceMappingURL=initializeComponentRef.js.map","var _a;\nimport { KeyCodes } from './KeyCodes';\nvar DirectionalKeyCodes = (_a = {},\n _a[KeyCodes.up] = 1,\n _a[KeyCodes.down] = 1,\n _a[KeyCodes.left] = 1,\n _a[KeyCodes.right] = 1,\n _a[KeyCodes.home] = 1,\n _a[KeyCodes.end] = 1,\n _a[KeyCodes.tab] = 1,\n _a[KeyCodes.pageUp] = 1,\n _a[KeyCodes.pageDown] = 1,\n _a);\n/**\n * Returns true if the keycode is a directional keyboard key.\n */\nexport function isDirectionalKeyCode(which) {\n return !!DirectionalKeyCodes[which];\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) {\n DirectionalKeyCodes[which] = 1;\n}\n//# sourceMappingURL=keyboard.js.map","import { getWindow } from './dom/getWindow';\nexport var IsFocusVisibleClassName = 'ms-Fabric--isFocusVisible';\nexport var IsFocusHiddenClassName = 'ms-Fabric--isFocusHidden';\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 remove or add focus\n * @param target - optional target\n */\nexport function setFocusVisibility(enabled, target) {\n var win = target ? getWindow(target) : getWindow();\n if (win) {\n var classList = win.document.body.classList;\n classList.add(enabled ? IsFocusVisibleClassName : IsFocusHiddenClassName);\n classList.remove(enabled ? IsFocusHiddenClassName : IsFocusVisibleClassName);\n }\n}\n//# sourceMappingURL=setFocusVisibility.js.map","import * as React from 'react';\nimport { getWindow } from './dom/getWindow';\nimport { isDirectionalKeyCode } from './keyboard';\nimport { setFocusVisibility } from './setFocusVisibility';\n/**\n * Counter for mounted component that uses focus rectangle.\n * We want to cleanup the listners before last component that uses focus rectangle unmounts.\n */\nvar mountCounters = new WeakMap();\nfunction setMountCounters(key, delta) {\n var newValue;\n var currValue = mountCounters.get(key);\n if (currValue) {\n newValue = currValue + delta;\n }\n else {\n newValue = 1;\n }\n mountCounters.set(key, newValue);\n return newValue;\n}\n/**\n * Initializes the logic which:\n *\n * 1. Subscribes keydown and mousedown events. (It will only do it once per window,\n * so it's safe to call this method multiple times.)\n * 2. When the user presses directional keyboard keys, adds the 'ms-Fabric--isFocusVisible' classname\n * to the document body, removes the 'ms-Fabric-isFocusHidden' classname.\n * 3. When the user clicks a mouse button, adds the 'ms-Fabric-isFocusHidden' classname to the\n * document body, 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) {\n React.useEffect(function () {\n var _a;\n var win = getWindow(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current);\n if (!win || ((_a = win.FabricConfig) === null || _a === void 0 ? void 0 : _a.disableFocusRects) === true) {\n return undefined;\n }\n var count = setMountCounters(win, 1);\n if (count <= 1) {\n win.addEventListener('mousedown', _onMouseDown, true);\n win.addEventListener('pointerdown', _onPointerDown, true);\n win.addEventListener('keydown', _onKeyDown, true);\n }\n return function () {\n var _a;\n if (!win || ((_a = win.FabricConfig) === null || _a === void 0 ? void 0 : _a.disableFocusRects) === true) {\n return;\n }\n count = setMountCounters(win, -1);\n if (count === 0) {\n win.removeEventListener('mousedown', _onMouseDown, true);\n win.removeEventListener('pointerdown', _onPointerDown, true);\n win.removeEventListener('keydown', _onKeyDown, true);\n }\n };\n }, [rootRef]);\n}\n/**\n * Function Component wrapper which enables calling `useFocusRects` hook.\n * Renders nothing.\n */\nexport var FocusRects = function (props) {\n useFocusRects(props.rootRef);\n return null;\n};\nfunction _onMouseDown(ev) {\n setFocusVisibility(false, ev.target);\n}\nfunction _onPointerDown(ev) {\n if (ev.pointerType !== 'mouse') {\n setFocusVisibility(false, ev.target);\n }\n}\nfunction _onKeyDown(ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (isDirectionalKeyCode(ev.which)) {\n setFocusVisibility(true, ev.target);\n }\n}\n//# sourceMappingURL=useFocusRects.js.map","import { getWindow } from './dom/getWindow';\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) {\n var result = null;\n try {\n var win = getWindow();\n result = win ? win.localStorage.getItem(key) : null;\n }\n catch (e) {\n /* Eat the exception */\n }\n return result;\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, data) {\n try {\n var win = getWindow();\n win && win.localStorage.setItem(key, data);\n }\n catch (e) {\n /* Eat the exception */\n }\n}\n//# sourceMappingURL=localStorage.js.map","import { getDocument } from './dom/getDocument';\nimport * as localStorage from './localStorage';\nimport * as sessionStorage from './sessionStorage';\n// Default to undefined so that we initialize on first read.\nvar _language;\nvar STORAGE_KEY = 'language';\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(persistenceType) {\n if (persistenceType === void 0) { persistenceType = 'sessionStorage'; }\n if (_language === undefined) {\n var doc = getDocument();\n var savedLanguage = persistenceType === 'localStorage'\n ? localStorage.getItem(STORAGE_KEY)\n : persistenceType === 'sessionStorage'\n ? sessionStorage.getItem(STORAGE_KEY)\n : undefined;\n if (savedLanguage) {\n _language = savedLanguage;\n }\n if (_language === undefined && doc) {\n _language = doc.documentElement.getAttribute('lang');\n }\n if (_language === undefined) {\n _language = 'en';\n }\n }\n return _language;\n}\nexport function setLanguage(language, persistenceParam) {\n var doc = getDocument();\n if (doc) {\n doc.documentElement.setAttribute('lang', language);\n }\n var persistenceType = persistenceParam === true ? 'none' : !persistenceParam ? 'sessionStorage' : persistenceParam;\n if (persistenceType === 'localStorage') {\n localStorage.setItem(STORAGE_KEY, language);\n }\n else if (persistenceType === 'sessionStorage') {\n sessionStorage.setItem(STORAGE_KEY, language);\n }\n _language = language;\n}\n//# sourceMappingURL=language.js.map","/**\n * Determines the distance between two points.\n *\n * @public\n */\n/* eslint-disable deprecation/deprecation */\nexport function getDistanceBetweenPoints(point1, point2) {\n var left1 = point1.left || point1.x || 0;\n var top1 = point1.top || point1.y || 0;\n var left2 = point2.left || point2.x || 0;\n var top2 = point2.top || point2.y || 0;\n /* eslint-enable deprecation/deprecation */\n var distance = Math.sqrt(Math.pow(left1 - left2, 2) + Math.pow(top1 - top2, 2));\n return distance;\n}\n/**\n * Produces a proportionally-scaled version of an input content size when fit to a bounding size.\n * Given a `contentSize` and a `boundsSize`, this function scales `contentSize` proportionally\n * using either `contain` or `cover` fit behaviors.\n * Use this function to pre-calculate the layout for the CSS `object-fit` and `background-fit` behaviors.\n * With `contain`, the output size must be the largest it can be while completely within the `boundsSize`.\n * With `cover`, the output size must be the smallest it can be while completely around the `boundsSize`.\n * By default, there is a `maxScale` value of 1, which prevents the `contentSize` from being scaled larger.\n *\n * @param options - the options for the bounds fit operation\n */\nexport function fitContentToBounds(options) {\n var contentSize = options.contentSize, boundsSize = options.boundsSize, _a = options.mode, mode = _a === void 0 ? 'contain' : _a, _b = options.maxScale, maxScale = _b === void 0 ? 1 : _b;\n var contentAspectRatio = contentSize.width / contentSize.height;\n var boundsAspectRatio = boundsSize.width / boundsSize.height;\n var scale;\n if (mode === 'contain' ? contentAspectRatio > boundsAspectRatio : contentAspectRatio < boundsAspectRatio) {\n scale = boundsSize.width / contentSize.width;\n }\n else {\n scale = boundsSize.height / contentSize.height;\n }\n var finalScale = Math.min(maxScale, scale);\n return {\n width: contentSize.width * finalScale,\n height: contentSize.height * finalScale,\n };\n}\n/**\n * Calculates a number's precision based on the number of trailing\n * zeros if the number does not have a decimal indicated by a negative\n * precision. Otherwise, it calculates the number of digits after\n * the decimal point indicated by a positive precision.\n * @param value - the value to determine the precision of\n */\nexport function calculatePrecision(value) {\n /**\n * Group 1:\n * [1-9]([0]+$) matches trailing zeros\n * Group 2:\n * \\.([0-9]*) matches all digits after a decimal point.\n */\n var groups = /[1-9]([0]+$)|\\.([0-9]*)/.exec(String(value));\n if (!groups) {\n return 0;\n }\n if (groups[1]) {\n return -groups[1].length;\n }\n if (groups[2]) {\n return groups[2].length;\n }\n return 0;\n}\n/**\n * Rounds a number to a certain level of precision. Accepts negative precision.\n * @param value - The value that is being rounded.\n * @param precision - The number of decimal places to round the number to\n */\nexport function precisionRound(value, precision, base) {\n if (base === void 0) { base = 10; }\n var exp = Math.pow(base, precision);\n return Math.round(value * exp) / exp;\n}\n//# sourceMappingURL=math.js.map","/**\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) {\n var args = [];\n for (var _i = 1; _i < arguments.length; _i++) {\n args[_i - 1] = arguments[_i];\n }\n for (var _a = 0, args_1 = args; _a < args_1.length; _a++) {\n var arg = args_1[_a];\n _merge(target || {}, arg);\n }\n return target;\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, source, circularReferences) {\n if (circularReferences === void 0) { circularReferences = []; }\n circularReferences.push(source);\n for (var name_1 in source) {\n if (source.hasOwnProperty(name_1)) {\n if (name_1 !== '__proto__' && name_1 !== 'constructor' && name_1 !== 'prototype') {\n var value = source[name_1];\n if (typeof value === 'object' && value !== null && !Array.isArray(value)) {\n var isCircularReference = circularReferences.indexOf(value) > -1;\n target[name_1] = (isCircularReference\n ? value\n : _merge(target[name_1] || {}, value, circularReferences));\n }\n else {\n target[name_1] = value;\n }\n }\n }\n }\n circularReferences.pop();\n return target;\n}\n//# sourceMappingURL=merge.js.map","/**\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 var isIOS = function () {\n if (!window || !window.navigator || !window.navigator.userAgent) {\n return false;\n }\n return /iPad|iPhone|iPod/i.test(window.navigator.userAgent);\n};\n//# sourceMappingURL=mobileDetector.js.map","/**\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 */\nimport { getDocument } from './dom/getDocument';\n/** Tag names to ignore when modalizing */\nvar tagsToIgnore = ['TEMPLATE', 'STYLE', 'SCRIPT'];\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) {\n var targetDocument = getDocument(target);\n if (!targetDocument) {\n // can't do this in SSR\n return function () { return undefined; };\n }\n var affectedNodes = [];\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 (var _i = 0, _a = target.parentElement.children; _i < _a.length; _i++) {\n var sibling = _a[_i];\n // but ignore elements that are already aria-hidden\n var ariaHidden = sibling.getAttribute('aria-hidden');\n if (sibling !== target && (ariaHidden === null || ariaHidden === void 0 ? void 0 : ariaHidden.toLowerCase()) !== 'true' && tagsToIgnore.indexOf(sibling.tagName) === -1) {\n affectedNodes.push([sibling, ariaHidden]);\n }\n }\n target = target.parentElement;\n }\n // take all those elements and set aria-hidden=true on them\n affectedNodes.forEach(function (_a) {\n var node = _a[0];\n node.setAttribute('aria-hidden', 'true');\n });\n return function () {\n unmodalize(affectedNodes);\n affectedNodes = []; // dispose\n };\n}\n/**\n * Undoes the changes that modalize() did.\n */\nfunction unmodalize(affectedNodes) {\n affectedNodes.forEach(function (_a) {\n var node = _a[0], originalValue = _a[1];\n // Restore the original value (false or unset)\n if (originalValue) {\n node.setAttribute('aria-hidden', originalValue);\n }\n else {\n node.removeAttribute('aria-hidden');\n }\n });\n}\n//# sourceMappingURL=modalize.js.map","import { getWindow } from './dom/getWindow';\nvar isMacResult;\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) {\n var _a;\n if (typeof isMacResult === 'undefined' || reset) {\n var win = getWindow();\n // In certain SSR frameworks, `window` will be defined even on the server but `navigator` will be undefined\n var userAgent = (_a = win === null || win === void 0 ? void 0 : win.navigator) === null || _a === void 0 ? void 0 : _a.userAgent;\n isMacResult = !!userAgent && userAgent.indexOf('Macintosh') !== -1;\n }\n return !!isMacResult;\n}\n//# sourceMappingURL=osDetector.js.map","/**\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) {\n return element.clientWidth < element.scrollWidth;\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) {\n return element.clientHeight < element.scrollHeight;\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) {\n return hasHorizontalOverflow(element) || hasVerticalOverflow(element);\n}\n//# sourceMappingURL=overflow.js.map","import { createMemoizer } from '../memoize';\nfunction createComposedRenderFunction(outer) {\n var outerMemoizer = createMemoizer(function (inner) {\n var innerMemoizer = createMemoizer(function (defaultRender) {\n return function (innerProps) {\n return inner(innerProps, defaultRender);\n };\n });\n return function (outerProps, defaultRender) {\n return outer(outerProps, defaultRender ? innerMemoizer(defaultRender) : inner);\n };\n });\n return outerMemoizer;\n}\nvar memoizer = createMemoizer(createComposedRenderFunction);\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(outer, inner) {\n return memoizer(outer)(inner);\n}\n//# sourceMappingURL=composeRenderFunction.js.map","import { extendComponent } from './extendComponent';\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 var safeRequestAnimationFrame = function (component) {\n var activeTimeouts;\n return function (cb) {\n if (!activeTimeouts) {\n activeTimeouts = new Set();\n extendComponent(component, {\n componentWillUnmount: function () {\n activeTimeouts.forEach(function (id) { return cancelAnimationFrame(id); });\n },\n });\n }\n var timeoutId = requestAnimationFrame(function () {\n activeTimeouts.delete(timeoutId);\n cb();\n });\n activeTimeouts.add(timeoutId);\n };\n};\n//# sourceMappingURL=safeRequestAnimationFrame.js.map","export var SELECTION_CHANGE = 'change';\nexport var SELECTION_ITEMS_CHANGE = 'items-change';\n/**\n * {@docCategory Selection}\n */\nexport var SelectionMode;\n(function (SelectionMode) {\n SelectionMode[SelectionMode[\"none\"] = 0] = \"none\";\n SelectionMode[SelectionMode[\"single\"] = 1] = \"single\";\n SelectionMode[SelectionMode[\"multiple\"] = 2] = \"multiple\";\n})(SelectionMode || (SelectionMode = {}));\n/**\n * {@docCategory Selection}\n */\nexport var SelectionDirection;\n(function (SelectionDirection) {\n SelectionDirection[SelectionDirection[\"horizontal\"] = 0] = \"horizontal\";\n SelectionDirection[SelectionDirection[\"vertical\"] = 1] = \"vertical\";\n})(SelectionDirection || (SelectionDirection = {}));\n//# sourceMappingURL=Selection.types.js.map","import { SELECTION_CHANGE, SelectionMode, SELECTION_ITEMS_CHANGE } from './Selection.types';\nimport { EventGroup } from '../EventGroup';\n/**\n * {@docCategory Selection}\n */\nvar Selection = /** @class */ (function () {\n /**\n * Create a new Selection. If `TItem` does not have a `key` property, you must provide an options\n * object with a `getKey` implementation. Providing options is optional otherwise.\n * (At most one `options` object is accepted.)\n */\n function Selection() {\n var options = []; // Otherwise, arguments require options with `getKey`.\n for (var _i = 0 // Otherwise, arguments require options with `getKey`.\n ; _i < arguments.length // Otherwise, arguments require options with `getKey`.\n ; _i++ // Otherwise, arguments require options with `getKey`.\n ) {\n options[_i] = arguments[_i]; // Otherwise, arguments require options with `getKey`.\n }\n var _a = options[0] || {}, onSelectionChanged = _a.onSelectionChanged, onItemsChanged = _a.onItemsChanged, getKey = _a.getKey, _b = _a.canSelectItem, canSelectItem = _b === void 0 ? function () { return true; } : _b, items = _a.items, _c = _a.selectionMode, selectionMode = _c === void 0 ? SelectionMode.multiple : _c;\n this.mode = selectionMode;\n this._getKey = getKey || defaultGetKey;\n this._changeEventSuppressionCount = 0;\n this._exemptedCount = 0;\n this._anchoredIndex = 0;\n this._unselectableCount = 0;\n this._onSelectionChanged = onSelectionChanged;\n this._onItemsChanged = onItemsChanged;\n this._canSelectItem = canSelectItem;\n this._keyToIndexMap = {};\n this._isModal = false;\n this.setItems(items || [], true);\n this.count = this.getSelectedCount();\n }\n Selection.prototype.canSelectItem = function (item, index) {\n if (typeof index === 'number' && index < 0) {\n return false;\n }\n return this._canSelectItem(item, index);\n };\n Selection.prototype.getKey = function (item, index) {\n var key = this._getKey(item, index);\n return typeof key === 'number' || key ? \"\" + key : '';\n };\n Selection.prototype.setChangeEvents = function (isEnabled, suppressChange) {\n this._changeEventSuppressionCount += isEnabled ? -1 : 1;\n if (this._changeEventSuppressionCount === 0 && this._hasChanged) {\n this._hasChanged = false;\n if (!suppressChange) {\n this._change();\n }\n }\n };\n Selection.prototype.isModal = function () {\n return this._isModal;\n };\n Selection.prototype.setModal = function (isModal) {\n if (this._isModal !== isModal) {\n this.setChangeEvents(false);\n this._isModal = isModal;\n if (!isModal) {\n this.setAllSelected(false);\n }\n this._change();\n this.setChangeEvents(true);\n }\n };\n /**\n * Selection needs the items, call this method to set them. If the set\n * of items is the same, this will re-evaluate selection and index maps.\n * Otherwise, shouldClear should be set to true, so that selection is\n * cleared.\n */\n Selection.prototype.setItems = function (items, shouldClear) {\n if (shouldClear === void 0) { shouldClear = true; }\n var newKeyToIndexMap = {};\n var newUnselectableIndices = {};\n var hasSelectionChanged = false;\n this.setChangeEvents(false);\n // Reset the unselectable count.\n this._unselectableCount = 0;\n var haveItemsChanged = false;\n // Build lookup table for quick selection evaluation.\n for (var i = 0; i < items.length; i++) {\n var item = items[i];\n if (item) {\n var key = this.getKey(item, i);\n if (key) {\n if (!haveItemsChanged && (!(key in this._keyToIndexMap) || this._keyToIndexMap[key] !== i)) {\n haveItemsChanged = true;\n }\n newKeyToIndexMap[key] = i;\n }\n }\n newUnselectableIndices[i] = item && !this.canSelectItem(item);\n if (newUnselectableIndices[i]) {\n this._unselectableCount++;\n }\n }\n if (shouldClear || items.length === 0) {\n this._setAllSelected(false, true);\n }\n // Check the exemption list for discrepencies.\n var newExemptedIndicies = {};\n var newExemptedCount = 0;\n for (var indexProperty in this._exemptedIndices) {\n if (this._exemptedIndices.hasOwnProperty(indexProperty)) {\n var index = Number(indexProperty);\n var item = this._items[index];\n var exemptKey = item ? this.getKey(item, Number(index)) : undefined;\n var newIndex = exemptKey ? newKeyToIndexMap[exemptKey] : index;\n if (newIndex === undefined) {\n // The item has likely been replaced or removed.\n hasSelectionChanged = true;\n }\n else {\n // We know the new index of the item. update the existing exemption table.\n newExemptedIndicies[newIndex] = true;\n newExemptedCount++;\n hasSelectionChanged = hasSelectionChanged || newIndex !== index;\n }\n }\n }\n if (this._items && this._exemptedCount === 0 && items.length !== this._items.length && this._isAllSelected) {\n // If everything was selected but the number of items has changed, selection has changed.\n hasSelectionChanged = true;\n }\n if (!haveItemsChanged) {\n for (var _i = 0, _a = Object.keys(this._keyToIndexMap); _i < _a.length; _i++) {\n var key = _a[_i];\n if (!(key in newKeyToIndexMap)) {\n haveItemsChanged = true;\n break;\n }\n }\n }\n this._exemptedIndices = newExemptedIndicies;\n this._exemptedCount = newExemptedCount;\n this._keyToIndexMap = newKeyToIndexMap;\n this._unselectableIndices = newUnselectableIndices;\n this._items = items;\n this._selectedItems = null;\n if (hasSelectionChanged) {\n this._updateCount();\n }\n if (haveItemsChanged) {\n EventGroup.raise(this, SELECTION_ITEMS_CHANGE);\n if (this._onItemsChanged) {\n this._onItemsChanged();\n }\n }\n if (hasSelectionChanged) {\n this._change();\n }\n this.setChangeEvents(true);\n };\n Selection.prototype.getItems = function () {\n return this._items;\n };\n Selection.prototype.getSelection = function () {\n if (!this._selectedItems) {\n this._selectedItems = [];\n var items = this._items;\n if (items) {\n for (var i = 0; i < items.length; i++) {\n if (this.isIndexSelected(i)) {\n this._selectedItems.push(items[i]);\n }\n }\n }\n }\n return this._selectedItems;\n };\n Selection.prototype.getSelectedCount = function () {\n return this._isAllSelected\n ? this._items.length - this._exemptedCount - this._unselectableCount\n : this._exemptedCount;\n };\n Selection.prototype.getSelectedIndices = function () {\n if (!this._selectedIndices) {\n this._selectedIndices = [];\n var items = this._items;\n if (items) {\n for (var i = 0; i < items.length; i++) {\n if (this.isIndexSelected(i)) {\n this._selectedIndices.push(i);\n }\n }\n }\n }\n return this._selectedIndices;\n };\n Selection.prototype.getItemIndex = function (key) {\n var index = this._keyToIndexMap[key];\n return index !== null && index !== void 0 ? index : -1;\n };\n Selection.prototype.isRangeSelected = function (fromIndex, count) {\n if (count === 0) {\n return false;\n }\n var endIndex = fromIndex + count;\n for (var i = fromIndex; i < endIndex; i++) {\n if (!this.isIndexSelected(i)) {\n return false;\n }\n }\n return true;\n };\n Selection.prototype.isAllSelected = function () {\n var selectableCount = this._items.length - this._unselectableCount;\n // In single mode, we can only have a max of 1 item.\n if (this.mode === SelectionMode.single) {\n selectableCount = Math.min(selectableCount, 1);\n }\n return ((this.count > 0 && this._isAllSelected && this._exemptedCount === 0) ||\n (!this._isAllSelected && this._exemptedCount === selectableCount && selectableCount > 0));\n };\n Selection.prototype.isKeySelected = function (key) {\n var index = this._keyToIndexMap[key];\n return this.isIndexSelected(index);\n };\n Selection.prototype.isIndexSelected = function (index) {\n return !!((this.count > 0 && this._isAllSelected && !this._exemptedIndices[index] && !this._unselectableIndices[index]) ||\n (!this._isAllSelected && this._exemptedIndices[index]));\n };\n Selection.prototype.setAllSelected = function (isAllSelected) {\n if (isAllSelected && this.mode !== SelectionMode.multiple) {\n return;\n }\n var selectableCount = this._items ? this._items.length - this._unselectableCount : 0;\n this.setChangeEvents(false);\n if (selectableCount > 0 && (this._exemptedCount > 0 || isAllSelected !== this._isAllSelected)) {\n this._exemptedIndices = {};\n if (isAllSelected !== this._isAllSelected || this._exemptedCount > 0) {\n this._exemptedCount = 0;\n this._isAllSelected = isAllSelected;\n this._change();\n }\n this._updateCount();\n }\n this.setChangeEvents(true);\n };\n Selection.prototype.setKeySelected = function (key, isSelected, shouldAnchor) {\n var index = this._keyToIndexMap[key];\n if (index >= 0) {\n this.setIndexSelected(index, isSelected, shouldAnchor);\n }\n };\n Selection.prototype.setIndexSelected = function (index, isSelected, shouldAnchor) {\n if (this.mode === SelectionMode.none) {\n return;\n }\n // Clamp the index.\n index = Math.min(Math.max(0, index), this._items.length - 1);\n // No-op on out of bounds selections.\n if (index < 0 || index >= this._items.length) {\n return;\n }\n this.setChangeEvents(false);\n var isExempt = this._exemptedIndices[index];\n var canSelect = !this._unselectableIndices[index];\n if (canSelect) {\n if (isSelected && this.mode === SelectionMode.single) {\n // If this is single-select, the previous selection should be removed.\n this._setAllSelected(false, true);\n }\n // Determine if we need to remove the exemption.\n if (isExempt && ((isSelected && this._isAllSelected) || (!isSelected && !this._isAllSelected))) {\n delete this._exemptedIndices[index];\n this._exemptedCount--;\n }\n // Determine if we need to add the exemption.\n if (!isExempt && ((isSelected && !this._isAllSelected) || (!isSelected && this._isAllSelected))) {\n this._exemptedIndices[index] = true;\n this._exemptedCount++;\n }\n if (shouldAnchor) {\n this._anchoredIndex = index;\n }\n }\n this._updateCount();\n this.setChangeEvents(true);\n };\n Selection.prototype.selectToKey = function (key, clearSelection) {\n this.selectToIndex(this._keyToIndexMap[key], clearSelection);\n };\n Selection.prototype.selectToIndex = function (index, clearSelection) {\n if (this.mode === SelectionMode.none) {\n return;\n }\n if (this.mode === SelectionMode.single) {\n this.setIndexSelected(index, true, true);\n return;\n }\n var anchorIndex = this._anchoredIndex || 0;\n var startIndex = Math.min(index, anchorIndex);\n var endIndex = Math.max(index, anchorIndex);\n this.setChangeEvents(false);\n if (clearSelection) {\n this._setAllSelected(false, true);\n }\n for (; startIndex <= endIndex; startIndex++) {\n this.setIndexSelected(startIndex, true, false);\n }\n this.setChangeEvents(true);\n };\n Selection.prototype.toggleAllSelected = function () {\n this.setAllSelected(!this.isAllSelected());\n };\n Selection.prototype.toggleKeySelected = function (key) {\n this.setKeySelected(key, !this.isKeySelected(key), true);\n };\n Selection.prototype.toggleIndexSelected = function (index) {\n this.setIndexSelected(index, !this.isIndexSelected(index), true);\n };\n Selection.prototype.toggleRangeSelected = function (fromIndex, count) {\n if (this.mode === SelectionMode.none) {\n return;\n }\n var isRangeSelected = this.isRangeSelected(fromIndex, count);\n var endIndex = fromIndex + count;\n if (this.mode === SelectionMode.single && count > 1) {\n return;\n }\n this.setChangeEvents(false);\n for (var i = fromIndex; i < endIndex; i++) {\n this.setIndexSelected(i, !isRangeSelected, false);\n }\n this.setChangeEvents(true);\n };\n Selection.prototype._updateCount = function (preserveModalState) {\n if (preserveModalState === void 0) { preserveModalState = false; }\n var count = this.getSelectedCount();\n if (count !== this.count) {\n this.count = count;\n this._change();\n }\n if (!this.count && !preserveModalState) {\n this.setModal(false);\n }\n };\n Selection.prototype._setAllSelected = function (isAllSelected, preserveModalState) {\n if (preserveModalState === void 0) { preserveModalState = false; }\n if (isAllSelected && this.mode !== SelectionMode.multiple) {\n return;\n }\n var selectableCount = this._items ? this._items.length - this._unselectableCount : 0;\n this.setChangeEvents(false);\n if (selectableCount > 0 && (this._exemptedCount > 0 || isAllSelected !== this._isAllSelected)) {\n this._exemptedIndices = {};\n if (isAllSelected !== this._isAllSelected || this._exemptedCount > 0) {\n this._exemptedCount = 0;\n this._isAllSelected = isAllSelected;\n this._change();\n }\n this._updateCount(preserveModalState);\n }\n this.setChangeEvents(true);\n };\n Selection.prototype._change = function () {\n if (this._changeEventSuppressionCount === 0) {\n this._selectedItems = null;\n this._selectedIndices = undefined;\n EventGroup.raise(this, SELECTION_CHANGE);\n if (this._onSelectionChanged) {\n this._onSelectionChanged();\n }\n }\n else {\n this._hasChanged = true;\n }\n };\n return Selection;\n}());\nexport { Selection };\nfunction defaultGetKey(item, index) {\n // 0 may be used as a key\n var _a = (item || {}).key, key = _a === void 0 ? \"\" + index : _a;\n return key;\n}\n//# sourceMappingURL=Selection.js.map","import { __assign, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { concatStyleSetsWithProps } from '@fluentui/merge-styles';\nimport { useCustomizationSettings } from './customizations/useCustomizationSettings';\nvar DefaultFields = ['theme', 'styles'];\nexport function styled(Component, baseStyles, getProps, customizable, pure) {\n customizable = customizable || { scope: '', fields: undefined };\n var scope = customizable.scope, _a = customizable.fields, fields = _a === void 0 ? DefaultFields : _a;\n var Wrapped = React.forwardRef(function (props, forwardedRef) {\n var styles = React.useRef();\n var settings = useCustomizationSettings(fields, scope);\n var customizedStyles = settings.styles, dir = settings.dir, rest = __rest(settings, [\"styles\", \"dir\"]);\n var additionalProps = getProps ? getProps(props) : undefined;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var cache = (styles.current && styles.current.__cachedInputs__) || [];\n var 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 var concatenatedStyles = function (styleProps) {\n return 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.__cachedInputs__ = [\n baseStyles,\n customizedStyles,\n propStyles,\n ];\n concatenatedStyles.__noStyleOverride__ =\n !customizedStyles && !propStyles;\n styles.current = concatenatedStyles;\n }\n return React.createElement(Component, __assign({ ref: forwardedRef }, rest, additionalProps, props, { styles: styles.current }));\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.name);\n // This preserves backwards compatibility.\n var 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 return pureComponent;\n}\n//# sourceMappingURL=styled.js.map","import { getWindow } from './dom/getWindow';\nexport var isIE11 = function () {\n var _a;\n var win = getWindow();\n if (!((_a = win === null || win === void 0 ? void 0 : win.navigator) === null || _a === void 0 ? void 0 : _a.userAgent)) {\n return false;\n }\n return win.navigator.userAgent.indexOf('rv:11.0') > -1;\n};\n//# sourceMappingURL=ie11Detector.js.map","import { __assign } from \"tslib\";\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(defaultProps, propsWithoutDefaults) {\n var props = __assign({}, propsWithoutDefaults);\n for (var _i = 0, _a = Object.keys(defaultProps); _i < _a.length; _i++) {\n var key = _a[_i];\n if (props[key] === undefined) {\n props[key] = defaultProps[key];\n }\n }\n return props;\n}\n//# sourceMappingURL=getPropsWithDefaults.js.map","import { arraysEqual } from './array';\n/**\n * Set up a ref resolver function given internal state managed for the ref.\n * @param local Set\n */\nvar createResolver = function (local) { return function (newValue) {\n for (var _i = 0, _a = local.refs; _i < _a.length; _i++) {\n var ref = _a[_i];\n if (typeof ref === 'function') {\n ref(newValue);\n }\n else if (ref) {\n // work around the immutability of the React.Ref type\n ref.current = newValue;\n }\n }\n}; };\n/**\n * Helper to merge refs from within class components.\n */\nexport var createMergedRef = function (value) {\n var local = {\n refs: [],\n };\n return function () {\n var newRefs = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n newRefs[_i] = arguments[_i];\n }\n if (!local.resolver || !arraysEqual(local.refs, newRefs)) {\n local.resolver = createResolver(local);\n }\n local.refs = newRefs;\n return local.resolver;\n };\n};\n//# sourceMappingURL=createMergedRef.js.map","import * as React from 'react';\nimport { _isSSR } from './dom/setSSR';\n// This hook must live in @fluentui/utilities because _isSSR is not exported\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 `setSSR` 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 var useIsomorphicLayoutEffect = _isSSR ? React.useEffect : React.useLayoutEffect;\n//# sourceMappingURL=useIsomorphicLayoutEffect.js.map","import { __assign } from \"tslib\";\nimport { GlobalSettings, warn } from '@fluentui/utilities';\nimport { fontFace, mergeStyles, Stylesheet } from '@fluentui/merge-styles';\nvar ICON_SETTING_NAME = 'icons';\nvar _iconSettings = GlobalSettings.getValue(ICON_SETTING_NAME, {\n __options: {\n disableWarnings: false,\n warnOnMissingIcons: true,\n },\n __remapped: {},\n});\n// Reset icon registration on stylesheet resets.\nvar stylesheet = Stylesheet.getInstance();\nif (stylesheet && stylesheet.onReset) {\n stylesheet.onReset(function () {\n for (var name_1 in _iconSettings) {\n if (_iconSettings.hasOwnProperty(name_1) && !!_iconSettings[name_1].subset) {\n _iconSettings[name_1].subset.className = undefined;\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 */\nvar normalizeIconName = function (name) { return name.toLowerCase(); };\n/**\n * Registers a given subset of icons.\n *\n * @param iconSubset - the icon subset definition.\n */\nexport function registerIcons(iconSubset, options) {\n var subset = __assign(__assign({}, iconSubset), { isRegistered: false, className: undefined });\n var icons = iconSubset.icons;\n // Grab options, optionally mix user provided ones on top.\n options = options ? __assign(__assign({}, _iconSettings.__options), options) : _iconSettings.__options;\n for (var iconName in icons) {\n if (icons.hasOwnProperty(iconName)) {\n var code = icons[iconName];\n var normalizedIconName = normalizeIconName(iconName);\n if (_iconSettings[normalizedIconName]) {\n _warnDuplicateIcon(iconName);\n }\n else {\n _iconSettings[normalizedIconName] = {\n code: code,\n subset: subset,\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) {\n var options = _iconSettings.__options;\n var _loop_1 = function (iconName) {\n var normalizedIconName = normalizeIconName(iconName);\n if (_iconSettings[normalizedIconName]) {\n delete _iconSettings[normalizedIconName];\n }\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 // Delete any aliases for this iconName\n if (_iconSettings.__remapped[normalizedIconName]) {\n delete _iconSettings.__remapped[normalizedIconName];\n }\n // Delete any items that were an alias for this iconName\n Object.keys(_iconSettings.__remapped).forEach(function (key) {\n if (_iconSettings.__remapped[key] === normalizedIconName) {\n delete _iconSettings.__remapped[key];\n }\n });\n };\n for (var _i = 0, iconNames_1 = iconNames; _i < iconNames_1.length; _i++) {\n var iconName = iconNames_1[_i];\n _loop_1(iconName);\n }\n}\n/**\n * Remaps one icon name to another.\n */\nexport function registerIconAlias(iconName, mappedToName) {\n _iconSettings.__remapped[normalizeIconName(iconName)] = normalizeIconName(mappedToName);\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) {\n var icon = undefined;\n var options = _iconSettings.__options;\n name = name ? normalizeIconName(name) : '';\n name = _iconSettings.__remapped[name] || name;\n if (name) {\n icon = _iconSettings[name];\n if (icon) {\n var subset = icon.subset;\n if (subset && subset.fontFace) {\n if (!subset.isRegistered) {\n fontFace(subset.fontFace);\n subset.isRegistered = true;\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 }\n else {\n // eslint-disable-next-line deprecation/deprecation\n if (!options.disableWarnings && options.warnOnMissingIcons) {\n warn(\"The icon \\\"\" + name + \"\\\" was used but not registered. See https://github.com/microsoft/fluentui/wiki/Using-icons for more information.\");\n }\n }\n }\n return icon;\n}\n/**\n * Sets the icon options.\n *\n * @public\n */\nexport function setIconOptions(options) {\n _iconSettings.__options = __assign(__assign({}, _iconSettings.__options), options);\n}\nvar _missingIcons = [];\nvar _missingIconsTimer = undefined;\nfunction _warnDuplicateIcon(iconName) {\n var options = _iconSettings.__options;\n var warningDelay = 2000;\n var maxIconsInMessage = 10;\n if (!options.disableWarnings) {\n _missingIcons.push(iconName);\n if (_missingIconsTimer === undefined) {\n _missingIconsTimer = setTimeout(function () {\n warn(\"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 _missingIconsTimer = undefined;\n _missingIcons = [];\n }, warningDelay);\n }\n }\n}\n//# sourceMappingURL=icons.js.map","import { __assign } from \"tslib\";\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(p, e, s, isInverted, depComments) {\n if (depComments === void 0) { depComments = false; }\n var semanticColors = __assign({ primaryButtonBorder: 'transparent', errorText: !isInverted ? '#a4262c' : '#F1707B', messageText: !isInverted ? '#323130' : '#F3F2F1', messageLink: !isInverted ? '#005A9E' : '#6CB8F6', messageLinkHovered: !isInverted ? '#004578' : '#82C7FF', infoIcon: !isInverted ? '#605e5c' : '#C8C6C4', errorIcon: !isInverted ? '#A80000' : '#F1707B', blockingIcon: !isInverted ? '#FDE7E9' : '#442726', warningIcon: !isInverted ? '#797775' : '#C8C6C4', severeWarningIcon: !isInverted ? '#D83B01' : '#FCE100', successIcon: !isInverted ? '#107C10' : '#92C353', infoBackground: !isInverted ? '#f3f2f1' : '#323130', errorBackground: !isInverted ? '#FDE7E9' : '#442726', blockingBackground: !isInverted ? '#FDE7E9' : '#442726', warningBackground: !isInverted ? '#FFF4CE' : '#433519', severeWarningBackground: !isInverted ? '#FED9CC' : '#4F2A0F', successBackground: !isInverted ? '#DFF6DD' : '#393D1B', \n // deprecated\n warningHighlight: !isInverted ? '#ffb900' : '#fff100', successText: !isInverted ? '#107C10' : '#92c353' }, s);\n var fullSemanticColors = getSemanticColors(p, e, semanticColors, isInverted);\n return _fixDeprecatedSlots(fullSemanticColors, depComments);\n}\n/**\n * Map partial platte and effects to partial semantic colors.\n */\nexport function getSemanticColors(p, e, s, isInverted, depComments) {\n if (depComments === void 0) { depComments = false; }\n var result = {};\n // map palette\n var _a = p || {}, white = _a.white, black = _a.black, themePrimary = _a.themePrimary, themeDark = _a.themeDark, themeDarker = _a.themeDarker, themeDarkAlt = _a.themeDarkAlt, themeLighter = _a.themeLighter, neutralLight = _a.neutralLight, neutralLighter = _a.neutralLighter, neutralDark = _a.neutralDark, neutralQuaternary = _a.neutralQuaternary, neutralQuaternaryAlt = _a.neutralQuaternaryAlt, neutralPrimary = _a.neutralPrimary, neutralSecondary = _a.neutralSecondary, neutralSecondaryAlt = _a.neutralSecondaryAlt, neutralTertiary = _a.neutralTertiary, neutralTertiaryAlt = _a.neutralTertiaryAlt, neutralLighterAlt = _a.neutralLighterAlt, accent = _a.accent;\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 === null || s === void 0 ? void 0 : 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 // map effects\n if (e === null || e === void 0 ? void 0 : e.elevation4) {\n result.cardShadow = e.elevation4;\n }\n if (!isInverted && (e === null || e === void 0 ? void 0 : e.elevation8)) {\n result.cardShadowHovered = e.elevation8;\n }\n else if (result.variantBorderHovered) {\n result.cardShadowHovered = '0 0 1px ' + result.variantBorderHovered;\n }\n result = __assign(__assign({}, result), s);\n return result;\n}\nfunction _fixDeprecatedSlots(s, depComments) {\n // Add @deprecated tag as comment if enabled\n var dep = '';\n if (depComments === true) {\n dep = ' /* @deprecated */';\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//# sourceMappingURL=makeSemanticColors.js.map","import { merge } from '@fluentui/utilities';\nimport { getSemanticColors } from './utilities/makeSemanticColors';\n/**\n * Merge a partial/full theme into a full theme and returns a merged full theme.\n */\nexport function mergeThemes(theme, partialTheme) {\n var _a, _b, _c;\n if (partialTheme === void 0) { partialTheme = {}; }\n var mergedTheme = merge({}, theme, partialTheme, {\n semanticColors: getSemanticColors(partialTheme.palette, partialTheme.effects, partialTheme.semanticColors, partialTheme.isInverted === undefined ? theme.isInverted : partialTheme.isInverted),\n });\n if (((_a = partialTheme.palette) === null || _a === void 0 ? void 0 : _a.themePrimary) && !((_b = partialTheme.palette) === null || _b === void 0 ? void 0 : _b.accent)) {\n mergedTheme.palette.accent = partialTheme.palette.themePrimary;\n }\n if (partialTheme.defaultFontStyle) {\n for (var _i = 0, _d = Object.keys(mergedTheme.fonts); _i < _d.length; _i++) {\n var fontStyle = _d[_i];\n mergedTheme.fonts[fontStyle] = merge(mergedTheme.fonts[fontStyle], partialTheme.defaultFontStyle, (_c = partialTheme === null || partialTheme === void 0 ? void 0 : partialTheme.fonts) === null || _c === void 0 ? void 0 : _c[fontStyle]);\n }\n }\n return mergedTheme;\n}\n//# sourceMappingURL=mergeThemes.js.map","// When adding or removing a color, make sure you keep this consistent with IColorClassNames\n// by adding the color variants.\nexport var DefaultPalette = {\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//# sourceMappingURL=DefaultPalette.js.map","export var Depths;\n(function (Depths) {\n Depths.depth0 = '0 0 0 0 transparent';\n Depths.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 Depths.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 Depths.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 Depths.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})(Depths || (Depths = {}));\n//# sourceMappingURL=FluentDepths.js.map","import { Depths } from './FluentDepths';\nexport var DefaultEffects = {\n elevation4: Depths.depth4,\n elevation8: Depths.depth8,\n elevation16: Depths.depth16,\n elevation64: Depths.depth64,\n roundedCorner2: '2px',\n roundedCorner4: '4px',\n roundedCorner6: '6px',\n};\n//# sourceMappingURL=DefaultEffects.js.map","export var DefaultSpacing = {\n s2: '4px',\n s1: '8px',\n m: '16px',\n l1: '20px',\n l2: '32px',\n};\n//# sourceMappingURL=DefaultSpacing.js.map","import { keyframes } from '@fluentui/merge-styles';\n/* Register the keyframes */\nvar EASING_FUNCTION_1 = 'cubic-bezier(.1,.9,.2,1)';\nvar EASING_FUNCTION_2 = 'cubic-bezier(.1,.25,.75,.9)';\nvar DURATION_1 = '0.167s';\nvar DURATION_2 = '0.267s';\nvar DURATION_3 = '0.367s';\nvar DURATION_4 = '0.467s';\nvar FADE_IN = keyframes({\n from: { opacity: 0 },\n to: { opacity: 1 },\n});\nvar FADE_OUT = keyframes({\n from: { opacity: 1 },\n to: { opacity: 0, visibility: 'hidden' },\n});\nvar SLIDE_RIGHT_IN10 = _createSlideInX(-10);\nvar SLIDE_RIGHT_IN20 = _createSlideInX(-20);\nvar SLIDE_RIGHT_IN40 = _createSlideInX(-40);\nvar SLIDE_RIGHT_IN400 = _createSlideInX(-400);\nvar SLIDE_LEFT_IN10 = _createSlideInX(10);\nvar SLIDE_LEFT_IN20 = _createSlideInX(20);\nvar SLIDE_LEFT_IN40 = _createSlideInX(40);\nvar SLIDE_LEFT_IN400 = _createSlideInX(400);\nvar SLIDE_UP_IN10 = _createSlideInY(10);\nvar SLIDE_UP_IN20 = _createSlideInY(20);\nvar SLIDE_DOWN_IN10 = _createSlideInY(-10);\nvar SLIDE_DOWN_IN20 = _createSlideInY(-20);\nvar SLIDE_RIGHT_OUT10 = _createSlideOutX(10);\nvar SLIDE_RIGHT_OUT20 = _createSlideOutX(20);\nvar SLIDE_RIGHT_OUT40 = _createSlideOutX(40);\nvar SLIDE_RIGHT_OUT400 = _createSlideOutX(400);\nvar SLIDE_LEFT_OUT10 = _createSlideOutX(-10);\nvar SLIDE_LEFT_OUT20 = _createSlideOutX(-20);\nvar SLIDE_LEFT_OUT40 = _createSlideOutX(-40);\nvar SLIDE_LEFT_OUT400 = _createSlideOutX(-400);\nvar SLIDE_UP_OUT10 = _createSlideOutY(-10);\nvar SLIDE_UP_OUT20 = _createSlideOutY(-20);\nvar SLIDE_DOWN_OUT10 = _createSlideOutY(10);\nvar SLIDE_DOWN_OUT20 = _createSlideOutY(20);\nvar SCALE_UP100 = keyframes({\n from: { transform: 'scale3d(.98,.98,1)' },\n to: { transform: 'scale3d(1,1,1)' },\n});\nvar SCALE_DOWN98 = keyframes({\n from: { transform: 'scale3d(1,1,1)' },\n to: { transform: 'scale3d(.98,.98,1)' },\n});\nvar SCALE_DOWN100 = keyframes({\n from: { transform: 'scale3d(1.03,1.03,1)' },\n to: { transform: 'scale3d(1,1,1)' },\n});\nvar SCALE_UP103 = keyframes({\n from: { transform: 'scale3d(1,1,1)' },\n to: { transform: 'scale3d(1.03,1.03,1)' },\n});\nvar ROTATE90 = keyframes({\n from: { transform: 'rotateZ(0deg)' },\n to: { transform: 'rotateZ(90deg)' },\n});\nvar ROTATE_N90 = keyframes({\n from: { transform: 'rotateZ(0deg)' },\n to: { transform: 'rotateZ(-90deg)' },\n});\n/**\n * Exporting raw duraction values and easing functions to be used in custom animations\n */\nexport var AnimationVariables = {\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 * All Fabric standard animations, exposed as json objects referencing predefined\n * keyframes. These objects can be mixed in with other class definitions.\n */\nexport var AnimationStyles = {\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 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 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 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 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 rotate90deg: _createAnimation(ROTATE90, '0.1s', EASING_FUNCTION_2),\n rotateN90deg: _createAnimation(ROTATE_N90, '0.1s', EASING_FUNCTION_2),\n // expandCollapse 100/200/400, delay 100/200\n};\nfunction _createAnimation(animationName, animationDuration, animationTimingFunction) {\n return {\n animationName: animationName,\n animationDuration: animationDuration,\n animationTimingFunction: animationTimingFunction,\n animationFillMode: 'both',\n };\n}\nfunction _createSlideInX(fromX) {\n return keyframes({\n from: { transform: \"translate3d(\" + fromX + \"px,0,0)\", pointerEvents: 'none' },\n to: { transform: \"translate3d(0,0,0)\", pointerEvents: 'auto' },\n });\n}\nfunction _createSlideInY(fromY) {\n return keyframes({\n from: { transform: \"translate3d(0,\" + fromY + \"px,0)\", pointerEvents: 'none' },\n to: { transform: \"translate3d(0,0,0)\", pointerEvents: 'auto' },\n });\n}\nfunction _createSlideOutX(toX) {\n return keyframes({\n from: { transform: \"translate3d(0,0,0)\" },\n to: { transform: \"translate3d(\" + toX + \"px,0,0)\" },\n });\n}\nfunction _createSlideOutY(toY) {\n return keyframes({\n from: { transform: \"translate3d(0,0,0)\" },\n to: { transform: \"translate3d(0,\" + toY + \"px,0)\" },\n });\n}\n//# sourceMappingURL=AnimationStyles.js.map","// Font face names to be registered.\nexport var LocalizedFontNames;\n(function (LocalizedFontNames) {\n LocalizedFontNames.Arabic = 'Segoe UI Web (Arabic)';\n LocalizedFontNames.Cyrillic = 'Segoe UI Web (Cyrillic)';\n LocalizedFontNames.EastEuropean = 'Segoe UI Web (East European)';\n LocalizedFontNames.Greek = 'Segoe UI Web (Greek)';\n LocalizedFontNames.Hebrew = 'Segoe UI Web (Hebrew)';\n LocalizedFontNames.Thai = 'Leelawadee UI Web';\n LocalizedFontNames.Vietnamese = 'Segoe UI Web (Vietnamese)';\n LocalizedFontNames.WestEuropean = 'Segoe UI Web (West European)';\n LocalizedFontNames.Selawik = 'Selawik Web';\n LocalizedFontNames.Armenian = 'Segoe UI Web (Armenian)';\n LocalizedFontNames.Georgian = 'Segoe UI Web (Georgian)';\n})(LocalizedFontNames || (LocalizedFontNames = {}));\n// Font families with fallbacks, for the general regions.\nexport var LocalizedFontFamilies;\n(function (LocalizedFontFamilies) {\n LocalizedFontFamilies.Arabic = \"'\" + LocalizedFontNames.Arabic + \"'\";\n LocalizedFontFamilies.ChineseSimplified = \"'Microsoft Yahei UI', Verdana, Simsun\";\n LocalizedFontFamilies.ChineseTraditional = \"'Microsoft Jhenghei UI', Pmingliu\";\n LocalizedFontFamilies.Cyrillic = \"'\" + LocalizedFontNames.Cyrillic + \"'\";\n LocalizedFontFamilies.EastEuropean = \"'\" + LocalizedFontNames.EastEuropean + \"'\";\n LocalizedFontFamilies.Greek = \"'\" + LocalizedFontNames.Greek + \"'\";\n LocalizedFontFamilies.Hebrew = \"'\" + LocalizedFontNames.Hebrew + \"'\";\n LocalizedFontFamilies.Hindi = \"'Nirmala UI'\";\n LocalizedFontFamilies.Japanese = \"'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka\";\n LocalizedFontFamilies.Korean = \"'Malgun Gothic', Gulim\";\n LocalizedFontFamilies.Selawik = \"'\" + LocalizedFontNames.Selawik + \"'\";\n LocalizedFontFamilies.Thai = \"'Leelawadee UI Web', 'Kmer UI'\";\n LocalizedFontFamilies.Vietnamese = \"'\" + LocalizedFontNames.Vietnamese + \"'\";\n LocalizedFontFamilies.WestEuropean = \"'\" + LocalizedFontNames.WestEuropean + \"'\";\n LocalizedFontFamilies.Armenian = \"'\" + LocalizedFontNames.Armenian + \"'\";\n LocalizedFontFamilies.Georgian = \"'\" + LocalizedFontNames.Georgian + \"'\";\n})(LocalizedFontFamilies || (LocalizedFontFamilies = {}));\n// Standard font sizes.\nexport var FontSizes;\n(function (FontSizes) {\n FontSizes.size10 = '10px';\n FontSizes.size12 = '12px';\n FontSizes.size14 = '14px';\n FontSizes.size16 = '16px';\n FontSizes.size18 = '18px';\n FontSizes.size20 = '20px';\n FontSizes.size24 = '24px';\n FontSizes.size28 = '28px';\n FontSizes.size32 = '32px';\n FontSizes.size42 = '42px';\n FontSizes.size68 = '68px';\n FontSizes.mini = '10px';\n FontSizes.xSmall = '10px';\n FontSizes.small = '12px';\n FontSizes.smallPlus = '12px';\n FontSizes.medium = '14px';\n FontSizes.mediumPlus = '16px';\n FontSizes.icon = '16px';\n FontSizes.large = '18px';\n FontSizes.xLarge = '20px';\n FontSizes.xLargePlus = '24px';\n FontSizes.xxLarge = '28px';\n FontSizes.xxLargePlus = '32px';\n FontSizes.superLarge = '42px';\n FontSizes.mega = '68px';\n})(FontSizes || (FontSizes = {}));\n// Standard font weights.\nexport var FontWeights;\n(function (FontWeights) {\n FontWeights.light = 100;\n FontWeights.semilight = 300;\n FontWeights.regular = 400;\n FontWeights.semibold = 600;\n FontWeights.bold = 700;\n})(FontWeights || (FontWeights = {}));\n// Standard Icon Sizes.\nexport var IconFontSizes;\n(function (IconFontSizes) {\n IconFontSizes.xSmall = '10px';\n IconFontSizes.small = '12px';\n IconFontSizes.medium = '16px';\n IconFontSizes.large = '20px';\n})(IconFontSizes || (IconFontSizes = {}));\n//# sourceMappingURL=FluentFonts.js.map","import { FontSizes, FontWeights, LocalizedFontFamilies, LocalizedFontNames } from './FluentFonts';\n// Fallback fonts, if specified system or web fonts are unavailable.\nvar FontFamilyFallbacks = \"'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif\";\n// By default, we favor system fonts for the default.\n// All localized fonts use a web font and never use the system font.\nvar defaultFontFamily = \"'Segoe UI', '\" + LocalizedFontNames.WestEuropean + \"'\";\n// Mapping of language prefix to to font family.\nvar 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};\nfunction _fontFamilyWithFallbacks(fontFamily) {\n return fontFamily + \", \" + FontFamilyFallbacks;\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) {\n for (var 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[lang];\n }\n }\n return defaultFontFamily;\n}\nfunction _createFont(size, weight, fontFamily) {\n return {\n fontFamily: fontFamily,\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontSize: size,\n fontWeight: weight,\n };\n}\nexport function createFontStyles(localeCode) {\n var localizedFont = _getLocalizedFontFamily(localeCode);\n var fontFamilyWithFallback = _fontFamilyWithFallbacks(localizedFont);\n var 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 return fontStyles;\n}\n//# sourceMappingURL=createFontStyles.js.map","import { fontFace } from '@fluentui/merge-styles';\nimport { FontWeights, LocalizedFontFamilies, LocalizedFontNames } from './FluentFonts';\nimport { createFontStyles } from './createFontStyles';\nimport { getLanguage, getWindow } from '@fluentui/utilities';\n// Default urls.\nvar DefaultBaseUrl = 'https://static2.sharepointonline.com/files/fabric/assets';\n// Standard font styling.\nexport var DefaultFontStyles = createFontStyles(getLanguage());\nfunction _registerFontFace(fontFamily, url, fontWeight, localFontName) {\n fontFamily = \"'\" + fontFamily + \"'\";\n var localFontSrc = localFontName !== undefined ? \"local('\" + localFontName + \"'),\" : '';\n fontFace({\n fontFamily: fontFamily,\n src: localFontSrc + (\"url('\" + url + \".woff2') format('woff2'),\") + (\"url('\" + url + \".woff') format('woff')\"),\n fontWeight: fontWeight,\n fontStyle: 'normal',\n fontDisplay: 'swap',\n });\n}\nfunction _registerFontFaceSet(baseUrl, fontFamily, cdnFolder, cdnFontName, localFontName) {\n if (cdnFontName === void 0) { cdnFontName = 'segoeui'; }\n var urlBase = baseUrl + \"/\" + cdnFolder + \"/\" + cdnFontName;\n _registerFontFace(fontFamily, urlBase + '-light', FontWeights.light, localFontName && localFontName + ' Light');\n _registerFontFace(fontFamily, urlBase + '-semilight', FontWeights.semilight, localFontName && localFontName + ' SemiLight');\n _registerFontFace(fontFamily, urlBase + '-regular', FontWeights.regular, localFontName);\n _registerFontFace(fontFamily, urlBase + '-semibold', FontWeights.semibold, localFontName && localFontName + ' SemiBold');\n _registerFontFace(fontFamily, urlBase + '-bold', FontWeights.bold, localFontName && localFontName + ' Bold');\n}\nexport function registerDefaultFontFaces(baseUrl) {\n if (baseUrl) {\n var fontUrl = baseUrl + \"/fonts\";\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 // 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 // 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 * Reads the fontBaseUrl from window.FabricConfig.fontBaseUrl or falls back to a default.\n */\nfunction _getFontBaseUrl() {\n var _a, _b;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var fabricConfig = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.FabricConfig;\n return (_b = fabricConfig === null || fabricConfig === void 0 ? void 0 : fabricConfig.fontBaseUrl) !== null && _b !== void 0 ? _b : DefaultBaseUrl;\n}\n/**\n * Register the font faces.\n */\nregisterDefaultFontFaces(_getFontBaseUrl());\n//# sourceMappingURL=DefaultFontStyles.js.map","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';\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, depComments) {\n if (theme === void 0) { theme = {}; }\n if (depComments === void 0) { depComments = false; }\n var isInverted = !!theme.isInverted;\n var baseTheme = {\n palette: DefaultPalette,\n effects: DefaultEffects,\n fonts: DefaultFontStyles,\n spacing: DefaultSpacing,\n isInverted: isInverted,\n disableGlobalClassNames: false,\n semanticColors: makeSemanticColors(DefaultPalette, DefaultEffects, undefined, isInverted, depComments),\n rtl: undefined,\n };\n return mergeThemes(baseTheme, theme);\n}\n//# sourceMappingURL=createTheme.js.map","export var HighContrastSelector = '@media screen and (-ms-high-contrast: active), (forced-colors: active)';\nexport var HighContrastSelectorWhite = '@media screen and (-ms-high-contrast: black-on-white), (forced-colors: black-on-white)';\nexport var HighContrastSelectorBlack = '@media screen and (-ms-high-contrast: white-on-black), (forced-colors: white-on-black)';\nexport var EdgeChromiumHighContrastSelector = '@media screen and (forced-colors: active)';\nexport var ScreenWidthMinSmall = 320;\nexport var ScreenWidthMinMedium = 480;\nexport var ScreenWidthMinLarge = 640;\nexport var ScreenWidthMinXLarge = 1024;\nexport var ScreenWidthMinXXLarge = 1366;\nexport var ScreenWidthMinXXXLarge = 1920;\nexport var ScreenWidthMaxSmall = ScreenWidthMinMedium - 1;\nexport var ScreenWidthMaxMedium = ScreenWidthMinLarge - 1;\nexport var ScreenWidthMaxLarge = ScreenWidthMinXLarge - 1;\nexport var ScreenWidthMaxXLarge = ScreenWidthMinXXLarge - 1;\nexport var ScreenWidthMaxXXLarge = ScreenWidthMinXXXLarge - 1;\nexport var ScreenWidthMinUhfMobile = 768;\nexport function getScreenSelector(min, max) {\n var minSelector = typeof min === 'number' ? \" and (min-width: \" + min + \"px)\" : '';\n var maxSelector = typeof max === 'number' ? \" and (max-width: \" + max + \"px)\" : '';\n return \"@media only screen\" + minSelector + maxSelector;\n}\n/**\n * The style which turns off high contrast adjustment in browsers.\n */\nexport function getHighContrastNoAdjustStyle() {\n return {\n forcedColorAdjust: 'none',\n MsHighContrastAdjust: 'none',\n };\n}\n/**\n * The style which turns off high contrast adjustment in (only) Edge Chromium browser.\n * @deprecated Use `getHighContrastNoAdjustStyle`\n */\nexport function getEdgeChromiumNoHighContrastAdjustSelector() {\n var _a;\n return _a = {},\n _a[EdgeChromiumHighContrastSelector] = {\n forcedColorAdjust: 'none',\n },\n _a;\n}\n//# sourceMappingURL=CommonStyles.js.map","export var ZIndexes;\n(function (ZIndexes) {\n ZIndexes.Nav = 1;\n /**\n * @deprecated Do not use\n */\n ZIndexes.ScrollablePane = 1;\n ZIndexes.FocusStyle = 1;\n ZIndexes.Coachmark = 1000;\n ZIndexes.Layer = 1000000;\n ZIndexes.KeytipLayer = 1000001;\n})(ZIndexes || (ZIndexes = {}));\n//# sourceMappingURL=zIndexes.js.map","import { HighContrastSelector } from './CommonStyles';\nimport { IsFocusVisibleClassName } from '@fluentui/utilities';\nimport { ZIndexes } from './zIndexes';\nexport function getFocusStyle(theme, insetOrOptions, position, highContrastStyle, borderColor, outlineColor, isFocusedOnly) {\n if (typeof insetOrOptions === 'number' || !insetOrOptions) {\n return _getFocusStyleInternal(theme, {\n inset: insetOrOptions,\n position: position,\n highContrastStyle: highContrastStyle,\n borderColor: borderColor,\n outlineColor: outlineColor,\n isFocusedOnly: isFocusedOnly,\n });\n }\n else {\n return _getFocusStyleInternal(theme, insetOrOptions);\n }\n}\nfunction _getFocusStyleInternal(theme, options) {\n var _a, _b;\n if (options === void 0) { options = {}; }\n var _c = options.inset, inset = _c === void 0 ? 0 : _c, _d = options.width, width = _d === void 0 ? 1 : _d, _e = options.position, position = _e === void 0 ? 'relative' : _e, highContrastStyle = options.highContrastStyle, _f = options.borderColor, borderColor = _f === void 0 ? theme.palette.white : _f, _g = options.outlineColor, outlineColor = _g === void 0 ? theme.palette.neutralSecondary : _g, _h = options.isFocusedOnly, isFocusedOnly = _h === void 0 ? true : _h;\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: position,\n selectors: (_a = {\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 _a[\".\" + IsFocusVisibleClassName + \" &\" + (isFocusedOnly ? ':focus' : '') + \":after\"] = {\n content: '\"\"',\n position: 'absolute',\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 selectors: (_b = {},\n _b[HighContrastSelector] = highContrastStyle,\n _b),\n },\n _a),\n };\n}\n/**\n * Generates style to clear browser specific focus styles.\n */\nexport function focusClear() {\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 * 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, inset, width, color) {\n var _a;\n if (inset === void 0) { inset = 0; }\n if (width === void 0) { width = 1; }\n return {\n selectors: (_a = {},\n _a[\":global(\" + IsFocusVisibleClassName + \") &:focus\"] = {\n outline: width + \" solid \" + (color || theme.palette.neutralSecondary),\n outlineOffset: -inset + \"px\",\n },\n _a),\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 var getInputFocusStyle = function (borderColor, borderRadius, borderType, borderPosition) {\n var _a, _b, _c;\n if (borderType === void 0) { borderType = 'border'; }\n if (borderPosition === void 0) { borderPosition = -1; }\n var isBorderBottom = borderType === 'borderBottom';\n return {\n borderColor: borderColor,\n selectors: {\n ':after': (_a = {\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 },\n _a[borderType] = \"2px solid \" + borderColor,\n _a.borderRadius = borderRadius,\n _a.width = borderType === 'borderBottom' ? '100%' : undefined,\n _a.selectors = (_b = {},\n _b[HighContrastSelector] = (_c = {},\n _c[borderType === 'border' ? 'borderColor' : 'borderBottomColor'] = 'Highlight',\n _c),\n _b),\n _a),\n },\n };\n};\n//# sourceMappingURL=getFocusStyle.js.map","export var hiddenContentStyle = {\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//# sourceMappingURL=hiddenContentStyle.js.map","import { Stylesheet } from '@fluentui/merge-styles';\nimport { memoizeFunction } from '@fluentui/utilities';\n/**\n * Internal memoized function which simply takes in the class map and the\n * disable boolean. These immutable values can be memoized.\n */\nvar _getGlobalClassNames = memoizeFunction(function (classNames, disableGlobalClassNames) {\n var styleSheet = Stylesheet.getInstance();\n if (disableGlobalClassNames) {\n // disable global classnames\n return Object.keys(classNames).reduce(function (acc, className) {\n acc[className] = styleSheet.getClassName(classNames[className]);\n return acc;\n }, {});\n }\n // use global classnames\n return classNames;\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(classNames, theme, disableGlobalClassNames) {\n return _getGlobalClassNames(classNames, disableGlobalClassNames !== undefined ? disableGlobalClassNames : theme.disableGlobalClassNames);\n}\n//# sourceMappingURL=getGlobalClassNames.js.map","/**\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 */\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(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))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\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.\nvar _root = (typeof window === 'undefined') ? global : window; // eslint-disable-line @typescript-eslint/no-explicit-any\n// Nonce string to inject into script tag if one provided. This is used in CSP (Content Security Policy).\nvar _styleNonce = _root && _root.CSPSettings && _root.CSPSettings.nonce;\nvar _themeState = initializeThemeState();\n/**\n * Matches theming tokens. For example, \"[theme: themeSlotName, default: #FFF]\" (including the quotes).\n */\nvar _themeTokenRegex = /[\\'\\\"]\\[theme:\\s*(\\w+)\\s*(?:\\,\\s*default:\\s*([\\\\\"\\']?[\\.\\,\\(\\)\\#\\-\\s\\w]*[\\.\\,\\(\\)\\#\\-\\w][\\\"\\']?))?\\s*\\][\\'\\\"]/g;\nvar now = function () { return (typeof performance !== 'undefined' && !!performance.now) ? performance.now() : Date.now(); };\nfunction measure(func) {\n var start = now();\n func();\n var end = now();\n _themeState.perf.duration += end - start;\n}\n/**\n * initialize global state object\n */\nfunction initializeThemeState() {\n var state = _root.__themeState__ || {\n theme: undefined,\n lastStyleElement: undefined,\n registeredStyles: []\n };\n if (!state.runState) {\n state = __assign({}, (state), { perf: {\n count: 0,\n duration: 0\n }, runState: {\n flushTimer: 0,\n mode: 0 /* sync */,\n buffer: []\n } });\n }\n if (!state.registeredThemableStyles) {\n state = __assign({}, (state), { registeredThemableStyles: [] });\n }\n _root.__themeState__ = state;\n return state;\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, loadAsync) {\n if (loadAsync === void 0) { loadAsync = false; }\n measure(function () {\n var styleParts = Array.isArray(styles) ? styles : splitStyles(styles);\n var _a = _themeState.runState, mode = _a.mode, buffer = _a.buffer, flushTimer = _a.flushTimer;\n if (loadAsync || mode === 1 /* async */) {\n buffer.push(styleParts);\n if (!flushTimer) {\n _themeState.runState.flushTimer = asyncLoadStyles();\n }\n }\n else {\n applyThemableStyles(styleParts);\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(loadStylesFn) {\n _themeState.loadStyles = loadStylesFn;\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) {\n _themeState.runState.mode = mode;\n}\n/**\n * external code can call flush to synchronously force processing of currently buffered styles\n */\nexport function flush() {\n measure(function () {\n var styleArrays = _themeState.runState.buffer.slice();\n _themeState.runState.buffer = [];\n var mergedStyleArray = [].concat.apply([], styleArrays);\n if (mergedStyleArray.length > 0) {\n applyThemableStyles(mergedStyleArray);\n }\n });\n}\n/**\n * register async loadStyles\n */\nfunction asyncLoadStyles() {\n return setTimeout(function () {\n _themeState.runState.flushTimer = 0;\n flush();\n }, 0);\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, styleRecord) {\n if (_themeState.loadStyles) {\n _themeState.loadStyles(resolveThemableArray(stylesArray).styleString, stylesArray);\n }\n else {\n registerStyles(stylesArray);\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) {\n _themeState.theme = theme;\n // reload styles.\n reloadStyles();\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) {\n if (option === void 0) { option = 3 /* all */; }\n if (option === 3 /* all */ || option === 2 /* onlyNonThemable */) {\n clearStylesInternal(_themeState.registeredStyles);\n _themeState.registeredStyles = [];\n }\n if (option === 3 /* all */ || option === 1 /* onlyThemable */) {\n clearStylesInternal(_themeState.registeredThemableStyles);\n _themeState.registeredThemableStyles = [];\n }\n}\nfunction clearStylesInternal(records) {\n records.forEach(function (styleRecord) {\n var styleElement = styleRecord && styleRecord.styleElement;\n if (styleElement && styleElement.parentElement) {\n styleElement.parentElement.removeChild(styleElement);\n }\n });\n}\n/**\n * Reloads styles.\n */\nfunction reloadStyles() {\n if (_themeState.theme) {\n var themableStyles = [];\n for (var _i = 0, _a = _themeState.registeredThemableStyles; _i < _a.length; _i++) {\n var styleRecord = _a[_i];\n themableStyles.push(styleRecord.themableStyle);\n }\n if (themableStyles.length > 0) {\n clearStyles(1 /* onlyThemable */);\n applyThemableStyles([].concat.apply([], themableStyles));\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) {\n if (styles) {\n styles = resolveThemableArray(splitStyles(styles)).styleString;\n }\n return styles;\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) {\n var theme = _themeState.theme;\n var themable = 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 var resolvedArray = (splitStyleArray || []).map(function (currentValue) {\n var themeSlot = currentValue.theme;\n if (themeSlot) {\n themable = true;\n // A theming annotation. Resolve it.\n var themedValue = theme ? theme[themeSlot] : undefined;\n var defaultValue = currentValue.defaultValue || 'inherit';\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 (theme && !themedValue && console && !(themeSlot in theme) && typeof DEBUG !== 'undefined' && DEBUG) {\n console.warn(\"Theming value not provided for \\\"\" + themeSlot + \"\\\". Falling back to \\\"\" + defaultValue + \"\\\".\");\n }\n return themedValue || defaultValue;\n }\n else {\n // A non-themable string. Preserve it.\n return currentValue.rawString;\n }\n });\n return {\n styleString: resolvedArray.join(''),\n themable: themable\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) {\n var result = [];\n if (styles) {\n var pos = 0; // Current position in styles.\n var tokenMatch = void 0; // eslint-disable-line @rushstack/no-null\n while ((tokenMatch = _themeTokenRegex.exec(styles))) {\n var matchIndex = tokenMatch.index;\n if (matchIndex > pos) {\n result.push({\n rawString: styles.substring(pos, matchIndex)\n });\n }\n result.push({\n theme: tokenMatch[1],\n defaultValue: tokenMatch[2] // May be undefined\n });\n // index of the first character after the current match\n pos = _themeTokenRegex.lastIndex;\n }\n // Push the rest of the string after the last match.\n result.push({\n rawString: styles.substring(pos)\n });\n }\n return result;\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) {\n if (typeof document === 'undefined') {\n return;\n }\n var head = document.getElementsByTagName('head')[0];\n var styleElement = document.createElement('style');\n var _a = resolveThemableArray(styleArray), styleString = _a.styleString, themable = _a.themable;\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 var ev = document.createEvent('HTMLEvents');\n ev.initEvent('styleinsert', true /* bubbleEvent */, false /* cancelable */);\n ev.args = {\n newStyle: styleElement\n };\n document.dispatchEvent(ev);\n var record = {\n styleElement: styleElement,\n themableStyle: styleArray\n };\n if (themable) {\n _themeState.registeredThemableStyles.push(record);\n }\n else {\n _themeState.registeredStyles.push(record);\n }\n}\n//# sourceMappingURL=index.js.map","import { __assign } from \"tslib\";\nimport { Customizations, getWindow } from '@fluentui/utilities';\nimport { loadTheme as legacyLoadTheme } from '@microsoft/load-themed-styles';\nimport { createTheme } from '@fluentui/theme';\nexport { createTheme } from '@fluentui/theme';\nvar _theme = createTheme({});\nvar _onThemeChangeCallbacks = [];\nexport var ThemeSettingName = 'theme';\nexport function initializeThemeInCustomizations() {\n var _a;\n var _b, _c;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var win = getWindow();\n if ((_b = win === null || win === void 0 ? void 0 : win.FabricConfig) === null || _b === void 0 ? void 0 : _b.legacyTheme) {\n // does everything the `else` clause does and more, such as invoke legacy theming\n loadTheme(win.FabricConfig.legacyTheme);\n }\n else if (!Customizations.getSettings([ThemeSettingName]).theme) {\n if ((_c = win === null || win === void 0 ? void 0 : win.FabricConfig) === null || _c === void 0 ? void 0 : _c.theme) {\n _theme = createTheme(win.FabricConfig.theme);\n }\n // Set the default theme.\n Customizations.applySettings((_a = {}, _a[ThemeSettingName] = _theme, _a));\n }\n}\ninitializeThemeInCustomizations();\n/**\n * Gets the theme object\n * @param depComments - Whether to include deprecated tags as comments for deprecated slots.\n */\nexport function getTheme(depComments) {\n if (depComments === void 0) { depComments = false; }\n if (depComments === true) {\n _theme = createTheme({}, depComments);\n }\n return _theme;\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) {\n if (_onThemeChangeCallbacks.indexOf(callback) === -1) {\n _onThemeChangeCallbacks.push(callback);\n }\n}\n/**\n * See registerOnThemeChangeCallback().\n * Removes previously registered callbacks.\n */\nexport function removeOnThemeChangeCallback(callback) {\n var i = _onThemeChangeCallbacks.indexOf(callback);\n if (i === -1) {\n return;\n }\n _onThemeChangeCallbacks.splice(i, 1);\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, depComments) {\n var _a;\n if (depComments === void 0) { depComments = false; }\n _theme = createTheme(theme, depComments);\n // Invoke the legacy method of theming the page as well.\n legacyLoadTheme(__assign(__assign(__assign(__assign({}, _theme.palette), _theme.semanticColors), _theme.effects), _loadFonts(_theme)));\n Customizations.applySettings((_a = {}, _a[ThemeSettingName] = _theme, _a));\n _onThemeChangeCallbacks.forEach(function (callback) {\n try {\n callback(_theme);\n }\n catch (e) {\n // don't let a bad callback break everything else\n }\n });\n return _theme;\n}\n/**\n * Loads font variables into a JSON object.\n * @param theme - The theme object\n */\nfunction _loadFonts(theme) {\n var lines = {};\n for (var _i = 0, _a = Object.keys(theme.fonts); _i < _a.length; _i++) {\n var fontName = _a[_i];\n var font = theme.fonts[fontName];\n for (var _b = 0, _c = Object.keys(font); _b < _c.length; _b++) {\n var propName = _c[_b];\n var name_1 = fontName + propName.charAt(0).toUpperCase() + propName.slice(1);\n var value = font[propName];\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_1] = value;\n }\n }\n return lines;\n}\n//# sourceMappingURL=theme.js.map","// This file mimics styles and mixins from _General.Mixins.scss\nexport var normalize = {\n boxShadow: 'none',\n margin: 0,\n padding: 0,\n boxSizing: 'border-box',\n};\nexport var noWrap = {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n};\n//# sourceMappingURL=GeneralStyles.js.map","/**\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) {\n return {\n selectors: {\n '::placeholder': styles,\n ':-ms-input-placeholder': styles,\n '::-ms-input-placeholder': styles, // Edge\n },\n };\n}\n//# sourceMappingURL=getPlaceholderStyles.js.map","import { buildClassMap } from '../utilities/index';\nimport { AnimationStyles } from '../styles/index';\n/**\n * {@docCategory AnimationClassNames}\n */\nexport var AnimationClassNames = buildClassMap(AnimationStyles);\n//# sourceMappingURL=AnimationClassNames.js.map","// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/style-utilities', '8.6.6');\n//# sourceMappingURL=version.js.map","export * from './classNames/index';\nexport * from './styles/index';\nexport * from './utilities/index';\nexport * from './interfaces/index';\nexport * from './MergeStyles';\nimport './version';\n// Ensure theme is initialized when this package is referenced.\nimport { initializeThemeInCustomizations } from './styles/theme';\ninitializeThemeInCustomizations();\n//# sourceMappingURL=index.js.map","export var DirectionalHint = {\n /**\n * Appear above the target element, with the left edges of the callout and target aligning.\n */\n topLeftEdge: 0,\n /**\n * Appear above the target element, with the centers of the callout and target aligning.\n */\n topCenter: 1,\n /**\n * Appear above the target element, with the right edges of the callout and target aligning.\n */\n topRightEdge: 2,\n /**\n * Appear above the target element, aligning with the target element such that the callout tends toward\n * the center of the screen.\n */\n topAutoEdge: 3,\n /**\n * Appear below the target element, with the left edges of the callout and target aligning.\n */\n bottomLeftEdge: 4,\n /**\n * Appear below the target element, with the centers of the callout and target aligning.\n */\n bottomCenter: 5,\n /**\n * Appear below the target element, with the right edges of the callout and target aligning.\n */\n bottomRightEdge: 6,\n /**\n * Appear below the target element, aligning with the target element such that the callout tends toward\n * the center of the screen.\n */\n bottomAutoEdge: 7,\n /**\n * Appear to the left of the target element, with the top edges of the callout and target aligning.\n */\n leftTopEdge: 8,\n /**\n * Appear to the left of the target element, with the centers of the callout and target aligning.\n */\n leftCenter: 9,\n /**\n * Appear to the left of the target element, with the bottom edges of the callout and target aligning.\n */\n leftBottomEdge: 10,\n /**\n * Appear to the right of the target element, with the top edges of the callout and target aligning.\n */\n rightTopEdge: 11,\n /**\n * Appear to the right of the target element, with the centers of the callout and target aligning.\n */\n rightCenter: 12,\n /**\n * Appear to the right of the target element, with the bottom edges of the callout and target aligning.\n */\n rightBottomEdge: 13,\n};\n//# sourceMappingURL=DirectionalHint.js.map","export var RectangleEdge;\n(function (RectangleEdge) {\n RectangleEdge[RectangleEdge[\"top\"] = 1] = \"top\";\n RectangleEdge[RectangleEdge[\"bottom\"] = -1] = \"bottom\";\n RectangleEdge[RectangleEdge[\"left\"] = 2] = \"left\";\n RectangleEdge[RectangleEdge[\"right\"] = -2] = \"right\";\n})(RectangleEdge || (RectangleEdge = {}));\nexport var Position;\n(function (Position) {\n Position[Position[\"top\"] = 0] = \"top\";\n Position[Position[\"bottom\"] = 1] = \"bottom\";\n Position[Position[\"start\"] = 2] = \"start\";\n Position[Position[\"end\"] = 3] = \"end\";\n})(Position || (Position = {}));\n//# sourceMappingURL=positioning.types.js.map","var _a;\nimport { __assign } from \"tslib\";\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport { getScrollbarWidth, getRTL } from '../../Utilities';\nimport { RectangleEdge } from './positioning.types';\nimport { Rectangle } from '../../Utilities';\nfunction _createPositionData(targetEdge, alignmentEdge, isAuto) {\n return {\n targetEdge: targetEdge,\n alignmentEdge: alignmentEdge,\n isAuto: isAuto,\n };\n}\n// Currently the beakPercent is set to 50 for all positions meaning that it should tend to the center of the target\nvar DirectionalDictionary = (_a = {},\n _a[DirectionalHint.topLeftEdge] = _createPositionData(RectangleEdge.top, RectangleEdge.left),\n _a[DirectionalHint.topCenter] = _createPositionData(RectangleEdge.top),\n _a[DirectionalHint.topRightEdge] = _createPositionData(RectangleEdge.top, RectangleEdge.right),\n _a[DirectionalHint.topAutoEdge] = _createPositionData(RectangleEdge.top, undefined, true),\n _a[DirectionalHint.bottomLeftEdge] = _createPositionData(RectangleEdge.bottom, RectangleEdge.left),\n _a[DirectionalHint.bottomCenter] = _createPositionData(RectangleEdge.bottom),\n _a[DirectionalHint.bottomRightEdge] = _createPositionData(RectangleEdge.bottom, RectangleEdge.right),\n _a[DirectionalHint.bottomAutoEdge] = _createPositionData(RectangleEdge.bottom, undefined, true),\n _a[DirectionalHint.leftTopEdge] = _createPositionData(RectangleEdge.left, RectangleEdge.top),\n _a[DirectionalHint.leftCenter] = _createPositionData(RectangleEdge.left),\n _a[DirectionalHint.leftBottomEdge] = _createPositionData(RectangleEdge.left, RectangleEdge.bottom),\n _a[DirectionalHint.rightTopEdge] = _createPositionData(RectangleEdge.right, RectangleEdge.top),\n _a[DirectionalHint.rightCenter] = _createPositionData(RectangleEdge.right),\n _a[DirectionalHint.rightBottomEdge] = _createPositionData(RectangleEdge.right, RectangleEdge.bottom),\n _a);\nfunction _isRectangleWithinBounds(rect, boundingRect) {\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 return true;\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, boundingRect) {\n var outOfBounds = [];\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 return outOfBounds;\n}\nfunction _getEdgeValue(rect, edge) {\n return rect[RectangleEdge[edge]];\n}\nfunction _setEdgeValue(rect, edge, value) {\n rect[RectangleEdge[edge]] = value;\n return rect;\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, edge) {\n var edges = _getFlankingEdges(edge);\n return (_getEdgeValue(rect, edges.positiveEdge) + _getEdgeValue(rect, edges.negativeEdge)) / 2;\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, value) {\n if (edge > 0) {\n return value;\n }\n else {\n return value * -1;\n }\n}\nfunction _getRelativeRectEdgeValue(edge, rect) {\n return _getRelativeEdgeValue(edge, _getEdgeValue(rect, edge));\n}\nfunction _getRelativeEdgeDifference(rect, hostRect, edge) {\n var edgeDifference = _getEdgeValue(rect, edge) - _getEdgeValue(hostRect, edge);\n return _getRelativeEdgeValue(edge, edgeDifference);\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, edge, newValue, maintainSize) {\n if (maintainSize === void 0) { maintainSize = true; }\n var difference = _getEdgeValue(rect, edge) - newValue;\n var 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 * 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, target, edge, gap) {\n if (gap === void 0) { gap = 0; }\n return _moveEdge(rect, edge, _getEdgeValue(target, edge) + _getRelativeEdgeValue(edge, gap));\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(rect, target, targetEdge, gap) {\n if (gap === void 0) { gap = 0; }\n var oppositeEdge = targetEdge * -1;\n var adjustedGap = _getRelativeEdgeValue(oppositeEdge, gap);\n return _moveEdge(rect, targetEdge * -1, _getEdgeValue(target, targetEdge) + adjustedGap);\n}\n/**\n * Tests to see if the given edge is within the bounds of the given rectangle.\n */\nfunction _isEdgeInBounds(rect, bounds, edge) {\n var adjustedRectValue = _getRelativeRectEdgeValue(edge, rect);\n return adjustedRectValue > _getRelativeRectEdgeValue(edge, bounds);\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, bounds) {\n var breakingEdges = _getOutOfBoundsEdges(rect, bounds);\n var total = 0;\n for (var _i = 0, breakingEdges_1 = breakingEdges; _i < breakingEdges_1.length; _i++) {\n var edge = breakingEdges_1[_i];\n total += Math.pow(_getRelativeEdgeDifference(rect, bounds, edge), 2);\n }\n return total;\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(rect, target, bounding, positionData, gap) {\n if (gap === void 0) { gap = 0; }\n var directions = [\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 var currentEstimate = rect;\n var currentEdge = positionData.targetEdge;\n var currentAlignment = positionData.alignmentEdge;\n // keep track of least bad option, in case no sides fit\n var oobDegree;\n var bestEdge = currentEdge;\n var bestAlignment = currentAlignment;\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 (var i = 0; i < 4; i++) {\n if (!_isEdgeInBounds(currentEstimate, bounding, currentEdge)) {\n // update least-bad edges\n var currentOOBDegree = _getOutOfBoundsDegree(currentEstimate, bounding);\n if (!oobDegree || currentOOBDegree < oobDegree) {\n oobDegree = currentOOBDegree;\n bestEdge = currentEdge;\n bestAlignment = currentAlignment;\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 }\n else {\n currentAlignment = currentEdge;\n currentEdge = directions.slice(-1)[0];\n }\n currentEstimate = _estimatePosition(rect, target, { targetEdge: currentEdge, alignmentEdge: currentAlignment }, gap);\n }\n }\n else {\n return {\n elementRectangle: currentEstimate,\n targetEdge: currentEdge,\n alignmentEdge: currentAlignment,\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 * 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(elementEstimate, target, gap, coverTarget) {\n var alignmentEdge = elementEstimate.alignmentEdge, targetEdge = elementEstimate.targetEdge, elementRectangle = elementEstimate.elementRectangle;\n var oppositeEdge = alignmentEdge * -1;\n var newEstimate = _estimatePosition(elementRectangle, target, { targetEdge: targetEdge, alignmentEdge: oppositeEdge }, gap, coverTarget);\n return {\n elementRectangle: newEstimate,\n targetEdge: targetEdge,\n alignmentEdge: oppositeEdge,\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(element, target, bounding, positionData, gap, directionalHintFixed, coverTarget) {\n if (gap === void 0) { gap = 0; }\n var alignmentEdge = positionData.alignmentEdge, alignTargetEdge = positionData.alignTargetEdge;\n var elementEstimate = {\n elementRectangle: element,\n targetEdge: positionData.targetEdge,\n alignmentEdge: alignmentEdge,\n };\n if (!directionalHintFixed && !coverTarget) {\n elementEstimate = _flipToFit(element, target, bounding, positionData, gap);\n }\n var 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 var fixedEdge = directionalHintFixed ? -elementEstimate.targetEdge : undefined;\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 var flippedElementEstimate = _flipAlignmentEdge(elementEstimate, target, gap, coverTarget);\n if (_isRectangleWithinBounds(flippedElementEstimate.elementRectangle, bounding)) {\n return flippedElementEstimate;\n }\n else {\n // If the flipped elements edges are still out of bounds, try nudging it.\n elementEstimate = _alignOutOfBoundsEdges(_getOutOfBoundsEdges(flippedElementEstimate.elementRectangle, bounding), elementEstimate, bounding, fixedEdge);\n }\n }\n else {\n elementEstimate = _alignOutOfBoundsEdges(outOfBounds, elementEstimate, bounding, fixedEdge);\n }\n }\n else {\n elementEstimate = _alignOutOfBoundsEdges(outOfBounds, elementEstimate, bounding, fixedEdge);\n }\n }\n return elementEstimate;\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(outOfBoundsEdges, elementEstimate, bounding, preserveEdge) {\n for (var _i = 0, outOfBoundsEdges_1 = outOfBoundsEdges; _i < outOfBoundsEdges_1.length; _i++) {\n var direction = outOfBoundsEdges_1[_i];\n var edgeAttempt = void 0;\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 }\n else {\n edgeAttempt = _alignEdges(elementEstimate.elementRectangle, bounding, direction);\n var 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 elementEstimate.elementRectangle = edgeAttempt;\n }\n return elementEstimate;\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, edge, point) {\n var positiveEdge = _getFlankingEdges(edge).positiveEdge;\n var elementMiddle = _getCenterValue(rect, edge);\n var distanceToMiddle = elementMiddle - _getEdgeValue(rect, positiveEdge);\n return _moveEdge(rect, positiveEdge, point - distanceToMiddle);\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(elementToPosition, target, positionData, gap, coverTarget) {\n if (gap === void 0) { gap = 0; }\n var estimatedElementPosition = new Rectangle(elementToPosition.left, elementToPosition.right, elementToPosition.top, elementToPosition.bottom);\n var alignmentEdge = positionData.alignmentEdge, targetEdge = positionData.targetEdge;\n var 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 var targetMiddlePoint = _getCenterValue(target, targetEdge);\n estimatedElementPosition = _centerEdgeToPoint(estimatedElementPosition, elementEdge, targetMiddlePoint);\n }\n else {\n estimatedElementPosition = _alignEdges(estimatedElementPosition, target, alignmentEdge);\n }\n return estimatedElementPosition;\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) {\n if (edge === RectangleEdge.top || edge === RectangleEdge.bottom) {\n return {\n positiveEdge: RectangleEdge.left,\n negativeEdge: RectangleEdge.right,\n };\n }\n else {\n return {\n positiveEdge: RectangleEdge.top,\n negativeEdge: RectangleEdge.bottom,\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(elementRectangle, returnEdge, bounds) {\n if (bounds &&\n Math.abs(_getRelativeEdgeDifference(elementRectangle, bounds, returnEdge)) >\n Math.abs(_getRelativeEdgeDifference(elementRectangle, bounds, returnEdge * -1))) {\n return returnEdge * -1;\n }\n return returnEdge;\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, edge, bounds) {\n return bounds !== undefined && _getEdgeValue(elementRectangle, edge) === _getEdgeValue(bounds, edge);\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(elementRectangle, hostElement, targetEdge, bounds, alignmentEdge, coverTarget, doNotFinalizeReturnEdge, forceWithinBounds) {\n var returnValue = {};\n var hostRect = _getRectangleFromElement(hostElement);\n var elementEdge = coverTarget ? targetEdge : targetEdge * -1;\n var returnEdge = alignmentEdge ? alignmentEdge : _getFlankingEdges(targetEdge).positiveEdge;\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 returnValue[RectangleEdge[elementEdge]] = _getRelativeEdgeDifference(elementRectangle, hostRect, elementEdge);\n returnValue[RectangleEdge[returnEdge]] = _getRelativeEdgeDifference(elementRectangle, hostRect, returnEdge);\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(elementRectangle, hostRect, elementEdge * -1);\n returnValue[RectangleEdge[returnEdge * -1]] = _getRelativeEdgeDifference(elementRectangle, hostRect, returnEdge * -1);\n }\n return returnValue;\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) {\n return Math.sqrt(beakWidth * beakWidth * 2);\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(directionalHint, directionalHintForRTL, previousPositions) {\n if (directionalHint === void 0) { directionalHint = DirectionalHint.bottomAutoEdge; }\n if (previousPositions) {\n return {\n alignmentEdge: previousPositions.alignmentEdge,\n isAuto: previousPositions.isAuto,\n targetEdge: previousPositions.targetEdge,\n };\n }\n var positionInformation = __assign({}, 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 return directionalHintForRTL !== undefined ? DirectionalDictionary[directionalHintForRTL] : positionInformation;\n }\n return positionInformation;\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(positionData, target, boundingRect, coverTarget, alignTargetEdge) {\n if (positionData.isAuto) {\n positionData.alignmentEdge = getClosestEdge(positionData.targetEdge, target, boundingRect);\n }\n positionData.alignTargetEdge = alignTargetEdge;\n return positionData;\n}\nfunction getClosestEdge(targetEdge, target, boundingRect) {\n var targetCenter = _getCenterValue(target, targetEdge);\n var boundingCenter = _getCenterValue(boundingRect, targetEdge);\n var _a = _getFlankingEdges(targetEdge), positiveEdge = _a.positiveEdge, negativeEdge = _a.negativeEdge;\n if (targetCenter <= boundingCenter) {\n return positiveEdge;\n }\n else {\n return negativeEdge;\n }\n}\nfunction _positionElementWithinBounds(elementToPosition, target, bounding, positionData, gap, directionalHintFixed, coverTarget) {\n var estimatedElementPosition = _estimatePosition(elementToPosition, target, positionData, gap, coverTarget);\n if (_isRectangleWithinBounds(estimatedElementPosition, bounding)) {\n return {\n elementRectangle: estimatedElementPosition,\n targetEdge: positionData.targetEdge,\n alignmentEdge: positionData.alignmentEdge,\n };\n }\n else {\n return _adjustFitWithinBounds(estimatedElementPosition, target, bounding, positionData, gap, directionalHintFixed, coverTarget);\n }\n}\nfunction _finalizeBeakPosition(elementPosition, positionedBeak, bounds) {\n var targetEdge = elementPosition.targetEdge * -1;\n // The \"host\" element that we will use to help position the beak.\n var actualElement = new Rectangle(0, elementPosition.elementRectangle.width, 0, elementPosition.elementRectangle.height);\n var returnValue = {};\n var returnEdge = _finalizeReturnEdge(elementPosition.elementRectangle, elementPosition.alignmentEdge ? elementPosition.alignmentEdge : _getFlankingEdges(targetEdge).positiveEdge, bounds);\n // only show the beak if the callout is not fully covering the target\n var beakEdgeDifference = _getRelativeEdgeDifference(elementPosition.elementRectangle, elementPosition.targetRectangle, targetEdge);\n var showBeak = beakEdgeDifference > Math.abs(_getEdgeValue(positionedBeak, targetEdge));\n returnValue[RectangleEdge[targetEdge]] = _getEdgeValue(positionedBeak, targetEdge);\n returnValue[RectangleEdge[returnEdge]] = _getRelativeEdgeDifference(positionedBeak, actualElement, returnEdge);\n return {\n elementPosition: __assign({}, returnValue),\n closestEdge: getClosestEdge(elementPosition.targetEdge, positionedBeak, actualElement),\n targetEdge: targetEdge,\n hideBeak: !showBeak,\n };\n}\nfunction _positionBeak(beakWidth, elementPosition) {\n var 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 var _a = _getFlankingEdges(elementPosition.targetEdge), positiveEdge = _a.positiveEdge, negativeEdge = _a.negativeEdge;\n var beakTargetPoint = _getCenterValue(target, elementPosition.targetEdge);\n var elementBounds = new Rectangle(beakWidth / 2, elementPosition.elementRectangle.width - beakWidth / 2, beakWidth / 2, elementPosition.elementRectangle.height - beakWidth / 2);\n var beakPosition = new Rectangle(0, beakWidth, 0, beakWidth);\n beakPosition = _moveEdge(beakPosition, elementPosition.targetEdge * -1, -beakWidth / 2);\n beakPosition = _centerEdgeToPoint(beakPosition, elementPosition.targetEdge * -1, beakTargetPoint - _getRelativeRectEdgeValue(positiveEdge, elementPosition.elementRectangle));\n if (!_isEdgeInBounds(beakPosition, elementBounds, positiveEdge)) {\n beakPosition = _alignEdges(beakPosition, elementBounds, positiveEdge);\n }\n else if (!_isEdgeInBounds(beakPosition, elementBounds, negativeEdge)) {\n beakPosition = _alignEdges(beakPosition, elementBounds, negativeEdge);\n }\n return beakPosition;\n}\nfunction _getRectangleFromElement(element) {\n var clientRect = element.getBoundingClientRect();\n return new Rectangle(clientRect.left, clientRect.right, clientRect.top, clientRect.bottom);\n}\nfunction _getRectangleFromIRect(rect) {\n return new Rectangle(rect.left, rect.right, rect.top, rect.bottom);\n}\nfunction _getTargetRect(bounds, target) {\n var targetRectangle;\n if (target) {\n // eslint-disable-next-line no-extra-boolean-cast\n if (!!target.preventDefault) {\n var ev = target;\n targetRectangle = new Rectangle(ev.clientX, ev.clientX, ev.clientY, ev.clientY);\n // eslint-disable-next-line no-extra-boolean-cast\n }\n else if (!!target.getBoundingClientRect) {\n targetRectangle = _getRectangleFromElement(target);\n // HTMLImgElements can have x and y values. The check for it being a point must go last.\n }\n else {\n var rectOrPoint = target;\n // eslint-disable-next-line deprecation/deprecation\n var left = rectOrPoint.left || rectOrPoint.x;\n // eslint-disable-next-line deprecation/deprecation\n var top_1 = rectOrPoint.top || rectOrPoint.y;\n var right = rectOrPoint.right || left;\n var bottom = rectOrPoint.bottom || top_1;\n targetRectangle = new Rectangle(left, right, top_1, bottom);\n }\n if (!_isRectangleWithinBounds(targetRectangle, bounds)) {\n var outOfBounds = _getOutOfBoundsEdges(targetRectangle, bounds);\n for (var _i = 0, outOfBounds_1 = outOfBounds; _i < outOfBounds_1.length; _i++) {\n var direction = outOfBounds_1[_i];\n targetRectangle[RectangleEdge[direction]] = bounds[RectangleEdge[direction]];\n }\n }\n }\n else {\n targetRectangle = new Rectangle(0, 0, 0, 0);\n }\n return targetRectangle;\n}\n/**\n * If max height is less than zero it returns the bounds height instead.\n */\nfunction _getMaxHeightFromTargetRectangle(targetRectangle, targetEdge, gapSpace, bounds, coverTarget) {\n var maxHeight = 0;\n var directionalHint = DirectionalDictionary[targetEdge];\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 var target = coverTarget ? directionalHint.targetEdge * -1 : directionalHint.targetEdge;\n if (target === RectangleEdge.top) {\n maxHeight = _getEdgeValue(targetRectangle, directionalHint.targetEdge) - bounds.top - gapSpace;\n }\n else if (target === RectangleEdge.bottom) {\n maxHeight = bounds.bottom - _getEdgeValue(targetRectangle, directionalHint.targetEdge) - gapSpace;\n }\n else {\n maxHeight = bounds.bottom - targetRectangle.top - gapSpace;\n }\n return maxHeight > 0 ? maxHeight : bounds.height;\n}\nfunction _positionElementRelative(props, elementToPosition, boundingRect, previousPositions) {\n var gap = props.gapSpace ? props.gapSpace : 0;\n var targetRect = _getTargetRect(boundingRect, props.target);\n var positionData = _getAlignmentData(_getPositionData(props.directionalHint, props.directionalHintForRTL, previousPositions), targetRect, boundingRect, props.coverTarget, props.alignTargetEdge);\n var positionedElement = _positionElementWithinBounds(_getRectangleFromElement(elementToPosition), targetRect, boundingRect, positionData, gap, props.directionalHintFixed, props.coverTarget);\n return __assign(__assign({}, positionedElement), { targetRectangle: targetRect });\n}\nfunction _finalizePositionData(positionedElement, hostElement, bounds, coverTarget, doNotFinalizeReturnEdge) {\n var finalizedElement = _finalizeElementPosition(positionedElement.elementRectangle, hostElement, positionedElement.targetEdge, bounds, positionedElement.alignmentEdge, coverTarget, doNotFinalizeReturnEdge, positionedElement.forcedInBounds);\n return {\n elementPosition: finalizedElement,\n targetEdge: positionedElement.targetEdge,\n alignmentEdge: positionedElement.alignmentEdge,\n };\n}\nfunction _positionElement(props, hostElement, elementToPosition, previousPositions) {\n var boundingRect = props.bounds\n ? _getRectangleFromIRect(props.bounds)\n : new Rectangle(0, window.innerWidth - getScrollbarWidth(), 0, window.innerHeight);\n var positionedElement = _positionElementRelative(props, elementToPosition, boundingRect, previousPositions);\n return _finalizePositionData(positionedElement, hostElement, boundingRect, props.coverTarget);\n}\nfunction _positionCallout(props, hostElement, callout, previousPositions, doNotFinalizeReturnEdge) {\n var beakWidth = props.isBeakVisible ? props.beakWidth || 0 : 0;\n var gap = _calculateActualBeakWidthInPixels(beakWidth) / 2 + (props.gapSpace ? props.gapSpace : 0);\n var positionProps = props;\n positionProps.gapSpace = gap;\n var boundingRect = props.bounds\n ? _getRectangleFromIRect(props.bounds)\n : new Rectangle(0, window.innerWidth - getScrollbarWidth(), 0, window.innerHeight);\n var positionedElement = _positionElementRelative(positionProps, callout, boundingRect, previousPositions);\n var beakPositioned = _positionBeak(beakWidth, positionedElement);\n var finalizedBeakPosition = _finalizeBeakPosition(positionedElement, beakPositioned, boundingRect);\n return __assign(__assign({}, _finalizePositionData(positionedElement, hostElement, boundingRect, props.coverTarget, doNotFinalizeReturnEdge)), { beakPosition: finalizedBeakPosition });\n}\nfunction _positionCard(props, hostElement, callout, previousPositions) {\n return _positionCallout(props, hostElement, callout, previousPositions, true);\n}\n// END PRIVATE FUNCTIONS\nexport var __positioningTestPackage = {\n _finalizePositionData: _finalizePositionData,\n _finalizeBeakPosition: _finalizeBeakPosition,\n _calculateActualBeakWidthInPixels: _calculateActualBeakWidthInPixels,\n _positionElementWithinBounds: _positionElementWithinBounds,\n _positionBeak: _positionBeak,\n _getPositionData: _getPositionData,\n _getMaxHeightFromTargetRectangle: _getMaxHeightFromTargetRectangle,\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(props, hostElement, elementToPosition, previousPositions) {\n return _positionElement(props, hostElement, elementToPosition, previousPositions);\n}\nexport function positionCallout(props, hostElement, elementToPosition, previousPositions) {\n return _positionCallout(props, hostElement, elementToPosition, previousPositions);\n}\nexport function positionCard(props, hostElement, elementToPosition, previousPositions) {\n return _positionCard(props, hostElement, elementToPosition, previousPositions);\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(target, targetEdge, gapSpace, bounds, coverTarget) {\n if (gapSpace === void 0) { gapSpace = 0; }\n var mouseTarget = target;\n var elementTarget = target;\n var rectOrPointTarget = target;\n var targetRect;\n var boundingRectangle = bounds\n ? _getRectangleFromIRect(bounds)\n : new Rectangle(0, window.innerWidth - getScrollbarWidth(), 0, window.innerHeight);\n // eslint-disable-next-line deprecation/deprecation\n var left = rectOrPointTarget.left || rectOrPointTarget.x;\n // eslint-disable-next-line deprecation/deprecation\n var top = rectOrPointTarget.top || rectOrPointTarget.y;\n var right = rectOrPointTarget.right || left;\n var bottom = rectOrPointTarget.bottom || top;\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 }\n else if (left !== undefined && top !== undefined) {\n targetRect = new Rectangle(left, right, top, bottom);\n }\n else {\n targetRect = _getRectangleFromElement(elementTarget);\n }\n return _getMaxHeightFromTargetRectangle(targetRect, targetEdge, gapSpace, boundingRectangle, coverTarget);\n}\n/**\n * Returns the opposite edge of the given RectangleEdge.\n */\nexport function getOppositeEdge(edge) {\n return edge * -1;\n}\nfunction _getBoundsFromTargetWindow(target, targetWindow) {\n var segments = undefined;\n if (targetWindow.getWindowSegments) {\n segments = targetWindow.getWindowSegments();\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 // Logic for determining dual screen scenarios.\n var x = 0;\n var y = 0;\n // If the target is an Element get coordinates for its center.\n if (target !== null && !!target.getBoundingClientRect) {\n var clientRect = target.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.left || target.x;\n // eslint-disable-next-line deprecation/deprecation\n y = target.top || target.y;\n }\n var bounds = { top: 0, left: 0, right: 0, bottom: 0, width: 0, height: 0 };\n // Define which window segment are the coordinates in and calculate bounds based on that.\n for (var _i = 0, segments_1 = segments; _i < segments_1.length; _i++) {\n var segment = segments_1[_i];\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 return bounds;\n}\nexport function getBoundsFromTargetWindow(target, targetWindow) {\n return _getBoundsFromTargetWindow(target, targetWindow);\n}\n//# sourceMappingURL=positioning.js.map","import * as React from 'react';\n/**\n * Hook to initialize and return a constant value. Unlike `React.useMemo`, this is guaranteed to\n * always return the same value (and if the initializer is a function, only call it once).\n * This is similar to setting a private member in a class constructor.\n *\n * If the value should ever change based on dependencies, use `React.useMemo` instead.\n *\n * @param initialValue - Initial value, or function to get the initial value. Similar to `useState`,\n * only the value/function passed in the first time this is called is respected.\n * @returns The value. The identity of this value will always be the same.\n */\nexport function useConst(initialValue) {\n // Use useRef to store the value because it's the least expensive built-in hook that works here\n // (we could also use `const [value] = React.useState(initialValue)` but that's more expensive\n // internally due to reducer handling which we don't need)\n var ref = React.useRef();\n if (ref.current === undefined) {\n // Box the value in an object so we can tell if it's initialized even if the initializer\n // returns/is undefined\n ref.current = {\n value: typeof initialValue === 'function' ? initialValue() : initialValue,\n };\n }\n return ref.current.value;\n}\n//# sourceMappingURL=useConst.js.map","import { Async } from '@fluentui/utilities';\nimport * as React from 'react';\nimport { useConst } from './useConst';\n/**\n * Hook to provide an Async instance that is automatically cleaned up on dismount.\n */\nexport function useAsync() {\n var async = useConst(function () { return new Async(); });\n // Function that returns a function in order to dispose the async instance on unmount\n React.useEffect(function () { return function () { return async.dispose(); }; }, [async]);\n return async;\n}\n//# sourceMappingURL=useAsync.js.map","import * as React from 'react';\nimport { useConst } from './useConst';\n/**\n * Hook to store a value and generate callbacks for setting the value to true or false.\n * The identity of the callbacks will always stay the same.\n *\n * @param initialState - Initial value\n * @returns Array with the current value and an object containing the updater callbacks.\n */\nexport function useBoolean(initialState) {\n var _a = React.useState(initialState), value = _a[0], setValue = _a[1];\n var setTrue = useConst(function () { return function () {\n setValue(true);\n }; });\n var setFalse = useConst(function () { return function () {\n setValue(false);\n }; });\n var toggle = useConst(function () { return function () {\n setValue(function (currentValue) { return !currentValue; });\n }; });\n return [value, { setTrue: setTrue, setFalse: setFalse, toggle: toggle }];\n}\n//# sourceMappingURL=useBoolean.js.map","import * as React from 'react';\nimport { useConst } from './useConst';\nexport function useControllableValue(controlledValue, defaultUncontrolledValue, onChange) {\n var _a = React.useState(defaultUncontrolledValue), value = _a[0], setValue = _a[1];\n var isControlled = useConst(controlledValue !== undefined);\n var currentValue = isControlled ? controlledValue : value;\n // Duplicate the current value and onChange in refs so they're accessible from\n // setValueOrCallOnChange without creating a new callback every time\n var valueRef = React.useRef(currentValue);\n var onChangeRef = React.useRef(onChange);\n React.useEffect(function () {\n valueRef.current = currentValue;\n onChangeRef.current = onChange;\n });\n // To match the behavior of the setter returned by React.useState, this callback's identity\n // should never change. This means it MUST NOT directly reference variables that can change.\n var setValueOrCallOnChange = useConst(function () { return function (update, ev) {\n // Assuming here that TValue is not a function, because a controllable value will typically\n // be something a user can enter as input\n var newValue = typeof update === 'function' ? update(valueRef.current) : update;\n if (onChangeRef.current) {\n onChangeRef.current(ev, newValue);\n }\n if (!isControlled) {\n setValue(newValue);\n }\n }; });\n return [currentValue, setValueOrCallOnChange];\n}\n//# sourceMappingURL=useControllableValue.js.map","import * as React from 'react';\nimport { getId } from '@fluentui/utilities';\n/**\n * Hook to generate a unique ID in the global scope (spanning across duplicate copies of the same library).\n *\n * @param prefix - Optional prefix for the ID\n * @param providedId - Optional id provided by a parent component. Defaults to the provided value if present,\n * without conditioning the hook call\n * @returns The ID\n */\nexport function useId(prefix, providedId) {\n // getId should only be called once since it updates the global constant for the next ID value.\n // (While an extra update isn't likely to cause problems in practice, it's better to avoid it.)\n var ref = React.useRef(providedId);\n if (!ref.current) {\n ref.current = getId(prefix);\n }\n return ref.current;\n}\n//# sourceMappingURL=useId.js.map","import { __spreadArray } from \"tslib\";\nimport * as React from 'react';\n/**\n * React hook to merge multiple React refs (either MutableRefObjects or ref callbacks) into a single ref callback that\n * updates all provided refs\n * @param refs - Refs to collectively update with one ref value.\n * @returns A function with an attached \"current\" prop, so that it can be treated like a RefObject.\n */\nexport function useMergedRefs() {\n var refs = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n refs[_i] = arguments[_i];\n }\n var mergedCallback = React.useCallback(function (value) {\n // Update the \"current\" prop hanging on the function.\n mergedCallback.current = value;\n for (var _i = 0, refs_1 = refs; _i < refs_1.length; _i++) {\n var ref = refs_1[_i];\n if (typeof ref === 'function') {\n ref(value);\n }\n else if (ref) {\n // work around the immutability of the React.Ref type\n ref.current = value;\n }\n }\n }, __spreadArray([], refs));\n return mergedCallback;\n}\n//# sourceMappingURL=useMergedRefs.js.map","import { on } from '@fluentui/utilities';\nimport * as React from 'react';\n/**\n * Hook to attach an event handler on mount and handle cleanup.\n * @param element - Element (or ref to an element) to attach the event handler to\n * @param eventName - The event to attach a handler for\n * @param callback - The handler for the event\n * @param useCapture - Whether or not to attach the handler for the capture phase\n */\nexport function useOnEvent(element, eventName, callback, useCapture) {\n // Use a ref for the callback to prevent repeatedly attaching/unattaching callbacks that are unstable across renders\n var callbackRef = React.useRef(callback);\n callbackRef.current = callback;\n React.useEffect(function () {\n var actualElement = element && 'current' in element ? element.current : element;\n if (!actualElement) {\n return;\n }\n var dispose = on(actualElement, eventName, function (ev) { return callbackRef.current(ev); }, useCapture);\n return dispose;\n }, [element, eventName, useCapture]);\n}\n//# sourceMappingURL=useOnEvent.js.map","import { useRef, useEffect } from 'react';\n/**\n * Hook keeping track of a given value from a previous execution of the component the Hook is used in.\n *\n * See [React Hooks FAQ](https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state)\n */\nexport function usePrevious(value) {\n var ref = useRef();\n useEffect(function () {\n ref.current = value;\n });\n return ref.current;\n}\n//# sourceMappingURL=usePrevious.js.map","import * as React from 'react';\n/**\n * Creates a ref, and calls a callback whenever the ref changes to a non-null value. The callback can optionally return\n * a cleanup function that'll be called before the value changes, and when the ref is unmounted.\n *\n * This can be used to work around a limitation that useEffect cannot depend on `ref.current` (see\n * https://github.com/facebook/react/issues/14387#issuecomment-503616820).\n *\n * Usage example:\n * ```ts\n * const myRef = useRefEffect(element => {\n * ...\n * return () => { ... cleanup ... };\n * });\n * ```\n * ```jsx\n *
\n * ```\n *\n * @param callback - Called whenever the ref's value changes to non-null. Can optionally return a cleanup function.\n * @param initial - (Optional) The initial value for the ref.\n *\n * @returns A function that should be called to set the ref's value. The object also has a `.current` member that can be\n * used to access the ref's value (like a normal RefObject). It can be hooked up to an element's `ref` property.\n */\nexport function useRefEffect(callback, initial) {\n if (initial === void 0) { initial = null; }\n var createRefCallback = function () {\n var refCallback = function (value) {\n if (data.ref.current !== value) {\n if (data.cleanup) {\n data.cleanup();\n data.cleanup = undefined;\n }\n data.ref.current = value;\n if (value !== null) {\n data.cleanup = data.callback(value);\n }\n }\n };\n refCallback.current = initial;\n return refCallback;\n };\n var data = React.useRef({\n ref: createRefCallback(),\n callback: callback,\n }).current;\n data.callback = callback;\n return data.ref;\n}\n//# sourceMappingURL=useRefEffect.js.map","import * as React from 'react';\nimport { useConst } from './useConst';\n/**\n * Returns a wrapper function for `setTimeout` which automatically handles disposal.\n */\nexport var useSetTimeout = function () {\n var timeoutIds = useConst({});\n // Cleanup function.\n React.useEffect(function () { return function () {\n for (var _i = 0, _a = Object.keys(timeoutIds); _i < _a.length; _i++) {\n var id = _a[_i];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n clearTimeout(id);\n }\n }; }, \n // useConst ensures this will never change, but react-hooks/exhaustive-deps doesn't know that\n [timeoutIds]);\n // Return wrapper which will auto cleanup.\n return useConst({\n setTimeout: function (func, duration) {\n var id = setTimeout(func, duration);\n timeoutIds[id] = 1;\n return id;\n },\n clearTimeout: function (id) {\n delete timeoutIds[id];\n clearTimeout(id);\n },\n });\n};\n//# sourceMappingURL=useSetTimeout.js.map","import * as React from 'react';\n/**\n * Context for providing the window.\n */\nexport var WindowContext = React.createContext({\n window: typeof window === 'object' ? window : undefined,\n});\n/**\n * Hook to access the window object. This can be overridden contextually using the `WindowProvider`.\n */\nexport var useWindow = function () { return React.useContext(WindowContext).window; };\n/**\n * Hook to access the document object. This can be overridden contextually using the `WindowProvider`.\n */\nexport var useDocument = function () { var _a; return (_a = React.useContext(WindowContext).window) === null || _a === void 0 ? void 0 : _a.document; };\n/**\n * Component to provide the window object contextually. This is useful when rendering content to an element\n * contained within a child window or iframe element, where event handlers and styling must be projected\n * to an alternative window or document.\n */\nexport var WindowProvider = function (props) {\n return React.createElement(WindowContext.Provider, { value: props }, props.children);\n};\n//# sourceMappingURL=WindowProvider.js.map","import { getDocument } from '@fluentui/utilities';\nimport * as React from 'react';\nimport { useWindow } from '@fluentui/react-window-provider';\n/**\n * Hook to calculate and cache the target element specified by the given target attribute,\n * as well as the target element's (or host element's) parent window\n * @param target- Target selector passed to the component as a property, describing the element that\n * the callout should target\n * @param hostElement- The callout's host element, used for determining the parent window.\n */\nexport function useTarget(target, hostElement) {\n var previousTargetProp = React.useRef();\n var targetRef = React.useRef(null);\n /**\n * Stores an instance of Window, used to check\n * for server side rendering and if focus was lost.\n */\n var targetWindow = useWindow();\n // If the target element changed, find the new one. If we are tracking\n // target with class name, always find element because we do not know if\n // fabric has rendered a new element and disposed the old element.\n if (!target || target !== previousTargetProp.current || typeof target === 'string') {\n var currentElement = hostElement === null || hostElement === void 0 ? void 0 : hostElement.current;\n if (target) {\n if (typeof target === 'string') {\n var currentDoc = getDocument(currentElement);\n targetRef.current = currentDoc ? currentDoc.querySelector(target) : null;\n }\n else if ('stopPropagation' in target) {\n targetRef.current = target;\n }\n else if ('getBoundingClientRect' in target) {\n targetRef.current = target;\n }\n else if ('current' in target) {\n targetRef.current = target.current;\n }\n else {\n targetRef.current = target;\n }\n }\n previousTargetProp.current = target;\n }\n return [targetRef, targetWindow];\n}\n//# sourceMappingURL=useTarget.js.map","import * as React from 'react';\n/**\n * Hook which synchronously executes a callback when the component is about to unmount.\n *\n * @param callback - Function to call during unmount.\n */\nexport var useUnmount = function (callback) {\n var unmountRef = React.useRef(callback);\n unmountRef.current = callback;\n React.useEffect(function () { return function () {\n var _a;\n (_a = unmountRef.current) === null || _a === void 0 ? void 0 : _a.call(unmountRef);\n }; }, []);\n};\n//# sourceMappingURL=useUnmount.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { KeyCodes, divProperties, doesElementContainFocus, getDocument, getNativeProps, getPropsWithDefaults, getWindow, modalize, } from '../../Utilities';\nimport { useMergedRefs, useAsync, useOnEvent } from '@fluentui/react-hooks';\nimport { useWindow } from '@fluentui/react-window-provider';\nfunction useScrollbarAsync(props, root) {\n var async = useAsync();\n var _a = React.useState(false), needsVerticalScrollBarState = _a[0], setNeedsVerticalScrollBar = _a[1];\n React.useEffect(function () {\n async.requestAnimationFrame(function () {\n var _a;\n // If overflowY is overridden, don't waste time calculating whether the scrollbar is necessary.\n if (props.style && props.style.overflowY) {\n return;\n }\n var needsVerticalScrollBar = false;\n if (root && root.current && ((_a = root.current) === null || _a === void 0 ? void 0 : _a.firstElementChild)) {\n // ClientHeight returns the client height of an element rounded to an\n // integer. On some browsers at different zoom levels this rounding\n // can generate different results for the root container and child even\n // though they are the same height. This causes us to show a scroll bar\n // when not needed. Ideally we would use BoundingClientRect().height\n // instead however seems that the API is 90% slower than using ClientHeight.\n // Therefore instead we will calculate the difference between heights and\n // allow for a 1px difference to still be considered ok and not show the\n // scroll bar.\n var rootHeight = root.current.clientHeight;\n var firstChildHeight = root.current.firstElementChild.clientHeight;\n if (rootHeight > 0 && firstChildHeight > rootHeight) {\n needsVerticalScrollBar = firstChildHeight - rootHeight > 1;\n }\n }\n if (needsVerticalScrollBarState !== needsVerticalScrollBar) {\n setNeedsVerticalScrollBar(needsVerticalScrollBar);\n }\n });\n return function () { return async.dispose(); };\n });\n return needsVerticalScrollBarState;\n}\nfunction defaultFocusRestorer(options) {\n var originalElement = options.originalElement, containsFocus = options.containsFocus;\n if (originalElement && containsFocus && originalElement !== getWindow()) {\n // Make sure that the focus method actually exists\n // In some cases the object might exist but not be a real element.\n // This is primarily for IE 11 and should be removed once IE 11 is no longer in use.\n // This is wrapped in a setTimeout because of a React 16 bug that is resolved in 17.\n // Once we move to 17, the setTimeout should be removed (ref: https://github.com/facebook/react/issues/17894#issuecomment-656094405)\n setTimeout(function () {\n var _a;\n (_a = originalElement.focus) === null || _a === void 0 ? void 0 : _a.call(originalElement);\n }, 0);\n }\n}\nfunction useRestoreFocus(props, root) {\n var _a = props.onRestoreFocus, onRestoreFocus = _a === void 0 ? defaultFocusRestorer : _a;\n var originalFocusedElement = React.useRef();\n var containsFocus = React.useRef(false);\n React.useEffect(function () {\n originalFocusedElement.current = getDocument().activeElement;\n if (doesElementContainFocus(root.current)) {\n containsFocus.current = true;\n }\n return function () {\n var _a;\n onRestoreFocus === null || onRestoreFocus === void 0 ? void 0 : onRestoreFocus({\n originalElement: originalFocusedElement.current,\n containsFocus: containsFocus.current,\n documentContainsFocus: ((_a = getDocument()) === null || _a === void 0 ? void 0 : _a.hasFocus()) || false,\n });\n // De-reference DOM Node to avoid retainment via transpiled closure of _onKeyDown\n originalFocusedElement.current = undefined;\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run on first render\n }, []);\n useOnEvent(root, 'focus', React.useCallback(function () {\n containsFocus.current = true;\n }, []), true);\n useOnEvent(root, 'blur', React.useCallback(function (ev) {\n /** The popup should update this._containsFocus when:\n * relatedTarget exists AND\n * the relatedTarget is not contained within the popup.\n * If the relatedTarget is within the popup, that means the popup still has focus\n * and focused moved from one element to another within the popup.\n * If relatedTarget is undefined or null that usually means that a\n * keyboard event occurred and focus didn't change\n */\n if (root.current && ev.relatedTarget && !root.current.contains(ev.relatedTarget)) {\n containsFocus.current = false;\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run on first render\n }, []), true);\n}\nfunction useHideSiblingNodes(props, root) {\n // eslint-disable-next-line deprecation/deprecation\n var shouldHideSiblings = String(props['aria-modal']).toLowerCase() === 'true' && props.enableAriaHiddenSiblings;\n React.useEffect(function () {\n if (!(shouldHideSiblings && root.current)) {\n return;\n }\n var unmodalize = modalize(root.current);\n return unmodalize;\n }, [root, shouldHideSiblings]);\n}\n/**\n * This adds accessibility to Dialog and Panel controls\n */\nexport var Popup = React.forwardRef(function (propsWithoutDefaults, forwardedRef) {\n var props = getPropsWithDefaults({ shouldRestoreFocus: true, enableAriaHiddenSiblings: true }, propsWithoutDefaults);\n var root = React.useRef();\n var mergedRootRef = useMergedRefs(root, forwardedRef);\n useHideSiblingNodes(props, root);\n useRestoreFocus(props, root);\n var role = props.role, className = props.className, ariaLabel = props.ariaLabel, ariaLabelledBy = props.ariaLabelledBy, ariaDescribedBy = props.ariaDescribedBy, style = props.style, children = props.children, onDismiss = props.onDismiss;\n var needsVerticalScrollBar = useScrollbarAsync(props, root);\n var onKeyDown = React.useCallback(function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.escape:\n if (onDismiss) {\n onDismiss(ev);\n ev.preventDefault();\n ev.stopPropagation();\n }\n break;\n }\n }, [onDismiss]);\n var win = useWindow();\n useOnEvent(win, 'keydown', onKeyDown);\n return (React.createElement(\"div\", __assign({ ref: mergedRootRef }, getNativeProps(props, divProperties), { className: className, role: role, \"aria-label\": ariaLabel, \"aria-labelledby\": ariaLabelledBy, \"aria-describedby\": ariaDescribedBy, onKeyDown: onKeyDown, style: __assign({ overflowY: needsVerticalScrollBar ? 'scroll' : undefined, outline: 'none' }, style) }), children));\n});\nPopup.displayName = 'Popup';\n//# sourceMappingURL=Popup.js.map","var _a;\nimport { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport { css, divProperties, elementContains, focusFirstChild, getNativeProps, on, shallowCompare, getPropsWithDefaults, } from '../../Utilities';\nimport { positionCallout, RectangleEdge, positionCard, getBoundsFromTargetWindow } from '../../Positioning';\nimport { Popup } from '../../Popup';\nimport { classNamesFunction } from '../../Utilities';\nimport { AnimationClassNames } from '../../Styling';\nimport { useMergedRefs, useAsync, useConst, useTarget, useOnEvent } from '@fluentui/react-hooks';\nvar COMPONENT_NAME = 'CalloutContentBase';\nvar ANIMATIONS = (_a = {},\n _a[RectangleEdge.top] = AnimationClassNames.slideUpIn10,\n _a[RectangleEdge.bottom] = AnimationClassNames.slideDownIn10,\n _a[RectangleEdge.left] = AnimationClassNames.slideLeftIn10,\n _a[RectangleEdge.right] = AnimationClassNames.slideRightIn10,\n _a);\nvar BEAK_ORIGIN_POSITION = { top: 0, left: 0 };\n// Microsoft Edge will overwrite inline styles if there is an animation pertaining to that style.\n// To help ensure that edge will respect the offscreen style opacity\n// filter needs to be added as an additional way to set opacity.\n// Also set pointer-events: none so that the callout will not occlude the element it is\n// going to be positioned against\nvar OFF_SCREEN_STYLE = {\n opacity: 0,\n filter: 'opacity(0)',\n pointerEvents: 'none',\n};\n// role and role description go hand-in-hand. Both would be included by spreading getNativeProps for a basic element\n// This constant array can be used to filter these out of native props spread on callout root and apply them together on\n// calloutMain (the Popup component within the callout)\nvar ARIA_ROLE_ATTRIBUTES = ['role', 'aria-roledescription'];\nvar DEFAULT_PROPS = {\n preventDismissOnLostFocus: false,\n preventDismissOnScroll: false,\n preventDismissOnResize: false,\n isBeakVisible: true,\n beakWidth: 16,\n gapSpace: 0,\n minPagePadding: 8,\n directionalHint: DirectionalHint.bottomAutoEdge,\n};\nvar getClassNames = classNamesFunction({\n disableCaching: true, // disabling caching because stylesProp.position mutates often\n});\n/**\n * (Hook) to return a function to lazily fetch the bounds of the target element for the callout.\n */\nfunction useBounds(_a, targetRef, targetWindow) {\n var bounds = _a.bounds, _b = _a.minPagePadding, minPagePadding = _b === void 0 ? DEFAULT_PROPS.minPagePadding : _b, target = _a.target;\n var _c = React.useState(false), targetWindowResized = _c[0], setTargetWindowResized = _c[1];\n var cachedBounds = React.useRef();\n var getBounds = React.useCallback(function () {\n if (!cachedBounds.current || targetWindowResized) {\n var currentBounds = typeof bounds === 'function' ? (targetWindow ? bounds(target, targetWindow) : undefined) : bounds;\n if (!currentBounds && targetWindow) {\n currentBounds = getBoundsFromTargetWindow(targetRef.current, targetWindow);\n currentBounds = {\n top: currentBounds.top + minPagePadding,\n left: currentBounds.left + minPagePadding,\n right: currentBounds.right - minPagePadding,\n bottom: currentBounds.bottom - minPagePadding,\n width: currentBounds.width - minPagePadding * 2,\n height: currentBounds.height - minPagePadding * 2,\n };\n }\n cachedBounds.current = currentBounds;\n targetWindowResized && setTargetWindowResized(false);\n }\n return cachedBounds.current;\n }, [bounds, minPagePadding, target, targetRef, targetWindow, targetWindowResized]);\n var async = useAsync();\n useOnEvent(targetWindow, 'resize', async.debounce(function () {\n setTargetWindowResized(true);\n }, 500, { leading: true }));\n return getBounds;\n}\n/**\n * (Hook) to return the maximum available height for the Callout to render into.\n */\nfunction useMaxHeight(_a, getBounds, positions) {\n var _b;\n var calloutMaxHeight = _a.calloutMaxHeight, finalHeight = _a.finalHeight, directionalHint = _a.directionalHint, directionalHintFixed = _a.directionalHintFixed, hidden = _a.hidden;\n var _c = React.useState(), maxHeight = _c[0], setMaxHeight = _c[1];\n var _d = (_b = positions === null || positions === void 0 ? void 0 : positions.elementPosition) !== null && _b !== void 0 ? _b : {}, top = _d.top, bottom = _d.bottom;\n React.useEffect(function () {\n var _a;\n var _b = (_a = getBounds()) !== null && _a !== void 0 ? _a : {}, topBounds = _b.top, bottomBounds = _b.bottom;\n if (!calloutMaxHeight && !hidden) {\n if (typeof top === 'number' && bottomBounds) {\n setMaxHeight(bottomBounds - top);\n }\n else if (typeof bottom === 'number' && typeof topBounds === 'number' && bottomBounds) {\n setMaxHeight(bottomBounds - topBounds - bottom);\n }\n }\n else if (calloutMaxHeight) {\n setMaxHeight(calloutMaxHeight);\n }\n else {\n setMaxHeight(undefined);\n }\n }, [bottom, calloutMaxHeight, finalHeight, directionalHint, directionalHintFixed, getBounds, hidden, positions, top]);\n return maxHeight;\n}\n/**\n * (Hook) to find the current position of Callout. If Callout is resized then a new position is calculated.\n */\nfunction usePositions(props, hostElement, calloutElement, targetRef, getBounds) {\n var _a = React.useState(), positions = _a[0], setPositions = _a[1];\n var positionAttempts = React.useRef(0);\n var previousTarget = React.useRef();\n var async = useAsync();\n var hidden = props.hidden, target = props.target, finalHeight = props.finalHeight, calloutMaxHeight = props.calloutMaxHeight, onPositioned = props.onPositioned, directionalHint = props.directionalHint;\n React.useEffect(function () {\n if (!hidden) {\n var timerId_1 = async.requestAnimationFrame(function () {\n var _a, _b;\n if (hostElement.current && calloutElement) {\n var currentProps = __assign(__assign({}, props), { target: targetRef.current, bounds: getBounds() });\n // duplicate calloutElement & remove useMaxHeight's maxHeight for position calc\n var dupeCalloutElement = calloutElement.cloneNode(true);\n dupeCalloutElement.style.maxHeight = calloutMaxHeight ? \"\" + calloutMaxHeight : '';\n dupeCalloutElement.style.visibility = 'hidden';\n (_a = calloutElement.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(dupeCalloutElement);\n var previousPositions = previousTarget.current === target ? positions : undefined;\n // If there is a finalHeight given then we assume that the user knows and will handle\n // additional positioning adjustments so we should call positionCard\n var newPositions = finalHeight\n ? positionCard(currentProps, hostElement.current, dupeCalloutElement, previousPositions)\n : positionCallout(currentProps, hostElement.current, dupeCalloutElement, previousPositions);\n // clean up duplicate calloutElement\n (_b = calloutElement.parentElement) === null || _b === void 0 ? void 0 : _b.removeChild(dupeCalloutElement);\n // Set the new position only when the positions do not exist or one of the new callout positions\n // is different. The position should not change if the position is within 2 decimal places.\n if ((!positions && newPositions) ||\n (positions && newPositions && !arePositionsEqual(positions, newPositions) && positionAttempts.current < 5)) {\n // We should not reposition the callout more than a few times, if it is then the content is likely resizing\n // and we should stop trying to reposition to prevent a stack overflow.\n positionAttempts.current++;\n setPositions(newPositions);\n }\n else if (positionAttempts.current > 0) {\n // Only call the onPositioned callback if the callout has been re-positioned at least once.\n positionAttempts.current = 0;\n onPositioned === null || onPositioned === void 0 ? void 0 : onPositioned(positions);\n }\n }\n }, calloutElement);\n previousTarget.current = target;\n return function () {\n async.cancelAnimationFrame(timerId_1);\n previousTarget.current = undefined;\n };\n }\n else {\n // When the callout is hidden, clear position state so that it is not accidentally used next render.\n setPositions(undefined);\n positionAttempts.current = 0;\n }\n }, [\n hidden,\n directionalHint,\n async,\n calloutElement,\n calloutMaxHeight,\n hostElement,\n targetRef,\n finalHeight,\n getBounds,\n onPositioned,\n positions,\n props,\n target,\n ]);\n return positions;\n}\n/**\n * (Hook) to set up behavior to automatically focus the callout when it appears, if indicated by props.\n */\nfunction useAutoFocus(_a, positions, calloutElement) {\n var hidden = _a.hidden, setInitialFocus = _a.setInitialFocus;\n var async = useAsync();\n var hasPositions = !!positions;\n React.useEffect(function () {\n if (!hidden && setInitialFocus && hasPositions && calloutElement) {\n var timerId_2 = async.requestAnimationFrame(function () { return focusFirstChild(calloutElement); }, calloutElement);\n return function () { return async.cancelAnimationFrame(timerId_2); };\n }\n }, [hidden, hasPositions, async, calloutElement, setInitialFocus]);\n}\n/**\n * (Hook) to set up various handlers to dismiss the popup when it loses focus or the window scrolls or similar cases.\n */\nfunction useDismissHandlers(_a, positions, hostElement, targetRef, targetWindow) {\n var hidden = _a.hidden, onDismiss = _a.onDismiss, \n // eslint-disable-next-line deprecation/deprecation\n preventDismissOnScroll = _a.preventDismissOnScroll, \n // eslint-disable-next-line deprecation/deprecation\n preventDismissOnResize = _a.preventDismissOnResize, \n // eslint-disable-next-line deprecation/deprecation\n preventDismissOnLostFocus = _a.preventDismissOnLostFocus, dismissOnTargetClick = _a.dismissOnTargetClick, shouldDismissOnWindowFocus = _a.shouldDismissOnWindowFocus, preventDismissOnEvent = _a.preventDismissOnEvent;\n var isMouseDownOnPopup = React.useRef(false);\n var async = useAsync();\n var mouseDownHandlers = useConst([\n function () {\n isMouseDownOnPopup.current = true;\n },\n function () {\n isMouseDownOnPopup.current = false;\n },\n ]);\n var positionsExists = !!positions;\n React.useEffect(function () {\n var dismissOnScroll = function (ev) {\n if (positionsExists && !preventDismissOnScroll) {\n dismissOnClickOrScroll(ev);\n }\n };\n var dismissOnResize = function (ev) {\n if (!preventDismissOnResize && !(preventDismissOnEvent && preventDismissOnEvent(ev))) {\n onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(ev);\n }\n };\n var dismissOnLostFocus = function (ev) {\n if (!preventDismissOnLostFocus) {\n dismissOnClickOrScroll(ev);\n }\n };\n var dismissOnClickOrScroll = function (ev) {\n var eventPaths = ev.composedPath ? ev.composedPath() : [];\n var target = eventPaths.length > 0 ? eventPaths[0] : ev.target;\n var isEventTargetOutsideCallout = hostElement.current && !elementContains(hostElement.current, target);\n // If mouse is pressed down on callout but moved outside then released, don't dismiss the callout.\n if (isEventTargetOutsideCallout && isMouseDownOnPopup.current) {\n isMouseDownOnPopup.current = false;\n return;\n }\n if ((!targetRef.current && isEventTargetOutsideCallout) ||\n (ev.target !== targetWindow &&\n isEventTargetOutsideCallout &&\n (!targetRef.current ||\n 'stopPropagation' in targetRef.current ||\n dismissOnTargetClick ||\n (target !== targetRef.current && !elementContains(targetRef.current, target))))) {\n if (preventDismissOnEvent && preventDismissOnEvent(ev)) {\n return;\n }\n onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(ev);\n }\n };\n var dismissOnTargetWindowBlur = function (ev) {\n // Do nothing\n if (!shouldDismissOnWindowFocus) {\n return;\n }\n if (((preventDismissOnEvent && !preventDismissOnEvent(ev)) ||\n (!preventDismissOnEvent && !preventDismissOnLostFocus)) &&\n !(targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.document.hasFocus()) &&\n ev.relatedTarget === null) {\n onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(ev);\n }\n };\n // This is added so the callout will dismiss when the window is scrolled\n // but not when something inside the callout is scrolled. The delay seems\n // to be required to avoid React firing an async focus event in IE from\n // the target changing focus quickly prior to rendering the callout.\n var disposablesPromise = new Promise(function (resolve) {\n async.setTimeout(function () {\n if (!hidden && targetWindow) {\n var disposables_1 = [\n on(targetWindow, 'scroll', dismissOnScroll, true),\n on(targetWindow, 'resize', dismissOnResize, true),\n on(targetWindow.document.documentElement, 'focus', dismissOnLostFocus, true),\n on(targetWindow.document.documentElement, 'click', dismissOnLostFocus, true),\n on(targetWindow, 'blur', dismissOnTargetWindowBlur, true),\n ];\n resolve(function () {\n disposables_1.forEach(function (dispose) { return dispose(); });\n });\n }\n }, 0);\n });\n return function () {\n disposablesPromise.then(function (dispose) { return dispose(); });\n };\n }, [\n hidden,\n async,\n hostElement,\n targetRef,\n targetWindow,\n onDismiss,\n shouldDismissOnWindowFocus,\n dismissOnTargetClick,\n preventDismissOnLostFocus,\n preventDismissOnResize,\n preventDismissOnScroll,\n positionsExists,\n preventDismissOnEvent,\n ]);\n return mouseDownHandlers;\n}\nexport var CalloutContentBase = React.memo(React.forwardRef(function (propsWithoutDefaults, forwardedRef) {\n var props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n var styles = props.styles, style = props.style, ariaLabel = props.ariaLabel, ariaDescribedBy = props.ariaDescribedBy, ariaLabelledBy = props.ariaLabelledBy, className = props.className, isBeakVisible = props.isBeakVisible, children = props.children, beakWidth = props.beakWidth, calloutWidth = props.calloutWidth, calloutMaxWidth = props.calloutMaxWidth, calloutMinWidth = props.calloutMinWidth, doNotLayer = props.doNotLayer, finalHeight = props.finalHeight, _a = props.hideOverflow, hideOverflow = _a === void 0 ? !!finalHeight : _a, backgroundColor = props.backgroundColor, calloutMaxHeight = props.calloutMaxHeight, onScroll = props.onScroll, \n // eslint-disable-next-line deprecation/deprecation\n _b = props.shouldRestoreFocus, \n // eslint-disable-next-line deprecation/deprecation\n shouldRestoreFocus = _b === void 0 ? true : _b, target = props.target, hidden = props.hidden, onLayerMounted = props.onLayerMounted;\n var hostElement = React.useRef(null);\n var _c = React.useState(null), calloutElement = _c[0], setCalloutElement = _c[1];\n var calloutCallback = React.useCallback(function (calloutEl) {\n setCalloutElement(calloutEl);\n }, []);\n var rootRef = useMergedRefs(hostElement, forwardedRef);\n var _d = useTarget(props.target, {\n current: calloutElement,\n }), targetRef = _d[0], targetWindow = _d[1];\n var getBounds = useBounds(props, targetRef, targetWindow);\n var positions = usePositions(props, hostElement, calloutElement, targetRef, getBounds);\n var maxHeight = useMaxHeight(props, getBounds, positions);\n var _e = useDismissHandlers(props, positions, hostElement, targetRef, targetWindow), mouseDownOnPopup = _e[0], mouseUpOnPopup = _e[1];\n // do not set both top and bottom css props from positions\n // instead, use maxHeight\n var isForcedInBounds = (positions === null || positions === void 0 ? void 0 : positions.elementPosition.top) && (positions === null || positions === void 0 ? void 0 : positions.elementPosition.bottom);\n var cssPositions = __assign(__assign({}, positions === null || positions === void 0 ? void 0 : positions.elementPosition), { maxHeight: maxHeight });\n if (isForcedInBounds) {\n cssPositions.bottom = undefined;\n }\n useAutoFocus(props, positions, calloutElement);\n React.useEffect(function () {\n if (!hidden) {\n onLayerMounted === null || onLayerMounted === void 0 ? void 0 : onLayerMounted();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run if hidden changes\n }, [hidden]);\n // If there is no target window then we are likely in server side rendering and we should not render anything.\n if (!targetWindow) {\n return null;\n }\n var overflowYHidden = hideOverflow;\n var beakVisible = isBeakVisible && !!target;\n var classNames = getClassNames(styles, {\n theme: props.theme,\n className: className,\n overflowYHidden: overflowYHidden,\n calloutWidth: calloutWidth,\n positions: positions,\n beakWidth: beakWidth,\n backgroundColor: backgroundColor,\n calloutMaxWidth: calloutMaxWidth,\n calloutMinWidth: calloutMinWidth,\n doNotLayer: doNotLayer,\n });\n var overflowStyle = __assign(__assign({ maxHeight: calloutMaxHeight ? calloutMaxHeight : '100%' }, style), (overflowYHidden && { overflowY: 'hidden' }));\n var visibilityStyle = props.hidden ? { visibility: 'hidden' } : undefined;\n // React.CSSProperties does not understand IRawStyle, so the inline animations will need to be cast as any for now.\n return (React.createElement(\"div\", { ref: rootRef, className: classNames.container, style: visibilityStyle },\n React.createElement(\"div\", __assign({}, getNativeProps(props, divProperties, ARIA_ROLE_ATTRIBUTES), { className: css(classNames.root, positions && positions.targetEdge && ANIMATIONS[positions.targetEdge]), style: positions ? __assign({}, cssPositions) : OFF_SCREEN_STYLE, \n // Safari and Firefox on Mac OS requires this to back-stop click events so focus remains in the Callout.\n // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n tabIndex: -1, ref: calloutCallback }),\n beakVisible && React.createElement(\"div\", { className: classNames.beak, style: getBeakPosition(positions) }),\n beakVisible && React.createElement(\"div\", { className: classNames.beakCurtain }),\n React.createElement(Popup\n // don't use getNativeElementProps for role and roledescription because it will also\n // pass through data-* props (resulting in them being used in two places)\n , { \n // don't use getNativeElementProps for role and roledescription because it will also\n // pass through data-* props (resulting in them being used in two places)\n role: props.role, \"aria-roledescription\": props['aria-roledescription'], ariaDescribedBy: ariaDescribedBy, ariaLabel: ariaLabel, ariaLabelledBy: ariaLabelledBy, className: classNames.calloutMain, onDismiss: props.onDismiss, onMouseDown: mouseDownOnPopup, onMouseUp: mouseUpOnPopup, onRestoreFocus: props.onRestoreFocus, onScroll: onScroll, shouldRestoreFocus: shouldRestoreFocus, style: overflowStyle }, children))));\n}), function (previousProps, nextProps) {\n if (!nextProps.shouldUpdateWhenHidden && previousProps.hidden && nextProps.hidden) {\n // Do not update when hidden.\n return true;\n }\n return shallowCompare(previousProps, nextProps);\n});\n/**\n * (Utility) to find and return the current `Callout` Beak position.\n *\n * @param positions\n */\nfunction getBeakPosition(positions) {\n var _a, _b;\n var beakPositionStyle = __assign(__assign({}, (_a = positions === null || positions === void 0 ? void 0 : positions.beakPosition) === null || _a === void 0 ? void 0 : _a.elementPosition), { display: ((_b = positions === null || positions === void 0 ? void 0 : positions.beakPosition) === null || _b === void 0 ? void 0 : _b.hideBeak) ? 'none' : undefined });\n if (!beakPositionStyle.top && !beakPositionStyle.bottom && !beakPositionStyle.left && !beakPositionStyle.right) {\n beakPositionStyle.left = BEAK_ORIGIN_POSITION.left;\n beakPositionStyle.top = BEAK_ORIGIN_POSITION.top;\n }\n return beakPositionStyle;\n}\n/**\n * (Utility) used to compare two different elementPositions to determine whether they are equal.\n *\n * @param prevElementPositions\n * @param newElementPosition\n */\nfunction arePositionsEqual(prevElementPositions, newElementPosition) {\n return (comparePositions(prevElementPositions.elementPosition, newElementPosition.elementPosition) &&\n comparePositions(prevElementPositions.beakPosition.elementPosition, newElementPosition.beakPosition.elementPosition));\n}\n/**\n * (Utility) used in **arePositionsEqual** to compare two different elementPositions.\n *\n * @param prevElementPositions\n * @param newElementPositions\n */\nfunction comparePositions(prevElementPositions, newElementPositions) {\n for (var key in newElementPositions) {\n if (newElementPositions.hasOwnProperty(key)) {\n var oldPositionEdge = prevElementPositions[key];\n var newPositionEdge = newElementPositions[key];\n if (oldPositionEdge !== undefined && newPositionEdge !== undefined) {\n if (oldPositionEdge.toFixed(2) !== newPositionEdge.toFixed(2)) {\n return false;\n }\n }\n else {\n return false;\n }\n }\n }\n return true;\n}\nCalloutContentBase.displayName = COMPONENT_NAME;\n//# sourceMappingURL=CalloutContent.base.js.map","import { HighContrastSelector, focusClear, getGlobalClassNames, ZIndexes } from '../../Styling';\nfunction getBeakStyle(beakWidth) {\n return {\n height: beakWidth,\n width: beakWidth,\n };\n}\nvar GlobalClassNames = {\n container: 'ms-Callout-container',\n root: 'ms-Callout',\n beak: 'ms-Callout-beak',\n beakCurtain: 'ms-Callout-beakCurtain',\n calloutMain: 'ms-Callout-main',\n};\nexport var getStyles = function (props) {\n var _a;\n var theme = props.theme, className = props.className, overflowYHidden = props.overflowYHidden, calloutWidth = props.calloutWidth, beakWidth = props.beakWidth, backgroundColor = props.backgroundColor, calloutMaxWidth = props.calloutMaxWidth, calloutMinWidth = props.calloutMinWidth, doNotLayer = props.doNotLayer;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var semanticColors = theme.semanticColors, effects = theme.effects;\n return {\n container: [\n classNames.container,\n {\n position: 'relative',\n },\n ],\n root: [\n classNames.root,\n theme.fonts.medium,\n {\n position: 'absolute',\n display: 'flex',\n zIndex: doNotLayer ? ZIndexes.Layer : undefined,\n boxSizing: 'border-box',\n borderRadius: effects.roundedCorner2,\n boxShadow: effects.elevation16,\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n borderWidth: 1,\n borderStyle: 'solid',\n borderColor: 'WindowText',\n },\n _a),\n },\n focusClear(),\n className,\n !!calloutWidth && { width: calloutWidth },\n !!calloutMaxWidth && { maxWidth: calloutMaxWidth },\n !!calloutMinWidth && { minWidth: calloutMinWidth },\n ],\n beak: [\n classNames.beak,\n {\n position: 'absolute',\n backgroundColor: semanticColors.menuBackground,\n boxShadow: 'inherit',\n border: 'inherit',\n boxSizing: 'border-box',\n transform: 'rotate(45deg)',\n },\n getBeakStyle(beakWidth),\n backgroundColor && {\n backgroundColor: backgroundColor,\n },\n ],\n beakCurtain: [\n classNames.beakCurtain,\n {\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n backgroundColor: semanticColors.menuBackground,\n borderRadius: effects.roundedCorner2,\n },\n ],\n calloutMain: [\n classNames.calloutMain,\n {\n backgroundColor: semanticColors.menuBackground,\n overflowX: 'hidden',\n overflowY: 'auto',\n position: 'relative',\n width: '100%',\n borderRadius: effects.roundedCorner2,\n },\n overflowYHidden && {\n overflowY: 'hidden',\n },\n backgroundColor && {\n backgroundColor: backgroundColor,\n },\n ],\n };\n};\n//# sourceMappingURL=CalloutContent.styles.js.map","import { styled } from '../../Utilities';\nimport { CalloutContentBase } from './CalloutContent.base';\nimport { getStyles } from './CalloutContent.styles';\nexport var CalloutContent = styled(CalloutContentBase, getStyles, undefined, {\n scope: 'CalloutContent',\n});\n//# sourceMappingURL=CalloutContent.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { getNativeProps, divProperties, classNamesFunction, getDocument, memoizeFunction, getRTL, Customizer, useFocusRects, } from '../../Utilities';\nimport { createTheme } from '../../Styling';\nimport { useMergedRefs } from '@fluentui/react-hooks';\nvar getClassNames = classNamesFunction();\nvar getFabricTheme = memoizeFunction(function (theme, isRTL) { return createTheme(__assign(__assign({}, theme), { rtl: isRTL })); });\nvar getDir = function (_a) {\n var theme = _a.theme, dir = _a.dir;\n var contextDir = getRTL(theme) ? 'rtl' : 'ltr';\n var pageDir = getRTL() ? 'rtl' : 'ltr';\n var componentDir = dir ? dir : contextDir;\n return {\n // If Fabric dir !== contextDir\n // Or If contextDir !== pageDir\n // Then we need to set dir of the Fabric root\n rootDir: componentDir !== contextDir || componentDir !== pageDir ? componentDir : dir,\n // If dir !== contextDir || pageDir\n // then set contextual theme around content\n needsTheme: componentDir !== contextDir,\n };\n};\nexport var FabricBase = React.forwardRef(function (props, ref) {\n var className = props.className, theme = props.theme, applyTheme = props.applyTheme, applyThemeToBody = props.applyThemeToBody, styles = props.styles;\n var classNames = getClassNames(styles, {\n theme: theme,\n applyTheme: applyTheme,\n className: className,\n });\n var rootElement = React.useRef(null);\n useApplyThemeToBody(applyThemeToBody, classNames, rootElement);\n useFocusRects(rootElement);\n return React.createElement(React.Fragment, null, useRenderedContent(props, classNames, rootElement, ref));\n});\nFabricBase.displayName = 'FabricBase';\nfunction useRenderedContent(props, _a, rootElement, ref) {\n var root = _a.root;\n var _b = props.as, Root = _b === void 0 ? 'div' : _b, dir = props.dir, theme = props.theme;\n var divProps = getNativeProps(props, divProperties, ['dir']);\n var _c = getDir(props), rootDir = _c.rootDir, needsTheme = _c.needsTheme;\n var renderedContent = React.createElement(Root, __assign({ dir: rootDir }, divProps, { className: root, ref: useMergedRefs(rootElement, ref) }));\n // Create the contextual theme if component direction does not match parent direction.\n if (needsTheme) {\n // Disabling ThemeProvider here because theme doesn't need to be re-provided by ThemeProvider if dir has changed.\n renderedContent = (\n // eslint-disable-next-line deprecation/deprecation\n React.createElement(Customizer, { settings: { theme: getFabricTheme(theme, dir === 'rtl') } }, renderedContent));\n }\n return renderedContent;\n}\nfunction useApplyThemeToBody(applyThemeToBody, _a, rootElement) {\n var bodyThemed = _a.bodyThemed;\n React.useEffect(function () {\n if (applyThemeToBody) {\n var currentDoc_1 = getDocument(rootElement.current);\n if (currentDoc_1) {\n currentDoc_1.body.classList.add(bodyThemed);\n return function () {\n currentDoc_1.body.classList.remove(bodyThemed);\n };\n }\n }\n }, [bodyThemed, applyThemeToBody, rootElement]);\n return rootElement;\n}\n//# sourceMappingURL=Fabric.base.js.map","import { getGlobalClassNames } from '../../Styling';\nvar inheritFont = { fontFamily: 'inherit' };\nvar GlobalClassNames = {\n root: 'ms-Fabric',\n bodyThemed: 'ms-Fabric-bodyThemed',\n};\nexport var getStyles = function (props) {\n var theme = props.theme, className = props.className, applyTheme = props.applyTheme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n {\n color: theme.palette.neutralPrimary,\n selectors: {\n '& button': inheritFont,\n '& input': inheritFont,\n '& textarea': inheritFont,\n },\n },\n // apply theme to only if applyTheme is true\n applyTheme && {\n color: theme.semanticColors.bodyText,\n backgroundColor: theme.semanticColors.bodyBackground,\n },\n className,\n ],\n bodyThemed: [\n {\n backgroundColor: theme.semanticColors.bodyBackground,\n },\n ],\n };\n};\n//# sourceMappingURL=Fabric.styles.js.map","import { styled } from '../../Utilities';\nimport { FabricBase } from './Fabric.base';\nimport { getStyles } from './Fabric.styles';\n/**\n * @deprecated This component is deprecated as of `@fluentui/react` version 8. Use `ThemeProvider` instead.\n */\nexport var Fabric = styled(FabricBase, getStyles, undefined, {\n scope: 'Fabric',\n});\n//# sourceMappingURL=Fabric.js.map","var _layersByHostId = {};\nvar _layerHostsById = {};\nvar defaultHostId = 'fluent-default-layer-host';\nvar _defaultHostSelector = \"#\" + defaultHostId;\n/**\n * Register a layer for a given host id\n * @param hostId Id of the layer host\n * @param layer Layer instance\n */\nexport function registerLayer(hostId, callback) {\n if (!_layersByHostId[hostId]) {\n _layersByHostId[hostId] = [];\n }\n _layersByHostId[hostId].push(callback);\n var layerHosts = _layerHostsById[hostId];\n if (layerHosts) {\n for (var _i = 0, layerHosts_1 = layerHosts; _i < layerHosts_1.length; _i++) {\n var layerHost = layerHosts_1[_i];\n layerHost.notifyLayersChanged();\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, callback) {\n var layers = _layersByHostId[hostId];\n if (layers) {\n var idx = layers.indexOf(callback);\n if (idx >= 0) {\n layers.splice(idx, 1);\n if (layers.length === 0) {\n delete _layersByHostId[hostId];\n }\n }\n }\n var layerHosts = _layerHostsById[hostId];\n if (layerHosts) {\n for (var _i = 0, layerHosts_2 = layerHosts; _i < layerHosts_2.length; _i++) {\n var layerHost = layerHosts_2[_i];\n layerHost.notifyLayersChanged();\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) {\n var layers = _layerHostsById[hostId];\n return layers ? layers.length : 0;\n}\n/**\n * Gets the Layer Host instance associated with a hostId, if applicable.\n * @param hostId\n * @returns A component ref for the associated layer host.\n */\nexport function getLayerHost(hostId) {\n var layerHosts = _layerHostsById[hostId];\n return (layerHosts && layerHosts[0]) || undefined;\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, layerHost) {\n var layerHosts = _layerHostsById[hostId] || (_layerHostsById[hostId] = []);\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 * 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, layerHost) {\n var layerHosts = _layerHostsById[hostId];\n if (layerHosts) {\n var idx = layerHosts.indexOf(layerHost);\n if (idx >= 0) {\n layerHosts.splice(idx, 1);\n }\n if (layerHosts.length === 0) {\n delete _layerHostsById[hostId];\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) {\n var host = doc.createElement('div');\n host.setAttribute('id', defaultHostId);\n host.style.cssText = 'position:fixed;z-index:1000000';\n doc === null || doc === void 0 ? void 0 : doc.body.appendChild(host);\n return host;\n}\n/**\n * This function can be optionally called to clean up the default layer host as needed.\n */\nexport function cleanupDefaultLayerHost(doc) {\n var host = doc.querySelector(\"#\" + defaultHostId);\n if (host) {\n doc.removeChild(host);\n }\n}\n/**\n * Used for notifying applicable Layers that a host is available/unavailable and to re-evaluate Layers that\n * care about the specific host.\n */\nexport function notifyHostChanged(id) {\n if (_layersByHostId[id]) {\n _layersByHostId[id].forEach(function (callback) { return callback(); });\n }\n}\n/**\n * Sets the default target selector to use when determining the host in which\n * Layered content will be injected into. If not provided, an element will be\n * created at the end of the document body.\n *\n * Passing in a falsy value will clear the default target and reset back to\n * using a created element at the end of document body.\n */\nexport function setDefaultTarget(selector) {\n _defaultHostSelector = selector;\n}\n/**\n * Get the default target selector when determining a host\n */\nexport function getDefaultTarget() {\n return _defaultHostSelector;\n}\n//# sourceMappingURL=Layer.notification.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { Fabric } from '../../Fabric';\nimport { classNamesFunction, setPortalAttribute, setVirtualParent } from '../../Utilities';\nimport { registerLayer, getDefaultTarget, unregisterLayer, getLayerHost, createDefaultLayerHost, } from './Layer.notification';\nimport { useIsomorphicLayoutEffect, useMergedRefs, useWarnings } from '@fluentui/react-hooks';\nimport { useDocument } from '../../WindowProvider';\nvar getClassNames = classNamesFunction();\nexport var LayerBase = React.forwardRef(function (props, ref) {\n var rootRef = React.useRef(null);\n var mergedRef = useMergedRefs(rootRef, ref);\n var layerRef = React.useRef();\n // Tracks if the layer mount events need to be raised.\n // Required to allow the DOM to render after the layer element is added.\n var _a = React.useState(false), needRaiseLayerMount = _a[0], setNeedRaiseLayerMount = _a[1];\n var doc = useDocument();\n var eventBubblingEnabled = props.eventBubblingEnabled, styles = props.styles, theme = props.theme, className = props.className, children = props.children, hostId = props.hostId, _b = props.onLayerDidMount, onLayerDidMount = _b === void 0 ? function () { return undefined; } : _b, \n // eslint-disable-next-line deprecation/deprecation\n _c = props.onLayerMounted, \n // eslint-disable-next-line deprecation/deprecation\n onLayerMounted = _c === void 0 ? function () { return undefined; } : _c, onLayerWillUnmount = props.onLayerWillUnmount, insertFirst = props.insertFirst;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n isNotHost: !hostId,\n });\n // Returns the user provided hostId props element, the default target selector,\n // or undefined if document doesn't exist.\n var getHost = function () {\n var _a, _b;\n if (hostId) {\n var layerHost = getLayerHost(hostId);\n if (layerHost) {\n return (_a = layerHost.rootRef.current) !== null && _a !== void 0 ? _a : null;\n }\n return (_b = doc === null || doc === void 0 ? void 0 : doc.getElementById(hostId)) !== null && _b !== void 0 ? _b : null;\n }\n else {\n var defaultHostSelector = getDefaultTarget();\n // Find the host.\n var host = defaultHostSelector ? doc === null || doc === void 0 ? void 0 : doc.querySelector(defaultHostSelector) : null;\n // If no host is available, create a container for injecting layers in.\n // Having a container scopes layout computation.\n if (!host && doc) {\n host = createDefaultLayerHost(doc);\n }\n return host;\n }\n };\n // Removes the current layer element's parentNode and runs onLayerWillUnmount prop if provided.\n var removeLayerElement = function () {\n onLayerWillUnmount === null || onLayerWillUnmount === void 0 ? void 0 : onLayerWillUnmount();\n var elem = layerRef.current;\n // Clear ref before removing from the DOM\n layerRef.current = undefined;\n if (elem && elem.parentNode) {\n elem.parentNode.removeChild(elem);\n }\n };\n // If a doc or host exists, it will remove and update layer parentNodes.\n var createLayerElement = function () {\n var _a, _b;\n var host = getHost();\n if (!host) {\n return;\n }\n // Remove and re-create any previous existing layer elements.\n removeLayerElement();\n var el = (_b = ((_a = host.ownerDocument) !== null && _a !== void 0 ? _a : doc)) === null || _b === void 0 ? void 0 : _b.createElement('div');\n if (el) {\n el.className = classNames.root;\n setPortalAttribute(el);\n setVirtualParent(el, rootRef.current);\n insertFirst ? host.insertBefore(el, host.firstChild) : host.appendChild(el);\n layerRef.current = el;\n setNeedRaiseLayerMount(true);\n }\n };\n useIsomorphicLayoutEffect(function () {\n createLayerElement();\n // Check if the user provided a hostId prop and register the layer with the ID.\n if (hostId) {\n registerLayer(hostId, createLayerElement);\n }\n return function () {\n removeLayerElement();\n if (hostId) {\n unregisterLayer(hostId, createLayerElement);\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should run if the hostId updates.\n }, [hostId]);\n React.useEffect(function () {\n if (layerRef.current && needRaiseLayerMount) {\n onLayerMounted === null || onLayerMounted === void 0 ? void 0 : onLayerMounted();\n onLayerDidMount === null || onLayerDidMount === void 0 ? void 0 : onLayerDidMount();\n setNeedRaiseLayerMount(false);\n }\n }, [needRaiseLayerMount, onLayerMounted, onLayerDidMount]);\n useDebugWarnings(props);\n return (React.createElement(\"span\", { className: \"ms-layer\", ref: mergedRef }, layerRef.current &&\n ReactDOM.createPortal(\n /* eslint-disable deprecation/deprecation */\n React.createElement(Fabric, __assign({}, (!eventBubblingEnabled && getFilteredEvents()), { className: classNames.content }), children), \n /* eslint-enable deprecation/deprecation */\n layerRef.current)));\n});\nLayerBase.displayName = 'LayerBase';\nvar filteredEventProps;\nvar onFilterEvent = function (ev) {\n // We should just be able to check ev.bubble here and only stop events that are bubbling up. However, even though\n // mouseenter and mouseleave do NOT bubble up, they are showing up as bubbling. Therefore we stop events based on\n // event name rather than ev.bubble.\n if (ev.eventPhase === Event.BUBBLING_PHASE &&\n ev.type !== 'mouseenter' &&\n ev.type !== 'mouseleave' &&\n ev.type !== 'touchstart' &&\n ev.type !== 'touchend') {\n ev.stopPropagation();\n }\n};\nfunction getFilteredEvents() {\n if (!filteredEventProps) {\n filteredEventProps = {};\n [\n 'onClick',\n 'onContextMenu',\n 'onDoubleClick',\n 'onDrag',\n 'onDragEnd',\n 'onDragEnter',\n 'onDragExit',\n 'onDragLeave',\n 'onDragOver',\n 'onDragStart',\n 'onDrop',\n 'onMouseDown',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseMove',\n 'onMouseOver',\n 'onMouseOut',\n 'onMouseUp',\n 'onTouchMove',\n 'onTouchStart',\n 'onTouchCancel',\n 'onTouchEnd',\n 'onKeyDown',\n 'onKeyPress',\n 'onKeyUp',\n 'onFocus',\n 'onBlur',\n 'onChange',\n 'onInput',\n 'onInvalid',\n 'onSubmit',\n ].forEach(function (name) { return (filteredEventProps[name] = onFilterEvent); });\n }\n return filteredEventProps;\n}\nfunction useDebugWarnings(props) {\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks -- build-time conditional\n useWarnings({\n name: 'Layer',\n props: props,\n deprecations: { onLayerMounted: 'onLayerDidMount' },\n });\n }\n}\n//# sourceMappingURL=Layer.base.js.map","import { ZIndexes, getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-Layer',\n rootNoHost: 'ms-Layer--fixed',\n content: 'ms-Layer-content',\n};\nexport var getStyles = function (props) {\n var className = props.className, isNotHost = props.isNotHost, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n isNotHost && [\n classNames.rootNoHost,\n {\n position: 'fixed',\n zIndex: ZIndexes.Layer,\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n visibility: 'hidden',\n },\n ],\n className,\n ],\n content: [\n classNames.content,\n {\n visibility: 'visible',\n },\n ],\n };\n};\n//# sourceMappingURL=Layer.styles.js.map","import { styled } from '../../Utilities';\nimport { LayerBase } from './Layer.base';\nimport { getStyles } from './Layer.styles';\nexport var Layer = styled(LayerBase, getStyles, undefined, {\n scope: 'Layer',\n fields: ['hostId', 'theme', 'styles'],\n});\n//# sourceMappingURL=Layer.js.map","import { __assign, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { CalloutContent } from './CalloutContent';\nimport { Layer } from '../../Layer';\nexport var Callout = React.forwardRef(function (_a, forwardedRef) {\n var layerProps = _a.layerProps, doNotLayer = _a.doNotLayer, rest = __rest(_a, [\"layerProps\", \"doNotLayer\"]);\n var content = React.createElement(CalloutContent, __assign({}, rest, { doNotLayer: doNotLayer, ref: forwardedRef }));\n return doNotLayer ? content : React.createElement(Layer, __assign({}, layerProps), content);\n});\nCallout.displayName = 'Callout';\n//# sourceMappingURL=Callout.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { elementContains, getNativeProps, divProperties, getFirstTabbable, getLastTabbable, getNextElement, focusAsync, modalize, on, } from '../../Utilities';\nimport { useId, useConst, useMergedRefs, useUnmount } from '@fluentui/react-hooks';\nimport { useDocument } from '../../WindowProvider';\nvar COMPONENT_NAME = 'FocusTrapZone';\nvar useComponentRef = function (componentRef, previouslyFocusedElement, focus) {\n React.useImperativeHandle(componentRef, function () { return ({\n get previouslyFocusedElement() {\n return previouslyFocusedElement;\n },\n focus: focus,\n }); }, [previouslyFocusedElement, focus]);\n};\nexport var FocusTrapZone = React.forwardRef(function (props, ref) {\n var root = React.useRef(null);\n var firstBumper = React.useRef(null);\n var lastBumper = React.useRef(null);\n var mergedRootRef = useMergedRefs(root, ref);\n var id = useId(undefined, props.id);\n var doc = useDocument();\n var divProps = getNativeProps(props, divProperties);\n var internalState = useConst(function () { return ({\n previouslyFocusedElementOutsideTrapZone: undefined,\n previouslyFocusedElementInTrapZone: undefined,\n disposeFocusHandler: undefined,\n disposeClickHandler: undefined,\n hasFocus: false,\n unmodalize: undefined,\n }); });\n var ariaLabelledBy = props.ariaLabelledBy, className = props.className, children = props.children, componentRef = props.componentRef, disabled = props.disabled, _a = props.disableFirstFocus, disableFirstFocus = _a === void 0 ? false : _a, _b = props.disabled, currentDisabledValue = _b === void 0 ? false : _b, elementToFocusOnDismiss = props.elementToFocusOnDismiss, _c = props.forceFocusInsideTrap, forceFocusInsideTrap = _c === void 0 ? true : _c, focusPreviouslyFocusedInnerElement = props.focusPreviouslyFocusedInnerElement, \n // eslint-disable-next-line deprecation/deprecation\n firstFocusableSelector = props.firstFocusableSelector, firstFocusableTarget = props.firstFocusableTarget, ignoreExternalFocusing = props.ignoreExternalFocusing, _d = props.isClickableOutsideFocusTrap, isClickableOutsideFocusTrap = _d === void 0 ? false : _d, onFocus = props.onFocus, onBlur = props.onBlur, onFocusCapture = props.onFocusCapture, onBlurCapture = props.onBlurCapture, enableAriaHiddenSiblings = props.enableAriaHiddenSiblings;\n var bumperProps = {\n 'aria-hidden': true,\n style: {\n pointerEvents: 'none',\n position: 'fixed', // 'fixed' prevents browsers from scrolling to bumpers when viewport does not contain them\n },\n tabIndex: disabled ? -1 : 0,\n 'data-is-visible': true,\n 'data-is-focus-trap-zone-bumper': true,\n };\n var focus = React.useCallback(function () {\n if (focusPreviouslyFocusedInnerElement &&\n internalState.previouslyFocusedElementInTrapZone &&\n elementContains(root.current, internalState.previouslyFocusedElementInTrapZone)) {\n // focus on the last item that had focus in the zone before we left the zone\n focusAsync(internalState.previouslyFocusedElementInTrapZone);\n return;\n }\n var focusSelector = typeof firstFocusableSelector === 'string'\n ? firstFocusableSelector\n : firstFocusableSelector && firstFocusableSelector();\n var firstFocusableChild = null;\n if (root.current) {\n if (typeof firstFocusableTarget === 'string') {\n firstFocusableChild = root.current.querySelector(firstFocusableTarget);\n }\n else if (firstFocusableTarget) {\n firstFocusableChild = firstFocusableTarget(root.current);\n }\n else if (focusSelector) {\n firstFocusableChild = root.current.querySelector('.' + focusSelector);\n }\n // Fall back to first element if query selector did not match any elements.\n if (!firstFocusableChild) {\n firstFocusableChild = getNextElement(root.current, root.current.firstChild, false, false, false, true);\n }\n }\n if (firstFocusableChild) {\n focusAsync(firstFocusableChild);\n }\n }, [firstFocusableSelector, firstFocusableTarget, focusPreviouslyFocusedInnerElement, internalState]);\n var onBumperFocus = React.useCallback(function (isFirstBumper) {\n if (disabled) {\n return;\n }\n var currentBumper = (isFirstBumper === internalState.hasFocus\n ? lastBumper.current\n : firstBumper.current);\n if (root.current) {\n var nextFocusable = isFirstBumper === internalState.hasFocus\n ? getLastTabbable(root.current, currentBumper, true, false)\n : getFirstTabbable(root.current, currentBumper, true, false);\n if (nextFocusable) {\n if (nextFocusable === firstBumper.current || nextFocusable === lastBumper.current) {\n // This can happen when FTZ contains no tabbable elements.\n // focus will take care of finding a focusable element in FTZ.\n focus();\n }\n else {\n nextFocusable.focus();\n }\n }\n }\n }, [disabled, focus, internalState]);\n var onRootBlurCapture = React.useCallback(function (ev) {\n onBlurCapture === null || onBlurCapture === void 0 ? void 0 : onBlurCapture(ev);\n var relatedTarget = ev.relatedTarget;\n if (ev.relatedTarget === null) {\n // In IE11, due to lack of support, event.relatedTarget is always\n // null making every onBlur call to be \"outside\" of the root\n // even when it's not. Using document.activeElement is another way\n // for us to be able to get what the relatedTarget without relying\n // on the event\n relatedTarget = doc.activeElement;\n }\n if (!elementContains(root.current, relatedTarget)) {\n internalState.hasFocus = false;\n }\n }, [doc, internalState, onBlurCapture]);\n var onRootFocusCapture = React.useCallback(function (ev) {\n onFocusCapture === null || onFocusCapture === void 0 ? void 0 : onFocusCapture(ev);\n if (ev.target === firstBumper.current) {\n onBumperFocus(true);\n }\n else if (ev.target === lastBumper.current) {\n onBumperFocus(false);\n }\n internalState.hasFocus = true;\n if (ev.target !== ev.currentTarget && !(ev.target === firstBumper.current || ev.target === lastBumper.current)) {\n // every time focus changes within the trap zone, remember the focused element so that\n // it can be restored if focus leaves the pane and returns via keystroke (i.e. via a call to this.focus(true))\n internalState.previouslyFocusedElementInTrapZone = ev.target;\n }\n }, [onFocusCapture, internalState, onBumperFocus]);\n var returnFocusToInitiator = React.useCallback(function () {\n FocusTrapZone.focusStack = FocusTrapZone.focusStack.filter(function (value) {\n return id !== value;\n });\n if (doc) {\n var activeElement = doc.activeElement;\n if (!ignoreExternalFocusing &&\n internalState.previouslyFocusedElementOutsideTrapZone &&\n typeof internalState.previouslyFocusedElementOutsideTrapZone.focus === 'function' &&\n (elementContains(root.current, activeElement) || activeElement === doc.body)) {\n if (!(internalState.previouslyFocusedElementOutsideTrapZone === firstBumper.current ||\n internalState.previouslyFocusedElementOutsideTrapZone === lastBumper.current)) {\n focusAsync(internalState.previouslyFocusedElementOutsideTrapZone);\n }\n }\n }\n }, [doc, id, ignoreExternalFocusing, internalState]);\n var forceFocusInTrap = React.useCallback(function (ev) {\n if (disabled) {\n return;\n }\n if (FocusTrapZone.focusStack.length && id === FocusTrapZone.focusStack[FocusTrapZone.focusStack.length - 1]) {\n var focusedElement = ev.target;\n if (!elementContains(root.current, focusedElement)) {\n focus();\n internalState.hasFocus = true; // set focus here since we stop event propagation\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n }, [disabled, id, focus, internalState]);\n var forceClickInTrap = React.useCallback(function (ev) {\n if (disabled) {\n return;\n }\n if (FocusTrapZone.focusStack.length && id === FocusTrapZone.focusStack[FocusTrapZone.focusStack.length - 1]) {\n var clickedElement = ev.target;\n if (clickedElement && !elementContains(root.current, clickedElement)) {\n focus();\n internalState.hasFocus = true; // set focus here since we stop event propagation\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n }, [disabled, id, focus, internalState]);\n var updateEventHandlers = React.useCallback(function () {\n if (forceFocusInsideTrap && !internalState.disposeFocusHandler) {\n internalState.disposeFocusHandler = on(window, 'focus', forceFocusInTrap, true);\n }\n else if (!forceFocusInsideTrap && internalState.disposeFocusHandler) {\n internalState.disposeFocusHandler();\n internalState.disposeFocusHandler = undefined;\n }\n if (!isClickableOutsideFocusTrap && !internalState.disposeClickHandler) {\n internalState.disposeClickHandler = on(window, 'click', forceClickInTrap, true);\n }\n else if (isClickableOutsideFocusTrap && internalState.disposeClickHandler) {\n internalState.disposeClickHandler();\n internalState.disposeClickHandler = undefined;\n }\n }, [forceClickInTrap, forceFocusInTrap, forceFocusInsideTrap, isClickableOutsideFocusTrap, internalState]);\n // Updates eventHandlers and cleans up focusStack when the component unmounts.\n React.useEffect(function () {\n var parentRoot = root.current;\n updateEventHandlers();\n return function () {\n // don't handle return focus unless forceFocusInsideTrap is true or focus is still within FocusTrapZone\n if (!disabled || forceFocusInsideTrap || !elementContains(parentRoot, doc === null || doc === void 0 ? void 0 : doc.activeElement)) {\n returnFocusToInitiator();\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- Should only run on mount.\n }, [updateEventHandlers]);\n // Updates focusStack and the previouslyFocusedElementOutsideTrapZone on prop change.\n React.useEffect(function () {\n var newForceFocusInsideTrap = forceFocusInsideTrap !== undefined ? forceFocusInsideTrap : true;\n var newDisabled = disabled !== undefined ? disabled : false;\n // Transition from forceFocusInsideTrap / FTZ disabled to enabled.\n if (!newDisabled || newForceFocusInsideTrap) {\n if (currentDisabledValue) {\n return;\n }\n FocusTrapZone.focusStack.push(id);\n internalState.previouslyFocusedElementOutsideTrapZone = elementToFocusOnDismiss\n ? elementToFocusOnDismiss\n : doc.activeElement;\n if (!disableFirstFocus && !elementContains(root.current, internalState.previouslyFocusedElementOutsideTrapZone)) {\n focus();\n }\n if (!internalState.unmodalize && root.current && enableAriaHiddenSiblings) {\n internalState.unmodalize = modalize(root.current);\n }\n }\n else if (!newForceFocusInsideTrap || newDisabled) {\n // Transition from forceFocusInsideTrap / FTZ enabled to disabled.\n returnFocusToInitiator();\n if (internalState.unmodalize) {\n internalState.unmodalize();\n }\n }\n if (elementToFocusOnDismiss && internalState.previouslyFocusedElementOutsideTrapZone !== elementToFocusOnDismiss) {\n internalState.previouslyFocusedElementOutsideTrapZone = elementToFocusOnDismiss;\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [elementToFocusOnDismiss, forceFocusInsideTrap, disabled]);\n // Cleanup lifecyle method for internalState.\n useUnmount(function () {\n // Dispose of event handlers so their closures can be garbage-collected\n if (internalState.disposeClickHandler) {\n internalState.disposeClickHandler();\n internalState.disposeClickHandler = undefined;\n }\n if (internalState.disposeFocusHandler) {\n internalState.disposeFocusHandler();\n internalState.disposeFocusHandler = undefined;\n }\n if (internalState.unmodalize) {\n internalState.unmodalize();\n }\n // Dispose of element references so the DOM Nodes can be garbage-collected\n delete internalState.previouslyFocusedElementInTrapZone;\n delete internalState.previouslyFocusedElementOutsideTrapZone;\n });\n useComponentRef(componentRef, internalState.previouslyFocusedElementInTrapZone, focus);\n return (React.createElement(\"div\", __assign({}, divProps, { className: className, ref: mergedRootRef, \"aria-labelledby\": ariaLabelledBy, onFocusCapture: onRootFocusCapture, onFocus: onFocus, onBlur: onBlur, onBlurCapture: onRootBlurCapture }),\n React.createElement(\"div\", __assign({}, bumperProps, { ref: firstBumper })),\n children,\n React.createElement(\"div\", __assign({}, bumperProps, { ref: lastBumper }))));\n});\nFocusTrapZone.displayName = COMPONENT_NAME;\nFocusTrapZone.focusStack = [];\n//# sourceMappingURL=FocusTrapZone.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, divProperties, getNativeProps } from '../../Utilities';\nimport { Callout } from '../../Callout';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nvar getClassNames = classNamesFunction();\nvar TooltipBase = /** @class */ (function (_super) {\n __extends(TooltipBase, _super);\n function TooltipBase() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this._onRenderContent = function (props) {\n if (typeof props.content === 'string') {\n return React.createElement(\"p\", { className: _this._classNames.subText }, props.content);\n }\n else {\n return React.createElement(\"div\", { className: _this._classNames.subText }, props.content);\n }\n };\n return _this;\n }\n TooltipBase.prototype.render = function () {\n var _a = this.props, className = _a.className, calloutProps = _a.calloutProps, directionalHint = _a.directionalHint, directionalHintForRTL = _a.directionalHintForRTL, styles = _a.styles, id = _a.id, maxWidth = _a.maxWidth, _b = _a.onRenderContent, onRenderContent = _b === void 0 ? this._onRenderContent : _b, targetElement = _a.targetElement, theme = _a.theme;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className || (calloutProps && calloutProps.className),\n beakWidth: calloutProps && calloutProps.beakWidth,\n gapSpace: calloutProps && calloutProps.gapSpace,\n maxWidth: maxWidth,\n });\n return (React.createElement(Callout, __assign({ target: targetElement, directionalHint: directionalHint, directionalHintForRTL: directionalHintForRTL }, calloutProps, getNativeProps(this.props, divProperties, ['id']), { className: this._classNames.root }),\n React.createElement(\"div\", { className: this._classNames.content, id: id, onMouseEnter: this.props.onMouseEnter, onMouseLeave: this.props.onMouseLeave }, onRenderContent(this.props, this._onRenderContent))));\n };\n // Specify default props values\n TooltipBase.defaultProps = {\n directionalHint: DirectionalHint.topCenter,\n maxWidth: '364px',\n calloutProps: {\n isBeakVisible: true,\n beakWidth: 16,\n gapSpace: 0,\n setInitialFocus: true,\n doNotLayer: false,\n },\n };\n return TooltipBase;\n}(React.Component));\nexport { TooltipBase };\n//# sourceMappingURL=Tooltip.base.js.map","import { AnimationClassNames } from '../../Styling';\nexport var getStyles = function (props) {\n var className = props.className, _a = props.beakWidth, beakWidth = _a === void 0 ? 16 : _a, _b = props.gapSpace, gapSpace = _b === void 0 ? 0 : _b, maxWidth = props.maxWidth, theme = props.theme;\n var semanticColors = theme.semanticColors, fonts = theme.fonts, effects = theme.effects;\n // The math here is done to account for the 45 degree rotation of the beak\n // and sub-pixel rounding that differs across browsers, which is more noticeable when\n // the device pixel ratio is larger\n var tooltipGapSpace = -(Math.sqrt((beakWidth * beakWidth) / 2) + gapSpace) + 1 / window.devicePixelRatio;\n return {\n root: [\n 'ms-Tooltip',\n theme.fonts.medium,\n AnimationClassNames.fadeIn200,\n {\n background: semanticColors.menuBackground,\n boxShadow: effects.elevation8,\n padding: '8px',\n maxWidth: maxWidth,\n selectors: {\n ':after': {\n content: \"''\",\n position: 'absolute',\n bottom: tooltipGapSpace,\n left: tooltipGapSpace,\n right: tooltipGapSpace,\n top: tooltipGapSpace,\n zIndex: 0,\n },\n },\n },\n className,\n ],\n content: [\n 'ms-Tooltip-content',\n fonts.small,\n {\n position: 'relative',\n zIndex: 1,\n color: semanticColors.menuItemText,\n wordWrap: 'break-word',\n overflowWrap: 'break-word',\n overflow: 'hidden',\n },\n ],\n subText: [\n 'ms-Tooltip-subtext',\n {\n // Using inherit here to avoid unintentional global overrides of the

tag.\n fontSize: 'inherit',\n fontWeight: 'inherit',\n color: 'inherit',\n margin: 0,\n },\n ],\n };\n};\n//# sourceMappingURL=Tooltip.styles.js.map","import { styled } from '../../Utilities';\nimport { TooltipBase } from './Tooltip.base';\nimport { getStyles } from './Tooltip.styles';\nexport var Tooltip = styled(TooltipBase, getStyles, undefined, {\n scope: 'Tooltip',\n});\n//# sourceMappingURL=Tooltip.js.map","/**\n * {@docCategory Tooltip}\n */\nexport var TooltipDelay;\n(function (TooltipDelay) {\n TooltipDelay[TooltipDelay[\"zero\"] = 0] = \"zero\";\n /** 300 ms delay before showing the tooltip */\n TooltipDelay[TooltipDelay[\"medium\"] = 1] = \"medium\";\n /** 500 ms delay before showing the tooltip */\n TooltipDelay[TooltipDelay[\"long\"] = 2] = \"long\";\n})(TooltipDelay || (TooltipDelay = {}));\n//# sourceMappingURL=Tooltip.types.js.map","/**\n * {@docCategory Tooltip}\n */\nexport var TooltipOverflowMode;\n(function (TooltipOverflowMode) {\n /** Only show tooltip if parent DOM element is overflowing */\n TooltipOverflowMode[TooltipOverflowMode[\"Parent\"] = 0] = \"Parent\";\n /**\n * Only show tooltip if tooltip host's content is overflowing.\n * Note that this does not check the children for overflow, only the TooltipHost root.\n */\n TooltipOverflowMode[TooltipOverflowMode[\"Self\"] = 1] = \"Self\";\n})(TooltipOverflowMode || (TooltipOverflowMode = {}));\n//# sourceMappingURL=TooltipHost.types.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { hiddenContentStyle } from '../../Styling';\nimport { initializeComponentRef, Async, divProperties, getNativeProps, getId, assign, hasOverflow, portalContainsElement, classNamesFunction, KeyCodes, } from '../../Utilities';\nimport { TooltipOverflowMode } from './TooltipHost.types';\nimport { Tooltip } from './Tooltip';\nimport { TooltipDelay } from './Tooltip.types';\nvar getClassNames = classNamesFunction();\nvar TooltipHostBase = /** @class */ (function (_super) {\n __extends(TooltipHostBase, _super);\n // Constructor\n function TooltipHostBase(props) {\n var _this = _super.call(this, props) || this;\n // The wrapping div that gets the hover events\n _this._tooltipHost = React.createRef();\n _this._defaultTooltipId = getId('tooltip');\n _this.show = function () {\n _this._toggleTooltip(true);\n };\n _this.dismiss = function () {\n _this._hideTooltip();\n };\n _this._getTargetElement = function () {\n if (!_this._tooltipHost.current) {\n return undefined;\n }\n var overflowMode = _this.props.overflowMode;\n // Select target element based on overflow mode. For parent mode, you want to position the tooltip relative\n // to the parent element, otherwise it might look off.\n if (overflowMode !== undefined) {\n switch (overflowMode) {\n case TooltipOverflowMode.Parent:\n return _this._tooltipHost.current.parentElement;\n case TooltipOverflowMode.Self:\n return _this._tooltipHost.current;\n }\n }\n return _this._tooltipHost.current;\n };\n _this._onTooltipFocus = function (ev) {\n if (_this._ignoreNextFocusEvent) {\n _this._ignoreNextFocusEvent = false;\n return;\n }\n _this._onTooltipMouseEnter(ev);\n };\n _this._onTooltipBlur = function (ev) {\n // The focused element gets a blur event when the document loses focus\n // (e.g. switching tabs in the browser), but we don't want to show the\n // tooltip again when the document gets focus back. Handle this case by\n // checking if the blurred element is still the document's activeElement,\n // and ignoring when it next gets focus back.\n // See https://github.com/microsoft/fluentui/issues/13541\n _this._ignoreNextFocusEvent = (document === null || document === void 0 ? void 0 : document.activeElement) === ev.target;\n _this._hideTooltip();\n };\n // Show Tooltip\n _this._onTooltipMouseEnter = function (ev) {\n var _a = _this.props, overflowMode = _a.overflowMode, delay = _a.delay;\n if (TooltipHostBase._currentVisibleTooltip && TooltipHostBase._currentVisibleTooltip !== _this) {\n TooltipHostBase._currentVisibleTooltip.dismiss();\n }\n TooltipHostBase._currentVisibleTooltip = _this;\n if (overflowMode !== undefined) {\n var overflowElement = _this._getTargetElement();\n if (overflowElement && !hasOverflow(overflowElement)) {\n return;\n }\n }\n if (ev.target && portalContainsElement(ev.target, _this._getTargetElement())) {\n // Do not show tooltip when target is inside a portal relative to TooltipHost.\n return;\n }\n _this._clearDismissTimer();\n _this._clearOpenTimer();\n if (delay !== TooltipDelay.zero) {\n var delayTime = _this._getDelayTime(delay); // non-null assertion because we set it in `defaultProps`\n _this._openTimerId = _this._async.setTimeout(function () {\n _this._toggleTooltip(true);\n }, delayTime);\n }\n else {\n _this._toggleTooltip(true);\n }\n };\n // Hide Tooltip\n _this._onTooltipMouseLeave = function (ev) {\n var closeDelay = _this.props.closeDelay;\n _this._clearDismissTimer();\n _this._clearOpenTimer();\n if (closeDelay) {\n _this._dismissTimerId = _this._async.setTimeout(function () {\n _this._toggleTooltip(false);\n }, closeDelay);\n }\n else {\n _this._toggleTooltip(false);\n }\n if (TooltipHostBase._currentVisibleTooltip === _this) {\n TooltipHostBase._currentVisibleTooltip = undefined;\n }\n };\n _this._onTooltipKeyDown = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if ((ev.which === KeyCodes.escape || ev.ctrlKey) && _this.state.isTooltipVisible) {\n _this._hideTooltip();\n ev.stopPropagation();\n }\n };\n _this._clearDismissTimer = function () {\n _this._async.clearTimeout(_this._dismissTimerId);\n };\n _this._clearOpenTimer = function () {\n _this._async.clearTimeout(_this._openTimerId);\n };\n // Hide Tooltip\n _this._hideTooltip = function () {\n _this._clearOpenTimer();\n _this._clearDismissTimer();\n _this._toggleTooltip(false);\n };\n _this._toggleTooltip = function (isTooltipVisible) {\n if (_this.state.isTooltipVisible !== isTooltipVisible) {\n _this.setState({ isTooltipVisible: isTooltipVisible }, function () { return _this.props.onTooltipToggle && _this.props.onTooltipToggle(isTooltipVisible); });\n }\n };\n _this._getDelayTime = function (delay) {\n switch (delay) {\n case TooltipDelay.medium:\n return 300;\n case TooltipDelay.long:\n return 500;\n default:\n return 0;\n }\n };\n initializeComponentRef(_this);\n _this.state = {\n isAriaPlaceholderRendered: false,\n isTooltipVisible: false,\n };\n _this._async = new Async(_this);\n return _this;\n }\n // Render\n TooltipHostBase.prototype.render = function () {\n var _a = this.props, calloutProps = _a.calloutProps, children = _a.children, content = _a.content, directionalHint = _a.directionalHint, directionalHintForRTL = _a.directionalHintForRTL, className = _a.hostClassName, id = _a.id, \n // eslint-disable-next-line deprecation/deprecation\n _b = _a.setAriaDescribedBy, \n // eslint-disable-next-line deprecation/deprecation\n setAriaDescribedBy = _b === void 0 ? true : _b, tooltipProps = _a.tooltipProps, styles = _a.styles, theme = _a.theme;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n });\n var isTooltipVisible = this.state.isTooltipVisible;\n var tooltipId = id || this._defaultTooltipId;\n var isContentPresent = !!(content ||\n (tooltipProps && tooltipProps.onRenderContent && tooltipProps.onRenderContent()));\n var showTooltip = isTooltipVisible && isContentPresent;\n var ariaDescribedBy = setAriaDescribedBy && isTooltipVisible && isContentPresent ? tooltipId : undefined;\n return (React.createElement(\"div\", __assign({ className: this._classNames.root, ref: this._tooltipHost }, { onFocusCapture: this._onTooltipFocus }, { onBlurCapture: this._onTooltipBlur }, { onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave, onKeyDown: this._onTooltipKeyDown, role: \"none\", \"aria-describedby\": ariaDescribedBy }),\n children,\n showTooltip && (React.createElement(Tooltip, __assign({ id: tooltipId + \"--tooltip\", content: content, targetElement: this._getTargetElement(), directionalHint: directionalHint, directionalHintForRTL: directionalHintForRTL, calloutProps: assign({}, calloutProps, {\n onDismiss: this._hideTooltip,\n onMouseEnter: this._onTooltipMouseEnter,\n onMouseLeave: this._onTooltipMouseLeave,\n }), onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave }, getNativeProps(this.props, divProperties, ['id']), tooltipProps))),\n React.createElement(\"div\", { hidden: true, id: tooltipId, style: hiddenContentStyle }, content)));\n };\n TooltipHostBase.prototype.componentWillUnmount = function () {\n if (TooltipHostBase._currentVisibleTooltip && TooltipHostBase._currentVisibleTooltip === this) {\n TooltipHostBase._currentVisibleTooltip = undefined;\n }\n this._async.dispose();\n };\n TooltipHostBase.defaultProps = {\n delay: TooltipDelay.medium,\n };\n return TooltipHostBase;\n}(React.Component));\nexport { TooltipHostBase };\n//# sourceMappingURL=TooltipHost.base.js.map","import { getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-TooltipHost',\n ariaPlaceholder: 'ms-TooltipHost-aria-placeholder',\n};\nexport var getStyles = function (props) {\n var className = props.className, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n {\n display: 'inline',\n },\n className,\n ],\n };\n};\n//# sourceMappingURL=TooltipHost.styles.js.map","import { styled } from '../../Utilities';\nimport { TooltipHostBase } from './TooltipHost.base';\nimport { getStyles } from './TooltipHost.styles';\nexport var TooltipHost = styled(TooltipHostBase, getStyles, undefined, {\n scope: 'TooltipHost',\n});\n//# sourceMappingURL=TooltipHost.js.map","/**\n * @deprecated Icon type is inferred based on presence of `IIconProps.imageProps`\n * {@docCategory Icon}\n */\nexport var IconType;\n(function (IconType) {\n /**\n * Render using the fabric icon font.\n * @deprecated Icon type is inferred based on presence of `IIconProps.imageProps`\n */\n IconType[IconType[\"default\"] = 0] = \"default\";\n /**\n * Render using an image, where imageProps would be used.\n * @deprecated Icon type is inferred based on presence of `IIconProps.imageProps`\n */\n IconType[IconType[\"image\"] = 1] = \"image\";\n /**\n * @deprecated Icon type is inferred based on presence of `IIconProps.imageProps`\n */\n IconType[IconType[\"Default\"] = 100000] = \"Default\";\n /**\n * @deprecated Icon type is inferred based on presence of `IIconProps.imageProps`\n */\n IconType[IconType[\"Image\"] = 100001] = \"Image\";\n})(IconType || (IconType = {}));\n//# sourceMappingURL=Icon.types.js.map","/**\n * The possible methods that can be used to fit the image.\n * {@docCategory Image}\n */\nexport var ImageFit;\n(function (ImageFit) {\n /**\n * The image is not scaled. The image is centered and cropped within the content box.\n */\n ImageFit[ImageFit[\"center\"] = 0] = \"center\";\n /**\n * The image is scaled to maintain its aspect ratio while being fully contained within the frame. The image will\n * be centered horizontally and vertically within the frame. The space in the top and bottom or in the sides of\n * the frame will be empty depending on the difference in aspect ratio between the image and the frame.\n */\n ImageFit[ImageFit[\"contain\"] = 1] = \"contain\";\n /**\n * The image is scaled to maintain its aspect ratio while filling the frame. Portions of the image will be cropped\n * from the top and bottom, or the sides, depending on the difference in aspect ratio between the image and the frame.\n */\n ImageFit[ImageFit[\"cover\"] = 2] = \"cover\";\n /**\n * Neither the image nor the frame are scaled. If their sizes do not match, the image will either be cropped or the\n * frame will have empty space.\n */\n ImageFit[ImageFit[\"none\"] = 3] = \"none\";\n /**\n * The image will be centered horizontally and vertically within the frame and maintains its aspect ratio. It will\n * behave as ImageFit.center if the image's natural height or width is less than the Image frame's height or width,\n * but if both natural height and width are larger than the frame it will behave as ImageFit.cover.\n */\n ImageFit[ImageFit[\"centerCover\"] = 4] = \"centerCover\";\n /**\n * The image will be centered horizontally and vertically within the frame and maintains its aspect ratio. It will\n * behave as ImageFit.center if the image's natural height and width is less than the Image frame's height and width,\n * but if either natural height or width are larger than the frame it will behave as ImageFit.contain.\n */\n ImageFit[ImageFit[\"centerContain\"] = 5] = \"centerContain\";\n})(ImageFit || (ImageFit = {}));\n/**\n * The cover style to be used on the image\n * {@docCategory Image}\n */\nexport var ImageCoverStyle;\n(function (ImageCoverStyle) {\n /**\n * The image will be shown at 100% height of container and the width will be scaled accordingly\n */\n ImageCoverStyle[ImageCoverStyle[\"landscape\"] = 0] = \"landscape\";\n /**\n * The image will be shown at 100% width of container and the height will be scaled accordingly\n */\n ImageCoverStyle[ImageCoverStyle[\"portrait\"] = 1] = \"portrait\";\n})(ImageCoverStyle || (ImageCoverStyle = {}));\n/**\n * {@docCategory Image}\n */\nexport var ImageLoadState;\n(function (ImageLoadState) {\n /**\n * The image has not yet been loaded, and there is no error yet.\n */\n ImageLoadState[ImageLoadState[\"notLoaded\"] = 0] = \"notLoaded\";\n /**\n * The image has been loaded successfully.\n */\n ImageLoadState[ImageLoadState[\"loaded\"] = 1] = \"loaded\";\n /**\n * An error has been encountered while loading the image.\n */\n ImageLoadState[ImageLoadState[\"error\"] = 2] = \"error\";\n /**\n * @deprecated Not used. Use `onLoadingStateChange` and re-render the Image with a different src.\n */\n ImageLoadState[ImageLoadState[\"errorLoaded\"] = 3] = \"errorLoaded\";\n})(ImageLoadState || (ImageLoadState = {}));\n//# sourceMappingURL=Image.types.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, getNativeProps, imgProperties } from '../../Utilities';\nimport { ImageCoverStyle, ImageFit, ImageLoadState } from './Image.types';\nimport { useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-hooks';\nvar getClassNames = classNamesFunction();\nvar SVG_REGEX = /\\.svg$/i;\nvar KEY_PREFIX = 'fabricImage';\nfunction useLoadState(props, imageElement) {\n var onLoadingStateChange = props.onLoadingStateChange, onLoad = props.onLoad, onError = props.onError, src = props.src;\n var _a = React.useState(ImageLoadState.notLoaded), loadState = _a[0], setLoadState = _a[1];\n useIsomorphicLayoutEffect(function () {\n // If the src property changes, reset the load state\n // (does nothing if the load state is already notLoaded)\n setLoadState(ImageLoadState.notLoaded);\n }, [src]);\n // eslint-disable-next-line react-hooks/exhaustive-deps -- intended to run every render\n React.useEffect(function () {\n if (loadState === ImageLoadState.notLoaded) {\n // testing if naturalWidth and naturalHeight are greater than zero is better than checking\n // .complete, because .complete will also be set to true if the image breaks. However,\n // for some browsers, SVG images do not have a naturalWidth or naturalHeight, so fall back\n // to checking .complete for these images.\n var isLoaded = imageElement.current\n ? (src && imageElement.current.naturalWidth > 0 && imageElement.current.naturalHeight > 0) ||\n (imageElement.current.complete && SVG_REGEX.test(src))\n : false;\n if (isLoaded) {\n setLoadState(ImageLoadState.loaded);\n }\n }\n });\n React.useEffect(function () {\n onLoadingStateChange === null || onLoadingStateChange === void 0 ? void 0 : onLoadingStateChange(loadState);\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run when loadState changes\n }, [loadState]);\n var onImageLoaded = React.useCallback(function (ev) {\n onLoad === null || onLoad === void 0 ? void 0 : onLoad(ev);\n if (src) {\n setLoadState(ImageLoadState.loaded);\n }\n }, [src, onLoad]);\n var onImageError = React.useCallback(function (ev) {\n onError === null || onError === void 0 ? void 0 : onError(ev);\n setLoadState(ImageLoadState.error);\n }, [onError]);\n return [loadState, onImageLoaded, onImageError];\n}\nexport var ImageBase = React.forwardRef(function (props, forwardedRef) {\n var frameElement = React.useRef();\n var imageElement = React.useRef();\n var _a = useLoadState(props, imageElement), loadState = _a[0], onImageLoaded = _a[1], onImageError = _a[2];\n var imageProps = getNativeProps(props, imgProperties, [\n 'width',\n 'height',\n ]);\n var src = props.src, alt = props.alt, width = props.width, height = props.height, _b = props.shouldFadeIn, shouldFadeIn = _b === void 0 ? true : _b, shouldStartVisible = props.shouldStartVisible, className = props.className, imageFit = props.imageFit, role = props.role, maximizeFrame = props.maximizeFrame, styles = props.styles, theme = props.theme, loading = props.loading;\n var coverStyle = useCoverStyle(props, loadState, imageElement, frameElement);\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n width: width,\n height: height,\n maximizeFrame: maximizeFrame,\n shouldFadeIn: shouldFadeIn,\n shouldStartVisible: shouldStartVisible,\n isLoaded: loadState === ImageLoadState.loaded || (loadState === ImageLoadState.notLoaded && props.shouldStartVisible),\n isLandscape: coverStyle === ImageCoverStyle.landscape,\n isCenter: imageFit === ImageFit.center,\n isCenterContain: imageFit === ImageFit.centerContain,\n isCenterCover: imageFit === ImageFit.centerCover,\n isContain: imageFit === ImageFit.contain,\n isCover: imageFit === ImageFit.cover,\n isNone: imageFit === ImageFit.none,\n isError: loadState === ImageLoadState.error,\n isNotImageFit: imageFit === undefined,\n });\n // If image dimensions aren't specified, the natural size of the image is used.\n return (React.createElement(\"div\", { className: classNames.root, style: { width: width, height: height }, ref: frameElement },\n React.createElement(\"img\", __assign({}, imageProps, { onLoad: onImageLoaded, onError: onImageError, key: KEY_PREFIX + props.src || '', className: classNames.image, ref: useMergedRefs(imageElement, forwardedRef), src: src, alt: alt, role: role, loading: loading }))));\n});\nImageBase.displayName = 'ImageBase';\nfunction useCoverStyle(props, loadState, imageElement, frameElement) {\n var previousLoadState = React.useRef(loadState);\n var coverStyle = React.useRef();\n if (coverStyle === undefined ||\n (previousLoadState.current === ImageLoadState.notLoaded && loadState === ImageLoadState.loaded)) {\n coverStyle.current = computeCoverStyle(props, loadState, imageElement, frameElement);\n }\n previousLoadState.current = loadState;\n return coverStyle.current;\n}\nfunction computeCoverStyle(props, loadState, imageElement, frameElement) {\n var imageFit = props.imageFit, width = props.width, height = props.height;\n // Do not compute cover style if it was already specified in props\n if (props.coverStyle !== undefined) {\n return props.coverStyle;\n }\n else if (loadState === ImageLoadState.loaded &&\n (imageFit === ImageFit.cover ||\n imageFit === ImageFit.contain ||\n imageFit === ImageFit.centerContain ||\n imageFit === ImageFit.centerCover) &&\n imageElement.current &&\n frameElement.current) {\n // Determine the desired ratio using the width and height props.\n // If those props aren't available, measure measure the frame.\n var desiredRatio = void 0;\n if (typeof width === 'number' &&\n typeof height === 'number' &&\n imageFit !== ImageFit.centerContain &&\n imageFit !== ImageFit.centerCover) {\n desiredRatio = width / height;\n }\n else {\n desiredRatio = frameElement.current.clientWidth / frameElement.current.clientHeight;\n }\n // Examine the source image to determine its original ratio.\n var naturalRatio = imageElement.current.naturalWidth / imageElement.current.naturalHeight;\n // Should we crop from the top or the sides?\n if (naturalRatio > desiredRatio) {\n return ImageCoverStyle.landscape;\n }\n }\n return ImageCoverStyle.portrait;\n}\n//# sourceMappingURL=Image.base.js.map","import { AnimationClassNames, getGlobalClassNames } from '../../Styling';\nimport { getWindow } from '../../Utilities';\nvar GlobalClassNames = {\n root: 'ms-Image',\n rootMaximizeFrame: 'ms-Image--maximizeFrame',\n image: 'ms-Image-image',\n imageCenter: 'ms-Image-image--center',\n imageContain: 'ms-Image-image--contain',\n imageCover: 'ms-Image-image--cover',\n imageCenterContain: 'ms-Image-image--centerContain',\n imageCenterCover: 'ms-Image-image--centerCover',\n imageNone: 'ms-Image-image--none',\n imageLandscape: 'ms-Image-image--landscape',\n imagePortrait: 'ms-Image-image--portrait',\n};\nexport var getStyles = function (props) {\n var className = props.className, width = props.width, height = props.height, maximizeFrame = props.maximizeFrame, isLoaded = props.isLoaded, shouldFadeIn = props.shouldFadeIn, shouldStartVisible = props.shouldStartVisible, isLandscape = props.isLandscape, isCenter = props.isCenter, isContain = props.isContain, isCover = props.isCover, isCenterContain = props.isCenterContain, isCenterCover = props.isCenterCover, isNone = props.isNone, isError = props.isError, isNotImageFit = props.isNotImageFit, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var ImageFitStyles = {\n position: 'absolute',\n left: '50% /* @noflip */',\n top: '50%',\n transform: 'translate(-50%,-50%)', // @todo test RTL renders transform: translate(50%,-50%);\n };\n // Cut the mustard using msMaxTouchPoints to detect IE11 which does not support CSS object-fit\n var window = getWindow();\n var supportsObjectFit = window !== undefined && window.navigator.msMaxTouchPoints === undefined;\n var fallbackObjectFitStyles = (isContain && isLandscape) || (isCover && !isLandscape)\n ? { width: '100%', height: 'auto' }\n : { width: 'auto', height: '100%' };\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n {\n overflow: 'hidden',\n },\n maximizeFrame && [\n classNames.rootMaximizeFrame,\n {\n height: '100%',\n width: '100%',\n },\n ],\n isLoaded && shouldFadeIn && !shouldStartVisible && AnimationClassNames.fadeIn400,\n (isCenter || isContain || isCover || isCenterContain || isCenterCover) && {\n position: 'relative',\n },\n className,\n ],\n image: [\n classNames.image,\n {\n display: 'block',\n opacity: 0,\n },\n isLoaded && [\n 'is-loaded',\n {\n opacity: 1,\n },\n ],\n isCenter && [classNames.imageCenter, ImageFitStyles],\n isContain && [\n classNames.imageContain,\n supportsObjectFit && {\n width: '100%',\n height: '100%',\n objectFit: 'contain',\n },\n !supportsObjectFit && fallbackObjectFitStyles,\n !supportsObjectFit && ImageFitStyles,\n ],\n isCover && [\n classNames.imageCover,\n supportsObjectFit && {\n width: '100%',\n height: '100%',\n objectFit: 'cover',\n },\n !supportsObjectFit && fallbackObjectFitStyles,\n !supportsObjectFit && ImageFitStyles,\n ],\n isCenterContain && [\n classNames.imageCenterContain,\n isLandscape && {\n maxWidth: '100%',\n },\n !isLandscape && {\n maxHeight: '100%',\n },\n ImageFitStyles,\n ],\n isCenterCover && [\n classNames.imageCenterCover,\n isLandscape && {\n maxHeight: '100%',\n },\n !isLandscape && {\n maxWidth: '100%',\n },\n ImageFitStyles,\n ],\n isNone && [\n classNames.imageNone,\n {\n width: 'auto',\n height: 'auto',\n },\n ],\n isNotImageFit && [\n !!width &&\n !height && {\n height: 'auto',\n width: '100%',\n },\n !width &&\n !!height && {\n height: '100%',\n width: 'auto',\n },\n !!width &&\n !!height && {\n height: '100%',\n width: '100%',\n },\n ],\n isLandscape && classNames.imageLandscape,\n !isLandscape && classNames.imagePortrait,\n !isLoaded && 'is-notLoaded',\n shouldFadeIn && 'is-fadeIn',\n isError && 'is-error',\n ],\n };\n};\n//# sourceMappingURL=Image.styles.js.map","import { styled } from '../../Utilities';\nimport { ImageBase } from './Image.base';\nimport { getStyles } from './Image.styles';\nexport var Image = styled(ImageBase, getStyles, undefined, {\n scope: 'Image',\n}, true);\nImage.displayName = 'Image';\n//# sourceMappingURL=Image.js.map","import { mergeStyleSets } from '../../Styling';\n/** Class names used in themeable and non-themeable Icon components */\nexport var classNames = mergeStyleSets({\n root: {\n display: 'inline-block',\n },\n placeholder: [\n 'ms-Icon-placeHolder',\n {\n width: '1em',\n },\n ],\n image: [\n 'ms-Icon-imageContainer',\n {\n overflow: 'hidden',\n },\n ],\n});\n/** Class name used only in non-themeable Icon components */\nexport var MS_ICON = 'ms-Icon';\nexport var getStyles = function (props) {\n var className = props.className, iconClassName = props.iconClassName, isPlaceholder = props.isPlaceholder, isImage = props.isImage, styles = props.styles;\n return {\n root: [\n isPlaceholder && classNames.placeholder,\n classNames.root,\n isImage && classNames.image,\n iconClassName,\n className,\n styles && styles.root,\n // eslint-disable-next-line deprecation/deprecation\n styles && styles.imageContainer,\n ],\n };\n};\n//# sourceMappingURL=Icon.styles.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { classNames, MS_ICON } from './Icon.styles';\nimport { css, getNativeProps, htmlElementProperties, memoizeFunction } from '../../Utilities';\nimport { getIcon } from '../../Styling';\nexport var getIconContent = memoizeFunction(function (iconName) {\n var _a = getIcon(iconName) || {\n subset: {},\n code: undefined,\n }, code = _a.code, subset = _a.subset;\n if (!code) {\n return null;\n }\n return {\n children: code,\n iconClassName: subset.className,\n fontFamily: subset.fontFace && subset.fontFace.fontFamily,\n mergeImageProps: subset.mergeImageProps,\n };\n}, undefined, true /*ignoreNullOrUndefinedResult */);\n/**\n * Fast icon component which only supports font glyphs (not images) and can't be targeted by customizations.\n * To style the icon, use `className` or reference `ms-Icon` in CSS.\n * {@docCategory Icon}\n */\nexport var FontIcon = function (props) {\n var iconName = props.iconName, className = props.className, _a = props.style, style = _a === void 0 ? {} : _a;\n var iconContent = getIconContent(iconName) || {};\n var iconClassName = iconContent.iconClassName, children = iconContent.children, fontFamily = iconContent.fontFamily, mergeImageProps = iconContent.mergeImageProps;\n var nativeProps = getNativeProps(props, htmlElementProperties);\n var accessibleName = props['aria-label'] || props.title;\n var containerProps = props['aria-label'] || props['aria-labelledby'] || props.title\n ? {\n role: mergeImageProps ? undefined : 'img',\n }\n : {\n 'aria-hidden': true,\n };\n var finalChildren = children;\n if (mergeImageProps) {\n if (typeof children === 'object' && typeof children.props === 'object' && accessibleName) {\n finalChildren = React.cloneElement(children, { alt: accessibleName });\n }\n }\n return (React.createElement(\"i\", __assign({ \"data-icon-name\": iconName }, containerProps, nativeProps, (mergeImageProps\n ? {\n title: undefined,\n 'aria-label': undefined,\n }\n : {}), { className: css(MS_ICON, classNames.root, iconClassName, !iconName && classNames.placeholder, className), \n // Apply the font family this way to ensure it doesn't get overridden by Fabric Core ms-Icon styles\n // https://github.com/microsoft/fluentui/issues/10449\n style: __assign({ fontFamily: fontFamily }, style) }), finalChildren));\n};\n/**\n * Memoized helper for rendering a FontIcon.\n * @param iconName - The name of the icon to use from the icon font.\n * @param className - Class name for styling the icon.\n * @param ariaLabel - Label for the icon for the benefit of screen readers.\n * {@docCategory Icon}\n */\nexport var getFontIcon = memoizeFunction(function (iconName, className, ariaLabel) {\n return FontIcon({ iconName: iconName, className: className, 'aria-label': ariaLabel });\n});\n//# sourceMappingURL=FontIcon.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { IconType } from './Icon.types';\nimport { Image } from '../Image/Image';\nimport { ImageLoadState } from '../Image/Image.types';\nimport { getNativeProps, htmlElementProperties, classNamesFunction } from '../../Utilities';\nimport { getIconContent } from './FontIcon';\nvar getClassNames = classNamesFunction({\n // Icon is used a lot by other components.\n // It's likely to see expected cases which pass different className to the Icon.\n // Therefore setting a larger cache size.\n cacheSize: 100,\n});\nvar IconBase = /** @class */ (function (_super) {\n __extends(IconBase, _super);\n function IconBase(props) {\n var _this = _super.call(this, props) || this;\n _this._onImageLoadingStateChange = function (state) {\n if (_this.props.imageProps && _this.props.imageProps.onLoadingStateChange) {\n _this.props.imageProps.onLoadingStateChange(state);\n }\n if (state === ImageLoadState.error) {\n _this.setState({ imageLoadError: true });\n }\n };\n _this.state = {\n imageLoadError: false,\n };\n return _this;\n }\n IconBase.prototype.render = function () {\n var _a = this.props, children = _a.children, className = _a.className, styles = _a.styles, iconName = _a.iconName, imageErrorAs = _a.imageErrorAs, theme = _a.theme;\n var isPlaceholder = typeof iconName === 'string' && iconName.length === 0;\n var isImage = \n // eslint-disable-next-line deprecation/deprecation\n !!this.props.imageProps || this.props.iconType === IconType.image || this.props.iconType === IconType.Image;\n var iconContent = getIconContent(iconName) || {};\n var iconClassName = iconContent.iconClassName, iconContentChildren = iconContent.children, mergeImageProps = iconContent.mergeImageProps;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n iconClassName: iconClassName,\n isImage: isImage,\n isPlaceholder: isPlaceholder,\n });\n var RootType = isImage ? 'span' : 'i';\n var nativeProps = getNativeProps(this.props, htmlElementProperties, [\n 'aria-label',\n ]);\n var imageLoadError = this.state.imageLoadError;\n var imageProps = __assign(__assign({}, this.props.imageProps), { onLoadingStateChange: this._onImageLoadingStateChange });\n var ImageType = (imageLoadError && imageErrorAs) || Image;\n // eslint-disable-next-line deprecation/deprecation\n var ariaLabel = this.props['aria-label'] || this.props.ariaLabel;\n var accessibleName = imageProps.alt || ariaLabel || this.props.title;\n var hasName = !!(accessibleName ||\n this.props['aria-labelledby'] ||\n imageProps['aria-label'] ||\n imageProps['aria-labelledby']);\n var containerProps = hasName\n ? {\n role: isImage || mergeImageProps ? undefined : 'img',\n 'aria-label': isImage || mergeImageProps ? undefined : accessibleName,\n }\n : {\n 'aria-hidden': true,\n };\n var finalIconContentChildren = iconContentChildren;\n if (mergeImageProps && iconContentChildren && typeof iconContentChildren === 'object' && accessibleName) {\n finalIconContentChildren = React.cloneElement(iconContentChildren, {\n alt: accessibleName,\n });\n }\n return (React.createElement(RootType, __assign({ \"data-icon-name\": iconName }, containerProps, nativeProps, (mergeImageProps\n ? {\n title: undefined,\n 'aria-label': undefined,\n }\n : {}), { className: classNames.root }), isImage ? React.createElement(ImageType, __assign({}, imageProps)) : children || finalIconContentChildren));\n };\n return IconBase;\n}(React.Component));\nexport { IconBase };\n//# sourceMappingURL=Icon.base.js.map","import { styled } from '../../Utilities';\nimport { IconBase } from './Icon.base';\nimport { getStyles } from './Icon.styles';\n/**\n * Legacy Icon component which can be targeted by customization. It's recommended to use `FontIcon`\n * or `ImageIcon` instead, especially in scenarios where rendering performance is important.\n * {@docCategory Icon}\n */\nexport var Icon = styled(IconBase, getStyles, undefined, {\n scope: 'Icon',\n}, true);\nIcon.displayName = 'Icon';\n//# sourceMappingURL=Icon.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { Image } from '../Image/Image';\nimport { css, getNativeProps, htmlElementProperties } from '../../Utilities';\nimport { classNames, MS_ICON } from './Icon.styles';\n/**\n * Fast icon component which only supports images (not font glyphs) and can't be targeted by customizations.\n * To style the icon, use `className` or reference `ms-Icon` in CSS.\n * {@docCategory Icon}\n */\nexport var ImageIcon = function (props) {\n var className = props.className, imageProps = props.imageProps;\n var nativeProps = getNativeProps(props, htmlElementProperties, [\n 'aria-label',\n 'aria-labelledby',\n 'title',\n 'aria-describedby',\n ]);\n var altText = imageProps.alt || props['aria-label'];\n var hasName = altText ||\n props['aria-labelledby'] ||\n props.title ||\n imageProps['aria-label'] ||\n imageProps['aria-labelledby'] ||\n imageProps.title;\n // move naming or describing attributes from the container (where they are invalid) to the image\n var imageNameProps = {\n 'aria-labelledby': props['aria-labelledby'],\n 'aria-describedby': props['aria-describedby'],\n title: props.title,\n };\n var containerProps = hasName\n ? {}\n : {\n 'aria-hidden': true,\n };\n return (React.createElement(\"div\", __assign({}, containerProps, nativeProps, { className: css(MS_ICON, classNames.root, classNames.image, className) }),\n React.createElement(Image, __assign({}, imageNameProps, imageProps, { alt: hasName ? altText : '' }))));\n};\n//# sourceMappingURL=ImageIcon.js.map","/**\n * {@docCategory FocusZone}\n */\nexport var FocusZoneTabbableElements = {\n /** Tabbing is not allowed */\n none: 0,\n /** All tabbing action is allowed */\n all: 1,\n /** Tabbing is allowed only on input elements */\n inputOnly: 2,\n};\n/**\n * {@docCategory FocusZone}\n */\nexport var FocusZoneDirection;\n(function (FocusZoneDirection) {\n /** Only react to up/down arrows. */\n FocusZoneDirection[FocusZoneDirection[\"vertical\"] = 0] = \"vertical\";\n /** Only react to left/right arrows. */\n FocusZoneDirection[FocusZoneDirection[\"horizontal\"] = 1] = \"horizontal\";\n /** React to all arrows. */\n FocusZoneDirection[FocusZoneDirection[\"bidirectional\"] = 2] = \"bidirectional\";\n /**\n * React to all arrows. Navigate next item in DOM on right/down arrow keys and previous - left/up arrow keys.\n * Right and Left arrow keys are swapped in RTL mode.\n */\n FocusZoneDirection[FocusZoneDirection[\"domOrder\"] = 3] = \"domOrder\";\n})(FocusZoneDirection || (FocusZoneDirection = {}));\n//# sourceMappingURL=FocusZone.types.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { FocusZoneDirection, FocusZoneTabbableElements } from './FocusZone.types';\nimport { KeyCodes, css, elementContains, getDocument, getElementIndexPath, getFocusableByIndexPath, getId, getNativeProps, getNextElement, getParent, getPreviousElement, getRTL, htmlElementProperties, initializeComponentRef, isElementFocusSubZone, isElementFocusZone, isElementTabbable, shouldWrapFocus, warnDeprecations, portalContainsElement, getWindow, findScrollableParent, createMergedRef, } from '@fluentui/utilities';\nimport { mergeStyles } from '@fluentui/merge-styles';\nimport { getTheme } from '@fluentui/style-utilities';\nvar IS_FOCUSABLE_ATTRIBUTE = 'data-is-focusable';\nvar IS_ENTER_DISABLED_ATTRIBUTE = 'data-disable-click-on-enter';\nvar FOCUSZONE_ID_ATTRIBUTE = 'data-focuszone-id';\nvar TABINDEX = 'tabindex';\nvar NO_VERTICAL_WRAP = 'data-no-vertical-wrap';\nvar NO_HORIZONTAL_WRAP = 'data-no-horizontal-wrap';\nvar LARGE_DISTANCE_FROM_CENTER = 999999999;\nvar LARGE_NEGATIVE_DISTANCE_FROM_CENTER = -999999999;\nvar focusZoneStyles;\nvar focusZoneClass = 'ms-FocusZone';\n/**\n * Raises a click on a target element based on a keyboard event.\n */\nfunction raiseClickFromKeyboardEvent(target, ev) {\n var event;\n if (typeof MouseEvent === 'function') {\n event = new MouseEvent('click', {\n ctrlKey: ev === null || ev === void 0 ? void 0 : ev.ctrlKey,\n metaKey: ev === null || ev === void 0 ? void 0 : ev.metaKey,\n shiftKey: ev === null || ev === void 0 ? void 0 : ev.shiftKey,\n altKey: ev === null || ev === void 0 ? void 0 : ev.altKey,\n bubbles: ev === null || ev === void 0 ? void 0 : ev.bubbles,\n cancelable: ev === null || ev === void 0 ? void 0 : ev.cancelable,\n });\n }\n else {\n event = document.createEvent('MouseEvents');\n event.initMouseEvent('click', ev ? ev.bubbles : false, ev ? ev.cancelable : false, window, // not using getWindow() since this can only be run client side\n 0, // detail\n 0, // screen x\n 0, // screen y\n 0, // client x\n 0, // client y\n ev ? ev.ctrlKey : false, ev ? ev.altKey : false, ev ? ev.shiftKey : false, ev ? ev.metaKey : false, 0, // button\n null);\n }\n target.dispatchEvent(event);\n}\n// Helper function that will return a class for when the root is focused\nfunction getRootClass() {\n if (!focusZoneStyles) {\n focusZoneStyles = mergeStyles({\n selectors: {\n ':focus': {\n outline: 'none',\n },\n },\n }, focusZoneClass);\n }\n return focusZoneStyles;\n}\nvar _allInstances = {};\nvar _outerZones = new Set();\nvar ALLOWED_INPUT_TYPES = ['text', 'number', 'password', 'email', 'tel', 'url', 'search'];\nvar ALLOW_VIRTUAL_ELEMENTS = false;\nvar FocusZone = /** @class */ (function (_super) {\n __extends(FocusZone, _super);\n function FocusZone(props) {\n var _a, _b, _c, _d;\n var _this = _super.call(this, props) || this;\n _this._root = React.createRef();\n _this._mergedRef = createMergedRef();\n _this._onFocus = function (ev) {\n if (_this._portalContainsElement(ev.target)) {\n // If the event target is inside a portal do not process the event.\n return;\n }\n var _a = _this.props, onActiveElementChanged = _a.onActiveElementChanged, \n // eslint-disable-next-line deprecation/deprecation\n doNotAllowFocusEventToPropagate = _a.doNotAllowFocusEventToPropagate, stopFocusPropagation = _a.stopFocusPropagation, \n // eslint-disable-next-line deprecation/deprecation\n onFocusNotification = _a.onFocusNotification, onFocus = _a.onFocus, shouldFocusInnerElementWhenReceivedFocus = _a.shouldFocusInnerElementWhenReceivedFocus, defaultTabbableElement = _a.defaultTabbableElement;\n var isImmediateDescendant = _this._isImmediateDescendantOfZone(ev.target);\n var newActiveElement;\n if (isImmediateDescendant) {\n newActiveElement = ev.target;\n }\n else {\n var parentElement = ev.target;\n while (parentElement && parentElement !== _this._root.current) {\n if (isElementTabbable(parentElement) && _this._isImmediateDescendantOfZone(parentElement)) {\n newActiveElement = parentElement;\n break;\n }\n parentElement = getParent(parentElement, ALLOW_VIRTUAL_ELEMENTS);\n }\n }\n // If an inner focusable element should be focused when FocusZone container receives focus\n if (shouldFocusInnerElementWhenReceivedFocus && ev.target === _this._root.current) {\n var maybeElementToFocus = defaultTabbableElement &&\n typeof defaultTabbableElement === 'function' &&\n _this._root.current &&\n defaultTabbableElement(_this._root.current);\n // try to focus defaultTabbable element\n if (maybeElementToFocus && isElementTabbable(maybeElementToFocus)) {\n newActiveElement = maybeElementToFocus;\n maybeElementToFocus.focus();\n }\n else {\n // force focus on first focusable element\n _this.focus(true);\n if (_this._activeElement) {\n // set to null as new active element was handled in method above\n newActiveElement = null;\n }\n }\n }\n var initialElementFocused = !_this._activeElement;\n // If the new active element is a child of this zone and received focus,\n // update alignment an immediate descendant\n if (newActiveElement && newActiveElement !== _this._activeElement) {\n if (isImmediateDescendant || initialElementFocused) {\n _this._setFocusAlignment(newActiveElement, true, true);\n }\n _this._activeElement = newActiveElement;\n if (initialElementFocused) {\n _this._updateTabIndexes();\n }\n }\n if (onActiveElementChanged) {\n onActiveElementChanged(_this._activeElement, ev);\n }\n if (stopFocusPropagation || doNotAllowFocusEventToPropagate) {\n ev.stopPropagation();\n }\n if (onFocus) {\n onFocus(ev);\n }\n else if (onFocusNotification) {\n onFocusNotification();\n }\n };\n _this._onBlur = function () {\n _this._setParkedFocus(false);\n };\n _this._onMouseDown = function (ev) {\n if (_this._portalContainsElement(ev.target)) {\n // If the event target is inside a portal do not process the event.\n return;\n }\n var disabled = _this.props.disabled;\n if (disabled) {\n return;\n }\n var target = ev.target;\n var path = [];\n while (target && target !== _this._root.current) {\n path.push(target);\n target = getParent(target, ALLOW_VIRTUAL_ELEMENTS);\n }\n while (path.length) {\n target = path.pop();\n if (target && isElementTabbable(target)) {\n _this._setActiveElement(target, true);\n }\n if (isElementFocusZone(target)) {\n // Stop here since the focus zone will take care of its own children.\n break;\n }\n }\n };\n /**\n * Handle the keystrokes.\n */\n _this._onKeyDown = function (ev, theme) {\n if (_this._portalContainsElement(ev.target)) {\n // If the event target is inside a portal do not process the event.\n return;\n }\n // eslint-disable-next-line deprecation/deprecation\n var _a = _this.props, direction = _a.direction, disabled = _a.disabled, isInnerZoneKeystroke = _a.isInnerZoneKeystroke, pagingSupportDisabled = _a.pagingSupportDisabled, shouldEnterInnerZone = _a.shouldEnterInnerZone;\n if (disabled) {\n return;\n }\n if (_this.props.onKeyDown) {\n _this.props.onKeyDown(ev);\n }\n // If the default has been prevented, do not process keyboard events.\n if (ev.isDefaultPrevented()) {\n return;\n }\n if (_this._getDocument().activeElement === _this._root.current && _this._isInnerZone) {\n // If this element has focus, it is being controlled by a parent.\n // Ignore the keystroke.\n return;\n }\n if (((shouldEnterInnerZone && shouldEnterInnerZone(ev)) || (isInnerZoneKeystroke && isInnerZoneKeystroke(ev))) &&\n _this._isImmediateDescendantOfZone(ev.target)) {\n // Try to focus\n var innerZone = _this._getFirstInnerZone();\n if (innerZone) {\n if (!innerZone.focus(true)) {\n return;\n }\n }\n else if (isElementFocusSubZone(ev.target)) {\n if (!_this.focusElement(getNextElement(ev.target, ev.target.firstChild, true))) {\n return;\n }\n }\n else {\n return;\n }\n }\n else if (ev.altKey) {\n return;\n }\n else {\n // eslint-disable-next-line @fluentui/deprecated-keyboard-event-props, deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.space:\n if (_this._shouldRaiseClicksOnSpace && _this._tryInvokeClickForFocusable(ev.target, ev)) {\n break;\n }\n return;\n case KeyCodes.left:\n if (direction !== FocusZoneDirection.vertical) {\n _this._preventDefaultWhenHandled(ev);\n if (_this._moveFocusLeft(theme)) {\n break;\n }\n }\n return;\n case KeyCodes.right:\n if (direction !== FocusZoneDirection.vertical) {\n _this._preventDefaultWhenHandled(ev);\n if (_this._moveFocusRight(theme)) {\n break;\n }\n }\n return;\n case KeyCodes.up:\n if (direction !== FocusZoneDirection.horizontal) {\n _this._preventDefaultWhenHandled(ev);\n if (_this._moveFocusUp()) {\n break;\n }\n }\n return;\n case KeyCodes.down:\n if (direction !== FocusZoneDirection.horizontal) {\n _this._preventDefaultWhenHandled(ev);\n if (_this._moveFocusDown()) {\n break;\n }\n }\n return;\n case KeyCodes.pageDown:\n if (!pagingSupportDisabled && _this._moveFocusPaging(true)) {\n break;\n }\n return;\n case KeyCodes.pageUp:\n if (!pagingSupportDisabled && _this._moveFocusPaging(false)) {\n break;\n }\n return;\n case KeyCodes.tab:\n if (\n // eslint-disable-next-line deprecation/deprecation\n _this.props.allowTabKey ||\n _this.props.handleTabKey === FocusZoneTabbableElements.all ||\n (_this.props.handleTabKey === FocusZoneTabbableElements.inputOnly &&\n _this._isElementInput(ev.target))) {\n var focusChanged = false;\n _this._processingTabKey = true;\n if (direction === FocusZoneDirection.vertical ||\n !_this._shouldWrapFocus(_this._activeElement, NO_HORIZONTAL_WRAP)) {\n focusChanged = ev.shiftKey ? _this._moveFocusUp() : _this._moveFocusDown();\n }\n else {\n var tabWithDirection = getRTL(theme) ? !ev.shiftKey : ev.shiftKey;\n focusChanged = tabWithDirection ? _this._moveFocusLeft(theme) : _this._moveFocusRight(theme);\n }\n _this._processingTabKey = false;\n if (focusChanged) {\n break;\n }\n else if (_this.props.shouldResetActiveElementWhenTabFromZone) {\n _this._activeElement = null;\n }\n }\n return;\n case KeyCodes.home:\n if (_this._isContentEditableElement(ev.target) ||\n (_this._isElementInput(ev.target) &&\n !_this._shouldInputLoseFocus(ev.target, false))) {\n return false;\n }\n var firstChild = _this._root.current && _this._root.current.firstChild;\n if (_this._root.current &&\n firstChild &&\n _this.focusElement(getNextElement(_this._root.current, firstChild, true))) {\n break;\n }\n return;\n case KeyCodes.end:\n if (_this._isContentEditableElement(ev.target) ||\n (_this._isElementInput(ev.target) &&\n !_this._shouldInputLoseFocus(ev.target, true))) {\n return false;\n }\n var lastChild = _this._root.current && _this._root.current.lastChild;\n if (_this._root.current &&\n _this.focusElement(getPreviousElement(_this._root.current, lastChild, true, true, true))) {\n break;\n }\n return;\n case KeyCodes.enter:\n if (_this._shouldRaiseClicksOnEnter && _this._tryInvokeClickForFocusable(ev.target, ev)) {\n break;\n }\n return;\n default:\n return;\n }\n }\n ev.preventDefault();\n ev.stopPropagation();\n };\n _this._getHorizontalDistanceFromCenter = function (isForward, activeRect, targetRect) {\n // eslint-disable-next-line deprecation/deprecation\n var leftAlignment = _this._focusAlignment.left || _this._focusAlignment.x || 0;\n // ClientRect values can be floats that differ by very small fractions of a decimal.\n // If the difference between top and bottom are within a pixel then we should treat\n // them as equivalent by using Math.floor. For instance 5.2222 and 5.222221 should be equivalent,\n // but without Math.Floor they will be handled incorrectly.\n var targetRectTop = Math.floor(targetRect.top);\n var activeRectBottom = Math.floor(activeRect.bottom);\n var targetRectBottom = Math.floor(targetRect.bottom);\n var activeRectTop = Math.floor(activeRect.top);\n var isValidCandidateOnpagingDown = isForward && targetRectTop > activeRectBottom;\n var isValidCandidateOnpagingUp = !isForward && targetRectBottom < activeRectTop;\n if (isValidCandidateOnpagingDown || isValidCandidateOnpagingUp) {\n if (leftAlignment >= targetRect.left && leftAlignment <= targetRect.left + targetRect.width) {\n return 0;\n }\n return Math.abs(targetRect.left + targetRect.width / 2 - leftAlignment);\n }\n if (!_this._shouldWrapFocus(_this._activeElement, NO_VERTICAL_WRAP)) {\n return LARGE_NEGATIVE_DISTANCE_FROM_CENTER;\n }\n return LARGE_DISTANCE_FROM_CENTER;\n };\n // Manage componentRef resolution.\n initializeComponentRef(_this);\n if (process.env.NODE_ENV !== 'production') {\n warnDeprecations('FocusZone', props, {\n rootProps: undefined,\n allowTabKey: 'handleTabKey',\n elementType: 'as',\n ariaDescribedBy: 'aria-describedby',\n ariaLabelledBy: 'aria-labelledby',\n });\n }\n _this._id = getId('FocusZone');\n _this._focusAlignment = {\n left: 0,\n top: 0,\n };\n _this._processingTabKey = false;\n var shouldRaiseClicksFallback = (_b = (_a = props.shouldRaiseClicks) !== null && _a !== void 0 ? _a : FocusZone.defaultProps.shouldRaiseClicks) !== null && _b !== void 0 ? _b : true;\n _this._shouldRaiseClicksOnEnter = (_c = props.shouldRaiseClicksOnEnter) !== null && _c !== void 0 ? _c : shouldRaiseClicksFallback;\n _this._shouldRaiseClicksOnSpace = (_d = props.shouldRaiseClicksOnSpace) !== null && _d !== void 0 ? _d : shouldRaiseClicksFallback;\n return _this;\n }\n /** Used for testing purposes only. */\n FocusZone.getOuterZones = function () {\n return _outerZones.size;\n };\n /**\n * Handle global tab presses so that we can patch tabindexes on the fly.\n * HEADS UP: This must not be an arrow function in order to be referentially equal among instances\n * for ref counting to work correctly!\n */\n FocusZone._onKeyDownCapture = function (ev) {\n // eslint-disable-next-line deprecation/deprecation, @fluentui/deprecated-keyboard-event-props\n if (ev.which === KeyCodes.tab) {\n _outerZones.forEach(function (zone) { return zone._updateTabIndexes(); });\n }\n };\n FocusZone.prototype.componentDidMount = function () {\n var root = this._root.current;\n _allInstances[this._id] = this;\n if (root) {\n this._windowElement = getWindow(root);\n var parentElement = getParent(root, ALLOW_VIRTUAL_ELEMENTS);\n while (parentElement && parentElement !== this._getDocument().body && parentElement.nodeType === 1) {\n if (isElementFocusZone(parentElement)) {\n this._isInnerZone = true;\n break;\n }\n parentElement = getParent(parentElement, ALLOW_VIRTUAL_ELEMENTS);\n }\n if (!this._isInnerZone) {\n _outerZones.add(this);\n if (this._windowElement && _outerZones.size === 1) {\n this._windowElement.addEventListener('keydown', FocusZone._onKeyDownCapture, true);\n }\n }\n this._root.current && this._root.current.addEventListener('blur', this._onBlur, true);\n // Assign initial tab indexes so that we can set initial focus as appropriate.\n this._updateTabIndexes();\n if (this.props.defaultTabbableElement && typeof this.props.defaultTabbableElement === 'string') {\n this._activeElement = this._getDocument().querySelector(this.props.defaultTabbableElement);\n // eslint-disable-next-line deprecation/deprecation\n }\n else if (this.props.defaultActiveElement) {\n // eslint-disable-next-line deprecation/deprecation\n this._activeElement = this._getDocument().querySelector(this.props.defaultActiveElement);\n }\n if (this.props.shouldFocusOnMount) {\n this.focus();\n }\n }\n };\n FocusZone.prototype.componentDidUpdate = function () {\n var root = this._root.current;\n var doc = this._getDocument();\n if (!this.props.preventFocusRestoration &&\n doc &&\n this._lastIndexPath &&\n (doc.activeElement === doc.body || doc.activeElement === null || doc.activeElement === root)) {\n // The element has been removed after the render, attempt to restore focus.\n var elementToFocus = getFocusableByIndexPath(root, this._lastIndexPath);\n if (elementToFocus) {\n this._setActiveElement(elementToFocus, true);\n elementToFocus.focus();\n this._setParkedFocus(false);\n }\n else {\n // We had a focus path to restore, but now that path is unresolvable. Park focus\n // on the container until we can try again.\n this._setParkedFocus(true);\n }\n }\n };\n FocusZone.prototype.componentWillUnmount = function () {\n delete _allInstances[this._id];\n if (!this._isInnerZone) {\n _outerZones.delete(this);\n // If this is the last outer zone, remove the keydown listener.\n if (this._windowElement && _outerZones.size === 0) {\n this._windowElement.removeEventListener('keydown', FocusZone._onKeyDownCapture, true);\n }\n }\n if (this._root.current) {\n this._root.current.removeEventListener('blur', this._onBlur, true);\n }\n this._activeElement = null;\n this._defaultFocusElement = null;\n };\n FocusZone.prototype.render = function () {\n var _this = this;\n // eslint-disable-next-line deprecation/deprecation\n var _a = this.props, tag = _a.as, elementType = _a.elementType, rootProps = _a.rootProps, ariaDescribedBy = _a.ariaDescribedBy, ariaLabelledBy = _a.ariaLabelledBy, className = _a.className;\n var divProps = getNativeProps(this.props, htmlElementProperties);\n var Tag = tag || elementType || 'div';\n // Note, right before rendering/reconciling proceeds, we need to record if focus\n // was in the zone before the update. This helper will track this and, if focus\n // was actually in the zone, what the index path to the element is at this time.\n // Then, later in componentDidUpdate, we can evaluate if we need to restore it in\n // the case the element was removed.\n this._evaluateFocusBeforeRender();\n // Only support RTL defined in global theme, not contextual theme/RTL.\n var theme = getTheme();\n return (React.createElement(Tag, __assign({ \"aria-labelledby\": ariaLabelledBy, \"aria-describedby\": ariaDescribedBy }, divProps, rootProps, { \n // Once the getClassName correctly memoizes inputs this should\n // be replaced so that className is passed to getRootClass and is included there so\n // the class names will always be in the same order.\n className: css(getRootClass(), className), \n // eslint-disable-next-line deprecation/deprecation\n ref: this._mergedRef(this.props.elementRef, this._root), \"data-focuszone-id\": this._id, \n // eslint-disable-next-line react/jsx-no-bind\n onKeyDown: function (ev) { return _this._onKeyDown(ev, theme); }, onFocus: this._onFocus, onMouseDownCapture: this._onMouseDown }), this.props.children));\n };\n /**\n * Sets focus to the first tabbable item in the zone.\n * @param forceIntoFirstElement - If true, focus will be forced into the first element, even\n * if focus is already in the focus zone.\n * @returns True if focus could be set to an active element, false if no operation was taken.\n */\n FocusZone.prototype.focus = function (forceIntoFirstElement) {\n if (forceIntoFirstElement === void 0) { forceIntoFirstElement = false; }\n if (this._root.current) {\n if (!forceIntoFirstElement &&\n this._root.current.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'true' &&\n this._isInnerZone) {\n var ownerZoneElement = this._getOwnerZone(this._root.current);\n if (ownerZoneElement !== this._root.current) {\n var ownerZone = _allInstances[ownerZoneElement.getAttribute(FOCUSZONE_ID_ATTRIBUTE)];\n return !!ownerZone && ownerZone.focusElement(this._root.current);\n }\n return false;\n }\n else if (!forceIntoFirstElement &&\n this._activeElement &&\n elementContains(this._root.current, this._activeElement) &&\n isElementTabbable(this._activeElement)) {\n this._activeElement.focus();\n return true;\n }\n else {\n var firstChild = this._root.current.firstChild;\n return this.focusElement(getNextElement(this._root.current, firstChild, true));\n }\n }\n return false;\n };\n /**\n * Sets focus to the last tabbable item in the zone.\n * @returns True if focus could be set to an active element, false if no operation was taken.\n */\n FocusZone.prototype.focusLast = function () {\n if (this._root.current) {\n var lastChild = this._root.current && this._root.current.lastChild;\n return this.focusElement(getPreviousElement(this._root.current, lastChild, true, true, true));\n }\n return false;\n };\n /**\n * Sets focus to a specific child element within the zone. This can be used in conjunction with\n * shouldReceiveFocus to create delayed focus scenarios (like animate the scroll position to the correct\n * location and then focus.)\n * @param element - The child element within the zone to focus.\n * @param forceAlignment - If true, focus alignment will be set according to the element provided.\n * @returns True if focus could be set to an active element, false if no operation was taken.\n */\n FocusZone.prototype.focusElement = function (element, forceAlignment) {\n // eslint-disable-next-line deprecation/deprecation\n var _a = this.props, onBeforeFocus = _a.onBeforeFocus, shouldReceiveFocus = _a.shouldReceiveFocus;\n if ((shouldReceiveFocus && !shouldReceiveFocus(element)) || (onBeforeFocus && !onBeforeFocus(element))) {\n return false;\n }\n if (element) {\n // when we set focus to a specific child, we should recalculate the alignment depending on its position.\n this._setActiveElement(element, forceAlignment);\n if (this._activeElement) {\n this._activeElement.focus();\n }\n return true;\n }\n return false;\n };\n /**\n * Forces horizontal alignment in the context of vertical arrowing to use specific point as the reference,\n * rather than a center based on the last horizontal motion.\n * @param point - the new reference point.\n */\n FocusZone.prototype.setFocusAlignment = function (point) {\n this._focusAlignment = point;\n };\n FocusZone.prototype._evaluateFocusBeforeRender = function () {\n var root = this._root.current;\n var doc = this._getDocument();\n if (doc) {\n var focusedElement = doc.activeElement;\n // Only update the index path if we are not parked on the root.\n if (focusedElement !== root) {\n var shouldRestoreFocus = elementContains(root, focusedElement, false);\n this._lastIndexPath = shouldRestoreFocus ? getElementIndexPath(root, focusedElement) : undefined;\n }\n }\n };\n /**\n * When focus is in the zone at render time but then all focusable elements are removed,\n * we \"park\" focus temporarily on the root. Once we update with focusable children, we restore\n * focus to the closest path from previous. If the user tabs away from the parked container,\n * we restore focusability to the pre-parked state.\n */\n FocusZone.prototype._setParkedFocus = function (isParked) {\n var root = this._root.current;\n if (root && this._isParked !== isParked) {\n this._isParked = isParked;\n if (isParked) {\n if (!this.props.allowFocusRoot) {\n this._parkedTabIndex = root.getAttribute('tabindex');\n root.setAttribute('tabindex', '-1');\n }\n root.focus();\n }\n else if (!this.props.allowFocusRoot) {\n if (this._parkedTabIndex) {\n root.setAttribute('tabindex', this._parkedTabIndex);\n this._parkedTabIndex = undefined;\n }\n else {\n root.removeAttribute('tabindex');\n }\n }\n }\n };\n FocusZone.prototype._setActiveElement = function (element, forceAlignment) {\n var previousActiveElement = this._activeElement;\n this._activeElement = element;\n if (previousActiveElement) {\n if (isElementFocusZone(previousActiveElement)) {\n this._updateTabIndexes(previousActiveElement);\n }\n previousActiveElement.tabIndex = -1;\n }\n if (this._activeElement) {\n if (!this._focusAlignment || forceAlignment) {\n this._setFocusAlignment(element, true, true);\n }\n this._activeElement.tabIndex = 0;\n }\n };\n FocusZone.prototype._preventDefaultWhenHandled = function (ev) {\n this.props.preventDefaultWhenHandled && ev.preventDefault();\n };\n /**\n * Walk up the dom try to find a focusable element.\n */\n FocusZone.prototype._tryInvokeClickForFocusable = function (targetElement, ev) {\n var target = targetElement;\n if (target === this._root.current) {\n return false;\n }\n do {\n if (target.tagName === 'BUTTON' ||\n target.tagName === 'A' ||\n target.tagName === 'INPUT' ||\n target.tagName === 'TEXTAREA') {\n return false;\n }\n if (this._isImmediateDescendantOfZone(target) &&\n target.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'true' &&\n target.getAttribute(IS_ENTER_DISABLED_ATTRIBUTE) !== 'true') {\n raiseClickFromKeyboardEvent(target, ev);\n return true;\n }\n target = getParent(target, ALLOW_VIRTUAL_ELEMENTS);\n } while (target !== this._root.current);\n return false;\n };\n /**\n * Traverse to find first child zone.\n */\n FocusZone.prototype._getFirstInnerZone = function (rootElement) {\n rootElement = rootElement || this._activeElement || this._root.current;\n if (!rootElement) {\n return null;\n }\n if (isElementFocusZone(rootElement)) {\n return _allInstances[rootElement.getAttribute(FOCUSZONE_ID_ATTRIBUTE)];\n }\n var child = rootElement.firstElementChild;\n while (child) {\n if (isElementFocusZone(child)) {\n return _allInstances[child.getAttribute(FOCUSZONE_ID_ATTRIBUTE)];\n }\n var match = this._getFirstInnerZone(child);\n if (match) {\n return match;\n }\n child = child.nextElementSibling;\n }\n return null;\n };\n FocusZone.prototype._moveFocus = function (isForward, getDistanceFromCenter, ev, useDefaultWrap) {\n if (useDefaultWrap === void 0) { useDefaultWrap = true; }\n var element = this._activeElement;\n var candidateDistance = -1;\n var candidateElement = undefined;\n var changedFocus = false;\n var isBidirectional = this.props.direction === FocusZoneDirection.bidirectional;\n if (!element || !this._root.current) {\n return false;\n }\n if (this._isElementInput(element)) {\n if (!this._shouldInputLoseFocus(element, isForward)) {\n return false;\n }\n }\n var activeRect = isBidirectional ? element.getBoundingClientRect() : null;\n do {\n element = (isForward\n ? getNextElement(this._root.current, element)\n : getPreviousElement(this._root.current, element));\n if (isBidirectional) {\n if (element) {\n var targetRect = element.getBoundingClientRect();\n var elementDistance = getDistanceFromCenter(activeRect, targetRect);\n if (elementDistance === -1 && candidateDistance === -1) {\n candidateElement = element;\n break;\n }\n if (elementDistance > -1 && (candidateDistance === -1 || elementDistance < candidateDistance)) {\n candidateDistance = elementDistance;\n candidateElement = element;\n }\n if (candidateDistance >= 0 && elementDistance < 0) {\n break;\n }\n }\n }\n else {\n candidateElement = element;\n break;\n }\n } while (element);\n // Focus the closest candidate\n if (candidateElement && candidateElement !== this._activeElement) {\n changedFocus = true;\n this.focusElement(candidateElement);\n }\n else if (this.props.isCircularNavigation && useDefaultWrap) {\n if (isForward) {\n return this.focusElement(getNextElement(this._root.current, this._root.current.firstElementChild, true));\n }\n else {\n return this.focusElement(getPreviousElement(this._root.current, this._root.current.lastElementChild, true, true, true));\n }\n }\n return changedFocus;\n };\n FocusZone.prototype._moveFocusDown = function () {\n var _this = this;\n var targetTop = -1;\n // eslint-disable-next-line deprecation/deprecation\n var leftAlignment = this._focusAlignment.left || this._focusAlignment.x || 0;\n if (this._moveFocus(true, function (activeRect, targetRect) {\n var distance = -1;\n // ClientRect values can be floats that differ by very small fractions of a decimal.\n // If the difference between top and bottom are within a pixel then we should treat\n // them as equivalent by using Math.floor. For instance 5.2222 and 5.222221 should be equivalent,\n // but without Math.Floor they will be handled incorrectly.\n var targetRectTop = Math.floor(targetRect.top);\n var activeRectBottom = Math.floor(activeRect.bottom);\n if (targetRectTop < activeRectBottom) {\n if (!_this._shouldWrapFocus(_this._activeElement, NO_VERTICAL_WRAP)) {\n return LARGE_NEGATIVE_DISTANCE_FROM_CENTER;\n }\n return LARGE_DISTANCE_FROM_CENTER;\n }\n if ((targetTop === -1 && targetRectTop >= activeRectBottom) || targetRectTop === targetTop) {\n targetTop = targetRectTop;\n if (leftAlignment >= targetRect.left && leftAlignment <= targetRect.left + targetRect.width) {\n distance = 0;\n }\n else {\n distance = Math.abs(targetRect.left + targetRect.width / 2 - leftAlignment);\n }\n }\n return distance;\n })) {\n this._setFocusAlignment(this._activeElement, false, true);\n return true;\n }\n return false;\n };\n FocusZone.prototype._moveFocusUp = function () {\n var _this = this;\n var targetTop = -1;\n // eslint-disable-next-line deprecation/deprecation\n var leftAlignment = this._focusAlignment.left || this._focusAlignment.x || 0;\n if (this._moveFocus(false, function (activeRect, targetRect) {\n var distance = -1;\n // ClientRect values can be floats that differ by very small fractions of a decimal.\n // If the difference between top and bottom are within a pixel then we should treat\n // them as equivalent by using Math.floor. For instance 5.2222 and 5.222221 should be equivalent,\n // but without Math.Floor they will be handled incorrectly.\n var targetRectBottom = Math.floor(targetRect.bottom);\n var targetRectTop = Math.floor(targetRect.top);\n var activeRectTop = Math.floor(activeRect.top);\n if (targetRectBottom > activeRectTop) {\n if (!_this._shouldWrapFocus(_this._activeElement, NO_VERTICAL_WRAP)) {\n return LARGE_NEGATIVE_DISTANCE_FROM_CENTER;\n }\n return LARGE_DISTANCE_FROM_CENTER;\n }\n if ((targetTop === -1 && targetRectBottom <= activeRectTop) || targetRectTop === targetTop) {\n targetTop = targetRectTop;\n if (leftAlignment >= targetRect.left && leftAlignment <= targetRect.left + targetRect.width) {\n distance = 0;\n }\n else {\n distance = Math.abs(targetRect.left + targetRect.width / 2 - leftAlignment);\n }\n }\n return distance;\n })) {\n this._setFocusAlignment(this._activeElement, false, true);\n return true;\n }\n return false;\n };\n FocusZone.prototype._moveFocusLeft = function (theme) {\n var _this = this;\n var shouldWrap = this._shouldWrapFocus(this._activeElement, NO_HORIZONTAL_WRAP);\n if (this._moveFocus(getRTL(theme), function (activeRect, targetRect) {\n var distance = -1;\n var topBottomComparison;\n if (getRTL(theme)) {\n // When in RTL, this comparison should be the same as the one in _moveFocusRight for LTR.\n // Going left at a leftmost rectangle will go down a line instead of up a line like in LTR.\n // This is important, because we want to be comparing the top of the target rect\n // with the bottom of the active rect.\n topBottomComparison = parseFloat(targetRect.top.toFixed(3)) < parseFloat(activeRect.bottom.toFixed(3));\n }\n else {\n topBottomComparison = parseFloat(targetRect.bottom.toFixed(3)) > parseFloat(activeRect.top.toFixed(3));\n }\n if (topBottomComparison &&\n targetRect.right <= activeRect.right &&\n _this.props.direction !== FocusZoneDirection.vertical) {\n distance = activeRect.right - targetRect.right;\n }\n else if (!shouldWrap) {\n distance = LARGE_NEGATIVE_DISTANCE_FROM_CENTER;\n }\n return distance;\n }, undefined /*ev*/, shouldWrap)) {\n this._setFocusAlignment(this._activeElement, true, false);\n return true;\n }\n return false;\n };\n FocusZone.prototype._moveFocusRight = function (theme) {\n var _this = this;\n var shouldWrap = this._shouldWrapFocus(this._activeElement, NO_HORIZONTAL_WRAP);\n if (this._moveFocus(!getRTL(theme), function (activeRect, targetRect) {\n var distance = -1;\n var topBottomComparison;\n if (getRTL(theme)) {\n // When in RTL, this comparison should be the same as the one in _moveFocusLeft for LTR.\n // Going right at a rightmost rectangle will go up a line instead of down a line like in LTR.\n // This is important, because we want to be comparing the bottom of the target rect\n // with the top of the active rect.\n topBottomComparison = parseFloat(targetRect.bottom.toFixed(3)) > parseFloat(activeRect.top.toFixed(3));\n }\n else {\n topBottomComparison = parseFloat(targetRect.top.toFixed(3)) < parseFloat(activeRect.bottom.toFixed(3));\n }\n if (topBottomComparison &&\n targetRect.left >= activeRect.left &&\n _this.props.direction !== FocusZoneDirection.vertical) {\n distance = targetRect.left - activeRect.left;\n }\n else if (!shouldWrap) {\n distance = LARGE_NEGATIVE_DISTANCE_FROM_CENTER;\n }\n return distance;\n }, undefined /*ev*/, shouldWrap)) {\n this._setFocusAlignment(this._activeElement, true, false);\n return true;\n }\n return false;\n };\n FocusZone.prototype._moveFocusPaging = function (isForward, useDefaultWrap) {\n if (useDefaultWrap === void 0) { useDefaultWrap = true; }\n var element = this._activeElement;\n if (!element || !this._root.current) {\n return false;\n }\n if (this._isElementInput(element)) {\n if (!this._shouldInputLoseFocus(element, isForward)) {\n return false;\n }\n }\n var scrollableParent = findScrollableParent(element);\n if (!scrollableParent) {\n return false;\n }\n var candidateDistance = -1;\n var candidateElement = undefined;\n var targetTop = -1;\n var targetBottom = -1;\n var pagesize = scrollableParent.clientHeight;\n var activeRect = element.getBoundingClientRect();\n do {\n element = isForward\n ? getNextElement(this._root.current, element)\n : getPreviousElement(this._root.current, element);\n if (element) {\n var targetRect = element.getBoundingClientRect();\n var targetRectTop = Math.floor(targetRect.top);\n var activeRectBottom = Math.floor(activeRect.bottom);\n var targetRectBottom = Math.floor(targetRect.bottom);\n var activeRectTop = Math.floor(activeRect.top);\n var elementDistance = this._getHorizontalDistanceFromCenter(isForward, activeRect, targetRect);\n var isElementPassedPageSizeOnPagingDown = isForward && targetRectTop > activeRectBottom + pagesize;\n var isElementPassedPageSizeOnPagingUp = !isForward && targetRectBottom < activeRectTop - pagesize;\n if (isElementPassedPageSizeOnPagingDown || isElementPassedPageSizeOnPagingUp) {\n break;\n }\n if (elementDistance > -1) {\n // for paging down\n if (isForward && targetRectTop > targetTop) {\n targetTop = targetRectTop;\n candidateDistance = elementDistance;\n candidateElement = element;\n }\n else if (!isForward && targetRectBottom < targetBottom) {\n // for paging up\n targetBottom = targetRectBottom;\n candidateDistance = elementDistance;\n candidateElement = element;\n }\n else if (candidateDistance === -1 || elementDistance <= candidateDistance) {\n candidateDistance = elementDistance;\n candidateElement = element;\n }\n }\n }\n } while (element);\n var changedFocus = false;\n // Focus the closest candidate\n if (candidateElement && candidateElement !== this._activeElement) {\n changedFocus = true;\n this.focusElement(candidateElement);\n this._setFocusAlignment(candidateElement, false, true);\n }\n else if (this.props.isCircularNavigation && useDefaultWrap) {\n if (isForward) {\n return this.focusElement(getNextElement(this._root.current, this._root.current.firstElementChild, true));\n }\n return this.focusElement(getPreviousElement(this._root.current, this._root.current.lastElementChild, true, true, true));\n }\n return changedFocus;\n };\n FocusZone.prototype._setFocusAlignment = function (element, isHorizontal, isVertical) {\n if (this.props.direction === FocusZoneDirection.bidirectional &&\n (!this._focusAlignment || isHorizontal || isVertical)) {\n var rect = element.getBoundingClientRect();\n var left = rect.left + rect.width / 2;\n var top_1 = rect.top + rect.height / 2;\n if (!this._focusAlignment) {\n this._focusAlignment = { left: left, top: top_1 };\n }\n if (isHorizontal) {\n this._focusAlignment.left = left;\n }\n if (isVertical) {\n this._focusAlignment.top = top_1;\n }\n }\n };\n FocusZone.prototype._isImmediateDescendantOfZone = function (element) {\n return this._getOwnerZone(element) === this._root.current;\n };\n FocusZone.prototype._getOwnerZone = function (element) {\n var parentElement = getParent(element, ALLOW_VIRTUAL_ELEMENTS);\n while (parentElement && parentElement !== this._root.current && parentElement !== this._getDocument().body) {\n if (isElementFocusZone(parentElement)) {\n return parentElement;\n }\n parentElement = getParent(parentElement, ALLOW_VIRTUAL_ELEMENTS);\n }\n return parentElement;\n };\n FocusZone.prototype._updateTabIndexes = function (element) {\n if (!this._activeElement &&\n this.props.defaultTabbableElement &&\n typeof this.props.defaultTabbableElement === 'function') {\n this._activeElement = this.props.defaultTabbableElement(this._root.current);\n }\n if (!element && this._root.current) {\n this._defaultFocusElement = null;\n element = this._root.current;\n if (this._activeElement && !elementContains(element, this._activeElement)) {\n this._activeElement = null;\n }\n }\n // If active element changes state to disabled, set it to null.\n // Otherwise, we lose keyboard accessibility to other elements in focus zone.\n if (this._activeElement && !isElementTabbable(this._activeElement)) {\n this._activeElement = null;\n }\n var childNodes = element && element.children;\n for (var childIndex = 0; childNodes && childIndex < childNodes.length; childIndex++) {\n var child = childNodes[childIndex];\n if (!isElementFocusZone(child)) {\n // If the item is explicitly set to not be focusable then TABINDEX needs to be set to -1.\n if (child.getAttribute && child.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'false') {\n child.setAttribute(TABINDEX, '-1');\n }\n if (isElementTabbable(child)) {\n if (this.props.disabled) {\n child.setAttribute(TABINDEX, '-1');\n }\n else if (!this._isInnerZone &&\n ((!this._activeElement && !this._defaultFocusElement) || this._activeElement === child)) {\n this._defaultFocusElement = child;\n if (child.getAttribute(TABINDEX) !== '0') {\n child.setAttribute(TABINDEX, '0');\n }\n }\n else if (child.getAttribute(TABINDEX) !== '-1') {\n child.setAttribute(TABINDEX, '-1');\n }\n }\n else if (child.tagName === 'svg' && child.getAttribute('focusable') !== 'false') {\n // Disgusting IE hack. Sad face.\n child.setAttribute('focusable', 'false');\n }\n }\n else if (child.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'true') {\n if (!this._isInnerZone &&\n ((!this._activeElement && !this._defaultFocusElement) || this._activeElement === child)) {\n this._defaultFocusElement = child;\n if (child.getAttribute(TABINDEX) !== '0') {\n child.setAttribute(TABINDEX, '0');\n }\n }\n else if (child.getAttribute(TABINDEX) !== '-1') {\n child.setAttribute(TABINDEX, '-1');\n }\n }\n this._updateTabIndexes(child);\n }\n };\n FocusZone.prototype._isContentEditableElement = function (element) {\n return element && element.getAttribute('contenteditable') === 'true';\n };\n FocusZone.prototype._isElementInput = function (element) {\n if (element &&\n element.tagName &&\n (element.tagName.toLowerCase() === 'input' || element.tagName.toLowerCase() === 'textarea')) {\n return true;\n }\n return false;\n };\n FocusZone.prototype._shouldInputLoseFocus = function (element, isForward) {\n // If a tab was used, we want to focus on the next element.\n if (!this._processingTabKey &&\n element &&\n element.type &&\n ALLOWED_INPUT_TYPES.indexOf(element.type.toLowerCase()) > -1) {\n var selectionStart = element.selectionStart;\n var selectionEnd = element.selectionEnd;\n var isRangeSelected = selectionStart !== selectionEnd;\n var inputValue = element.value;\n var isReadonly = element.readOnly;\n // We shouldn't lose focus in the following cases:\n // 1. There is range selected.\n // 2. When selection start is larger than 0 and it is backward and not readOnly.\n // 3. when selection start is not the end of length, it is forward and not readOnly.\n // 4. We press any of the arrow keys when our handleTabKey isn't none or undefined (only losing focus if we hit\n // tab) and if shouldInputLoseFocusOnArrowKey is defined, if scenario prefers to not loose the focus which is\n // determined by calling the callback shouldInputLoseFocusOnArrowKey\n if (isRangeSelected ||\n (selectionStart > 0 && !isForward && !isReadonly) ||\n (selectionStart !== inputValue.length && isForward && !isReadonly) ||\n (!!this.props.handleTabKey &&\n !(this.props.shouldInputLoseFocusOnArrowKey && this.props.shouldInputLoseFocusOnArrowKey(element)))) {\n return false;\n }\n }\n return true;\n };\n FocusZone.prototype._shouldWrapFocus = function (element, noWrapDataAttribute) {\n return this.props.checkForNoWrap ? shouldWrapFocus(element, noWrapDataAttribute) : true;\n };\n /**\n * Returns true if the element is a descendant of the FocusZone through a React portal.\n */\n FocusZone.prototype._portalContainsElement = function (element) {\n return element && !!this._root.current && portalContainsElement(element, this._root.current);\n };\n FocusZone.prototype._getDocument = function () {\n return getDocument(this._root.current);\n };\n FocusZone.defaultProps = {\n isCircularNavigation: false,\n direction: FocusZoneDirection.bidirectional,\n shouldRaiseClicks: true,\n };\n return FocusZone;\n}(React.Component));\nexport { FocusZone };\n//# sourceMappingURL=FocusZone.js.map","import { __assign, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { useMergedRefs } from '@fluentui/react-hooks';\nimport { classNamesFunction, useFocusRects } from '@fluentui/utilities';\nvar getClassNames = classNamesFunction();\n/**\n * The useLink hook processes the Link component props and returns\n * state, slots and slotProps for consumption by the component.\n */\nexport var useLink = function (props, forwardedRef) {\n var as = props.as, className = props.className, disabled = props.disabled, href = props.href, onClick = props.onClick, styles = props.styles, theme = props.theme, underline = props.underline;\n var rootRef = React.useRef(null);\n var mergedRootRefs = useMergedRefs(rootRef, forwardedRef);\n useComponentRef(props, rootRef);\n useFocusRects(rootRef);\n var classNames = getClassNames(styles, {\n className: className,\n isButton: !href,\n isDisabled: disabled,\n isUnderlined: underline,\n theme: theme,\n });\n var _onClick = function (ev) {\n if (disabled) {\n ev.preventDefault();\n }\n else if (onClick) {\n onClick(ev);\n }\n };\n var rootType = as ? as : href ? 'a' : 'button';\n var state = {};\n var slots = { root: rootType };\n var slotProps = {\n root: __assign(__assign({}, adjustPropsForRootType(rootType, props)), { 'aria-disabled': disabled, className: classNames.root, onClick: _onClick, ref: mergedRootRefs }),\n };\n return { state: state, slots: slots, slotProps: slotProps };\n};\nvar useComponentRef = function (props, link) {\n React.useImperativeHandle(props.componentRef, function () { return ({\n focus: function () {\n if (link.current) {\n link.current.focus();\n }\n },\n }); }, [link]);\n};\nvar adjustPropsForRootType = function (RootType, props) {\n // Deconstruct the props so we remove props like `as`, `theme` and `styles`\n // as those will always be removed. We also take some props that are optional\n // based on the RootType.\n var as = props.as, disabled = props.disabled, target = props.target, href = props.href, theme = props.theme, getStyles = props.getStyles, styles = props.styles, componentRef = props.componentRef, underline = props.underline, restProps = __rest(props, [\"as\", \"disabled\", \"target\", \"href\", \"theme\", \"getStyles\", \"styles\", \"componentRef\", \"underline\"]);\n // RootType will be a string if we're dealing with an html component\n if (typeof RootType === 'string') {\n // Remove the disabled prop for anchor elements\n if (RootType === 'a') {\n return __assign({ target: target, href: disabled ? undefined : href }, restProps);\n }\n // Add the type='button' prop for button elements\n if (RootType === 'button') {\n return __assign({ type: 'button', disabled: disabled }, restProps);\n }\n // Remove the target and href props for all other non anchor elements\n return __assign(__assign({}, restProps), { disabled: disabled });\n }\n // Retain all props except 'as' for ReactComponents\n return __assign({ target: target, href: href, disabled: disabled }, restProps);\n};\n//# sourceMappingURL=useLink.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { useLink } from './useLink';\nexport var LinkBase = React.forwardRef(function (props, ref) {\n var _a = useLink(props, ref), slots = _a.slots, slotProps = _a.slotProps;\n return React.createElement(slots.root, __assign({}, slotProps.root));\n});\nLinkBase.displayName = 'LinkBase';\n//# sourceMappingURL=Link.base.js.map","import { getGlobalClassNames, HighContrastSelector } from '@fluentui/style-utilities';\nexport var GlobalClassNames = {\n root: 'ms-Link',\n};\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e, _f;\n var className = props.className, isButton = props.isButton, isDisabled = props.isDisabled, isUnderlined = props.isUnderlined, theme = props.theme;\n var semanticColors = theme.semanticColors;\n // Tokens\n var linkColor = semanticColors.link;\n var linkInteractedColor = semanticColors.linkHovered;\n var linkDisabledColor = semanticColors.disabledText;\n var focusBorderColor = semanticColors.focusBorder;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n {\n color: linkColor,\n outline: 'none',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n textDecoration: isUnderlined ? 'underline' : 'none',\n selectors: (_a = {\n '.ms-Fabric--isFocusVisible &:focus': {\n // Can't use getFocusStyle because it doesn't support wrapping links\n // https://github.com/microsoft/fluentui/issues/4883#issuecomment-406743543\n // Using box-shadow and outline allows the focus rect to wrap links that span multiple lines\n // and helps the focus rect avoid getting clipped.\n boxShadow: \"0 0 0 1px \" + focusBorderColor + \" inset\",\n outline: \"1px auto \" + focusBorderColor,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n outline: '1px solid WindowText',\n },\n _b),\n }\n },\n _a[HighContrastSelector] = {\n // For IE high contrast mode\n borderBottom: 'none',\n },\n _a),\n },\n isButton && {\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n cursor: 'pointer',\n display: 'inline',\n margin: 0,\n overflow: 'inherit',\n padding: 0,\n textAlign: 'left',\n textOverflow: 'inherit',\n userSelect: 'text',\n borderBottom: '1px solid transparent',\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n color: 'LinkText',\n forcedColorAdjust: 'none',\n },\n _c),\n },\n !isButton && {\n selectors: (_d = {},\n _d[HighContrastSelector] = {\n // This is mainly for MessageBar, which sets MsHighContrastAdjust: none by default\n MsHighContrastAdjust: 'auto',\n forcedColorAdjust: 'auto',\n },\n _d),\n },\n isDisabled && [\n 'is-disabled',\n {\n color: linkDisabledColor,\n cursor: 'default',\n },\n {\n selectors: {\n '&:link, &:visited': {\n pointerEvents: 'none',\n },\n },\n },\n ],\n !isDisabled && {\n selectors: {\n '&:active, &:hover, &:active:hover': {\n color: linkInteractedColor,\n textDecoration: 'underline',\n selectors: (_e = {},\n _e[HighContrastSelector] = {\n color: 'LinkText',\n },\n _e),\n },\n '&:focus': {\n color: linkColor,\n selectors: (_f = {},\n _f[HighContrastSelector] = {\n color: 'LinkText',\n },\n _f),\n },\n },\n },\n classNames.root,\n className,\n ],\n };\n};\n//# sourceMappingURL=Link.styles.js.map","import { styled } from '@fluentui/utilities';\nimport { LinkBase } from './Link.base';\nimport { getStyles } from './Link.styles';\nexport var Link = styled(LinkBase, getStyles, undefined, {\n scope: 'Link',\n});\n//# sourceMappingURL=Link.js.map","export { DirectionalHint } from '../../common/DirectionalHint';\n/**\n * {@docCategory ContextualMenu}\n */\nexport var ContextualMenuItemType;\n(function (ContextualMenuItemType) {\n ContextualMenuItemType[ContextualMenuItemType[\"Normal\"] = 0] = \"Normal\";\n ContextualMenuItemType[ContextualMenuItemType[\"Divider\"] = 1] = \"Divider\";\n ContextualMenuItemType[ContextualMenuItemType[\"Header\"] = 2] = \"Header\";\n ContextualMenuItemType[ContextualMenuItemType[\"Section\"] = 3] = \"Section\";\n})(ContextualMenuItemType || (ContextualMenuItemType = {}));\n//# sourceMappingURL=ContextualMenu.types.js.map","/**\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) {\n if (item.canCheck) {\n return !!(item.isChecked || item.checked);\n }\n if (typeof item.isChecked === 'boolean') {\n return item.isChecked;\n }\n if (typeof item.checked === 'boolean') {\n return item.checked;\n }\n // Item is not checkable.\n return null;\n}\nexport function hasSubmenu(item) {\n // eslint-disable-next-line deprecation/deprecation\n return !!(item.subMenuProps || item.items);\n}\nexport function isItemDisabled(item) {\n return !!(item.isDisabled || item.disabled);\n}\nexport function getMenuItemAriaRole(item) {\n var isChecked = getIsChecked(item);\n var canCheck = isChecked !== null;\n return canCheck ? 'menuitemcheckbox' : 'menuitem';\n}\n//# sourceMappingURL=contextualMenuUtility.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { hasSubmenu, getIsChecked } from '../../utilities/contextualMenu/index';\nimport { getRTL, initializeComponentRef } from '../../Utilities';\nimport { Icon } from '../../Icon';\nvar defaultIconRenderer = function (props) {\n var item = props.item, classNames = props.classNames;\n var iconProps = item.iconProps;\n return React.createElement(Icon, __assign({}, iconProps, { className: classNames.icon }));\n};\nvar renderItemIcon = function (props) {\n var item = props.item, hasIcons = props.hasIcons;\n if (!hasIcons) {\n return null;\n }\n if (item.onRenderIcon) {\n return item.onRenderIcon(props, defaultIconRenderer);\n }\n return defaultIconRenderer(props);\n};\nvar renderCheckMarkIcon = function (_a) {\n var onCheckmarkClick = _a.onCheckmarkClick, item = _a.item, classNames = _a.classNames;\n var isItemChecked = getIsChecked(item);\n if (onCheckmarkClick) {\n // Ensures that the item is passed as the first argument to the checkmark click callback.\n var onClick = function (e) { return onCheckmarkClick(item, e); };\n return (React.createElement(Icon, { iconName: item.canCheck !== false && isItemChecked ? 'CheckMark' : '', className: classNames.checkmarkIcon, \n // eslint-disable-next-line react/jsx-no-bind\n onClick: onClick }));\n }\n return null;\n};\nvar renderItemName = function (_a) {\n var item = _a.item, classNames = _a.classNames;\n /* eslint-disable deprecation/deprecation */\n if (item.text || item.name) {\n return React.createElement(\"span\", { className: classNames.label }, item.text || item.name);\n }\n /* eslint-enable deprecation/deprecation */\n return null;\n};\nvar renderSecondaryText = function (_a) {\n var item = _a.item, classNames = _a.classNames;\n if (item.secondaryText) {\n return React.createElement(\"span\", { className: classNames.secondaryText }, item.secondaryText);\n }\n return null;\n};\nvar renderSubMenuIcon = function (_a) {\n var item = _a.item, classNames = _a.classNames, theme = _a.theme;\n if (hasSubmenu(item)) {\n return (React.createElement(Icon, __assign({ iconName: getRTL(theme) ? 'ChevronLeft' : 'ChevronRight' }, item.submenuIconProps, { className: classNames.subMenuIcon })));\n }\n return null;\n};\nvar ContextualMenuItemBase = /** @class */ (function (_super) {\n __extends(ContextualMenuItemBase, _super);\n function ContextualMenuItemBase(props) {\n var _this = _super.call(this, props) || this;\n _this.openSubMenu = function () {\n var _a = _this.props, item = _a.item, openSubMenu = _a.openSubMenu, getSubmenuTarget = _a.getSubmenuTarget;\n if (getSubmenuTarget) {\n var submenuTarget = getSubmenuTarget();\n if (hasSubmenu(item) && openSubMenu && submenuTarget) {\n openSubMenu(item, submenuTarget);\n }\n }\n };\n _this.dismissSubMenu = function () {\n var _a = _this.props, item = _a.item, dismissSubMenu = _a.dismissSubMenu;\n if (hasSubmenu(item) && dismissSubMenu) {\n dismissSubMenu();\n }\n };\n _this.dismissMenu = function (dismissAll) {\n var dismissMenu = _this.props.dismissMenu;\n if (dismissMenu) {\n dismissMenu(undefined /* ev */, dismissAll);\n }\n };\n initializeComponentRef(_this);\n return _this;\n }\n ContextualMenuItemBase.prototype.render = function () {\n var _a = this.props, item = _a.item, classNames = _a.classNames;\n var renderContent = item.onRenderContent || this._renderLayout;\n return (React.createElement(\"div\", { className: item.split ? classNames.linkContentMenu : classNames.linkContent }, renderContent(this.props, {\n renderCheckMarkIcon: renderCheckMarkIcon,\n renderItemIcon: renderItemIcon,\n renderItemName: renderItemName,\n renderSecondaryText: renderSecondaryText,\n renderSubMenuIcon: renderSubMenuIcon,\n })));\n };\n ContextualMenuItemBase.prototype._renderLayout = function (props, defaultRenders) {\n return (React.createElement(React.Fragment, null,\n defaultRenders.renderCheckMarkIcon(props),\n defaultRenders.renderItemIcon(props),\n defaultRenders.renderItemName(props),\n defaultRenders.renderSecondaryText(props),\n defaultRenders.renderSubMenuIcon(props)));\n };\n return ContextualMenuItemBase;\n}(React.Component));\nexport { ContextualMenuItemBase };\n//# sourceMappingURL=ContextualMenuItem.base.js.map","import { memoizeFunction } from '../../Utilities';\nimport { mergeStyleSets } from '../../Styling';\n/**\n * @deprecated use getStyles exported from VerticalDivider.styles.ts\n */\nexport var getDividerClassNames = memoizeFunction(\n// eslint-disable-next-line deprecation/deprecation\nfunction (theme) {\n return mergeStyleSets({\n wrapper: {\n display: 'inline-flex',\n height: '100%',\n alignItems: 'center',\n },\n divider: {\n width: 1,\n height: '100%',\n backgroundColor: theme.palette.neutralTertiaryAlt,\n },\n });\n});\n//# sourceMappingURL=VerticalDivider.classNames.js.map","import { __assign } from \"tslib\";\nimport { concatStyleSets, getFocusStyle, HighContrastSelector, getScreenSelector, ScreenWidthMaxMedium, IconFontSizes, getHighContrastNoAdjustStyle, } from '../../Styling';\nimport { memoizeFunction } from '../../Utilities';\nexport var CONTEXTUAL_MENU_ITEM_HEIGHT = 36;\nvar MediumScreenSelector = getScreenSelector(0, ScreenWidthMaxMedium);\nexport var getMenuItemStyles = memoizeFunction(function (theme) {\n var _a, _b, _c, _d, _e;\n var semanticColors = theme.semanticColors, fonts = theme.fonts, palette = theme.palette;\n var ContextualMenuItemBackgroundHoverColor = semanticColors.menuItemBackgroundHovered;\n var ContextualMenuItemTextHoverColor = semanticColors.menuItemTextHovered;\n var ContextualMenuItemBackgroundSelectedColor = semanticColors.menuItemBackgroundPressed;\n var ContextualMenuItemDividerColor = semanticColors.bodyDivider;\n var menuItemStyles = {\n item: [\n fonts.medium,\n {\n color: semanticColors.bodyText,\n position: 'relative',\n boxSizing: 'border-box',\n },\n ],\n divider: {\n display: 'block',\n height: '1px',\n backgroundColor: ContextualMenuItemDividerColor,\n position: 'relative',\n },\n root: [\n getFocusStyle(theme),\n fonts.medium,\n {\n color: semanticColors.bodyText,\n backgroundColor: 'transparent',\n border: 'none',\n width: '100%',\n height: CONTEXTUAL_MENU_ITEM_HEIGHT,\n lineHeight: CONTEXTUAL_MENU_ITEM_HEIGHT,\n display: 'block',\n cursor: 'pointer',\n padding: '0px 8px 0 4px',\n textAlign: 'left',\n },\n ],\n rootDisabled: {\n color: semanticColors.disabledBodyText,\n cursor: 'default',\n pointerEvents: 'none',\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n // ensure disabled text looks different than enabled\n color: 'GrayText',\n opacity: 1,\n },\n _a),\n },\n rootHovered: {\n backgroundColor: ContextualMenuItemBackgroundHoverColor,\n color: ContextualMenuItemTextHoverColor,\n selectors: {\n '.ms-ContextualMenu-icon': {\n color: palette.themeDarkAlt,\n },\n '.ms-ContextualMenu-submenuIcon': {\n color: palette.neutralPrimary,\n },\n },\n },\n rootFocused: {\n backgroundColor: palette.white,\n },\n rootChecked: {\n selectors: {\n '.ms-ContextualMenu-checkmarkIcon': {\n color: palette.neutralPrimary,\n },\n },\n },\n rootPressed: {\n backgroundColor: ContextualMenuItemBackgroundSelectedColor,\n selectors: {\n '.ms-ContextualMenu-icon': {\n color: palette.themeDark,\n },\n '.ms-ContextualMenu-submenuIcon': {\n color: palette.neutralPrimary,\n },\n },\n },\n rootExpanded: {\n backgroundColor: ContextualMenuItemBackgroundSelectedColor,\n color: semanticColors.bodyTextChecked,\n selectors: (_b = {\n '.ms-ContextualMenu-submenuIcon': (_c = {},\n _c[HighContrastSelector] = {\n // icons inside of anchor tags are not properly inheriting color in high contrast\n color: 'inherit',\n },\n _c)\n },\n _b[HighContrastSelector] = __assign({}, getHighContrastNoAdjustStyle()),\n _b),\n },\n linkContent: {\n whiteSpace: 'nowrap',\n height: 'inherit',\n display: 'flex',\n alignItems: 'center',\n maxWidth: '100%',\n },\n anchorLink: {\n padding: '0px 8px 0 4px',\n textRendering: 'auto',\n color: 'inherit',\n letterSpacing: 'normal',\n wordSpacing: 'normal',\n textTransform: 'none',\n textIndent: '0px',\n textShadow: 'none',\n textDecoration: 'none',\n boxSizing: 'border-box',\n },\n label: {\n margin: '0 4px',\n verticalAlign: 'middle',\n display: 'inline-block',\n flexGrow: '1',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n },\n secondaryText: {\n color: theme.palette.neutralSecondary,\n paddingLeft: '20px',\n textAlign: 'right',\n },\n icon: {\n display: 'inline-block',\n minHeight: '1px',\n maxHeight: CONTEXTUAL_MENU_ITEM_HEIGHT,\n fontSize: IconFontSizes.medium,\n width: IconFontSizes.medium,\n margin: '0 4px',\n verticalAlign: 'middle',\n flexShrink: '0',\n selectors: (_d = {},\n _d[MediumScreenSelector] = {\n fontSize: IconFontSizes.large,\n width: IconFontSizes.large,\n },\n _d),\n },\n iconColor: {\n color: semanticColors.menuIcon,\n },\n iconDisabled: {\n color: semanticColors.disabledBodyText,\n },\n checkmarkIcon: {\n color: semanticColors.bodySubtext,\n },\n subMenuIcon: {\n height: CONTEXTUAL_MENU_ITEM_HEIGHT,\n lineHeight: CONTEXTUAL_MENU_ITEM_HEIGHT,\n color: palette.neutralSecondary,\n textAlign: 'center',\n display: 'inline-block',\n verticalAlign: 'middle',\n flexShrink: '0',\n fontSize: IconFontSizes.small,\n selectors: (_e = {\n ':hover': {\n color: palette.neutralPrimary,\n },\n ':active': {\n color: palette.neutralPrimary,\n }\n },\n _e[MediumScreenSelector] = {\n fontSize: IconFontSizes.medium, // 16px\n },\n _e),\n },\n splitButtonFlexContainer: [\n getFocusStyle(theme),\n {\n display: 'flex',\n height: CONTEXTUAL_MENU_ITEM_HEIGHT,\n flexWrap: 'nowrap',\n justifyContent: 'center',\n alignItems: 'flex-start',\n },\n ],\n };\n return concatStyleSets(menuItemStyles);\n});\n//# sourceMappingURL=ContextualMenu.cnstyles.js.map","import { getDividerClassNames } from '../Divider/VerticalDivider.classNames';\nimport { getMenuItemStyles } from './ContextualMenu.cnstyles';\nimport { mergeStyleSets, getGlobalClassNames, getScreenSelector, ScreenWidthMaxMedium, hiddenContentStyle, } from '../../Styling';\nimport { memoizeFunction, IsFocusVisibleClassName } from '../../Utilities';\nvar CONTEXTUAL_SPLIT_MENU_MINWIDTH = '28px';\nvar MediumScreenSelector = getScreenSelector(0, ScreenWidthMaxMedium);\nexport var getSplitButtonVerticalDividerClassNames = memoizeFunction(\n/* eslint-disable deprecation/deprecation */\nfunction (theme) {\n var _a;\n return mergeStyleSets(getDividerClassNames(theme), {\n /* eslint-enable deprecation/deprecation */\n wrapper: {\n position: 'absolute',\n right: 28,\n selectors: (_a = {},\n _a[MediumScreenSelector] = {\n right: 32, // fontSize of the icon increased from 12px to 16px\n },\n _a),\n },\n divider: {\n height: 16,\n width: 1,\n },\n });\n});\nvar GlobalClassNames = {\n item: 'ms-ContextualMenu-item',\n divider: 'ms-ContextualMenu-divider',\n root: 'ms-ContextualMenu-link',\n isChecked: 'is-checked',\n isExpanded: 'is-expanded',\n isDisabled: 'is-disabled',\n linkContent: 'ms-ContextualMenu-linkContent',\n linkContentMenu: 'ms-ContextualMenu-linkContent',\n icon: 'ms-ContextualMenu-icon',\n iconColor: 'ms-ContextualMenu-iconColor',\n checkmarkIcon: 'ms-ContextualMenu-checkmarkIcon',\n subMenuIcon: 'ms-ContextualMenu-submenuIcon',\n label: 'ms-ContextualMenu-itemText',\n secondaryText: 'ms-ContextualMenu-secondaryText',\n splitMenu: 'ms-ContextualMenu-splitMenu',\n screenReaderText: 'ms-ContextualMenu-screenReaderText',\n};\n/**\n * @deprecated Will be removed in \\>= 7.0.\n * This is a package-internal method that has been depended on.\n * It is being kept in this form for backwards compatibility.\n * @internal\n */\n// TODO: Audit perf. impact of and potentially remove memoizeFunction.\n// https://github.com/microsoft/fluentui/issues/5534\nexport var getItemClassNames = memoizeFunction(function (theme, disabled, expanded, checked, isAnchorLink, knownIcon, itemClassName, dividerClassName, iconClassName, subMenuClassName, primaryDisabled, className) {\n var _a, _b, _c, _d;\n var styles = getMenuItemStyles(theme);\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return mergeStyleSets({\n item: [classNames.item, styles.item, itemClassName],\n divider: [classNames.divider, styles.divider, dividerClassName],\n root: [\n classNames.root,\n styles.root,\n checked && [classNames.isChecked, styles.rootChecked],\n isAnchorLink && styles.anchorLink,\n expanded && [classNames.isExpanded, styles.rootExpanded],\n disabled && [classNames.isDisabled, styles.rootDisabled],\n !disabled &&\n !expanded && [\n {\n selectors: (_a = {\n ':hover': styles.rootHovered,\n ':active': styles.rootPressed\n },\n _a[\".\" + IsFocusVisibleClassName + \" &:focus, .\" + IsFocusVisibleClassName + \" &:focus:hover\"] = styles.rootFocused,\n _a[\".\" + IsFocusVisibleClassName + \" &:hover\"] = { background: 'inherit;' },\n _a),\n },\n ],\n className,\n ],\n splitPrimary: [\n styles.root,\n {\n width: \"calc(100% - \" + CONTEXTUAL_SPLIT_MENU_MINWIDTH + \")\",\n },\n checked && ['is-checked', styles.rootChecked],\n (disabled || primaryDisabled) && ['is-disabled', styles.rootDisabled],\n !(disabled || primaryDisabled) &&\n !checked && [\n {\n selectors: (_b = {\n ':hover': styles.rootHovered\n },\n // when hovering over the splitPrimary also affect the splitMenu\n _b[\":hover ~ .\" + classNames.splitMenu] = styles.rootHovered,\n _b[':active'] = styles.rootPressed,\n _b[\".\" + IsFocusVisibleClassName + \" &:focus, .\" + IsFocusVisibleClassName + \" &:focus:hover\"] = styles.rootFocused,\n _b[\".\" + IsFocusVisibleClassName + \" &:hover\"] = { background: 'inherit;' },\n _b),\n },\n ],\n ],\n splitMenu: [\n classNames.splitMenu,\n styles.root,\n {\n flexBasis: '0',\n padding: '0 8px',\n minWidth: CONTEXTUAL_SPLIT_MENU_MINWIDTH,\n },\n expanded && ['is-expanded', styles.rootExpanded],\n disabled && ['is-disabled', styles.rootDisabled],\n !disabled &&\n !expanded && [\n {\n selectors: (_c = {\n ':hover': styles.rootHovered,\n ':active': styles.rootPressed\n },\n _c[\".\" + IsFocusVisibleClassName + \" &:focus, .\" + IsFocusVisibleClassName + \" &:focus:hover\"] = styles.rootFocused,\n _c[\".\" + IsFocusVisibleClassName + \" &:hover\"] = { background: 'inherit;' },\n _c),\n },\n ],\n ],\n anchorLink: styles.anchorLink,\n linkContent: [classNames.linkContent, styles.linkContent],\n linkContentMenu: [\n classNames.linkContentMenu,\n styles.linkContent,\n {\n justifyContent: 'center',\n },\n ],\n icon: [\n classNames.icon,\n knownIcon && styles.iconColor,\n styles.icon,\n iconClassName,\n disabled && [classNames.isDisabled, styles.iconDisabled],\n ],\n iconColor: styles.iconColor,\n checkmarkIcon: [classNames.checkmarkIcon, knownIcon && styles.checkmarkIcon, styles.icon, iconClassName],\n subMenuIcon: [\n classNames.subMenuIcon,\n styles.subMenuIcon,\n subMenuClassName,\n expanded && { color: theme.palette.neutralPrimary },\n disabled && [styles.iconDisabled],\n ],\n label: [classNames.label, styles.label],\n secondaryText: [classNames.secondaryText, styles.secondaryText],\n splitContainer: [\n styles.splitButtonFlexContainer,\n !disabled &&\n !checked && [\n {\n selectors: (_d = {},\n _d[\".\" + IsFocusVisibleClassName + \" &:focus, .\" + IsFocusVisibleClassName + \" &:focus:hover\"] = styles.rootFocused,\n _d),\n },\n ],\n ],\n screenReaderText: [\n classNames.screenReaderText,\n styles.screenReaderText,\n hiddenContentStyle,\n { visibility: 'hidden' },\n ],\n });\n});\n/**\n * Wrapper function for generating ContextualMenuItem classNames which adheres to\n * the getStyles API, but invokes memoized className generator function with\n * primitive values.\n *\n * @param props the ContextualMenuItem style props used to generate its styles.\n */\nexport var getItemStyles = function (props) {\n var theme = props.theme, disabled = props.disabled, expanded = props.expanded, checked = props.checked, isAnchorLink = props.isAnchorLink, knownIcon = props.knownIcon, itemClassName = props.itemClassName, dividerClassName = props.dividerClassName, iconClassName = props.iconClassName, subMenuClassName = props.subMenuClassName, primaryDisabled = props.primaryDisabled, className = props.className;\n // eslint-disable-next-line deprecation/deprecation\n return getItemClassNames(theme, disabled, expanded, checked, isAnchorLink, knownIcon, itemClassName, dividerClassName, iconClassName, subMenuClassName, primaryDisabled, className);\n};\n//# sourceMappingURL=ContextualMenu.classNames.js.map","import { styled } from '../../Utilities';\nimport { ContextualMenuItemBase } from './ContextualMenuItem.base';\nimport { getItemStyles } from './ContextualMenu.classNames';\n/**\n * ContextualMenuItem description\n */\nexport var ContextualMenuItem = styled(ContextualMenuItemBase, getItemStyles, undefined, { scope: 'ContextualMenuItem' });\n//# sourceMappingURL=ContextualMenuItem.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { initializeComponentRef, shallowCompare } from '../../../Utilities';\nvar ContextualMenuItemWrapper = /** @class */ (function (_super) {\n __extends(ContextualMenuItemWrapper, _super);\n function ContextualMenuItemWrapper(props) {\n var _this = _super.call(this, props) || this;\n _this._onItemMouseEnter = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseEnter = _a.onItemMouseEnter;\n if (onItemMouseEnter) {\n onItemMouseEnter(item, ev, ev.currentTarget);\n }\n };\n _this._onItemClick = function (ev) {\n var _a = _this.props, item = _a.item, onItemClickBase = _a.onItemClickBase;\n if (onItemClickBase) {\n onItemClickBase(item, ev, ev.currentTarget);\n }\n };\n _this._onItemMouseLeave = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseLeave = _a.onItemMouseLeave;\n if (onItemMouseLeave) {\n onItemMouseLeave(item, ev);\n }\n };\n _this._onItemKeyDown = function (ev) {\n var _a = _this.props, item = _a.item, onItemKeyDown = _a.onItemKeyDown;\n if (onItemKeyDown) {\n onItemKeyDown(item, ev);\n }\n };\n _this._onItemMouseMove = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseMove = _a.onItemMouseMove;\n if (onItemMouseMove) {\n onItemMouseMove(item, ev, ev.currentTarget);\n }\n };\n _this._getSubmenuTarget = function () {\n return undefined;\n };\n initializeComponentRef(_this);\n return _this;\n }\n ContextualMenuItemWrapper.prototype.shouldComponentUpdate = function (newProps) {\n return !shallowCompare(newProps, this.props);\n };\n return ContextualMenuItemWrapper;\n}(React.Component));\nexport { ContextualMenuItemWrapper };\n//# sourceMappingURL=ContextualMenuItemWrapper.js.map","export var KTP_PREFIX = 'ktp';\nexport var KTP_SEPARATOR = '-';\nexport var KTP_FULL_PREFIX = KTP_PREFIX + KTP_SEPARATOR;\nexport var DATAKTP_TARGET = 'data-ktp-target';\nexport var DATAKTP_EXECUTE_TARGET = 'data-ktp-execute-target';\nexport var DATAKTP_ARIA_TARGET = 'data-ktp-aria-target';\nexport var KTP_LAYER_ID = 'ktp-layer-id';\nexport var KTP_ARIA_SEPARATOR = ', ';\n// Events\nexport var KeytipEvents;\n(function (KeytipEvents) {\n KeytipEvents.KEYTIP_ADDED = 'keytipAdded';\n KeytipEvents.KEYTIP_REMOVED = 'keytipRemoved';\n KeytipEvents.KEYTIP_UPDATED = 'keytipUpdated';\n KeytipEvents.PERSISTED_KEYTIP_ADDED = 'persistedKeytipAdded';\n KeytipEvents.PERSISTED_KEYTIP_REMOVED = 'persistedKeytipRemoved';\n KeytipEvents.PERSISTED_KEYTIP_EXECUTE = 'persistedKeytipExecute';\n KeytipEvents.ENTER_KEYTIP_MODE = 'enterKeytipMode';\n KeytipEvents.EXIT_KEYTIP_MODE = 'exitKeytipMode';\n})(KeytipEvents || (KeytipEvents = {}));\n//# sourceMappingURL=KeytipConstants.js.map","import { __assign, __spreadArray } from \"tslib\";\nimport { EventGroup, getId } from '../../Utilities';\nimport { KeytipEvents } from '../../utilities/keytips/KeytipConstants';\n/**\n * This class is responsible for handling registering, updating, and unregistering of keytips\n */\nvar KeytipManager = /** @class */ (function () {\n function KeytipManager() {\n this.keytips = {};\n this.persistedKeytips = {};\n this.sequenceMapping = {};\n // This is (and should be) updated and kept in sync\n // with the inKeytipMode in KeytipLayer.\n this.inKeytipMode = false;\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 this.shouldEnterKeytipMode = true;\n // Boolean to indicate whether to delay firing an event to update subscribers of\n // keytip data changed.\n this.delayUpdatingKeytipChange = false;\n }\n /**\n * Static function to get singleton KeytipManager instance\n *\n * @returns Singleton KeytipManager instance\n */\n KeytipManager.getInstance = function () {\n return this._instance;\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 KeytipManager.prototype.init = function (delayUpdatingKeytipChange) {\n this.delayUpdatingKeytipChange = delayUpdatingKeytipChange;\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 KeytipManager.prototype.register = function (keytipProps, persisted) {\n if (persisted === void 0) { persisted = false; }\n var props = 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 var uniqueKeytip = this._getUniqueKtp(props);\n // Add to dictionary\n persisted\n ? (this.persistedKeytips[uniqueKeytip.uniqueID] = uniqueKeytip)\n : (this.keytips[uniqueKeytip.uniqueID] = uniqueKeytip);\n // We only want to add something new if we are currently showing keytip mode\n if (this.inKeytipMode || !this.delayUpdatingKeytipChange) {\n var event_1 = persisted ? KeytipEvents.PERSISTED_KEYTIP_ADDED : KeytipEvents.KEYTIP_ADDED;\n EventGroup.raise(this, event_1, {\n keytip: props,\n uniqueID: uniqueKeytip.uniqueID,\n });\n }\n return uniqueKeytip.uniqueID;\n };\n /**\n * Update a keytip\n *\n * @param keytipProps - Keytip to update\n * @param uniqueID - Unique ID of this keytip\n */\n KeytipManager.prototype.update = function (keytipProps, uniqueID) {\n var newKeytipProps = this.addParentOverflow(keytipProps);\n var uniqueKeytip = this._getUniqueKtp(newKeytipProps, uniqueID);\n var 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 // 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 // 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 * 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 KeytipManager.prototype.unregister = function (keytipToRemove, uniqueID, persisted) {\n if (persisted === void 0) { persisted = false; }\n persisted ? delete this.persistedKeytips[uniqueID] : delete this.keytips[uniqueID];\n !persisted && delete this.sequenceMapping[keytipToRemove.keySequences.toString()];\n var 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: uniqueID,\n });\n }\n };\n /**\n * Manual call to enter keytip mode\n */\n KeytipManager.prototype.enterKeytipMode = function () {\n EventGroup.raise(this, KeytipEvents.ENTER_KEYTIP_MODE);\n };\n /**\n * Manual call to exit keytip mode\n */\n KeytipManager.prototype.exitKeytipMode = function () {\n EventGroup.raise(this, KeytipEvents.EXIT_KEYTIP_MODE);\n };\n /**\n * Gets all IKeytipProps from this.keytips\n *\n * @returns All keytips stored in the manager\n */\n KeytipManager.prototype.getKeytips = function () {\n var _this = this;\n return Object.keys(this.keytips).map(function (key) { return _this.keytips[key].keytip; });\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 KeytipManager.prototype.addParentOverflow = function (keytipProps) {\n var fullSequence = __spreadArray([], keytipProps.keySequences);\n fullSequence.pop();\n if (fullSequence.length !== 0) {\n var parentKeytip = this.sequenceMapping[fullSequence.toString()];\n if (parentKeytip && parentKeytip.overflowSetSequence) {\n return __assign(__assign({}, keytipProps), { overflowSetSequence: parentKeytip.overflowSetSequence });\n }\n }\n return keytipProps;\n };\n /**\n * Public function to bind for overflow items that have a submenu\n */\n KeytipManager.prototype.menuExecute = function (overflowButtonSequences, keytipSequences) {\n EventGroup.raise(this, KeytipEvents.PERSISTED_KEYTIP_EXECUTE, {\n overflowButtonSequences: overflowButtonSequences,\n keytipSequences: keytipSequences,\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 KeytipManager.prototype._getUniqueKtp = function (keytipProps, uniqueID) {\n if (uniqueID === void 0) { uniqueID = getId(); }\n return { keytip: __assign({}, keytipProps), uniqueID: uniqueID };\n };\n KeytipManager._instance = new KeytipManager();\n return KeytipManager;\n}());\nexport { KeytipManager };\n//# sourceMappingURL=KeytipManager.js.map","import { __spreadArray } from \"tslib\";\nimport { KTP_SEPARATOR, KTP_PREFIX, DATAKTP_TARGET, DATAKTP_EXECUTE_TARGET, KTP_LAYER_ID } from './KeytipConstants';\nimport { addElementAtIndex } from '../../Utilities';\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) {\n return keySequences.reduce(function (prevValue, keySequence) {\n return prevValue + KTP_SEPARATOR + keySequence.split('').join(KTP_SEPARATOR);\n }, KTP_PREFIX);\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, overflowKeySequences) {\n var overflowSequenceLen = overflowKeySequences.length;\n var overflowSequence = __spreadArray([], overflowKeySequences).pop();\n var newKeySequences = __spreadArray([], keySequences);\n return addElementAtIndex(newKeySequences, overflowSequenceLen - 1, overflowSequence);\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) {\n return '[' + DATAKTP_TARGET + '=\"' + sequencesToID(keySequences) + '\"]';\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) {\n return '[' + DATAKTP_EXECUTE_TARGET + '=\"' + keytipId + '\"]';\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) {\n var describedby = ' ' + KTP_LAYER_ID;\n if (!keySequences.length) {\n // Return just the layer ID\n return describedby;\n }\n return describedby + ' ' + sequencesToID(keySequences);\n}\n//# sourceMappingURL=KeytipUtils.js.map","import { __assign, __spreadArray } from \"tslib\";\nimport * 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';\n/**\n * Hook that creates attributes for components which are enabled with Keytip.\n */\nexport function useKeytipData(options) {\n var uniqueId = React.useRef();\n var keytipProps = options.keytipProps\n ? __assign({ disabled: options.disabled }, options.keytipProps) : undefined;\n var keytipManager = useConst(KeytipManager.getInstance());\n var prevOptions = usePrevious(options);\n // useLayoutEffect used to strictly emulate didUpdate/didMount behavior\n useIsomorphicLayoutEffect(function () {\n if (uniqueId.current &&\n keytipProps &&\n ((prevOptions === null || prevOptions === void 0 ? void 0 : prevOptions.keytipProps) !== options.keytipProps || (prevOptions === null || prevOptions === void 0 ? void 0 : prevOptions.disabled) !== options.disabled)) {\n keytipManager.update(keytipProps, uniqueId.current);\n }\n });\n useIsomorphicLayoutEffect(function () {\n // Register Keytip in KeytipManager\n if (keytipProps) {\n uniqueId.current = keytipManager.register(keytipProps);\n }\n return function () {\n // Unregister Keytip in KeytipManager\n keytipProps && keytipManager.unregister(keytipProps, uniqueId.current);\n };\n // this is meant to run only at mount, and updates are handled separately\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n var nativeKeytipProps = {\n ariaDescribedBy: undefined,\n keytipId: undefined,\n };\n if (keytipProps) {\n nativeKeytipProps = getKeytipData(keytipManager, keytipProps, options.ariaDescribedBy);\n }\n return nativeKeytipProps;\n}\n/**\n * Gets the aria- and data- attributes to attach to the component\n * @param keytipProps - options for Keytip\n * @param describedByPrepend - ariaDescribedBy value to prepend\n */\nfunction getKeytipData(keytipManager, keytipProps, describedByPrepend) {\n // Add the parent overflow sequence if necessary\n var newKeytipProps = keytipManager.addParentOverflow(keytipProps);\n // Construct aria-describedby and data-ktp-id attributes\n var ariaDescribedBy = mergeAriaAttributeValues(describedByPrepend, getAriaDescribedBy(newKeytipProps.keySequences));\n var keySequences = __spreadArray([], newKeytipProps.keySequences);\n if (newKeytipProps.overflowSetSequence) {\n keySequences = mergeOverflows(keySequences, newKeytipProps.overflowSetSequence);\n }\n var keytipId = sequencesToID(keySequences);\n return {\n ariaDescribedBy: ariaDescribedBy,\n keytipId: keytipId,\n };\n}\n//# sourceMappingURL=useKeytipData.js.map","import { __rest } from \"tslib\";\nimport { DATAKTP_TARGET, DATAKTP_EXECUTE_TARGET } from '../../utilities/keytips/index';\nimport { useKeytipData } from './useKeytipData';\n/**\n * A small element to help the target component correctly read out its aria-describedby for its Keytip\n * {@docCategory Keytips}\n */\nexport var KeytipData = function (props) {\n var _a;\n var children = props.children, keytipDataProps = __rest(props, [\"children\"]);\n var _b = useKeytipData(keytipDataProps), keytipId = _b.keytipId, ariaDescribedBy = _b.ariaDescribedBy;\n return children((_a = {},\n _a[DATAKTP_TARGET] = keytipId,\n _a[DATAKTP_EXECUTE_TARGET] = keytipId,\n _a['aria-describedby'] = ariaDescribedBy,\n _a));\n};\n//# sourceMappingURL=KeytipData.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { anchorProperties, getNativeProps, memoizeFunction, getId, mergeAriaAttributeValues } from '../../../Utilities';\nimport { ContextualMenuItemWrapper } from './ContextualMenuItemWrapper';\nimport { KeytipData } from '../../../KeytipData';\nimport { isItemDisabled, hasSubmenu } from '../../../utilities/contextualMenu/index';\nimport { ContextualMenuItem } from '../ContextualMenuItem';\nvar ContextualMenuAnchor = /** @class */ (function (_super) {\n __extends(ContextualMenuAnchor, _super);\n function ContextualMenuAnchor() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this._anchor = React.createRef();\n _this._getMemoizedMenuButtonKeytipProps = memoizeFunction(function (keytipProps) {\n return __assign(__assign({}, keytipProps), { hasMenu: true });\n });\n _this._getSubmenuTarget = function () {\n return _this._anchor.current ? _this._anchor.current : undefined;\n };\n _this._onItemClick = function (ev) {\n var _a = _this.props, item = _a.item, onItemClick = _a.onItemClick;\n if (onItemClick) {\n onItemClick(item, ev);\n }\n };\n _this._renderAriaDescription = function (ariaDescription, className) {\n // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan\n return ariaDescription ? (React.createElement(\"span\", { id: _this._ariaDescriptionId, className: className }, ariaDescription)) : null;\n };\n return _this;\n }\n ContextualMenuAnchor.prototype.render = function () {\n var _this = this;\n var _a = this.props, item = _a.item, classNames = _a.classNames, index = _a.index, focusableElementIndex = _a.focusableElementIndex, totalItemCount = _a.totalItemCount, hasCheckmarks = _a.hasCheckmarks, hasIcons = _a.hasIcons, _b = _a.contextualMenuItemAs, ChildrenRenderer = _b === void 0 ? ContextualMenuItem : _b, expandedMenuItemKey = _a.expandedMenuItemKey, onItemClick = _a.onItemClick, openSubMenu = _a.openSubMenu, dismissSubMenu = _a.dismissSubMenu, dismissMenu = _a.dismissMenu;\n var anchorRel = item.rel;\n if (item.target && item.target.toLowerCase() === '_blank') {\n anchorRel = anchorRel ? anchorRel : 'nofollow noopener noreferrer'; // Safe default to prevent tabjacking\n }\n var itemHasSubmenu = hasSubmenu(item);\n var nativeProps = getNativeProps(item, anchorProperties);\n var disabled = isItemDisabled(item);\n var itemProps = item.itemProps, ariaDescription = item.ariaDescription;\n var keytipProps = item.keytipProps;\n if (keytipProps && itemHasSubmenu) {\n keytipProps = this._getMemoizedMenuButtonKeytipProps(keytipProps);\n }\n // Check for ariaDescription to set the _ariaDescriptionId and render a hidden span with\n // the description in it to be added to ariaDescribedBy\n if (ariaDescription) {\n this._ariaDescriptionId = getId();\n }\n var ariaDescribedByIds = mergeAriaAttributeValues(item.ariaDescribedBy, ariaDescription ? this._ariaDescriptionId : undefined, nativeProps['aria-describedby']);\n var additionalItemProperties = {\n 'aria-describedby': ariaDescribedByIds,\n };\n return (React.createElement(\"div\", null,\n React.createElement(KeytipData, { keytipProps: item.keytipProps, ariaDescribedBy: ariaDescribedByIds, disabled: disabled }, function (keytipAttributes) { return (React.createElement(\"a\", __assign({}, additionalItemProperties, nativeProps, keytipAttributes, { ref: _this._anchor, href: item.href, target: item.target, rel: anchorRel, className: classNames.root, role: \"menuitem\", \"aria-haspopup\": itemHasSubmenu || undefined, \"aria-expanded\": itemHasSubmenu ? item.key === expandedMenuItemKey : undefined, \"aria-posinset\": focusableElementIndex + 1, \"aria-setsize\": totalItemCount, \"aria-disabled\": isItemDisabled(item), \n // eslint-disable-next-line deprecation/deprecation\n style: item.style, onClick: _this._onItemClick, onMouseEnter: _this._onItemMouseEnter, onMouseLeave: _this._onItemMouseLeave, onMouseMove: _this._onItemMouseMove, onKeyDown: itemHasSubmenu ? _this._onItemKeyDown : undefined }),\n React.createElement(ChildrenRenderer, __assign({ componentRef: item.componentRef, item: item, classNames: classNames, index: index, onCheckmarkClick: hasCheckmarks && onItemClick ? onItemClick : undefined, hasIcons: hasIcons, openSubMenu: openSubMenu, dismissSubMenu: dismissSubMenu, dismissMenu: dismissMenu, getSubmenuTarget: _this._getSubmenuTarget }, itemProps)),\n _this._renderAriaDescription(ariaDescription, classNames.screenReaderText))); })));\n };\n return ContextualMenuAnchor;\n}(ContextualMenuItemWrapper));\nexport { ContextualMenuAnchor };\n//# sourceMappingURL=ContextualMenuAnchor.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { buttonProperties, getNativeProps, memoizeFunction, getId, mergeAriaAttributeValues } from '../../../Utilities';\nimport { ContextualMenuItemWrapper } from './ContextualMenuItemWrapper';\nimport { KeytipData } from '../../../KeytipData';\nimport { getIsChecked, isItemDisabled, hasSubmenu, getMenuItemAriaRole } from '../../../utilities/contextualMenu/index';\nimport { ContextualMenuItem } from '../ContextualMenuItem';\nvar ContextualMenuButton = /** @class */ (function (_super) {\n __extends(ContextualMenuButton, _super);\n function ContextualMenuButton() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this._btn = React.createRef();\n _this._getMemoizedMenuButtonKeytipProps = memoizeFunction(function (keytipProps) {\n return __assign(__assign({}, keytipProps), { hasMenu: true });\n });\n _this._renderAriaDescription = function (ariaDescription, className) {\n // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan\n return ariaDescription ? (React.createElement(\"span\", { id: _this._ariaDescriptionId, className: className }, ariaDescription)) : null;\n };\n _this._getSubmenuTarget = function () {\n return _this._btn.current ? _this._btn.current : undefined;\n };\n return _this;\n }\n ContextualMenuButton.prototype.render = function () {\n var _this = this;\n var _a = this.props, item = _a.item, classNames = _a.classNames, index = _a.index, focusableElementIndex = _a.focusableElementIndex, totalItemCount = _a.totalItemCount, hasCheckmarks = _a.hasCheckmarks, hasIcons = _a.hasIcons, _b = _a.contextualMenuItemAs, ChildrenRenderer = _b === void 0 ? ContextualMenuItem : _b, expandedMenuItemKey = _a.expandedMenuItemKey, onItemMouseDown = _a.onItemMouseDown, onItemClick = _a.onItemClick, openSubMenu = _a.openSubMenu, dismissSubMenu = _a.dismissSubMenu, dismissMenu = _a.dismissMenu;\n var isChecked = getIsChecked(item);\n var canCheck = isChecked !== null;\n var defaultRole = getMenuItemAriaRole(item);\n var itemHasSubmenu = hasSubmenu(item);\n var itemProps = item.itemProps, ariaLabel = item.ariaLabel, ariaDescription = item.ariaDescription;\n var buttonNativeProperties = getNativeProps(item, buttonProperties);\n // Do not add the disabled attribute to the button so that it is focusable\n delete buttonNativeProperties.disabled;\n var itemRole = item.role || defaultRole;\n // Check for ariaDescription to set the _ariaDescriptionId and render a hidden span with\n // the description in it to be added to ariaDescribedBy\n if (ariaDescription) {\n this._ariaDescriptionId = getId();\n }\n var ariaDescribedByIds = mergeAriaAttributeValues(item.ariaDescribedBy, ariaDescription ? this._ariaDescriptionId : undefined, buttonNativeProperties['aria-describedby']);\n var itemButtonProperties = {\n className: classNames.root,\n onClick: this._onItemClick,\n onKeyDown: itemHasSubmenu ? this._onItemKeyDown : undefined,\n onMouseEnter: this._onItemMouseEnter,\n onMouseLeave: this._onItemMouseLeave,\n onMouseDown: function (ev) {\n return onItemMouseDown ? onItemMouseDown(item, ev) : undefined;\n },\n onMouseMove: this._onItemMouseMove,\n href: item.href,\n title: item.title,\n 'aria-label': ariaLabel,\n 'aria-describedby': ariaDescribedByIds,\n 'aria-haspopup': itemHasSubmenu || undefined,\n 'aria-expanded': itemHasSubmenu ? item.key === expandedMenuItemKey : undefined,\n 'aria-posinset': focusableElementIndex + 1,\n 'aria-setsize': totalItemCount,\n 'aria-disabled': isItemDisabled(item),\n 'aria-checked': (itemRole === 'menuitemcheckbox' || itemRole === 'menuitemradio') && canCheck ? !!isChecked : undefined,\n 'aria-selected': itemRole === 'menuitem' && canCheck ? !!isChecked : undefined,\n role: itemRole,\n // eslint-disable-next-line deprecation/deprecation\n style: item.style,\n };\n var keytipProps = item.keytipProps;\n if (keytipProps && itemHasSubmenu) {\n keytipProps = this._getMemoizedMenuButtonKeytipProps(keytipProps);\n }\n return (React.createElement(KeytipData, { keytipProps: keytipProps, ariaDescribedBy: ariaDescribedByIds, disabled: isItemDisabled(item) }, function (keytipAttributes) { return (React.createElement(\"button\", __assign({ ref: _this._btn }, buttonNativeProperties, itemButtonProperties, keytipAttributes),\n React.createElement(ChildrenRenderer, __assign({ componentRef: item.componentRef, item: item, classNames: classNames, index: index, onCheckmarkClick: hasCheckmarks && onItemClick ? onItemClick : undefined, hasIcons: hasIcons, openSubMenu: openSubMenu, dismissSubMenu: dismissSubMenu, dismissMenu: dismissMenu, getSubmenuTarget: _this._getSubmenuTarget }, itemProps)),\n _this._renderAriaDescription(ariaDescription, classNames.screenReaderText))); }));\n };\n return ContextualMenuButton;\n}(ContextualMenuItemWrapper));\nexport { ContextualMenuButton };\n//# sourceMappingURL=ContextualMenuButton.js.map","export var getStyles = function (props) {\n // eslint-disable-next-line deprecation/deprecation\n var theme = props.theme, getClassNames = props.getClassNames, className = props.className;\n if (!theme) {\n throw new Error('Theme is undefined or null.');\n }\n if (getClassNames) {\n var names = getClassNames(theme);\n return {\n wrapper: [names.wrapper],\n divider: [names.divider],\n };\n }\n return {\n wrapper: [\n {\n display: 'inline-flex',\n height: '100%',\n alignItems: 'center',\n },\n className,\n ],\n divider: [\n {\n width: 1,\n height: '100%',\n backgroundColor: theme.palette.neutralTertiaryAlt,\n },\n ],\n };\n};\n//# sourceMappingURL=VerticalDivider.styles.js.map","import * as React from 'react';\nimport { classNamesFunction } from '../../Utilities';\nvar getClassNames = classNamesFunction();\nexport var VerticalDividerBase = React.forwardRef(function (props, ref) {\n // eslint-disable-next-line deprecation/deprecation\n var styles = props.styles, theme = props.theme, deprecatedGetClassNames = props.getClassNames, className = props.className;\n var classNames = getClassNames(styles, { theme: theme, getClassNames: deprecatedGetClassNames, className: className });\n return (React.createElement(\"span\", { className: classNames.wrapper, ref: ref },\n React.createElement(\"span\", { className: classNames.divider })));\n});\nVerticalDividerBase.displayName = 'VerticalDividerBase';\n//# sourceMappingURL=VerticalDivider.base.js.map","import { getStyles } from './VerticalDivider.styles';\nimport { VerticalDividerBase } from './VerticalDivider.base';\nimport { styled } from '../../Utilities';\nexport var VerticalDivider = styled(VerticalDividerBase, getStyles, undefined, {\n scope: 'VerticalDivider',\n});\n//# sourceMappingURL=VerticalDivider.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { buttonProperties, getNativeProps, KeyCodes, mergeAriaAttributeValues, memoizeFunction, Async, EventGroup, getId, } from '../../../Utilities';\nimport { ContextualMenuItem } from '../ContextualMenuItem';\nimport { getSplitButtonVerticalDividerClassNames } from '../ContextualMenu.classNames';\nimport { KeytipData } from '../../../KeytipData';\nimport { isItemDisabled, hasSubmenu, getMenuItemAriaRole } from '../../../utilities/contextualMenu/index';\nimport { VerticalDivider } from '../../../Divider';\nimport { ContextualMenuItemWrapper } from './ContextualMenuItemWrapper';\nvar TouchIdleDelay = 500; /* ms */\nvar ContextualMenuSplitButton = /** @class */ (function (_super) {\n __extends(ContextualMenuSplitButton, _super);\n function ContextualMenuSplitButton(props) {\n var _this = _super.call(this, props) || this;\n _this._getMemoizedMenuButtonKeytipProps = memoizeFunction(function (keytipProps) {\n return __assign(__assign({}, keytipProps), { hasMenu: true });\n });\n _this._onItemKeyDown = function (ev) {\n var _a = _this.props, item = _a.item, onItemKeyDown = _a.onItemKeyDown;\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n _this._executeItemClick(ev);\n ev.preventDefault();\n ev.stopPropagation();\n }\n else if (onItemKeyDown) {\n onItemKeyDown(item, ev);\n }\n };\n _this._getSubmenuTarget = function () {\n return _this._splitButton;\n };\n _this._renderAriaDescription = function (ariaDescription, className) {\n // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan\n return ariaDescription ? (React.createElement(\"span\", { id: _this._ariaDescriptionId, className: className }, ariaDescription)) : null;\n };\n _this._onItemMouseEnterPrimary = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseEnter = _a.onItemMouseEnter;\n if (onItemMouseEnter) {\n onItemMouseEnter(__assign(__assign({}, item), { subMenuProps: undefined, items: undefined }), ev, _this._splitButton);\n }\n };\n _this._onItemMouseEnterIcon = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseEnter = _a.onItemMouseEnter;\n if (onItemMouseEnter) {\n onItemMouseEnter(item, ev, _this._splitButton);\n }\n };\n _this._onItemMouseMovePrimary = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseMove = _a.onItemMouseMove;\n if (onItemMouseMove) {\n onItemMouseMove(__assign(__assign({}, item), { subMenuProps: undefined, items: undefined }), ev, _this._splitButton);\n }\n };\n _this._onItemMouseMoveIcon = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseMove = _a.onItemMouseMove;\n if (onItemMouseMove) {\n onItemMouseMove(item, ev, _this._splitButton);\n }\n };\n _this._onIconItemClick = function (ev) {\n var _a = _this.props, item = _a.item, onItemClickBase = _a.onItemClickBase;\n if (onItemClickBase) {\n onItemClickBase(item, ev, (_this._splitButton ? _this._splitButton : ev.currentTarget));\n }\n };\n _this._executeItemClick = function (ev) {\n var _a = _this.props, item = _a.item, executeItemClick = _a.executeItemClick, onItemClick = _a.onItemClick;\n if (item.disabled || item.isDisabled) {\n return;\n }\n if (_this._processingTouch && onItemClick) {\n return onItemClick(item, ev);\n }\n if (executeItemClick) {\n executeItemClick(item, ev);\n }\n };\n _this._onTouchStart = function (ev) {\n if (_this._splitButton && !('onpointerdown' in _this._splitButton)) {\n _this._handleTouchAndPointerEvent(ev);\n }\n };\n _this._onPointerDown = function (ev) {\n if (ev.pointerType === 'touch') {\n _this._handleTouchAndPointerEvent(ev);\n ev.preventDefault();\n ev.stopImmediatePropagation();\n }\n };\n _this._async = new Async(_this);\n _this._events = new EventGroup(_this);\n return _this;\n }\n ContextualMenuSplitButton.prototype.componentDidMount = function () {\n if (this._splitButton && 'onpointerdown' in this._splitButton) {\n this._events.on(this._splitButton, 'pointerdown', this._onPointerDown, true);\n }\n };\n ContextualMenuSplitButton.prototype.componentWillUnmount = function () {\n this._async.dispose();\n this._events.dispose();\n };\n ContextualMenuSplitButton.prototype.render = function () {\n var _this = this;\n var _a = this.props, item = _a.item, classNames = _a.classNames, index = _a.index, focusableElementIndex = _a.focusableElementIndex, totalItemCount = _a.totalItemCount, hasCheckmarks = _a.hasCheckmarks, hasIcons = _a.hasIcons, onItemMouseLeave = _a.onItemMouseLeave, expandedMenuItemKey = _a.expandedMenuItemKey;\n var itemHasSubmenu = hasSubmenu(item);\n var keytipProps = item.keytipProps;\n if (keytipProps) {\n keytipProps = this._getMemoizedMenuButtonKeytipProps(keytipProps);\n }\n // Check for ariaDescription to set the _ariaDescriptionId and render a hidden span with\n // the description in it to be added to ariaDescribedBy\n var ariaDescription = item.ariaDescription;\n if (ariaDescription) {\n this._ariaDescriptionId = getId();\n }\n return (React.createElement(KeytipData, { keytipProps: keytipProps, disabled: isItemDisabled(item) }, function (keytipAttributes) { return (React.createElement(\"div\", { \"data-ktp-target\": keytipAttributes['data-ktp-target'], ref: function (splitButton) { return (_this._splitButton = splitButton); }, role: getMenuItemAriaRole(item), \"aria-label\": item.ariaLabel, className: classNames.splitContainer, \"aria-disabled\": isItemDisabled(item), \"aria-expanded\": itemHasSubmenu ? item.key === expandedMenuItemKey : undefined, \"aria-haspopup\": true, \"aria-describedby\": mergeAriaAttributeValues(item.ariaDescribedBy, ariaDescription ? _this._ariaDescriptionId : undefined, keytipAttributes['aria-describedby']), \"aria-checked\": item.isChecked || item.checked, \"aria-posinset\": focusableElementIndex + 1, \"aria-setsize\": totalItemCount, onMouseEnter: _this._onItemMouseEnterPrimary, onMouseLeave: onItemMouseLeave ? onItemMouseLeave.bind(_this, __assign(__assign({}, item), { subMenuProps: null, items: null })) : undefined, onMouseMove: _this._onItemMouseMovePrimary, onKeyDown: _this._onItemKeyDown, onClick: _this._executeItemClick, onTouchStart: _this._onTouchStart, tabIndex: 0, \"data-is-focusable\": true, \"aria-roledescription\": item['aria-roledescription'] },\n _this._renderSplitPrimaryButton(item, classNames, index, hasCheckmarks, hasIcons),\n _this._renderSplitDivider(item),\n _this._renderSplitIconButton(item, classNames, index, keytipAttributes),\n _this._renderAriaDescription(ariaDescription, classNames.screenReaderText))); }));\n };\n ContextualMenuSplitButton.prototype._renderSplitPrimaryButton = function (item, \n // eslint-disable-next-line deprecation/deprecation\n classNames, index, hasCheckmarks, hasIcons) {\n var _a = this.props, _b = _a.contextualMenuItemAs, ChildrenRenderer = _b === void 0 ? ContextualMenuItem : _b, onItemClick = _a.onItemClick;\n var itemProps = {\n key: item.key,\n disabled: isItemDisabled(item) || item.primaryDisabled,\n /* eslint-disable deprecation/deprecation */\n name: item.name,\n text: item.text || item.name,\n secondaryText: item.secondaryText,\n /* eslint-enable deprecation/deprecation */\n className: classNames.splitPrimary,\n canCheck: item.canCheck,\n isChecked: item.isChecked,\n checked: item.checked,\n iconProps: item.iconProps,\n onRenderIcon: item.onRenderIcon,\n data: item.data,\n 'data-is-focusable': false,\n };\n var itemComponentProps = item.itemProps;\n return (React.createElement(\"button\", __assign({}, getNativeProps(itemProps, buttonProperties)),\n React.createElement(ChildrenRenderer, __assign({ \"data-is-focusable\": false, item: itemProps, classNames: classNames, index: index, onCheckmarkClick: hasCheckmarks && onItemClick ? onItemClick : undefined, hasIcons: hasIcons }, itemComponentProps))));\n };\n ContextualMenuSplitButton.prototype._renderSplitDivider = function (item) {\n var getDividerClassNames = item.getSplitButtonVerticalDividerClassNames || getSplitButtonVerticalDividerClassNames;\n return React.createElement(VerticalDivider, { getClassNames: getDividerClassNames });\n };\n ContextualMenuSplitButton.prototype._renderSplitIconButton = function (item, classNames, // eslint-disable-line deprecation/deprecation\n index, keytipAttributes) {\n var _a = this.props, _b = _a.contextualMenuItemAs, ChildrenRenderer = _b === void 0 ? ContextualMenuItem : _b, onItemMouseLeave = _a.onItemMouseLeave, onItemMouseDown = _a.onItemMouseDown, openSubMenu = _a.openSubMenu, dismissSubMenu = _a.dismissSubMenu, dismissMenu = _a.dismissMenu;\n var itemProps = {\n onClick: this._onIconItemClick,\n disabled: isItemDisabled(item),\n className: classNames.splitMenu,\n subMenuProps: item.subMenuProps,\n submenuIconProps: item.submenuIconProps,\n split: true,\n key: item.key,\n };\n var buttonProps = __assign(__assign({}, getNativeProps(itemProps, buttonProperties)), {\n onMouseEnter: this._onItemMouseEnterIcon,\n onMouseLeave: onItemMouseLeave ? onItemMouseLeave.bind(this, item) : undefined,\n onMouseDown: function (ev) {\n return onItemMouseDown ? onItemMouseDown(item, ev) : undefined;\n },\n onMouseMove: this._onItemMouseMoveIcon,\n 'data-is-focusable': false,\n 'data-ktp-execute-target': keytipAttributes['data-ktp-execute-target'],\n 'aria-hidden': true,\n });\n var itemComponentProps = item.itemProps;\n return (React.createElement(\"button\", __assign({}, buttonProps),\n React.createElement(ChildrenRenderer, __assign({ componentRef: item.componentRef, item: itemProps, classNames: classNames, index: index, hasIcons: false, openSubMenu: openSubMenu, dismissSubMenu: dismissSubMenu, dismissMenu: dismissMenu, getSubmenuTarget: this._getSubmenuTarget }, itemComponentProps))));\n };\n ContextualMenuSplitButton.prototype._handleTouchAndPointerEvent = function (ev) {\n var _this = this;\n var onTap = this.props.onTap;\n if (onTap) {\n onTap(ev);\n }\n // If we already have an existing timeout from a previous touch/pointer event\n // cancel that timeout so we can set a new one.\n if (this._lastTouchTimeoutId) {\n this._async.clearTimeout(this._lastTouchTimeoutId);\n this._lastTouchTimeoutId = undefined;\n }\n this._processingTouch = true;\n this._lastTouchTimeoutId = this._async.setTimeout(function () {\n _this._processingTouch = false;\n _this._lastTouchTimeoutId = undefined;\n }, TouchIdleDelay);\n };\n return ContextualMenuSplitButton;\n}(ContextualMenuItemWrapper));\nexport { ContextualMenuSplitButton };\n//# sourceMappingURL=ContextualMenuSplitButton.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { hoistMethods, unhoistMethods } from '../../Utilities';\nvar BaseDecorator = /** @class */ (function (_super) {\n __extends(BaseDecorator, _super);\n function BaseDecorator(props) {\n var _this = _super.call(this, props) || this;\n _this._updateComposedComponentRef = _this._updateComposedComponentRef.bind(_this);\n return _this;\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 BaseDecorator.prototype._updateComposedComponentRef = function (composedComponentInstance) {\n this._composedComponentInstance = composedComponentInstance;\n if (composedComponentInstance) {\n this._hoisted = hoistMethods(this, composedComponentInstance);\n }\n else if (this._hoisted) {\n unhoistMethods(this, this._hoisted);\n }\n };\n return BaseDecorator;\n}(React.Component));\nexport { BaseDecorator };\n//# sourceMappingURL=BaseDecorator.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { BaseDecorator } from './BaseDecorator';\nimport { getWindow, hoistStatics, EventGroup } from '../../Utilities';\nimport { WindowContext } from '../../WindowProvider';\nexport var ResponsiveMode;\n(function (ResponsiveMode) {\n /** Width \\<= 479px */\n ResponsiveMode[ResponsiveMode[\"small\"] = 0] = \"small\";\n /** Width \\> 479px and \\<= 639px */\n ResponsiveMode[ResponsiveMode[\"medium\"] = 1] = \"medium\";\n /** Width \\> 639px and \\<= 1023px */\n ResponsiveMode[ResponsiveMode[\"large\"] = 2] = \"large\";\n /** Width \\> 1023px and \\<= 1365px */\n ResponsiveMode[ResponsiveMode[\"xLarge\"] = 3] = \"xLarge\";\n /** Width \\> 1365px and \\<= 1919px */\n ResponsiveMode[ResponsiveMode[\"xxLarge\"] = 4] = \"xxLarge\";\n /** Width \\> 1919px */\n ResponsiveMode[ResponsiveMode[\"xxxLarge\"] = 5] = \"xxxLarge\";\n ResponsiveMode[ResponsiveMode[\"unknown\"] = 999] = \"unknown\";\n})(ResponsiveMode || (ResponsiveMode = {}));\nvar RESPONSIVE_MAX_CONSTRAINT = [479, 639, 1023, 1365, 1919, 99999999];\n/**\n * User specified mode to default to, useful for server side rendering scenarios.\n */\nvar _defaultMode;\n/**\n * Tracking the last mode we successfully rendered, which allows us to\n * paint initial renders with the correct size.\n */\nvar _lastMode;\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) {\n _defaultMode = responsiveMode;\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) {\n var currentWindow = getWindow(element);\n if (currentWindow) {\n getResponsiveMode(currentWindow);\n }\n}\nexport function getInitialResponsiveMode() {\n var _a;\n return (_a = _defaultMode !== null && _defaultMode !== void 0 ? _defaultMode : _lastMode) !== null && _a !== void 0 ? _a : ResponsiveMode.large;\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(ComposedComponent) {\n var _a;\n // eslint-disable-next-line deprecation/deprecation\n var resultClass = (_a = /** @class */ (function (_super) {\n __extends(WithResponsiveMode, _super);\n function WithResponsiveMode(props) {\n var _this = _super.call(this, props) || this;\n _this._onResize = function () {\n var responsiveMode = getResponsiveMode(_this.context.window);\n if (responsiveMode !== _this.state.responsiveMode) {\n _this.setState({\n responsiveMode: responsiveMode,\n });\n }\n };\n _this._events = new EventGroup(_this);\n _this._updateComposedComponentRef = _this._updateComposedComponentRef.bind(_this);\n _this.state = {\n responsiveMode: getInitialResponsiveMode(),\n };\n return _this;\n }\n WithResponsiveMode.prototype.componentDidMount = function () {\n this._events.on(this.context.window, 'resize', this._onResize);\n this._onResize();\n };\n WithResponsiveMode.prototype.componentWillUnmount = function () {\n this._events.dispose();\n };\n WithResponsiveMode.prototype.render = function () {\n var responsiveMode = this.state.responsiveMode;\n return responsiveMode === ResponsiveMode.unknown ? null : (React.createElement(ComposedComponent, __assign({ ref: this._updateComposedComponentRef, responsiveMode: responsiveMode }, this.props)));\n };\n return WithResponsiveMode;\n }(BaseDecorator)),\n _a.contextType = WindowContext,\n _a);\n return hoistStatics(ComposedComponent, resultClass);\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) {\n var responsiveMode = ResponsiveMode.small;\n if (currentWindow) {\n try {\n while (currentWindow.innerWidth > RESPONSIVE_MAX_CONSTRAINT[responsiveMode]) {\n responsiveMode++;\n }\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 // 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 }\n else {\n if (_defaultMode !== undefined) {\n responsiveMode = _defaultMode;\n }\n else {\n throw new Error('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 return responsiveMode;\n}\n//# sourceMappingURL=withResponsiveMode.js.map","import * as React from 'react';\nimport { getWindow } from '@fluentui/utilities';\nimport { useOnEvent } from '@fluentui/react-hooks';\nimport { getResponsiveMode, getInitialResponsiveMode } from '../decorators/withResponsiveMode';\nimport { useWindow } from '../../WindowProvider';\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 var useResponsiveMode = function (elementRef, overrideResponsiveMode) {\n var _a = React.useState(getInitialResponsiveMode()), lastResponsiveMode = _a[0], setLastResponsiveMode = _a[1];\n var onResize = React.useCallback(function () {\n var newResponsiveMode = getResponsiveMode(getWindow(elementRef.current));\n // Setting the same value should not cause a re-render.\n if (lastResponsiveMode !== newResponsiveMode) {\n setLastResponsiveMode(newResponsiveMode);\n }\n }, [elementRef, lastResponsiveMode]);\n var win = useWindow();\n useOnEvent(win, 'resize', onResize);\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(function () {\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 return overrideResponsiveMode !== null && overrideResponsiveMode !== void 0 ? overrideResponsiveMode : lastResponsiveMode;\n};\n//# sourceMappingURL=useResponsiveMode.js.map","import * as React from 'react';\nexport var MenuContext = React.createContext({});\nexport var useMenuContext = function () {\n return React.useContext(MenuContext);\n};\n//# sourceMappingURL=MenuContext.js.map","import { __assign, __rest, __spreadArray } from \"tslib\";\nimport * as React from 'react';\nimport { ContextualMenuItemType } from './ContextualMenu.types';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '../../FocusZone';\nimport { divProperties, getNativeProps, shallowCompare, assign, classNamesFunction, css, getFirstFocusable, getLastFocusable, getRTL, KeyCodes, shouldWrapFocus, isIOS, isMac, memoizeFunction, getPropsWithDefaults, getDocument, } from '../../Utilities';\nimport { hasSubmenu, getIsChecked, isItemDisabled } from '../../utilities/contextualMenu/index';\nimport { Callout } from '../../Callout';\nimport { ContextualMenuItem } from './ContextualMenuItem';\nimport { ContextualMenuSplitButton, ContextualMenuButton, ContextualMenuAnchor, } from './ContextualMenuItemWrapper/index';\nimport { concatStyleSetsWithProps } from '../../Styling';\nimport { getItemStyles } from './ContextualMenu.classNames';\nimport { useTarget, usePrevious, useAsync, useWarnings, useId, useIsomorphicLayoutEffect, } from '@fluentui/react-hooks';\nimport { useResponsiveMode, ResponsiveMode } from '../../ResponsiveMode';\nimport { MenuContext } from '../../utilities/MenuContext/index';\nvar getClassNames = classNamesFunction();\nvar getContextualMenuItemClassNames = classNamesFunction();\n// The default ContextualMenu properties have no items and beak, the default submenu direction is right and top.\nvar DEFAULT_PROPS = {\n items: [],\n shouldFocusOnMount: true,\n gapSpace: 0,\n directionalHint: DirectionalHint.bottomAutoEdge,\n beakWidth: 16,\n};\nexport function getSubmenuItems(item, options) {\n var target = options === null || options === void 0 ? void 0 : options.target;\n // eslint-disable-next-line deprecation/deprecation\n var items = item.subMenuProps ? item.subMenuProps.items : item.items;\n if (items) {\n var overrideItems = [];\n for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {\n var subItem = items_1[_i];\n if (subItem.preferMenuTargetAsEventTarget) {\n // For sub-items which need an overridden target, intercept `onClick`\n var onClick = subItem.onClick, contextItem = __rest(subItem, [\"onClick\"]);\n overrideItems.push(__assign(__assign({}, contextItem), { onClick: getOnClickWithOverrideTarget(onClick, target) }));\n }\n else {\n overrideItems.push(subItem);\n }\n }\n return overrideItems;\n }\n}\n/**\n * Returns true if a list of menu items can contain a checkbox\n */\nexport function canAnyMenuItemsCheck(items) {\n return items.some(function (item) {\n if (item.canCheck) {\n return true;\n }\n // If the item is a section, check if any of the items in the section can check.\n if (item.sectionProps && item.sectionProps.items.some(function (submenuItem) { return submenuItem.canCheck === true; })) {\n return true;\n }\n return false;\n });\n}\nvar NavigationIdleDelay = 250; /* ms */\nvar COMPONENT_NAME = 'ContextualMenu';\nvar _getMenuItemStylesFunction = memoizeFunction(function () {\n var styles = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n styles[_i] = arguments[_i];\n }\n return function (styleProps) {\n return concatStyleSetsWithProps.apply(void 0, __spreadArray([styleProps, getItemStyles], styles));\n };\n});\n//#region Custom hooks\nfunction useVisibility(props, targetWindow) {\n var _a = props.hidden, hidden = _a === void 0 ? false : _a, onMenuDismissed = props.onMenuDismissed, onMenuOpened = props.onMenuOpened;\n var previousHidden = usePrevious(hidden);\n var onMenuOpenedRef = React.useRef(onMenuOpened);\n var onMenuClosedRef = React.useRef(onMenuDismissed);\n var propsRef = React.useRef(props);\n onMenuOpenedRef.current = onMenuOpened;\n onMenuClosedRef.current = onMenuDismissed;\n propsRef.current = props;\n React.useEffect(function () {\n var _a, _b;\n // Don't issue dismissed callbacks on initial mount\n if (hidden && previousHidden === false) {\n (_a = onMenuClosedRef.current) === null || _a === void 0 ? void 0 : _a.call(onMenuClosedRef, propsRef.current);\n }\n else if (!hidden && previousHidden !== false) {\n (_b = onMenuOpenedRef.current) === null || _b === void 0 ? void 0 : _b.call(onMenuOpenedRef, propsRef.current);\n }\n }, [hidden, previousHidden]);\n // Issue onDismissedCallback on unmount\n React.useEffect(function () { return function () { var _a; return (_a = onMenuClosedRef.current) === null || _a === void 0 ? void 0 : _a.call(onMenuClosedRef, propsRef.current); }; }, []);\n}\nfunction useSubMenuState(_a, dismiss) {\n var hidden = _a.hidden, items = _a.items, theme = _a.theme, className = _a.className, id = _a.id, menuTarget = _a.target;\n var _b = React.useState(), expandedMenuItemKey = _b[0], setExpandedMenuItemKey = _b[1];\n var _c = React.useState(), submenuTarget = _c[0], setSubmenuTarget = _c[1];\n /** True if the menu was expanded by mouse click OR hover (as opposed to by keyboard) */\n var _d = React.useState(), shouldFocusOnContainer = _d[0], setShouldFocusOnContainer = _d[1];\n var subMenuId = useId(COMPONENT_NAME, id);\n var closeSubMenu = React.useCallback(function () {\n setShouldFocusOnContainer(undefined);\n setExpandedMenuItemKey(undefined);\n setSubmenuTarget(undefined);\n }, []);\n var openSubMenu = React.useCallback(function (_a, target, focusContainer) {\n var submenuItemKey = _a.key;\n if (expandedMenuItemKey === submenuItemKey) {\n return;\n }\n target.focus();\n setShouldFocusOnContainer(focusContainer);\n setExpandedMenuItemKey(submenuItemKey);\n setSubmenuTarget(target);\n }, [expandedMenuItemKey]);\n React.useEffect(function () {\n if (hidden) {\n closeSubMenu();\n }\n }, [hidden, closeSubMenu]);\n var onSubMenuDismiss = useOnSubmenuDismiss(dismiss, closeSubMenu);\n var getSubmenuProps = function () {\n var item = findItemByKeyFromItems(expandedMenuItemKey, items);\n var submenuProps = null;\n if (item) {\n submenuProps = {\n items: getSubmenuItems(item, { target: menuTarget }),\n target: submenuTarget,\n onDismiss: onSubMenuDismiss,\n isSubMenu: true,\n id: subMenuId,\n shouldFocusOnMount: true,\n shouldFocusOnContainer: shouldFocusOnContainer,\n directionalHint: getRTL(theme) ? DirectionalHint.leftTopEdge : DirectionalHint.rightTopEdge,\n className: className,\n gapSpace: 0,\n isBeakVisible: false,\n };\n if (item.subMenuProps) {\n assign(submenuProps, item.subMenuProps);\n }\n if (item.preferMenuTargetAsEventTarget) {\n var onItemClick = item.onItemClick;\n submenuProps.onItemClick = getOnClickWithOverrideTarget(onItemClick, menuTarget);\n }\n }\n return submenuProps;\n };\n return [expandedMenuItemKey, openSubMenu, getSubmenuProps, onSubMenuDismiss];\n}\nfunction useShouldUpdateFocusOnMouseMove(_a) {\n var delayUpdateFocusOnHover = _a.delayUpdateFocusOnHover, hidden = _a.hidden;\n var shouldUpdateFocusOnMouseEvent = React.useRef(!delayUpdateFocusOnHover);\n var gotMouseMove = React.useRef(false);\n React.useEffect(function () {\n shouldUpdateFocusOnMouseEvent.current = !delayUpdateFocusOnHover;\n gotMouseMove.current = hidden ? false : !delayUpdateFocusOnHover && gotMouseMove.current;\n }, [delayUpdateFocusOnHover, hidden]);\n var onMenuFocusCapture = React.useCallback(function () {\n if (delayUpdateFocusOnHover) {\n shouldUpdateFocusOnMouseEvent.current = false;\n }\n }, [delayUpdateFocusOnHover]);\n return [shouldUpdateFocusOnMouseEvent, gotMouseMove, onMenuFocusCapture];\n}\nfunction usePreviousActiveElement(_a, targetWindow) {\n var hidden = _a.hidden, onRestoreFocus = _a.onRestoreFocus;\n var previousActiveElement = React.useRef();\n var tryFocusPreviousActiveElement = React.useCallback(function (options) {\n var _a, _b;\n if (onRestoreFocus) {\n onRestoreFocus(options);\n }\n else if (options === null || options === void 0 ? void 0 : options.documentContainsFocus) {\n // Make sure that the focus method actually exists\n // In some cases the object might exist but not be a real element.\n // This is primarily for IE 11 and should be removed once IE 11 is no longer in use.\n (_b = (_a = previousActiveElement.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);\n }\n }, [onRestoreFocus]);\n useIsomorphicLayoutEffect(function () {\n var _a;\n if (!hidden) {\n previousActiveElement.current = targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.document.activeElement;\n }\n else if (previousActiveElement.current) {\n tryFocusPreviousActiveElement({\n originalElement: previousActiveElement.current,\n containsFocus: true,\n documentContainsFocus: ((_a = getDocument()) === null || _a === void 0 ? void 0 : _a.hasFocus()) || false,\n });\n previousActiveElement.current = undefined;\n }\n }, [hidden, targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.document.activeElement, tryFocusPreviousActiveElement]);\n return [tryFocusPreviousActiveElement];\n}\nfunction useKeyHandlers(_a, dismiss, hostElement, openSubMenu) {\n var theme = _a.theme, isSubMenu = _a.isSubMenu, _b = _a.focusZoneProps, _c = _b === void 0 ? {} : _b, checkForNoWrap = _c.checkForNoWrap, _d = _c.direction, focusZoneDirection = _d === void 0 ? FocusZoneDirection.vertical : _d;\n /** True if the most recent keydown event was for alt (option) or meta (command). */\n var lastKeyDownWasAltOrMeta = React.useRef();\n /**\n * Calls `shouldHandleKey` to determine whether the keyboard event should be handled;\n * if so, stops event propagation and dismisses menu(s).\n * @param ev - The keyboard event.\n * @param shouldHandleKey - Returns whether we should handle this keyboard event.\n * @param dismissAllMenus - If true, dismiss all menus. Otherwise, dismiss only the current menu.\n * Only does anything if `shouldHandleKey` returns true.\n * @returns Whether the event was handled.\n */\n var keyHandler = function (ev, shouldHandleKey, dismissAllMenus) {\n var handled = false;\n if (shouldHandleKey(ev)) {\n dismiss(ev, dismissAllMenus);\n ev.preventDefault();\n ev.stopPropagation();\n handled = true;\n }\n return handled;\n };\n /**\n * Checks if the submenu should be closed\n */\n var shouldCloseSubMenu = function (ev) {\n var submenuCloseKey = getRTL(theme) ? KeyCodes.right : KeyCodes.left;\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which !== submenuCloseKey || !isSubMenu) {\n return false;\n }\n return !!(focusZoneDirection === FocusZoneDirection.vertical ||\n (checkForNoWrap && !shouldWrapFocus(ev.target, 'data-no-horizontal-wrap')));\n };\n var shouldHandleKeyDown = function (ev) {\n return (\n // eslint-disable-next-line deprecation/deprecation\n ev.which === KeyCodes.escape ||\n shouldCloseSubMenu(ev) ||\n // eslint-disable-next-line deprecation/deprecation\n (ev.which === KeyCodes.up && (ev.altKey || ev.metaKey)));\n };\n var onKeyDown = function (ev) {\n // Take note if we are processing an alt (option) or meta (command) keydown.\n // See comment in shouldHandleKeyUp for reasoning.\n lastKeyDownWasAltOrMeta.current = isAltOrMeta(ev);\n // On Mac, pressing escape dismisses all levels of native context menus\n // eslint-disable-next-line deprecation/deprecation\n var dismissAllMenus = ev.which === KeyCodes.escape && (isMac() || isIOS());\n return keyHandler(ev, shouldHandleKeyDown, dismissAllMenus);\n };\n /**\n * We close the menu on key up only if ALL of the following are true:\n * - Most recent key down was alt or meta (command)\n * - The alt/meta key down was NOT followed by some other key (such as down/up arrow to\n * expand/collapse the menu)\n * - We're not on a Mac (or iOS)\n *\n * This is because on Windows, pressing alt moves focus to the application menu bar or similar,\n * closing any open context menus. There is not a similar behavior on Macs.\n */\n var shouldHandleKeyUp = function (ev) {\n var keyPressIsAltOrMetaAlone = lastKeyDownWasAltOrMeta.current && isAltOrMeta(ev);\n lastKeyDownWasAltOrMeta.current = false;\n return !!keyPressIsAltOrMetaAlone && !(isIOS() || isMac());\n };\n var onKeyUp = function (ev) {\n return keyHandler(ev, shouldHandleKeyUp, true /* dismissAllMenus */);\n };\n var onMenuKeyDown = function (ev) {\n // Mark as handled if onKeyDown returns true (for handling collapse cases)\n // or if we are attempting to expand a submenu\n var handled = onKeyDown(ev);\n if (handled || !hostElement.current) {\n return;\n }\n // If we have a modifier key being pressed, we do not want to move focus.\n // Otherwise, handle up and down keys.\n var hasModifier = !!(ev.altKey || ev.metaKey);\n // eslint-disable-next-line deprecation/deprecation\n var isUp = ev.which === KeyCodes.up;\n // eslint-disable-next-line deprecation/deprecation\n var isDown = ev.which === KeyCodes.down;\n if (!hasModifier && (isUp || isDown)) {\n var elementToFocus = isUp\n ? getLastFocusable(hostElement.current, hostElement.current.lastChild, true)\n : getFirstFocusable(hostElement.current, hostElement.current.firstChild, true);\n if (elementToFocus) {\n elementToFocus.focus();\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n };\n var onItemKeyDown = function (item, ev) {\n var openKey = getRTL(theme) ? KeyCodes.left : KeyCodes.right;\n if (!item.disabled &&\n // eslint-disable-next-line deprecation/deprecation\n (ev.which === openKey || ev.which === KeyCodes.enter || (ev.which === KeyCodes.down && (ev.altKey || ev.metaKey)))) {\n openSubMenu(item, ev.currentTarget);\n ev.preventDefault();\n }\n };\n return [onKeyDown, onKeyUp, onMenuKeyDown, onItemKeyDown];\n}\nfunction useScrollHandler(asyncTracker) {\n var isScrollIdle = React.useRef(true);\n var scrollIdleTimeoutId = React.useRef();\n /**\n * Scroll handler for the callout to make sure the mouse events\n * for updating focus are not interacting during scroll\n */\n var onScroll = function () {\n if (!isScrollIdle.current && scrollIdleTimeoutId.current !== undefined) {\n asyncTracker.clearTimeout(scrollIdleTimeoutId.current);\n scrollIdleTimeoutId.current = undefined;\n }\n else {\n isScrollIdle.current = false;\n }\n scrollIdleTimeoutId.current = asyncTracker.setTimeout(function () {\n isScrollIdle.current = true;\n }, NavigationIdleDelay);\n };\n return [onScroll, isScrollIdle];\n}\nfunction useOnSubmenuDismiss(dismiss, closeSubMenu) {\n var isMountedRef = React.useRef(false);\n React.useEffect(function () {\n isMountedRef.current = true;\n return function () {\n isMountedRef.current = false;\n };\n }, []);\n /**\n * This function is called ASYNCHRONOUSLY, and so there is a chance it is called\n * after the component is unmounted. The isMountedRef is added to prevent\n * from calling setState() after unmount. Do NOT copy this pattern in synchronous\n * code.\n */\n var onSubMenuDismiss = function (ev, dismissAll) {\n if (dismissAll) {\n dismiss(ev, dismissAll);\n }\n else if (isMountedRef.current) {\n closeSubMenu();\n }\n };\n return onSubMenuDismiss;\n}\nfunction useSubmenuEnterTimer(_a, asyncTracker) {\n var _b = _a.subMenuHoverDelay, subMenuHoverDelay = _b === void 0 ? NavigationIdleDelay : _b;\n var enterTimerRef = React.useRef(undefined);\n var cancelSubMenuTimer = function () {\n if (enterTimerRef.current !== undefined) {\n asyncTracker.clearTimeout(enterTimerRef.current);\n enterTimerRef.current = undefined;\n }\n };\n var startSubmenuTimer = function (onTimerExpired) {\n enterTimerRef.current = asyncTracker.setTimeout(function () {\n onTimerExpired();\n cancelSubMenuTimer();\n }, subMenuHoverDelay);\n };\n return [cancelSubMenuTimer, startSubmenuTimer, enterTimerRef];\n}\nfunction useMouseHandlers(props, isScrollIdle, subMenuEntryTimer, targetWindow, shouldUpdateFocusOnMouseEvent, gotMouseMove, expandedMenuItemKey, hostElement, startSubmenuTimer, cancelSubMenuTimer, openSubMenu, onSubMenuDismiss, dismiss) {\n var menuTarget = props.target;\n var onItemMouseEnterBase = function (item, ev, target) {\n if (shouldUpdateFocusOnMouseEvent.current) {\n gotMouseMove.current = true;\n }\n if (shouldIgnoreMouseEvent()) {\n return;\n }\n updateFocusOnMouseEvent(item, ev, target);\n };\n var onItemMouseMoveBase = function (item, ev, target) {\n var targetElement = ev.currentTarget;\n // Always do this check to make sure we record a mouseMove if needed (even if we are timed out)\n if (shouldUpdateFocusOnMouseEvent.current) {\n gotMouseMove.current = true;\n }\n else {\n return;\n }\n if (!isScrollIdle.current ||\n subMenuEntryTimer.current !== undefined ||\n targetElement === (targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.document.activeElement)) {\n return;\n }\n updateFocusOnMouseEvent(item, ev, target);\n };\n var shouldIgnoreMouseEvent = function () {\n return !isScrollIdle.current || !gotMouseMove.current;\n };\n var onMouseItemLeave = function (item, ev) {\n var _a;\n if (shouldIgnoreMouseEvent()) {\n return;\n }\n cancelSubMenuTimer();\n if (expandedMenuItemKey !== undefined) {\n return;\n }\n /**\n * IE11 focus() method forces parents to scroll to top of element.\n * Edge and IE expose a setActive() function for focusable divs that\n * sets the page focus but does not scroll the parent element.\n */\n if (hostElement.current.setActive) {\n try {\n hostElement.current.setActive();\n }\n catch (e) {\n /* no-op */\n }\n }\n else {\n (_a = hostElement.current) === null || _a === void 0 ? void 0 : _a.focus();\n }\n };\n /**\n * Handles updating focus when mouseEnter or mouseMove fire.\n * As part of updating focus, This function will also update\n * the expand/collapse state accordingly.\n */\n var updateFocusOnMouseEvent = function (item, ev, target) {\n var targetElement = target ? target : ev.currentTarget;\n if (item.key === expandedMenuItemKey) {\n return;\n }\n cancelSubMenuTimer();\n // If the menu is not expanded we can update focus without any delay\n if (expandedMenuItemKey === undefined) {\n targetElement.focus();\n }\n // Delay updating expanding/dismissing the submenu\n // and only set focus if we have not already done so\n if (hasSubmenu(item)) {\n ev.stopPropagation();\n startSubmenuTimer(function () {\n targetElement.focus();\n openSubMenu(item, targetElement, true);\n });\n }\n else {\n startSubmenuTimer(function () {\n onSubMenuDismiss(ev);\n targetElement.focus();\n });\n }\n };\n var onItemClick = function (item, ev) {\n onItemClickBase(item, ev, ev.currentTarget);\n };\n var onItemClickBase = function (item, ev, target) {\n var items = getSubmenuItems(item, { target: menuTarget });\n // Cancel an async menu item hover timeout action from being taken and instead\n // just trigger the click event instead.\n cancelSubMenuTimer();\n if (!hasSubmenu(item) && (!items || !items.length)) {\n // This is an item without a menu. Click it.\n executeItemClick(item, ev);\n }\n else {\n if (item.key !== expandedMenuItemKey) {\n // This has a collapsed sub menu. Expand it.\n // focus on the container by default when the menu is opened with a click event\n // this differentiates from a keyboard interaction triggering the click event\n var shouldFocusOnContainer = typeof props.shouldFocusOnContainer === 'boolean'\n ? props.shouldFocusOnContainer\n : ev.nativeEvent.pointerType === 'mouse';\n openSubMenu(item, target, shouldFocusOnContainer);\n }\n }\n ev.stopPropagation();\n ev.preventDefault();\n };\n var onAnchorClick = function (item, ev) {\n executeItemClick(item, ev);\n ev.stopPropagation();\n };\n var executeItemClick = function (item, ev) {\n if (item.disabled || item.isDisabled) {\n return;\n }\n if (item.preferMenuTargetAsEventTarget) {\n overrideTarget(ev, menuTarget);\n }\n var shouldDismiss = false;\n if (item.onClick) {\n shouldDismiss = !!item.onClick(ev, item);\n }\n else if (props.onItemClick) {\n shouldDismiss = !!props.onItemClick(ev, item);\n }\n if (shouldDismiss || !ev.defaultPrevented) {\n dismiss(ev, true);\n }\n };\n return [\n onItemMouseEnterBase,\n onItemMouseMoveBase,\n onMouseItemLeave,\n onItemClick,\n onAnchorClick,\n executeItemClick,\n onItemClickBase,\n ];\n}\n//#endregion\nexport var ContextualMenuBase = React.memo(React.forwardRef(function (propsWithoutDefaults, forwardedRef) {\n var _a;\n var _b = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults), ref = _b.ref, props = __rest(_b, [\"ref\"]);\n var hostElement = React.useRef(null);\n var asyncTracker = useAsync();\n var menuId = useId(COMPONENT_NAME, props.id);\n useWarnings({\n name: COMPONENT_NAME,\n props: props,\n deprecations: {\n getMenuClassNames: 'styles',\n },\n });\n var dismiss = function (ev, dismissAll) { var _a; return (_a = props.onDismiss) === null || _a === void 0 ? void 0 : _a.call(props, ev, dismissAll); };\n var _c = useTarget(props.target, hostElement), targetRef = _c[0], targetWindow = _c[1];\n var tryFocusPreviousActiveElement = usePreviousActiveElement(props, targetWindow)[0];\n var _d = useSubMenuState(props, dismiss), expandedMenuItemKey = _d[0], openSubMenu = _d[1], getSubmenuProps = _d[2], onSubMenuDismiss = _d[3];\n var _e = useShouldUpdateFocusOnMouseMove(props), shouldUpdateFocusOnMouseEvent = _e[0], gotMouseMove = _e[1], onMenuFocusCapture = _e[2];\n var _f = useScrollHandler(asyncTracker), onScroll = _f[0], isScrollIdle = _f[1];\n var _g = useSubmenuEnterTimer(props, asyncTracker), cancelSubMenuTimer = _g[0], startSubmenuTimer = _g[1], subMenuEntryTimer = _g[2];\n var responsiveMode = useResponsiveMode(hostElement, props.responsiveMode);\n useVisibility(props, targetWindow);\n var _h = useKeyHandlers(props, dismiss, hostElement, openSubMenu), onKeyDown = _h[0], onKeyUp = _h[1], onMenuKeyDown = _h[2], onItemKeyDown = _h[3];\n var _j = useMouseHandlers(props, isScrollIdle, subMenuEntryTimer, targetWindow, shouldUpdateFocusOnMouseEvent, gotMouseMove, expandedMenuItemKey, hostElement, startSubmenuTimer, cancelSubMenuTimer, openSubMenu, onSubMenuDismiss, dismiss), onItemMouseEnterBase = _j[0], onItemMouseMoveBase = _j[1], onMouseItemLeave = _j[2], onItemClick = _j[3], onAnchorClick = _j[4], executeItemClick = _j[5], onItemClickBase = _j[6];\n //#region Render helpers\n var onDefaultRenderMenuList = function (menuListProps, \n // eslint-disable-next-line deprecation/deprecation\n menuClassNames, defaultRender) {\n var indexCorrection = 0;\n var items = menuListProps.items, totalItemCount = menuListProps.totalItemCount, hasCheckmarks = menuListProps.hasCheckmarks, hasIcons = menuListProps.hasIcons;\n return (React.createElement(\"ul\", { className: menuClassNames.list, onKeyDown: onKeyDown, onKeyUp: onKeyUp, role: 'presentation' }, items.map(function (item, index) {\n var menuItem = renderMenuItem(item, index, indexCorrection, totalItemCount, hasCheckmarks, hasIcons, menuClassNames);\n if (item.itemType !== ContextualMenuItemType.Divider && item.itemType !== ContextualMenuItemType.Header) {\n var indexIncrease = item.customOnRenderListLength ? item.customOnRenderListLength : 1;\n indexCorrection += indexIncrease;\n }\n return menuItem;\n })));\n };\n var renderFocusZone = function (children, adjustedFocusZoneProps) {\n var _a = props.focusZoneAs, ChildrenRenderer = _a === void 0 ? FocusZone : _a;\n return React.createElement(ChildrenRenderer, __assign({}, adjustedFocusZoneProps), children);\n };\n /**\n * !!!IMPORTANT!!! Avoid mutating `item: IContextualMenuItem` argument. It will\n * cause the menu items to always re-render because the component update is based on shallow comparison.\n */\n var renderMenuItem = function (item, index, focusableElementIndex, totalItemCount, hasCheckmarks, hasIcons, \n // eslint-disable-next-line deprecation/deprecation\n menuClassNames) {\n var _a;\n var renderedItems = [];\n var iconProps = item.iconProps || { iconName: 'None' };\n var getItemClassNames = item.getItemClassNames, // eslint-disable-line deprecation/deprecation\n itemProps = item.itemProps;\n var styles = itemProps ? itemProps.styles : undefined;\n // We only send a dividerClassName when the item to be rendered is a divider.\n // For all other cases, the default divider style is used.\n var dividerClassName = item.itemType === ContextualMenuItemType.Divider ? item.className : undefined;\n var subMenuIconClassName = item.submenuIconProps ? item.submenuIconProps.className : '';\n // eslint-disable-next-line deprecation/deprecation\n var itemClassNames;\n // IContextualMenuItem#getItemClassNames for backwards compatibility\n // otherwise uses mergeStyles for class names.\n if (getItemClassNames) {\n itemClassNames = getItemClassNames(props.theme, isItemDisabled(item), expandedMenuItemKey === item.key, !!getIsChecked(item), !!item.href, iconProps.iconName !== 'None', item.className, dividerClassName, iconProps.className, subMenuIconClassName, item.primaryDisabled);\n }\n else {\n var itemStyleProps = {\n theme: props.theme,\n disabled: isItemDisabled(item),\n expanded: expandedMenuItemKey === item.key,\n checked: !!getIsChecked(item),\n isAnchorLink: !!item.href,\n knownIcon: iconProps.iconName !== 'None',\n itemClassName: item.className,\n dividerClassName: dividerClassName,\n iconClassName: iconProps.className,\n subMenuClassName: subMenuIconClassName,\n primaryDisabled: item.primaryDisabled,\n };\n // We need to generate default styles then override if styles are provided\n // since the ContextualMenu currently handles item classNames.\n itemClassNames = getContextualMenuItemClassNames(_getMenuItemStylesFunction((_a = menuClassNames.subComponentStyles) === null || _a === void 0 ? void 0 : _a.menuItem, styles), itemStyleProps);\n }\n // eslint-disable-next-line deprecation/deprecation\n if (item.text === '-' || item.name === '-') {\n item.itemType = ContextualMenuItemType.Divider;\n }\n switch (item.itemType) {\n case ContextualMenuItemType.Divider:\n renderedItems.push(renderSeparator(index, itemClassNames));\n break;\n case ContextualMenuItemType.Header:\n renderedItems.push(renderSeparator(index, itemClassNames));\n var headerItem = renderHeaderMenuItem(item, itemClassNames, menuClassNames, index, hasCheckmarks, hasIcons);\n renderedItems.push(renderListItem(headerItem, item.key || index, itemClassNames, item.title));\n break;\n case ContextualMenuItemType.Section:\n renderedItems.push(renderSectionItem(item, itemClassNames, menuClassNames, index, hasCheckmarks, hasIcons));\n break;\n default:\n var defaultRenderNormalItem = function () {\n return renderNormalItem(item, itemClassNames, index, focusableElementIndex, totalItemCount, hasCheckmarks, hasIcons);\n };\n var menuItem = props.onRenderContextualMenuItem\n ? props.onRenderContextualMenuItem(item, defaultRenderNormalItem)\n : defaultRenderNormalItem();\n renderedItems.push(renderListItem(menuItem, item.key || index, itemClassNames, item.title));\n break;\n }\n // Since multiple nodes *could* be rendered, wrap them all in a fragment with this item's key.\n // This ensures the reconciler handles multi-item output per-node correctly and does not re-mount content.\n return React.createElement(React.Fragment, { key: item.key }, renderedItems);\n };\n var defaultMenuItemRenderer = function (item, \n // eslint-disable-next-line deprecation/deprecation\n menuClassNames) {\n var index = item.index, focusableElementIndex = item.focusableElementIndex, totalItemCount = item.totalItemCount, hasCheckmarks = item.hasCheckmarks, hasIcons = item.hasIcons;\n return renderMenuItem(item, index, focusableElementIndex, totalItemCount, hasCheckmarks, hasIcons, menuClassNames);\n };\n var renderSectionItem = function (sectionItem, \n // eslint-disable-next-line deprecation/deprecation\n itemClassNames, \n // eslint-disable-next-line deprecation/deprecation\n menuClassNames, index, hasCheckmarks, hasIcons) {\n var sectionProps = sectionItem.sectionProps;\n if (!sectionProps) {\n return;\n }\n var headerItem;\n var groupProps;\n if (sectionProps.title) {\n var headerContextualMenuItem = undefined;\n var ariaLabelledby = '';\n if (typeof sectionProps.title === 'string') {\n // Since title is a user-facing string, it needs to be stripped\n // of whitespace in order to build a valid element ID\n var id_1 = menuId + sectionProps.title.replace(/\\s/g, '');\n headerContextualMenuItem = {\n key: \"section-\" + sectionProps.title + \"-title\",\n itemType: ContextualMenuItemType.Header,\n text: sectionProps.title,\n id: id_1,\n };\n ariaLabelledby = id_1;\n }\n else {\n var id_2 = sectionProps.title.id || menuId + sectionProps.title.key.replace(/\\s/g, '');\n headerContextualMenuItem = __assign(__assign({}, sectionProps.title), { id: id_2 });\n ariaLabelledby = id_2;\n }\n if (headerContextualMenuItem) {\n groupProps = {\n role: 'group',\n 'aria-labelledby': ariaLabelledby,\n };\n headerItem = renderHeaderMenuItem(headerContextualMenuItem, itemClassNames, menuClassNames, index, hasCheckmarks, hasIcons);\n }\n }\n if (sectionProps.items && sectionProps.items.length > 0) {\n return (React.createElement(\"li\", { role: \"presentation\", key: sectionProps.key || sectionItem.key || \"section-\" + index },\n React.createElement(\"div\", __assign({}, groupProps),\n React.createElement(\"ul\", { className: menuClassNames.list, role: \"presentation\" },\n sectionProps.topDivider && renderSeparator(index, itemClassNames, true, true),\n headerItem && renderListItem(headerItem, sectionItem.key || index, itemClassNames, sectionItem.title),\n sectionProps.items.map(function (contextualMenuItem, itemsIndex) {\n return renderMenuItem(contextualMenuItem, itemsIndex, itemsIndex, sectionProps.items.length, hasCheckmarks, hasIcons, menuClassNames);\n }),\n sectionProps.bottomDivider && renderSeparator(index, itemClassNames, false, true)))));\n }\n };\n var renderListItem = function (content, key, classNames, // eslint-disable-line deprecation/deprecation\n title) {\n return (React.createElement(\"li\", { role: \"presentation\", title: title, key: key, className: classNames.item }, content));\n };\n var renderSeparator = function (index, classNames, // eslint-disable-line deprecation/deprecation\n top, fromSection) {\n if (fromSection || index > 0) {\n return (React.createElement(\"li\", { role: \"separator\", key: 'separator-' + index + (top === undefined ? '' : top ? '-top' : '-bottom'), className: classNames.divider, \"aria-hidden\": \"true\" }));\n }\n return null;\n };\n var renderNormalItem = function (item, classNames, // eslint-disable-line deprecation/deprecation\n index, focusableElementIndex, totalItemCount, hasCheckmarks, hasIcons) {\n if (item.onRender) {\n return item.onRender(__assign({ 'aria-posinset': focusableElementIndex + 1, 'aria-setsize': totalItemCount }, item), dismiss);\n }\n var contextualMenuItemAs = props.contextualMenuItemAs;\n var commonProps = {\n item: item,\n classNames: classNames,\n index: index,\n focusableElementIndex: focusableElementIndex,\n totalItemCount: totalItemCount,\n hasCheckmarks: hasCheckmarks,\n hasIcons: hasIcons,\n contextualMenuItemAs: contextualMenuItemAs,\n onItemMouseEnter: onItemMouseEnterBase,\n onItemMouseLeave: onMouseItemLeave,\n onItemMouseMove: onItemMouseMoveBase,\n onItemMouseDown: onItemMouseDown,\n executeItemClick: executeItemClick,\n onItemKeyDown: onItemKeyDown,\n expandedMenuItemKey: expandedMenuItemKey,\n openSubMenu: openSubMenu,\n dismissSubMenu: onSubMenuDismiss,\n dismissMenu: dismiss,\n };\n if (item.href) {\n return React.createElement(ContextualMenuAnchor, __assign({}, commonProps, { onItemClick: onAnchorClick }));\n }\n if (item.split && hasSubmenu(item)) {\n return (React.createElement(ContextualMenuSplitButton, __assign({}, commonProps, { onItemClick: onItemClick, onItemClickBase: onItemClickBase, onTap: cancelSubMenuTimer })));\n }\n return React.createElement(ContextualMenuButton, __assign({}, commonProps, { onItemClick: onItemClick, onItemClickBase: onItemClickBase }));\n };\n var renderHeaderMenuItem = function (item, \n // eslint-disable-next-line deprecation/deprecation\n itemClassNames, \n // eslint-disable-next-line deprecation/deprecation\n menuClassNames, index, hasCheckmarks, hasIcons) {\n var _a = props.contextualMenuItemAs, ChildrenRenderer = _a === void 0 ? ContextualMenuItem : _a;\n var itemProps = item.itemProps, id = item.id;\n var divHtmlProperties = itemProps && getNativeProps(itemProps, divProperties);\n return (\n // eslint-disable-next-line deprecation/deprecation\n React.createElement(\"div\", __assign({ id: id, className: menuClassNames.header }, divHtmlProperties, { style: item.style }),\n React.createElement(ChildrenRenderer, __assign({ item: item, classNames: itemClassNames, index: index, onCheckmarkClick: hasCheckmarks ? onItemClick : undefined, hasIcons: hasIcons }, itemProps))));\n };\n //#endregion\n //#region Main render\n var isBeakVisible = props.isBeakVisible;\n var items = props.items, labelElementId = props.labelElementId, id = props.id, className = props.className, beakWidth = props.beakWidth, directionalHint = props.directionalHint, directionalHintForRTL = props.directionalHintForRTL, alignTargetEdge = props.alignTargetEdge, gapSpace = props.gapSpace, coverTarget = props.coverTarget, ariaLabel = props.ariaLabel, doNotLayer = props.doNotLayer, target = props.target, bounds = props.bounds, useTargetWidth = props.useTargetWidth, useTargetAsMinWidth = props.useTargetAsMinWidth, directionalHintFixed = props.directionalHintFixed, shouldFocusOnMount = props.shouldFocusOnMount, shouldFocusOnContainer = props.shouldFocusOnContainer, title = props.title, styles = props.styles, theme = props.theme, calloutProps = props.calloutProps, _k = props.onRenderSubMenu, onRenderSubMenu = _k === void 0 ? onDefaultRenderSubMenu : _k, _l = props.onRenderMenuList, onRenderMenuList = _l === void 0 ? function (menuListProps, defaultRender) { return onDefaultRenderMenuList(menuListProps, classNames, defaultRender); } : _l, focusZoneProps = props.focusZoneProps, \n // eslint-disable-next-line deprecation/deprecation\n getMenuClassNames = props.getMenuClassNames;\n var classNames = getMenuClassNames\n ? getMenuClassNames(theme, className)\n : getClassNames(styles, {\n theme: theme,\n className: className,\n });\n var hasIcons = itemsHaveIcons(items);\n function itemsHaveIcons(contextualMenuItems) {\n for (var _i = 0, contextualMenuItems_1 = contextualMenuItems; _i < contextualMenuItems_1.length; _i++) {\n var item = contextualMenuItems_1[_i];\n if (item.iconProps) {\n return true;\n }\n if (item.itemType === ContextualMenuItemType.Section &&\n item.sectionProps &&\n itemsHaveIcons(item.sectionProps.items)) {\n return true;\n }\n }\n return false;\n }\n var adjustedFocusZoneProps = __assign(__assign({ direction: FocusZoneDirection.vertical, handleTabKey: FocusZoneTabbableElements.all, isCircularNavigation: true }, focusZoneProps), { className: css(classNames.root, (_a = props.focusZoneProps) === null || _a === void 0 ? void 0 : _a.className) });\n var hasCheckmarks = canAnyMenuItemsCheck(items);\n var submenuProps = expandedMenuItemKey && props.hidden !== true ? getSubmenuProps() : null;\n isBeakVisible = isBeakVisible === undefined ? responsiveMode <= ResponsiveMode.medium : isBeakVisible;\n /**\n * When useTargetWidth is true, get the width of the target element and apply it for the context menu container\n */\n var contextMenuStyle;\n var targetAsHtmlElement = targetRef.current;\n if ((useTargetWidth || useTargetAsMinWidth) && targetAsHtmlElement && targetAsHtmlElement.offsetWidth) {\n var targetBoundingRect = targetAsHtmlElement.getBoundingClientRect();\n var targetWidth = targetBoundingRect.width - 2; /* Accounts for 1px border */\n if (useTargetWidth) {\n contextMenuStyle = {\n width: targetWidth,\n };\n }\n else if (useTargetAsMinWidth) {\n contextMenuStyle = {\n minWidth: targetWidth,\n };\n }\n }\n // The menu should only return if items were provided, if no items were provided then it should not appear.\n if (items && items.length > 0) {\n var totalItemCount_1 = 0;\n for (var _i = 0, items_2 = items; _i < items_2.length; _i++) {\n var item = items_2[_i];\n if (item.itemType !== ContextualMenuItemType.Divider && item.itemType !== ContextualMenuItemType.Header) {\n var itemCount = item.customOnRenderListLength ? item.customOnRenderListLength : 1;\n totalItemCount_1 += itemCount;\n }\n }\n var calloutStyles_1 = classNames.subComponentStyles\n ? classNames.subComponentStyles.callout\n : undefined;\n return (React.createElement(MenuContext.Consumer, null, function (menuContext) { return (React.createElement(Callout, __assign({ styles: calloutStyles_1, onRestoreFocus: tryFocusPreviousActiveElement }, calloutProps, { target: target || menuContext.target, isBeakVisible: isBeakVisible, beakWidth: beakWidth, directionalHint: directionalHint, directionalHintForRTL: directionalHintForRTL, gapSpace: gapSpace, coverTarget: coverTarget, doNotLayer: doNotLayer, className: css('ms-ContextualMenu-Callout', calloutProps && calloutProps.className), setInitialFocus: shouldFocusOnMount, onDismiss: props.onDismiss || menuContext.onDismiss, onScroll: onScroll, bounds: bounds, directionalHintFixed: directionalHintFixed, alignTargetEdge: alignTargetEdge, hidden: props.hidden || menuContext.hidden, ref: forwardedRef }),\n React.createElement(\"div\", { style: contextMenuStyle, ref: hostElement, id: id, className: classNames.container, tabIndex: shouldFocusOnContainer ? 0 : -1, onKeyDown: onMenuKeyDown, onKeyUp: onKeyUp, onFocusCapture: onMenuFocusCapture, \"aria-label\": ariaLabel, \"aria-labelledby\": labelElementId, role: 'menu' },\n title && React.createElement(\"div\", { className: classNames.title },\n \" \",\n title,\n \" \"),\n items && items.length\n ? renderFocusZone(onRenderMenuList({\n ariaLabel: ariaLabel,\n items: items,\n totalItemCount: totalItemCount_1,\n hasCheckmarks: hasCheckmarks,\n hasIcons: hasIcons,\n defaultMenuItemRenderer: function (item) {\n return defaultMenuItemRenderer(item, classNames);\n },\n labelElementId: labelElementId,\n }, function (menuListProps, defaultRender) { return onDefaultRenderMenuList(menuListProps, classNames, defaultRender); }), adjustedFocusZoneProps)\n : null,\n submenuProps && onRenderSubMenu(submenuProps, onDefaultRenderSubMenu)))); }));\n }\n else {\n return null;\n }\n //#endregion\n}), function (prevProps, newProps) {\n if (!newProps.shouldUpdateWhenHidden && prevProps.hidden && newProps.hidden) {\n // Do not update when hidden.\n return true;\n }\n return shallowCompare(prevProps, newProps);\n});\nContextualMenuBase.displayName = 'ContextualMenuBase';\n/**\n * Returns true if the key for the event is alt (Mac option) or meta (Mac command).\n */\nfunction isAltOrMeta(ev) {\n // eslint-disable-next-line deprecation/deprecation\n return ev.which === KeyCodes.alt || ev.key === 'Meta';\n}\nfunction onItemMouseDown(item, ev) {\n var _a;\n (_a = item.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(item, item, ev);\n}\nfunction onDefaultRenderSubMenu(subMenuProps, defaultRender) {\n throw Error('ContextualMenuBase: onRenderSubMenu callback is null or undefined. ' +\n 'Please ensure to set `onRenderSubMenu` property either manually or with `styled` helper.');\n}\n/**\n * Returns the item that matches a given key if any.\n * @param key - The key of the item to match\n * @param items - The items to look for the key\n */\nfunction findItemByKeyFromItems(key, items) {\n for (var _i = 0, items_3 = items; _i < items_3.length; _i++) {\n var item = items_3[_i];\n if (item.itemType === ContextualMenuItemType.Section && item.sectionProps) {\n var match = findItemByKeyFromItems(key, item.sectionProps.items);\n if (match) {\n return match;\n }\n }\n else if (item.key && item.key === key) {\n return item;\n }\n }\n}\nfunction getOnClickWithOverrideTarget(onClick, target) {\n return onClick\n ? function (ev, item) {\n overrideTarget(ev, target);\n return onClick(ev, item);\n }\n : onClick;\n}\nfunction overrideTarget(ev, target) {\n if (ev && target) {\n ev.persist();\n if (target instanceof Event) {\n ev.target = target.target;\n }\n else if (target instanceof Element) {\n ev.target = target;\n }\n }\n}\n//# sourceMappingURL=ContextualMenu.base.js.map","import { getGlobalClassNames, FontWeights } from '../../Styling';\nimport { CONTEXTUAL_MENU_ITEM_HEIGHT } from './ContextualMenu.cnstyles';\nvar GlobalClassNames = {\n root: 'ms-ContextualMenu',\n container: 'ms-ContextualMenu-container',\n list: 'ms-ContextualMenu-list',\n header: 'ms-ContextualMenu-header',\n title: 'ms-ContextualMenu-title',\n isopen: 'is-open',\n};\nexport var getStyles = function (props) {\n var className = props.className, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var fonts = theme.fonts, semanticColors = theme.semanticColors, effects = theme.effects;\n return {\n root: [\n theme.fonts.medium,\n classNames.root,\n classNames.isopen,\n {\n backgroundColor: semanticColors.menuBackground,\n minWidth: '180px',\n },\n className,\n ],\n container: [\n classNames.container,\n {\n selectors: {\n ':focus': { outline: 0 },\n },\n },\n ],\n list: [\n classNames.list,\n classNames.isopen,\n {\n listStyleType: 'none',\n margin: '0',\n padding: '0',\n },\n ],\n header: [\n classNames.header,\n fonts.small,\n {\n fontWeight: FontWeights.semibold,\n color: semanticColors.menuHeader,\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n height: CONTEXTUAL_MENU_ITEM_HEIGHT,\n lineHeight: CONTEXTUAL_MENU_ITEM_HEIGHT,\n cursor: 'default',\n padding: '0px 6px',\n userSelect: 'none',\n textAlign: 'left',\n },\n ],\n title: [\n classNames.title,\n {\n fontSize: fonts.mediumPlus.fontSize,\n paddingRight: '14px',\n paddingLeft: '14px',\n paddingBottom: '5px',\n paddingTop: '5px',\n backgroundColor: semanticColors.menuItemBackgroundPressed,\n },\n ],\n subComponentStyles: {\n callout: {\n root: {\n boxShadow: effects.elevation8,\n },\n },\n menuItem: {},\n },\n };\n};\n//# sourceMappingURL=ContextualMenu.styles.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { styled, composeRenderFunction } from '../../Utilities';\nimport { ContextualMenuBase } from './ContextualMenu.base';\nimport { getStyles } from './ContextualMenu.styles';\nfunction onRenderSubMenu(subMenuProps) {\n return React.createElement(LocalContextualMenu, __assign({}, subMenuProps));\n}\n// This is to prevent cyclic import with ContextualMenu.base.tsx.\nvar LocalContextualMenu = styled(ContextualMenuBase, getStyles, function (props) { return ({\n onRenderSubMenu: props.onRenderSubMenu\n ? composeRenderFunction(props.onRenderSubMenu, onRenderSubMenu)\n : onRenderSubMenu,\n}); }, { scope: 'ContextualMenu' });\n/**\n * ContextualMenu description\n */\nexport var ContextualMenu = LocalContextualMenu;\nContextualMenu.displayName = 'ContextualMenu';\n//# sourceMappingURL=ContextualMenu.js.map","import { memoizeFunction } from '../../Utilities';\nimport { getGlobalClassNames, mergeStyleSets } from '../../Styling';\nexport var ButtonGlobalClassNames = {\n msButton: 'ms-Button',\n msButtonHasMenu: 'ms-Button--hasMenu',\n msButtonIcon: 'ms-Button-icon',\n msButtonMenuIcon: 'ms-Button-menuIcon',\n msButtonLabel: 'ms-Button-label',\n msButtonDescription: 'ms-Button-description',\n msButtonScreenReaderText: 'ms-Button-screenReaderText',\n msButtonFlexContainer: 'ms-Button-flexContainer',\n msButtonTextContainer: 'ms-Button-textContainer',\n};\nexport var getBaseButtonClassNames = memoizeFunction(function (theme, styles, className, variantClassName, iconClassName, menuIconClassName, disabled, hasMenu, checked, expanded, isSplit) {\n var _a, _b;\n var classNames = getGlobalClassNames(ButtonGlobalClassNames, theme || {});\n var isExpanded = expanded && !isSplit;\n return mergeStyleSets({\n root: [\n classNames.msButton,\n styles.root,\n variantClassName,\n checked && ['is-checked', styles.rootChecked],\n isExpanded && [\n 'is-expanded',\n styles.rootExpanded,\n {\n selectors: (_a = {},\n _a[\":hover .\" + classNames.msButtonIcon] = styles.iconExpandedHovered,\n // menuIcon falls back to rootExpandedHovered to support original behavior\n _a[\":hover .\" + classNames.msButtonMenuIcon] = styles.menuIconExpandedHovered || styles.rootExpandedHovered,\n _a[':hover'] = styles.rootExpandedHovered,\n _a),\n },\n ],\n hasMenu && [ButtonGlobalClassNames.msButtonHasMenu, styles.rootHasMenu],\n disabled && ['is-disabled', styles.rootDisabled],\n !disabled &&\n !isExpanded &&\n !checked && {\n selectors: (_b = {\n ':hover': styles.rootHovered\n },\n _b[\":hover .\" + classNames.msButtonLabel] = styles.labelHovered,\n _b[\":hover .\" + classNames.msButtonIcon] = styles.iconHovered,\n _b[\":hover .\" + classNames.msButtonDescription] = styles.descriptionHovered,\n _b[\":hover .\" + classNames.msButtonMenuIcon] = styles.menuIconHovered,\n _b[':focus'] = styles.rootFocused,\n _b[':active'] = styles.rootPressed,\n _b[\":active .\" + classNames.msButtonIcon] = styles.iconPressed,\n _b[\":active .\" + classNames.msButtonDescription] = styles.descriptionPressed,\n _b[\":active .\" + classNames.msButtonMenuIcon] = styles.menuIconPressed,\n _b),\n },\n disabled && checked && [styles.rootCheckedDisabled],\n !disabled &&\n checked && {\n selectors: {\n ':hover': styles.rootCheckedHovered,\n ':active': styles.rootCheckedPressed,\n },\n },\n className,\n ],\n flexContainer: [classNames.msButtonFlexContainer, styles.flexContainer],\n textContainer: [classNames.msButtonTextContainer, styles.textContainer],\n icon: [\n classNames.msButtonIcon,\n iconClassName,\n styles.icon,\n isExpanded && styles.iconExpanded,\n checked && styles.iconChecked,\n disabled && styles.iconDisabled,\n ],\n label: [classNames.msButtonLabel, styles.label, checked && styles.labelChecked, disabled && styles.labelDisabled],\n menuIcon: [\n classNames.msButtonMenuIcon,\n menuIconClassName,\n styles.menuIcon,\n checked && styles.menuIconChecked,\n disabled && !isSplit && styles.menuIconDisabled,\n !disabled &&\n !isExpanded &&\n !checked && {\n selectors: {\n ':hover': styles.menuIconHovered,\n ':active': styles.menuIconPressed,\n },\n },\n isExpanded && ['is-expanded', styles.menuIconExpanded],\n ],\n description: [\n classNames.msButtonDescription,\n styles.description,\n checked && styles.descriptionChecked,\n disabled && styles.descriptionDisabled,\n ],\n screenReaderText: [classNames.msButtonScreenReaderText, styles.screenReaderText],\n });\n});\n//# sourceMappingURL=BaseButton.classNames.js.map","import { memoizeFunction } from '../../../Utilities';\nimport { mergeStyles } from '../../../Styling';\nexport var getSplitButtonClassNames = memoizeFunction(function (styles, disabled, expanded, checked, primaryDisabled) {\n return {\n root: mergeStyles(styles.splitButtonMenuButton, expanded && [styles.splitButtonMenuButtonExpanded], disabled && [styles.splitButtonMenuButtonDisabled], checked && !disabled && [styles.splitButtonMenuButtonChecked], primaryDisabled &&\n !disabled && [\n {\n selectors: {\n ':focus': styles.splitButtonMenuFocused,\n },\n },\n ]),\n splitButtonContainer: mergeStyles(styles.splitButtonContainer, !disabled &&\n checked && [\n styles.splitButtonContainerChecked,\n {\n selectors: {\n ':hover': styles.splitButtonContainerCheckedHovered,\n },\n },\n ], !disabled &&\n !checked && [\n {\n selectors: {\n ':hover': styles.splitButtonContainerHovered,\n ':focus': styles.splitButtonContainerFocused,\n },\n },\n ], disabled && styles.splitButtonContainerDisabled),\n icon: mergeStyles(styles.splitButtonMenuIcon, disabled && styles.splitButtonMenuIconDisabled, !disabled && primaryDisabled && styles.splitButtonMenuIcon),\n flexContainer: mergeStyles(styles.splitButtonFlexContainer),\n divider: mergeStyles(styles.splitButtonDivider, (primaryDisabled || disabled) && styles.splitButtonDividerDisabled),\n };\n});\n//# sourceMappingURL=SplitButton.classNames.js.map","import { __assign, __extends, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { anchorProperties, assign, buttonProperties, createMergedRef, css, getId, getNativeProps, initializeComponentRef, memoizeFunction, mergeAriaAttributeValues, nullRender, portalContainsElement, setFocusVisibility, warnConditionallyRequiredProps, warnDeprecations, Async, EventGroup, FocusRects, KeyCodes, } from '../../Utilities';\nimport { Icon, FontIcon, ImageIcon } from '../../Icon';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport { ContextualMenu } from '../../ContextualMenu';\nimport { getBaseButtonClassNames } from './BaseButton.classNames';\nimport { getSplitButtonClassNames as getBaseSplitButtonClassNames } from './SplitButton/SplitButton.classNames';\nimport { KeytipData } from '../../KeytipData';\nimport { composeComponentAs } from '../../Utilities';\nvar TouchIdleDelay = 500; /* ms */\nvar COMPONENT_NAME = 'BaseButton';\n/**\n * {@docCategory Button}\n */\nvar BaseButton = /** @class */ (function (_super) {\n __extends(BaseButton, _super);\n function BaseButton(props) {\n var _this = _super.call(this, props) || this;\n _this._buttonElement = React.createRef();\n _this._splitButtonContainer = React.createRef();\n _this._mergedRef = createMergedRef();\n _this._renderedVisibleMenu = false;\n _this._getMemoizedMenuButtonKeytipProps = memoizeFunction(function (keytipProps) {\n return __assign(__assign({}, keytipProps), { hasMenu: true });\n });\n _this._onRenderIcon = function (buttonProps, defaultRender) {\n var iconProps = _this.props.iconProps;\n if (iconProps && (iconProps.iconName !== undefined || iconProps.imageProps)) {\n var className = iconProps.className, imageProps = iconProps.imageProps, rest = __rest(iconProps, [\"className\", \"imageProps\"]);\n // If the styles prop is specified as part of iconProps, fall back to regular Icon as FontIcon and ImageIcon\n // do not have this prop.\n if (iconProps.styles) {\n return React.createElement(Icon, __assign({ className: css(_this._classNames.icon, className), imageProps: imageProps }, rest));\n }\n if (iconProps.iconName) {\n return React.createElement(FontIcon, __assign({ className: css(_this._classNames.icon, className) }, rest));\n }\n if (imageProps) {\n return React.createElement(ImageIcon, __assign({ className: css(_this._classNames.icon, className), imageProps: imageProps }, rest));\n }\n }\n return null;\n };\n _this._onRenderTextContents = function () {\n var _a = _this.props, text = _a.text, children = _a.children, \n // eslint-disable-next-line deprecation/deprecation\n _b = _a.secondaryText, \n // eslint-disable-next-line deprecation/deprecation\n secondaryText = _b === void 0 ? _this.props.description : _b, _c = _a.onRenderText, onRenderText = _c === void 0 ? _this._onRenderText : _c, _d = _a.onRenderDescription, onRenderDescription = _d === void 0 ? _this._onRenderDescription : _d;\n if (text || typeof children === 'string' || secondaryText) {\n return (React.createElement(\"span\", { className: _this._classNames.textContainer },\n onRenderText(_this.props, _this._onRenderText),\n onRenderDescription(_this.props, _this._onRenderDescription)));\n }\n return [onRenderText(_this.props, _this._onRenderText), onRenderDescription(_this.props, _this._onRenderDescription)];\n };\n _this._onRenderText = function () {\n var text = _this.props.text;\n var children = _this.props.children;\n // For backwards compat, we should continue to take in the text content from children.\n if (text === undefined && typeof children === 'string') {\n text = children;\n }\n if (_this._hasText()) {\n return (React.createElement(\"span\", { key: _this._labelId, className: _this._classNames.label, id: _this._labelId }, text));\n }\n return null;\n };\n _this._onRenderChildren = function () {\n var children = _this.props.children;\n // If children is just a string, either it or the text will be rendered via onRenderLabel\n // If children is another component, it will be rendered after text\n if (typeof children === 'string') {\n return null;\n }\n return children;\n };\n _this._onRenderDescription = function (props) {\n // eslint-disable-next-line deprecation/deprecation\n var _a = props.secondaryText, secondaryText = _a === void 0 ? _this.props.description : _a;\n // ms-Button-description is only shown when the button type is compound.\n // In other cases it will not be displayed.\n return secondaryText ? (React.createElement(\"span\", { key: _this._descriptionId, className: _this._classNames.description, id: _this._descriptionId }, secondaryText)) : null;\n };\n _this._onRenderAriaDescription = function () {\n var ariaDescription = _this.props.ariaDescription;\n // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan,\n // otherwise it will be assigned to descriptionSpan.\n return ariaDescription ? (React.createElement(\"span\", { className: _this._classNames.screenReaderText, id: _this._ariaDescriptionId }, ariaDescription)) : null;\n };\n _this._onRenderMenuIcon = function (props) {\n var menuIconProps = _this.props.menuIconProps;\n return React.createElement(FontIcon, __assign({ iconName: \"ChevronDown\" }, menuIconProps, { className: _this._classNames.menuIcon }));\n };\n _this._onRenderMenu = function (menuProps) {\n var MenuType = _this.props.menuAs ? composeComponentAs(_this.props.menuAs, ContextualMenu) : ContextualMenu;\n return React.createElement(MenuType, __assign({}, menuProps));\n };\n _this._onDismissMenu = function (ev) {\n var menuProps = _this.props.menuProps;\n if (menuProps && menuProps.onDismiss) {\n menuProps.onDismiss(ev);\n }\n if (!ev || !ev.defaultPrevented) {\n _this._dismissMenu();\n }\n };\n _this._dismissMenu = function () {\n _this._menuShouldFocusOnMount = undefined;\n _this._menuShouldFocusOnContainer = undefined;\n _this.setState({ menuHidden: true });\n };\n _this._openMenu = function (shouldFocusOnContainer, shouldFocusOnMount) {\n if (shouldFocusOnMount === void 0) { shouldFocusOnMount = true; }\n if (_this.props.menuProps) {\n _this._menuShouldFocusOnContainer = shouldFocusOnContainer;\n _this._menuShouldFocusOnMount = shouldFocusOnMount;\n _this._renderedVisibleMenu = true;\n _this.setState({ menuHidden: false });\n }\n };\n _this._onToggleMenu = function (shouldFocusOnContainer) {\n var shouldFocusOnMount = true;\n if (_this.props.menuProps && _this.props.menuProps.shouldFocusOnMount === false) {\n shouldFocusOnMount = false;\n }\n _this.state.menuHidden ? _this._openMenu(shouldFocusOnContainer, shouldFocusOnMount) : _this._dismissMenu();\n };\n _this._onSplitContainerFocusCapture = function (ev) {\n var container = _this._splitButtonContainer.current;\n // If the target is coming from the portal we do not need to set focus on the container.\n if (!container || (ev.target && portalContainsElement(ev.target, container))) {\n return;\n }\n // We should never be able to focus the individual buttons in a split button. Focus\n // should always remain on the container.\n container.focus();\n };\n _this._onSplitButtonPrimaryClick = function (ev) {\n if (!_this.state.menuHidden) {\n _this._dismissMenu();\n }\n if (!_this._processingTouch && _this.props.onClick) {\n _this.props.onClick(ev);\n }\n else if (_this._processingTouch) {\n _this._onMenuClick(ev);\n }\n };\n _this._onKeyDown = function (ev) {\n // explicity cancelling event so click won't fire after this\n // eslint-disable-next-line deprecation/deprecation\n if (_this.props.disabled && (ev.which === KeyCodes.enter || ev.which === KeyCodes.space)) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n else if (!_this.props.disabled) {\n if (_this.props.menuProps) {\n _this._onMenuKeyDown(ev);\n }\n else if (_this.props.onKeyDown !== undefined) {\n _this.props.onKeyDown(ev); // not cancelling event because it's not disabled\n }\n }\n };\n _this._onKeyUp = function (ev) {\n if (!_this.props.disabled && _this.props.onKeyUp !== undefined) {\n _this.props.onKeyUp(ev); // not cancelling event because it's not disabled\n }\n };\n _this._onKeyPress = function (ev) {\n if (!_this.props.disabled && _this.props.onKeyPress !== undefined) {\n _this.props.onKeyPress(ev); // not cancelling event because it's not disabled\n }\n };\n _this._onMouseUp = function (ev) {\n if (!_this.props.disabled && _this.props.onMouseUp !== undefined) {\n _this.props.onMouseUp(ev); // not cancelling event because it's not disabled\n }\n };\n _this._onMouseDown = function (ev) {\n if (!_this.props.disabled && _this.props.onMouseDown !== undefined) {\n _this.props.onMouseDown(ev); // not cancelling event because it's not disabled\n }\n };\n _this._onClick = function (ev) {\n if (!_this.props.disabled) {\n if (_this.props.menuProps) {\n _this._onMenuClick(ev);\n }\n else if (_this.props.onClick !== undefined) {\n _this.props.onClick(ev); // not cancelling event because it's not disabled\n }\n }\n };\n _this._onSplitButtonContainerKeyDown = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) {\n if (_this._buttonElement.current) {\n _this._buttonElement.current.click();\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n else {\n _this._onMenuKeyDown(ev);\n }\n };\n _this._onMenuKeyDown = function (ev) {\n if (_this.props.disabled) {\n return;\n }\n if (_this.props.onKeyDown) {\n _this.props.onKeyDown(ev);\n }\n // eslint-disable-next-line deprecation/deprecation\n var isUp = ev.which === KeyCodes.up;\n // eslint-disable-next-line deprecation/deprecation\n var isDown = ev.which === KeyCodes.down;\n if (!ev.defaultPrevented && _this._isValidMenuOpenKey(ev)) {\n var onMenuClick = _this.props.onMenuClick;\n if (onMenuClick) {\n onMenuClick(ev, _this.props);\n }\n _this._onToggleMenu(false);\n ev.preventDefault();\n ev.stopPropagation();\n }\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) {\n // We manually set the focus visibility to true if opening via Enter or Space to account for the scenario where\n // a user clicks on the button, closes the menu and then opens it via keyboard. In this scenario our default logic\n // for setting focus visibility is not triggered since there is no keyboard navigation present beforehand.\n setFocusVisibility(true, ev.target);\n }\n if (!(ev.altKey || ev.metaKey) && (isUp || isDown)) {\n // Suppose a menu, with shouldFocusOnMount: false, is open, and user wants to keyboard to the menu items\n // We need to re-render the menu with shouldFocusOnMount as true.\n if (!_this.state.menuHidden && _this.props.menuProps) {\n var currentShouldFocusOnMount = _this._menuShouldFocusOnMount !== undefined\n ? _this._menuShouldFocusOnMount\n : _this.props.menuProps.shouldFocusOnMount;\n if (!currentShouldFocusOnMount) {\n ev.preventDefault();\n ev.stopPropagation();\n _this._menuShouldFocusOnMount = true;\n _this.forceUpdate();\n }\n }\n }\n };\n _this._onTouchStart = function () {\n if (_this._isSplitButton &&\n _this._splitButtonContainer.current &&\n !('onpointerdown' in _this._splitButtonContainer.current)) {\n _this._handleTouchAndPointerEvent();\n }\n };\n _this._onMenuClick = function (ev) {\n var _a = _this.props, onMenuClick = _a.onMenuClick, menuProps = _a.menuProps;\n if (onMenuClick) {\n onMenuClick(ev, _this.props);\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 var shouldFocusOnContainer = typeof (menuProps === null || menuProps === void 0 ? void 0 : menuProps.shouldFocusOnContainer) === 'boolean'\n ? menuProps.shouldFocusOnContainer\n : ev.nativeEvent.pointerType === 'mouse';\n if (!ev.defaultPrevented) {\n _this._onToggleMenu(shouldFocusOnContainer);\n ev.preventDefault();\n ev.stopPropagation();\n }\n };\n initializeComponentRef(_this);\n _this._async = new Async(_this);\n _this._events = new EventGroup(_this);\n warnConditionallyRequiredProps(COMPONENT_NAME, props, ['menuProps', 'onClick'], 'split', _this.props.split);\n warnDeprecations(COMPONENT_NAME, props, {\n rootProps: undefined,\n description: 'secondaryText',\n toggled: 'checked',\n });\n _this._labelId = getId();\n _this._descriptionId = getId();\n _this._ariaDescriptionId = getId();\n _this.state = {\n menuHidden: true,\n };\n return _this;\n }\n Object.defineProperty(BaseButton.prototype, \"_isSplitButton\", {\n get: function () {\n return !!this.props.menuProps && !!this.props.onClick && this.props.split === true;\n },\n enumerable: false,\n configurable: true\n });\n BaseButton.prototype.render = function () {\n var _a;\n var _b = this.props, ariaDescription = _b.ariaDescription, ariaLabel = _b.ariaLabel, ariaHidden = _b.ariaHidden, className = _b.className, disabled = _b.disabled, allowDisabledFocus = _b.allowDisabledFocus, primaryDisabled = _b.primaryDisabled, \n // eslint-disable-next-line deprecation/deprecation\n _c = _b.secondaryText, \n // eslint-disable-next-line deprecation/deprecation\n secondaryText = _c === void 0 ? this.props.description : _c, href = _b.href, iconProps = _b.iconProps, menuIconProps = _b.menuIconProps, styles = _b.styles, checked = _b.checked, variantClassName = _b.variantClassName, theme = _b.theme, toggle = _b.toggle, getClassNames = _b.getClassNames, role = _b.role;\n var menuHidden = this.state.menuHidden;\n // Button is disabled if the whole button (in case of splitButton is disabled) or if the primary action is disabled\n var isPrimaryButtonDisabled = disabled || primaryDisabled;\n this._classNames = getClassNames\n ? getClassNames(theme, className, variantClassName, iconProps && iconProps.className, menuIconProps && menuIconProps.className, isPrimaryButtonDisabled, checked, !menuHidden, !!this.props.menuProps, this.props.split, !!allowDisabledFocus)\n : getBaseButtonClassNames(theme, styles, className, variantClassName, iconProps && iconProps.className, menuIconProps && menuIconProps.className, isPrimaryButtonDisabled, !!this.props.menuProps, checked, !menuHidden, this.props.split);\n var _d = this, _ariaDescriptionId = _d._ariaDescriptionId, _labelId = _d._labelId, _descriptionId = _d._descriptionId;\n // Anchor tag cannot be disabled hence in disabled state rendering\n // anchor button as normal button\n var renderAsAnchor = !isPrimaryButtonDisabled && !!href;\n var tag = renderAsAnchor ? 'a' : 'button';\n var nativeProps = getNativeProps(\n // eslint-disable-next-line deprecation/deprecation\n assign(renderAsAnchor ? {} : { type: 'button' }, this.props.rootProps, this.props), renderAsAnchor ? anchorProperties : buttonProperties, [\n 'disabled', // let disabled buttons be focused and styled as disabled.\n ]);\n // Check for ariaLabel passed in via Button props, and fall back to aria-label passed in via native props\n var resolvedAriaLabel = ariaLabel || nativeProps['aria-label'];\n // Check for ariaDescription, secondaryText or aria-describedby in the native props to determine source of\n // aria-describedby. Otherwise default to undefined so property does not appear in output.\n var ariaDescribedBy = undefined;\n if (ariaDescription) {\n ariaDescribedBy = _ariaDescriptionId;\n }\n else if (secondaryText && this.props.onRenderDescription !== nullRender) {\n // for buttons like CompoundButton with a valid onRenderDescription, we need to set an ariaDescribedBy\n // for buttons that do not render anything (via nullRender), we should not set an ariaDescribedBy\n ariaDescribedBy = _descriptionId;\n }\n else if (nativeProps['aria-describedby']) {\n ariaDescribedBy = nativeProps['aria-describedby'];\n }\n // If an explicit aria-labelledby is given, use that and we're done.\n // If any kind of description is given (which will end up as an aria-describedby attribute)\n // and no ariaLabel is specified, set the labelledby element.\n // Otherwise, the button is labeled implicitly by the descendent text on the button (if it exists).\n var ariaLabelledBy = undefined;\n if (nativeProps['aria-labelledby']) {\n ariaLabelledBy = nativeProps['aria-labelledby'];\n }\n else if (ariaDescribedBy && !resolvedAriaLabel) {\n ariaLabelledBy = this._hasText() ? _labelId : undefined;\n }\n var dataIsFocusable = this.props['data-is-focusable'] === false || (disabled && !allowDisabledFocus) || this._isSplitButton\n ? false\n : true;\n var isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n // if isCheckboxTypeRole, always return a checked value.\n // Otherwise only return checked value if toggle is set to true.\n // This is because role=\"checkbox\" always needs to have an aria-checked value\n // but our checked prop only sets aria-pressed if we mark the button as a toggle=\"true\"\n var checkedOrPressedValue = isCheckboxTypeRole ? !!checked : toggle === true ? !!checked : undefined;\n var buttonProps = assign(nativeProps, (_a = {\n className: this._classNames.root,\n // eslint-disable-next-line deprecation/deprecation\n ref: this._mergedRef(this.props.elementRef, this._buttonElement),\n disabled: isPrimaryButtonDisabled && !allowDisabledFocus,\n onKeyDown: this._onKeyDown,\n onKeyPress: this._onKeyPress,\n onKeyUp: this._onKeyUp,\n onMouseDown: this._onMouseDown,\n onMouseUp: this._onMouseUp,\n onClick: this._onClick,\n 'aria-label': resolvedAriaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-disabled': isPrimaryButtonDisabled,\n 'data-is-focusable': dataIsFocusable\n },\n // aria-pressed attribute should only be present for toggle buttons\n // aria-checked attribute should only be present for toggle buttons with checkbox type role\n _a[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed'] = checkedOrPressedValue,\n _a));\n if (ariaHidden) {\n buttonProps['aria-hidden'] = true;\n }\n if (this._isSplitButton) {\n return this._onRenderSplitButtonContent(tag, buttonProps);\n }\n else if (this.props.menuProps) {\n var _e = this.props.menuProps.id, id = _e === void 0 ? this._labelId + \"-menu\" : _e;\n assign(buttonProps, {\n 'aria-expanded': !menuHidden,\n 'aria-controls': !menuHidden ? id : null,\n 'aria-haspopup': true,\n });\n }\n return this._onRenderContent(tag, buttonProps);\n };\n BaseButton.prototype.componentDidMount = function () {\n // For split buttons, touching anywhere in the button should drop the dropdown, which should contain the\n // primary action. This gives more hit target space for touch environments. We're setting the onpointerdown here,\n // because React does not support Pointer events yet.\n if (this._isSplitButton && this._splitButtonContainer.current) {\n if ('onpointerdown' in this._splitButtonContainer.current) {\n this._events.on(this._splitButtonContainer.current, 'pointerdown', this._onPointerDown, true);\n }\n if ('onpointerup' in this._splitButtonContainer.current && this.props.onPointerUp) {\n this._events.on(this._splitButtonContainer.current, 'pointerup', this.props.onPointerUp, true);\n }\n }\n };\n BaseButton.prototype.componentDidUpdate = function (prevProps, prevState) {\n // If Button's menu was closed, run onAfterMenuDismiss.\n if (this.props.onAfterMenuDismiss && !prevState.menuHidden && this.state.menuHidden) {\n this.props.onAfterMenuDismiss();\n }\n };\n BaseButton.prototype.componentWillUnmount = function () {\n this._async.dispose();\n this._events.dispose();\n };\n BaseButton.prototype.focus = function () {\n if (this._isSplitButton && this._splitButtonContainer.current) {\n setFocusVisibility(true);\n this._splitButtonContainer.current.focus();\n }\n else if (this._buttonElement.current) {\n setFocusVisibility(true);\n this._buttonElement.current.focus();\n }\n };\n BaseButton.prototype.dismissMenu = function () {\n this._dismissMenu();\n };\n BaseButton.prototype.openMenu = function (shouldFocusOnContainer, shouldFocusOnMount) {\n this._openMenu(shouldFocusOnContainer, shouldFocusOnMount);\n };\n BaseButton.prototype._onRenderContent = function (tag, buttonProps) {\n var _this = this;\n var props = this.props;\n var Tag = tag;\n var menuIconProps = props.menuIconProps, menuProps = props.menuProps, _a = props.onRenderIcon, onRenderIcon = _a === void 0 ? this._onRenderIcon : _a, _b = props.onRenderAriaDescription, onRenderAriaDescription = _b === void 0 ? this._onRenderAriaDescription : _b, _c = props.onRenderChildren, onRenderChildren = _c === void 0 ? this._onRenderChildren : _c, \n // eslint-disable-next-line deprecation/deprecation\n _d = props.onRenderMenu, \n // eslint-disable-next-line deprecation/deprecation\n onRenderMenu = _d === void 0 ? this._onRenderMenu : _d, _e = props.onRenderMenuIcon, onRenderMenuIcon = _e === void 0 ? this._onRenderMenuIcon : _e, disabled = props.disabled;\n var keytipProps = props.keytipProps;\n if (keytipProps && menuProps) {\n keytipProps = this._getMemoizedMenuButtonKeytipProps(keytipProps);\n }\n var Button = function (keytipAttributes) { return (React.createElement(Tag, __assign({}, buttonProps, keytipAttributes),\n React.createElement(\"span\", { className: _this._classNames.flexContainer, \"data-automationid\": \"splitbuttonprimary\" },\n onRenderIcon(props, _this._onRenderIcon),\n _this._onRenderTextContents(),\n onRenderAriaDescription(props, _this._onRenderAriaDescription),\n onRenderChildren(props, _this._onRenderChildren),\n !_this._isSplitButton &&\n (menuProps || menuIconProps || _this.props.onRenderMenuIcon) &&\n onRenderMenuIcon(_this.props, _this._onRenderMenuIcon),\n menuProps &&\n !menuProps.doNotLayer &&\n _this._shouldRenderMenu() &&\n onRenderMenu(_this._getMenuProps(menuProps), _this._onRenderMenu)))); };\n var Content = keytipProps ? (\n // If we're making a split button, we won't put the keytip here\n React.createElement(KeytipData, { keytipProps: !this._isSplitButton ? keytipProps : undefined, ariaDescribedBy: buttonProps['aria-describedby'], disabled: disabled }, function (keytipAttributes) { return Button(keytipAttributes); })) : (Button());\n if (menuProps && menuProps.doNotLayer) {\n return (React.createElement(React.Fragment, null,\n Content,\n this._shouldRenderMenu() && onRenderMenu(this._getMenuProps(menuProps), this._onRenderMenu)));\n }\n return (React.createElement(React.Fragment, null,\n Content,\n React.createElement(FocusRects, null)));\n };\n /**\n * Method to help determine if the menu's component tree should\n * be rendered. It takes into account whether the menu is expanded,\n * whether it is a persisted menu and whether it has been shown to the user.\n */\n BaseButton.prototype._shouldRenderMenu = function () {\n var menuHidden = this.state.menuHidden;\n // eslint-disable-next-line deprecation/deprecation\n var _a = this.props, persistMenu = _a.persistMenu, renderPersistedMenuHiddenOnMount = _a.renderPersistedMenuHiddenOnMount;\n if (!menuHidden) {\n // Always should render a menu when it is expanded\n return true;\n }\n else if (persistMenu && (this._renderedVisibleMenu || renderPersistedMenuHiddenOnMount)) {\n // _renderedVisibleMenu ensures that the first rendering of\n // the menu happens on-screen, as edge's scrollbar calculations are off if done while hidden.\n return true;\n }\n return false;\n };\n BaseButton.prototype._hasText = function () {\n // _onRenderTextContents and _onRenderText do not perform the same checks. Below is parity with what _onRenderText\n // used to have before the refactor that introduced this function. _onRenderTextContents does not require props.\n // text to be undefined in order for props.children to be used as a fallback.\n // Purely a code maintainability/reuse issue, but logged as Issue #4979.\n return this.props.text !== null && (this.props.text !== undefined || typeof this.props.children === 'string');\n };\n BaseButton.prototype._getMenuProps = function (menuProps) {\n var persistMenu = this.props.persistMenu;\n var menuHidden = this.state.menuHidden;\n // the accessible menu label (accessible name) has a relationship to the button.\n // If the menu props do not specify an explicit value for aria-label or aria-labelledBy,\n // AND the button has text, we'll set the menu aria-labelledBy to the text element id.\n if (!menuProps.ariaLabel && !menuProps.labelElementId && this._hasText()) {\n menuProps = __assign(__assign({}, menuProps), { labelElementId: this._labelId });\n }\n return __assign(__assign({ id: this._labelId + '-menu', directionalHint: DirectionalHint.bottomLeftEdge }, menuProps), { shouldFocusOnContainer: this._menuShouldFocusOnContainer, shouldFocusOnMount: this._menuShouldFocusOnMount, hidden: persistMenu ? menuHidden : undefined, className: css('ms-BaseButton-menuhost', menuProps.className), target: this._isSplitButton ? this._splitButtonContainer.current : this._buttonElement.current, onDismiss: this._onDismissMenu });\n };\n BaseButton.prototype._onRenderSplitButtonContent = function (tag, buttonProps) {\n var _this = this;\n var _a = this.props, _b = _a.styles, styles = _b === void 0 ? {} : _b, disabled = _a.disabled, allowDisabledFocus = _a.allowDisabledFocus, checked = _a.checked, getSplitButtonClassNames = _a.getSplitButtonClassNames, primaryDisabled = _a.primaryDisabled, menuProps = _a.menuProps, toggle = _a.toggle, role = _a.role, primaryActionButtonProps = _a.primaryActionButtonProps;\n var keytipProps = this.props.keytipProps;\n var menuHidden = this.state.menuHidden;\n var classNames = getSplitButtonClassNames\n ? getSplitButtonClassNames(!!disabled, !menuHidden, !!checked, !!allowDisabledFocus)\n : styles && getBaseSplitButtonClassNames(styles, !!disabled, !menuHidden, !!checked, !!primaryDisabled);\n assign(buttonProps, {\n onClick: undefined,\n onPointerDown: undefined,\n onPointerUp: undefined,\n tabIndex: -1,\n 'data-is-focusable': false,\n });\n if (keytipProps && menuProps) {\n keytipProps = this._getMemoizedMenuButtonKeytipProps(keytipProps);\n }\n var containerProps = getNativeProps(buttonProps, [], ['disabled']);\n // Add additional props to apply on primary action button\n if (primaryActionButtonProps) {\n assign(buttonProps, primaryActionButtonProps);\n }\n var SplitButton = function (keytipAttributes) { return (React.createElement(\"div\", __assign({}, containerProps, { \"data-ktp-target\": keytipAttributes ? keytipAttributes['data-ktp-target'] : undefined, role: role ? role : 'button', \"aria-disabled\": disabled, \"aria-haspopup\": true, \"aria-expanded\": !menuHidden, \"aria-pressed\": toggle ? !!checked : undefined, \"aria-describedby\": mergeAriaAttributeValues(buttonProps['aria-describedby'], keytipAttributes ? keytipAttributes['aria-describedby'] : undefined), className: classNames && classNames.splitButtonContainer, onKeyDown: _this._onSplitButtonContainerKeyDown, onTouchStart: _this._onTouchStart, ref: _this._splitButtonContainer, \"data-is-focusable\": true, onClick: !disabled && !primaryDisabled ? _this._onSplitButtonPrimaryClick : undefined, tabIndex: (!disabled && !primaryDisabled) || allowDisabledFocus ? 0 : undefined, \"aria-roledescription\": buttonProps['aria-roledescription'], onFocusCapture: _this._onSplitContainerFocusCapture }),\n React.createElement(\"span\", { style: { display: 'flex' } },\n _this._onRenderContent(tag, buttonProps),\n _this._onRenderSplitButtonMenuButton(classNames, keytipAttributes),\n _this._onRenderSplitButtonDivider(classNames)))); };\n return keytipProps ? (React.createElement(KeytipData, { keytipProps: keytipProps, disabled: disabled }, function (keytipAttributes) { return SplitButton(keytipAttributes); })) : (SplitButton());\n };\n BaseButton.prototype._onRenderSplitButtonDivider = function (classNames) {\n if (classNames && classNames.divider) {\n var onClick = function (ev) {\n ev.stopPropagation();\n };\n return React.createElement(\"span\", { className: classNames.divider, \"aria-hidden\": true, onClick: onClick });\n }\n return null;\n };\n BaseButton.prototype._onRenderSplitButtonMenuButton = function (classNames, keytipAttributes) {\n var _a = this.props, allowDisabledFocus = _a.allowDisabledFocus, checked = _a.checked, disabled = _a.disabled, splitButtonMenuProps = _a.splitButtonMenuProps, splitButtonAriaLabel = _a.splitButtonAriaLabel, primaryDisabled = _a.primaryDisabled;\n var menuHidden = this.state.menuHidden;\n var menuIconProps = this.props.menuIconProps;\n if (menuIconProps === undefined) {\n menuIconProps = {\n iconName: 'ChevronDown',\n };\n }\n var splitButtonProps = __assign(__assign({}, splitButtonMenuProps), { styles: classNames, checked: checked, disabled: disabled, allowDisabledFocus: allowDisabledFocus, onClick: this._onMenuClick, menuProps: undefined, iconProps: __assign(__assign({}, menuIconProps), { className: this._classNames.menuIcon }), ariaLabel: splitButtonAriaLabel, 'aria-haspopup': true, 'aria-expanded': !menuHidden, 'data-is-focusable': false });\n // Add data-ktp-execute-target to the split button if the keytip is defined\n return (React.createElement(BaseButton, __assign({}, splitButtonProps, { \"data-ktp-execute-target\": keytipAttributes ? keytipAttributes['data-ktp-execute-target'] : keytipAttributes, onMouseDown: this._onMouseDown, tabIndex: primaryDisabled && !allowDisabledFocus ? 0 : -1 })));\n };\n BaseButton.prototype._onPointerDown = function (ev) {\n var onPointerDown = this.props.onPointerDown;\n if (onPointerDown) {\n onPointerDown(ev);\n }\n if (ev.pointerType === 'touch') {\n this._handleTouchAndPointerEvent();\n ev.preventDefault();\n ev.stopImmediatePropagation();\n }\n };\n BaseButton.prototype._handleTouchAndPointerEvent = function () {\n var _this = this;\n // If we already have an existing timeout from a previous touch and pointer event\n // cancel that timeout so we can set a new one.\n if (this._lastTouchTimeoutId !== undefined) {\n this._async.clearTimeout(this._lastTouchTimeoutId);\n this._lastTouchTimeoutId = undefined;\n }\n this._processingTouch = true;\n this._lastTouchTimeoutId = this._async.setTimeout(function () {\n _this._processingTouch = false;\n _this._lastTouchTimeoutId = undefined;\n // Touch and pointer events don't focus the button naturally,\n // so adding an imperative focus call to guarantee this behavior.\n _this.focus();\n }, TouchIdleDelay);\n };\n /**\n * Returns if the user hits a valid keyboard key to open the menu\n * @param ev - the keyboard event\n * @returns True if user clicks on custom trigger key if enabled or alt + down arrow if not. False otherwise.\n */\n BaseButton.prototype._isValidMenuOpenKey = function (ev) {\n if (this.props.menuTriggerKeyCode) {\n // eslint-disable-next-line deprecation/deprecation\n return ev.which === this.props.menuTriggerKeyCode;\n }\n else if (this.props.menuProps) {\n // eslint-disable-next-line deprecation/deprecation\n return ev.which === KeyCodes.down && (ev.altKey || ev.metaKey);\n }\n // Note: When enter is pressed, we will let the event continue to propagate\n // to trigger the onClick event on the button\n return false;\n };\n BaseButton.defaultProps = {\n baseClassName: 'ms-Button',\n styles: {},\n split: false,\n };\n return BaseButton;\n}(React.Component));\nexport { BaseButton };\n//# sourceMappingURL=BaseButton.js.map","import { memoizeFunction } from '../../Utilities';\nimport { HighContrastSelector, getFocusStyle, hiddenContentStyle } from '../../Styling';\nvar noOutline = {\n outline: 0,\n};\nvar iconStyle = function (fontSize) {\n return {\n fontSize: fontSize,\n margin: '0 4px',\n height: '16px',\n lineHeight: '16px',\n textAlign: 'center',\n flexShrink: 0,\n };\n};\n/**\n * Gets the base button styles. Note: because it is a base class to be used with the `mergeRules`\n * helper, it should have values for all class names in the interface. This let `mergeRules` optimize\n * mixing class names together.\n */\nexport var getStyles = memoizeFunction(function (theme) {\n var _a, _b;\n var semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;\n var border = semanticColors.buttonBorder;\n var disabledBackground = semanticColors.disabledBackground;\n var disabledText = semanticColors.disabledText;\n var buttonHighContrastFocus = {\n left: -2,\n top: -2,\n bottom: -2,\n right: -2,\n outlineColor: 'ButtonText',\n };\n return {\n root: [\n getFocusStyle(theme, { inset: 1, highContrastStyle: buttonHighContrastFocus, borderColor: 'transparent' }),\n theme.fonts.medium,\n {\n boxSizing: 'border-box',\n border: '1px solid ' + border,\n userSelect: 'none',\n display: 'inline-block',\n textDecoration: 'none',\n textAlign: 'center',\n cursor: 'pointer',\n padding: '0 16px',\n borderRadius: effects.roundedCorner2,\n selectors: {\n // IE11 workaround for preventing shift of child elements of a button when active.\n ':active > 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 selectors: {\n ':hover': noOutline,\n ':focus': noOutline,\n },\n },\n ],\n iconDisabled: {\n color: disabledText,\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n color: 'GrayText',\n },\n _a),\n },\n menuIconDisabled: {\n color: disabledText,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n color: 'GrayText',\n },\n _b),\n },\n flexContainer: {\n display: 'flex',\n height: '100%',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n alignItems: 'center',\n },\n description: {\n display: 'block',\n },\n textContainer: {\n flexGrow: 1,\n display: 'block',\n },\n icon: iconStyle(fonts.mediumPlus.fontSize),\n menuIcon: iconStyle(fonts.small.fontSize),\n label: {\n margin: '0 4px',\n lineHeight: '100%',\n display: 'block',\n },\n screenReaderText: hiddenContentStyle,\n };\n});\n//# sourceMappingURL=BaseButton.styles.js.map","import { __assign } from \"tslib\";\nimport { HighContrastSelector, concatStyleSets, getFocusStyle, getHighContrastNoAdjustStyle } from '../../../Styling';\nimport { memoizeFunction } from '../../../Utilities';\nexport var getStyles = memoizeFunction(function (theme, customStyles) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;\n var effects = theme.effects, palette = theme.palette, semanticColors = theme.semanticColors;\n var buttonHighContrastFocus = {\n left: -2,\n top: -2,\n bottom: -2,\n right: -2,\n border: 'none',\n };\n var splitButtonDividerBaseStyles = {\n position: 'absolute',\n width: 1,\n right: 31,\n top: 8,\n bottom: 8,\n };\n var splitButtonStyles = {\n splitButtonContainer: [\n getFocusStyle(theme, { highContrastStyle: buttonHighContrastFocus, inset: 2 }),\n {\n display: 'inline-flex',\n selectors: {\n '.ms-Button--default': {\n borderTopRightRadius: '0',\n borderBottomRightRadius: '0',\n borderRight: 'none',\n },\n '.ms-Button--primary': {\n borderTopRightRadius: '0',\n borderBottomRightRadius: '0',\n border: 'none',\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign({ color: 'WindowText', backgroundColor: 'Window', border: '1px solid WindowText', borderRightWidth: '0' }, getHighContrastNoAdjustStyle()),\n _a),\n },\n '.ms-Button--primary + .ms-Button': {\n border: 'none',\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n border: '1px solid WindowText',\n borderLeftWidth: '0',\n },\n _b),\n },\n },\n },\n ],\n splitButtonContainerHovered: {\n selectors: {\n '.ms-Button--primary': {\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n color: 'Window',\n backgroundColor: 'Highlight',\n },\n _c),\n },\n '.ms-Button.is-disabled': {\n color: semanticColors.buttonTextDisabled,\n selectors: (_d = {},\n _d[HighContrastSelector] = {\n color: 'GrayText',\n borderColor: 'GrayText',\n backgroundColor: 'Window',\n },\n _d),\n },\n },\n },\n splitButtonContainerChecked: {\n selectors: {\n '.ms-Button--primary': {\n selectors: (_e = {},\n _e[HighContrastSelector] = __assign({ color: 'Window', backgroundColor: 'WindowText' }, getHighContrastNoAdjustStyle()),\n _e),\n },\n },\n },\n splitButtonContainerCheckedHovered: {\n selectors: {\n '.ms-Button--primary': {\n selectors: (_f = {},\n _f[HighContrastSelector] = __assign({ color: 'Window', backgroundColor: 'WindowText' }, getHighContrastNoAdjustStyle()),\n _f),\n },\n },\n },\n splitButtonContainerFocused: {\n outline: 'none!important',\n },\n splitButtonMenuButton: (_g = {\n padding: 6,\n height: 'auto',\n boxSizing: 'border-box',\n borderRadius: 0,\n borderTopRightRadius: effects.roundedCorner2,\n borderBottomRightRadius: effects.roundedCorner2,\n border: \"1px solid \" + palette.neutralSecondaryAlt,\n borderLeft: 'none',\n outline: 'transparent',\n userSelect: 'none',\n display: 'inline-block',\n textDecoration: 'none',\n textAlign: 'center',\n cursor: 'pointer',\n verticalAlign: 'top',\n width: 32,\n marginLeft: -1,\n marginTop: 0,\n marginRight: 0,\n marginBottom: 0\n },\n _g[HighContrastSelector] = {\n '.ms-Button-menuIcon': {\n color: 'WindowText',\n },\n },\n _g),\n splitButtonDivider: __assign(__assign({}, splitButtonDividerBaseStyles), { selectors: (_h = {},\n _h[HighContrastSelector] = {\n backgroundColor: 'WindowText',\n },\n _h) }),\n splitButtonDividerDisabled: __assign(__assign({}, splitButtonDividerBaseStyles), { selectors: (_j = {},\n _j[HighContrastSelector] = {\n backgroundColor: 'GrayText',\n },\n _j) }),\n splitButtonMenuButtonDisabled: {\n pointerEvents: 'none',\n border: 'none',\n selectors: (_k = {\n ':hover': {\n cursor: 'default',\n },\n '.ms-Button--primary': {\n selectors: (_l = {},\n _l[HighContrastSelector] = {\n color: 'GrayText',\n borderColor: 'GrayText',\n backgroundColor: 'Window',\n },\n _l),\n },\n '.ms-Button-menuIcon': {\n selectors: (_m = {},\n _m[HighContrastSelector] = {\n color: 'GrayText',\n },\n _m),\n }\n },\n _k[HighContrastSelector] = {\n color: 'GrayText',\n border: '1px solid GrayText',\n backgroundColor: 'Window',\n },\n _k),\n },\n splitButtonFlexContainer: {\n display: 'flex',\n height: '100%',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n alignItems: 'center',\n },\n splitButtonContainerDisabled: {\n outline: 'none',\n border: 'none',\n selectors: (_o = {},\n _o[HighContrastSelector] = __assign({ color: 'GrayText', borderColor: 'GrayText', backgroundColor: 'Window' }, getHighContrastNoAdjustStyle()),\n _o),\n },\n splitButtonMenuFocused: __assign({}, getFocusStyle(theme, { highContrastStyle: buttonHighContrastFocus, inset: 2 })),\n };\n return concatStyleSets(splitButtonStyles, customStyles);\n});\n//# sourceMappingURL=SplitButton.styles.js.map","import { __assign } from \"tslib\";\nimport { HighContrastSelector, getHighContrastNoAdjustStyle } from '../../Styling';\nimport { IsFocusVisibleClassName } from '../../Utilities';\nvar splitButtonDividerBaseStyles = function () {\n return {\n position: 'absolute',\n width: 1,\n right: 31,\n top: 8,\n bottom: 8,\n };\n};\nexport function standardStyles(theme) {\n var _a, _b, _c, _d, _e;\n var s = theme.semanticColors, p = theme.palette;\n var buttonBackground = s.buttonBackground;\n var buttonBackgroundPressed = s.buttonBackgroundPressed;\n var buttonBackgroundHovered = s.buttonBackgroundHovered;\n var buttonBackgroundDisabled = s.buttonBackgroundDisabled;\n var buttonText = s.buttonText;\n var buttonTextHovered = s.buttonTextHovered;\n var buttonTextDisabled = s.buttonTextDisabled;\n var buttonTextChecked = s.buttonTextChecked;\n var buttonTextCheckedHovered = s.buttonTextCheckedHovered;\n return {\n root: {\n backgroundColor: buttonBackground,\n color: buttonText,\n },\n rootHovered: {\n backgroundColor: buttonBackgroundHovered,\n color: buttonTextHovered,\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n borderColor: 'Highlight',\n color: 'Highlight',\n },\n _a),\n },\n rootPressed: {\n backgroundColor: buttonBackgroundPressed,\n color: buttonTextChecked,\n },\n rootExpanded: {\n backgroundColor: buttonBackgroundPressed,\n color: buttonTextChecked,\n },\n rootChecked: {\n backgroundColor: buttonBackgroundPressed,\n color: buttonTextChecked,\n },\n rootCheckedHovered: {\n backgroundColor: buttonBackgroundPressed,\n color: buttonTextCheckedHovered,\n },\n rootDisabled: {\n color: buttonTextDisabled,\n backgroundColor: buttonBackgroundDisabled,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n color: 'GrayText',\n borderColor: 'GrayText',\n backgroundColor: 'Window',\n },\n _b),\n },\n // Split button styles\n splitButtonContainer: {\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n border: 'none',\n },\n _c),\n },\n splitButtonMenuButton: {\n color: p.white,\n backgroundColor: 'transparent',\n selectors: {\n ':hover': {\n backgroundColor: p.neutralLight,\n selectors: (_d = {},\n _d[HighContrastSelector] = {\n color: 'Highlight',\n },\n _d),\n },\n },\n },\n splitButtonMenuButtonDisabled: {\n backgroundColor: s.buttonBackgroundDisabled,\n selectors: {\n ':hover': {\n backgroundColor: s.buttonBackgroundDisabled,\n },\n },\n },\n splitButtonDivider: __assign(__assign({}, splitButtonDividerBaseStyles()), { backgroundColor: p.neutralTertiaryAlt, selectors: (_e = {},\n _e[HighContrastSelector] = {\n backgroundColor: 'WindowText',\n },\n _e) }),\n splitButtonDividerDisabled: {\n backgroundColor: theme.palette.neutralTertiaryAlt,\n },\n splitButtonMenuButtonChecked: {\n backgroundColor: p.neutralQuaternaryAlt,\n selectors: {\n ':hover': {\n backgroundColor: p.neutralQuaternaryAlt,\n },\n },\n },\n splitButtonMenuButtonExpanded: {\n backgroundColor: p.neutralQuaternaryAlt,\n selectors: {\n ':hover': {\n backgroundColor: p.neutralQuaternaryAlt,\n },\n },\n },\n splitButtonMenuIcon: {\n color: s.buttonText,\n },\n splitButtonMenuIconDisabled: {\n color: s.buttonTextDisabled,\n },\n };\n}\nexport function primaryStyles(theme) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j;\n var p = theme.palette, s = theme.semanticColors;\n return {\n root: {\n backgroundColor: s.primaryButtonBackground,\n border: \"1px solid \" + s.primaryButtonBackground,\n color: s.primaryButtonText,\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign({ color: 'Window', backgroundColor: 'WindowText', borderColor: 'WindowText' }, getHighContrastNoAdjustStyle()),\n _a[\".\" + IsFocusVisibleClassName + \" &:focus\"] = {\n selectors: {\n ':after': {\n border: \"none\",\n outlineColor: p.white,\n },\n },\n },\n _a),\n },\n rootHovered: {\n backgroundColor: s.primaryButtonBackgroundHovered,\n border: \"1px solid \" + s.primaryButtonBackgroundHovered,\n color: s.primaryButtonTextHovered,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n color: 'Window',\n backgroundColor: 'Highlight',\n borderColor: 'Highlight',\n },\n _b),\n },\n rootPressed: {\n backgroundColor: s.primaryButtonBackgroundPressed,\n border: \"1px solid \" + s.primaryButtonBackgroundPressed,\n color: s.primaryButtonTextPressed,\n selectors: (_c = {},\n _c[HighContrastSelector] = __assign({ color: 'Window', backgroundColor: 'WindowText', borderColor: 'WindowText' }, getHighContrastNoAdjustStyle()),\n _c),\n },\n rootExpanded: {\n backgroundColor: s.primaryButtonBackgroundPressed,\n color: s.primaryButtonTextPressed,\n },\n rootChecked: {\n backgroundColor: s.primaryButtonBackgroundPressed,\n color: s.primaryButtonTextPressed,\n },\n rootCheckedHovered: {\n backgroundColor: s.primaryButtonBackgroundPressed,\n color: s.primaryButtonTextPressed,\n },\n rootDisabled: {\n color: s.primaryButtonTextDisabled,\n backgroundColor: s.primaryButtonBackgroundDisabled,\n selectors: (_d = {},\n _d[HighContrastSelector] = {\n color: 'GrayText',\n borderColor: 'GrayText',\n backgroundColor: 'Window',\n },\n _d),\n },\n // Split button styles\n splitButtonContainer: {\n selectors: (_e = {},\n _e[HighContrastSelector] = {\n border: 'none',\n },\n _e),\n },\n splitButtonDivider: __assign(__assign({}, splitButtonDividerBaseStyles()), { backgroundColor: p.white, selectors: (_f = {},\n _f[HighContrastSelector] = {\n backgroundColor: 'Window',\n },\n _f) }),\n splitButtonMenuButton: {\n backgroundColor: s.primaryButtonBackground,\n color: s.primaryButtonText,\n selectors: (_g = {},\n _g[HighContrastSelector] = {\n backgroundColor: 'WindowText',\n },\n _g[':hover'] = {\n backgroundColor: s.primaryButtonBackgroundHovered,\n selectors: (_h = {},\n _h[HighContrastSelector] = {\n color: 'Highlight',\n },\n _h),\n },\n _g),\n },\n splitButtonMenuButtonDisabled: {\n backgroundColor: s.primaryButtonBackgroundDisabled,\n selectors: {\n ':hover': {\n backgroundColor: s.primaryButtonBackgroundDisabled,\n },\n },\n },\n splitButtonMenuButtonChecked: {\n backgroundColor: s.primaryButtonBackgroundPressed,\n selectors: {\n ':hover': {\n backgroundColor: s.primaryButtonBackgroundPressed,\n },\n },\n },\n splitButtonMenuButtonExpanded: {\n backgroundColor: s.primaryButtonBackgroundPressed,\n selectors: {\n ':hover': {\n backgroundColor: s.primaryButtonBackgroundPressed,\n },\n },\n },\n splitButtonMenuIcon: {\n color: s.primaryButtonText,\n },\n splitButtonMenuIconDisabled: {\n color: p.neutralTertiary,\n selectors: (_j = {},\n _j[HighContrastSelector] = {\n color: 'GrayText',\n },\n _j),\n },\n };\n}\n//# sourceMappingURL=ButtonThemes.js.map","import { concatStyleSets, FontWeights } from '../../../Styling';\nimport { memoizeFunction } from '../../../Utilities';\nimport { getStyles as getBaseButtonStyles } from '../BaseButton.styles';\nimport { getStyles as getSplitButtonStyles } from '../SplitButton/SplitButton.styles';\nimport { primaryStyles, standardStyles } from '../ButtonThemes';\nvar DEFAULT_BUTTON_HEIGHT = '32px';\nvar DEFAULT_BUTTON_MIN_WIDTH = '80px';\nexport var getStyles = memoizeFunction(function (theme, customStyles, primary) {\n var baseButtonStyles = getBaseButtonStyles(theme);\n var splitButtonStyles = getSplitButtonStyles(theme);\n var defaultButtonStyles = {\n root: {\n minWidth: DEFAULT_BUTTON_MIN_WIDTH,\n height: DEFAULT_BUTTON_HEIGHT,\n },\n label: {\n fontWeight: FontWeights.semibold,\n },\n };\n return concatStyleSets(baseButtonStyles, defaultButtonStyles, primary ? primaryStyles(theme) : standardStyles(theme), splitButtonStyles, customStyles);\n});\n//# sourceMappingURL=DefaultButton.styles.js.map","import { __assign, __decorate, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { BaseButton } from '../BaseButton';\nimport { customizable, nullRender } from '../../../Utilities';\nimport { getStyles } from './DefaultButton.styles';\n/**\n * {@docCategory Button}\n */\nvar DefaultButton = /** @class */ (function (_super) {\n __extends(DefaultButton, _super);\n function DefaultButton() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n DefaultButton.prototype.render = function () {\n var _a = this.props, _b = _a.primary, primary = _b === void 0 ? false : _b, styles = _a.styles, theme = _a.theme;\n return (React.createElement(BaseButton, __assign({}, this.props, { variantClassName: primary ? 'ms-Button--primary' : 'ms-Button--default', styles: getStyles(theme, styles, primary), onRenderDescription: nullRender })));\n };\n DefaultButton = __decorate([\n customizable('DefaultButton', ['theme', 'styles'], true)\n ], DefaultButton);\n return DefaultButton;\n}(React.Component));\nexport { DefaultButton };\n//# sourceMappingURL=DefaultButton.js.map","import { concatStyleSets, HighContrastSelector } from '../../../Styling';\nimport { memoizeFunction } from '../../../Utilities';\nimport { getStyles as getBaseButtonStyles } from '../BaseButton.styles';\nvar DEFAULT_BUTTON_HEIGHT = '40px';\nvar DEFAULT_PADDING = '0 4px';\nexport var getStyles = memoizeFunction(function (theme, customStyles) {\n var _a, _b, _c;\n var baseButtonStyles = getBaseButtonStyles(theme);\n var actionButtonStyles = {\n root: {\n padding: DEFAULT_PADDING,\n height: DEFAULT_BUTTON_HEIGHT,\n color: theme.palette.neutralPrimary,\n backgroundColor: 'transparent',\n border: '1px solid transparent',\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n borderColor: 'Window',\n },\n _a),\n },\n rootHovered: {\n color: theme.palette.themePrimary,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n color: 'Highlight',\n },\n _b),\n },\n iconHovered: {\n color: theme.palette.themePrimary,\n },\n rootPressed: {\n color: theme.palette.black,\n },\n rootExpanded: {\n color: theme.palette.themePrimary,\n },\n iconPressed: {\n color: theme.palette.themeDarker,\n },\n rootDisabled: {\n color: theme.palette.neutralTertiary,\n backgroundColor: 'transparent',\n borderColor: 'transparent',\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n color: 'GrayText',\n },\n _c),\n },\n rootChecked: {\n color: theme.palette.black,\n },\n iconChecked: {\n color: theme.palette.themeDarker,\n },\n flexContainer: {\n justifyContent: 'flex-start',\n },\n icon: {\n color: theme.palette.themeDarkAlt,\n },\n iconDisabled: {\n color: 'inherit',\n },\n menuIcon: {\n color: theme.palette.neutralSecondary,\n },\n textContainer: {\n flexGrow: 0,\n },\n };\n return concatStyleSets(baseButtonStyles, actionButtonStyles, customStyles);\n});\n//# sourceMappingURL=ActionButton.styles.js.map","import { __assign, __decorate, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { BaseButton } from '../BaseButton';\nimport { customizable, nullRender } from '../../../Utilities';\nimport { getStyles } from './ActionButton.styles';\n/**\n * {@docCategory Button}\n */\nvar ActionButton = /** @class */ (function (_super) {\n __extends(ActionButton, _super);\n function ActionButton() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n ActionButton.prototype.render = function () {\n var _a = this.props, styles = _a.styles, theme = _a.theme;\n return (React.createElement(BaseButton, __assign({}, this.props, { variantClassName: \"ms-Button--action ms-Button--command\", styles: getStyles(theme, styles), onRenderDescription: nullRender })));\n };\n ActionButton = __decorate([\n customizable('ActionButton', ['theme', 'styles'], true)\n ], ActionButton);\n return ActionButton;\n}(React.Component));\nexport { ActionButton };\n//# sourceMappingURL=ActionButton.js.map","import { concatStyleSets, HighContrastSelector } from '../../../Styling';\nimport { memoizeFunction } from '../../../Utilities';\nimport { getStyles as getBaseButtonStyles } from '../BaseButton.styles';\nimport { getStyles as getSplitButtonStyles } from '../SplitButton/SplitButton.styles';\nexport var getStyles = memoizeFunction(function (theme, customStyles) {\n var _a;\n var baseButtonStyles = getBaseButtonStyles(theme);\n var splitButtonStyles = getSplitButtonStyles(theme);\n var palette = theme.palette, semanticColors = theme.semanticColors;\n var iconButtonStyles = {\n root: {\n padding: '0 4px',\n width: '32px',\n height: '32px',\n backgroundColor: 'transparent',\n border: 'none',\n color: semanticColors.link,\n },\n rootHovered: {\n color: palette.themeDarkAlt,\n backgroundColor: palette.neutralLighter,\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n borderColor: 'Highlight',\n color: 'Highlight',\n },\n _a),\n },\n rootHasMenu: {\n width: 'auto',\n },\n rootPressed: {\n color: palette.themeDark,\n backgroundColor: palette.neutralLight,\n },\n rootExpanded: {\n color: palette.themeDark,\n backgroundColor: palette.neutralLight,\n },\n rootChecked: {\n color: palette.themeDark,\n backgroundColor: palette.neutralLight,\n },\n rootCheckedHovered: {\n color: palette.themeDark,\n backgroundColor: palette.neutralQuaternaryAlt,\n },\n rootDisabled: {\n color: palette.neutralTertiaryAlt,\n },\n };\n return concatStyleSets(baseButtonStyles, iconButtonStyles, splitButtonStyles, customStyles);\n});\n//# sourceMappingURL=IconButton.styles.js.map","import { __assign, __decorate, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { BaseButton } from '../BaseButton';\nimport { customizable, nullRender } from '../../../Utilities';\nimport { getStyles } from './IconButton.styles';\n/**\n * {@docCategory Button}\n */\nvar IconButton = /** @class */ (function (_super) {\n __extends(IconButton, _super);\n function IconButton() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n IconButton.prototype.render = function () {\n var _a = this.props, styles = _a.styles, theme = _a.theme;\n return (React.createElement(BaseButton, __assign({}, this.props, { variantClassName: \"ms-Button--icon\", styles: getStyles(theme, styles), onRenderText: nullRender, onRenderDescription: nullRender })));\n };\n IconButton = __decorate([\n customizable('IconButton', ['theme', 'styles'], true)\n ], IconButton);\n return IconButton;\n}(React.Component));\nexport { IconButton };\n//# sourceMappingURL=IconButton.js.map","import { __assign, __decorate, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { customizable, nullRender } from '../../../Utilities';\nimport { DefaultButton } from '../DefaultButton/DefaultButton';\n/**\n * {@docCategory Button}\n */\nvar PrimaryButton = /** @class */ (function (_super) {\n __extends(PrimaryButton, _super);\n function PrimaryButton() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n PrimaryButton.prototype.render = function () {\n return React.createElement(DefaultButton, __assign({}, this.props, { primary: true, onRenderDescription: nullRender }));\n };\n PrimaryButton = __decorate([\n customizable('PrimaryButton', ['theme', 'styles'], true)\n ], PrimaryButton);\n return PrimaryButton;\n}(React.Component));\nexport { PrimaryButton };\n//# sourceMappingURL=PrimaryButton.js.map","import { __assign } from \"tslib\";\nimport { concatStyleSets, getFocusStyle, HighContrastSelector, getHighContrastNoAdjustStyle } from '../../../Styling';\nimport { memoizeFunction } from '../../../Utilities';\nimport { getStyles as getBaseButtonStyles } from '../BaseButton.styles';\nimport { getStyles as getSplitButtonStyles } from '../SplitButton/SplitButton.styles';\nimport { ButtonGlobalClassNames } from '../BaseButton.classNames';\nexport var getStyles = memoizeFunction(function (theme, customStyles, focusInset, focusColor) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;\n var baseButtonStyles = getBaseButtonStyles(theme);\n var baseSplitButtonStyles = getSplitButtonStyles(theme);\n var p = theme.palette, semanticColors = theme.semanticColors;\n var commandButtonHighContrastFocus = {\n left: 4,\n top: 4,\n bottom: 4,\n right: 4,\n border: 'none',\n };\n var commandButtonStyles = {\n root: [\n getFocusStyle(theme, {\n inset: 2,\n highContrastStyle: commandButtonHighContrastFocus,\n borderColor: 'transparent',\n }),\n theme.fonts.medium,\n {\n minWidth: '40px',\n backgroundColor: p.white,\n color: p.neutralPrimary,\n padding: '0 4px',\n border: 'none',\n borderRadius: 0,\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n border: 'none',\n },\n _a),\n },\n ],\n rootHovered: {\n backgroundColor: p.neutralLighter,\n color: p.neutralDark,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n color: 'Highlight',\n },\n _b[\".\" + ButtonGlobalClassNames.msButtonIcon] = {\n color: p.themeDarkAlt,\n },\n _b[\".\" + ButtonGlobalClassNames.msButtonMenuIcon] = {\n color: p.neutralPrimary,\n },\n _b),\n },\n rootPressed: {\n backgroundColor: p.neutralLight,\n color: p.neutralDark,\n selectors: (_c = {},\n _c[\".\" + ButtonGlobalClassNames.msButtonIcon] = {\n color: p.themeDark,\n },\n _c[\".\" + ButtonGlobalClassNames.msButtonMenuIcon] = {\n color: p.neutralPrimary,\n },\n _c),\n },\n rootChecked: {\n backgroundColor: p.neutralLight,\n color: p.neutralDark,\n selectors: (_d = {},\n _d[\".\" + ButtonGlobalClassNames.msButtonIcon] = {\n color: p.themeDark,\n },\n _d[\".\" + ButtonGlobalClassNames.msButtonMenuIcon] = {\n color: p.neutralPrimary,\n },\n _d),\n },\n rootCheckedHovered: {\n backgroundColor: p.neutralQuaternaryAlt,\n selectors: (_e = {},\n _e[\".\" + ButtonGlobalClassNames.msButtonIcon] = {\n color: p.themeDark,\n },\n _e[\".\" + ButtonGlobalClassNames.msButtonMenuIcon] = {\n color: p.neutralPrimary,\n },\n _e),\n },\n rootExpanded: {\n backgroundColor: p.neutralLight,\n color: p.neutralDark,\n selectors: (_f = {},\n _f[\".\" + ButtonGlobalClassNames.msButtonIcon] = {\n color: p.themeDark,\n },\n _f[\".\" + ButtonGlobalClassNames.msButtonMenuIcon] = {\n color: p.neutralPrimary,\n },\n _f),\n },\n rootExpandedHovered: {\n backgroundColor: p.neutralQuaternaryAlt,\n },\n rootDisabled: {\n backgroundColor: p.white,\n selectors: (_g = {},\n _g[\".\" + ButtonGlobalClassNames.msButtonIcon] = {\n color: semanticColors.disabledBodySubtext,\n selectors: (_h = {},\n _h[HighContrastSelector] = __assign({ color: 'GrayText' }, getHighContrastNoAdjustStyle()),\n _h),\n },\n _g[HighContrastSelector] = __assign({ color: 'GrayText', backgroundColor: 'Window' }, getHighContrastNoAdjustStyle()),\n _g),\n },\n // Split button styles\n splitButtonContainer: {\n height: '100%',\n selectors: (_j = {},\n _j[HighContrastSelector] = {\n border: 'none',\n },\n _j),\n },\n splitButtonDividerDisabled: {\n selectors: (_k = {},\n _k[HighContrastSelector] = {\n backgroundColor: 'Window',\n },\n _k),\n },\n splitButtonDivider: {\n backgroundColor: p.neutralTertiaryAlt,\n },\n splitButtonMenuButton: {\n backgroundColor: p.white,\n border: 'none',\n borderTopRightRadius: '0',\n borderBottomRightRadius: '0',\n color: p.neutralSecondary,\n selectors: {\n ':hover': {\n backgroundColor: p.neutralLighter,\n color: p.neutralDark,\n selectors: (_l = {},\n _l[HighContrastSelector] = {\n color: 'Highlight',\n },\n _l[\".\" + ButtonGlobalClassNames.msButtonIcon] = {\n color: p.neutralPrimary,\n },\n _l),\n },\n ':active': {\n backgroundColor: p.neutralLight,\n selectors: (_m = {},\n _m[\".\" + ButtonGlobalClassNames.msButtonIcon] = {\n color: p.neutralPrimary,\n },\n _m),\n },\n },\n },\n splitButtonMenuButtonDisabled: {\n backgroundColor: p.white,\n selectors: (_o = {},\n _o[HighContrastSelector] = __assign({ color: 'GrayText', border: 'none', backgroundColor: 'Window' }, getHighContrastNoAdjustStyle()),\n _o),\n },\n splitButtonMenuButtonChecked: {\n backgroundColor: p.neutralLight,\n color: p.neutralDark,\n selectors: {\n ':hover': {\n backgroundColor: p.neutralQuaternaryAlt,\n },\n },\n },\n splitButtonMenuButtonExpanded: {\n backgroundColor: p.neutralLight,\n color: p.black,\n selectors: {\n ':hover': {\n backgroundColor: p.neutralQuaternaryAlt,\n },\n },\n },\n splitButtonMenuIcon: {\n color: p.neutralPrimary,\n },\n splitButtonMenuIconDisabled: {\n color: p.neutralTertiary,\n },\n label: {\n fontWeight: 'normal', // theme.fontWeights.semibold,\n },\n icon: {\n color: p.themePrimary,\n },\n menuIcon: (_p = {\n color: p.neutralSecondary\n },\n _p[HighContrastSelector] = {\n color: 'GrayText',\n },\n _p),\n };\n return concatStyleSets(baseButtonStyles, baseSplitButtonStyles, commandButtonStyles, customStyles);\n});\n//# sourceMappingURL=CommandBarButton.styles.js.map","import { __assign, __decorate, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { BaseButton } from '../BaseButton';\nimport { customizable, nullRender } from '../../../Utilities';\nimport { getStyles } from './CommandBarButton.styles';\n/**\n * {@docCategory Button}\n */\nvar CommandBarButton = /** @class */ (function (_super) {\n __extends(CommandBarButton, _super);\n function CommandBarButton() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n CommandBarButton.prototype.render = function () {\n var _a = this.props, styles = _a.styles, theme = _a.theme;\n return (React.createElement(BaseButton, __assign({}, this.props, { variantClassName: \"ms-Button--commandBar\", styles: getStyles(theme, styles), onRenderDescription: nullRender })));\n };\n CommandBarButton = __decorate([\n customizable('CommandBarButton', ['theme', 'styles'], true)\n ], CommandBarButton);\n return CommandBarButton;\n}(React.Component));\nexport { CommandBarButton };\n//# sourceMappingURL=CommandBarButton.js.map","import { ActionButton } from '../ActionButton/ActionButton';\n/**\n * {@docCategory Button}\n */\nexport var CommandButton = ActionButton;\n//# sourceMappingURL=CommandButton.js.map","/**\n * {@docCategory ResizeGroup}\n */\nexport var ResizeGroupDirection;\n(function (ResizeGroupDirection) {\n ResizeGroupDirection[ResizeGroupDirection[\"horizontal\"] = 0] = \"horizontal\";\n ResizeGroupDirection[ResizeGroupDirection[\"vertical\"] = 1] = \"vertical\";\n})(ResizeGroupDirection || (ResizeGroupDirection = {}));\n//# sourceMappingURL=ResizeGroup.types.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { divProperties, getNativeProps } from '../../Utilities';\nimport { ResizeGroupDirection } from './ResizeGroup.types';\nimport { useConst, useMergedRefs, useAsync, useOnEvent, useWarnings } from '@fluentui/react-hooks';\nimport { useWindow } from '../../WindowProvider';\nvar RESIZE_DELAY = 16;\n/**\n * Returns a simple object is able to store measurements with a given key.\n */\nexport var getMeasurementCache = function () {\n var measurementsCache = {};\n return {\n /**\n * Checks if the provided data has a cacheKey. If it has a cacheKey and there is a\n * corresponding entry in the measurementsCache, then it will return that value.\n * Returns undefined otherwise.\n */\n getCachedMeasurement: function (data) {\n if (data && data.cacheKey && measurementsCache.hasOwnProperty(data.cacheKey)) {\n return measurementsCache[data.cacheKey];\n }\n return undefined;\n },\n /**\n * Should be called whenever there is a new measurement associated with a given data object.\n * If the data has a cacheKey, store that measurement in the measurementsCache.\n */\n addMeasurementToCache: function (data, measurement) {\n if (data.cacheKey) {\n measurementsCache[data.cacheKey] = measurement;\n }\n },\n };\n};\n/**\n * Returns a function that is able to compute the next state for the ResizeGroup given the current\n * state and any measurement updates.\n */\nexport var getNextResizeGroupStateProvider = function (measurementCache) {\n if (measurementCache === void 0) { measurementCache = getMeasurementCache(); }\n var _measurementCache = measurementCache;\n var _containerDimension;\n /**\n * Gets the width/height of the data rendered in a hidden div.\n * @param measuredData - The data corresponding to the measurement we wish to take.\n * @param getElementToMeasureDimension - A function that returns the measurement of the rendered data.\n * Only called when the measurement is not in the cache.\n */\n function _getMeasuredDimension(measuredData, getElementToMeasureDimension) {\n var cachedDimension = _measurementCache.getCachedMeasurement(measuredData);\n if (cachedDimension !== undefined) {\n return cachedDimension;\n }\n var measuredDimension = getElementToMeasureDimension();\n _measurementCache.addMeasurementToCache(measuredData, measuredDimension);\n return measuredDimension;\n }\n /**\n * Will get the next IResizeGroupState based on the current data while trying to shrink contents\n * to fit in the container.\n * @param data - The initial data point to start measuring.\n * @param onReduceData - Function that transforms the data into something that should render with less width/height.\n * @param getElementToMeasureDimension - A function that returns the measurement of the rendered data.\n * Only called when the measurement is not in the cache.\n */\n function _shrinkContentsUntilTheyFit(data, onReduceData, getElementToMeasureDimension) {\n var dataToMeasure = data;\n var measuredDimension = _getMeasuredDimension(data, getElementToMeasureDimension);\n while (measuredDimension > _containerDimension) {\n var nextMeasuredData = onReduceData(dataToMeasure);\n // We don't want to get stuck in an infinite render loop when there are no more\n // scaling steps, so implementations of onReduceData should return undefined when\n // there are no more scaling states to apply.\n if (nextMeasuredData === undefined) {\n return {\n renderedData: dataToMeasure,\n resizeDirection: undefined,\n dataToMeasure: undefined,\n };\n }\n measuredDimension = _measurementCache.getCachedMeasurement(nextMeasuredData);\n // If the measurement isn't in the cache, we need to re-render with some data in a hidden div\n if (measuredDimension === undefined) {\n return {\n dataToMeasure: nextMeasuredData,\n resizeDirection: 'shrink',\n };\n }\n dataToMeasure = nextMeasuredData;\n }\n return {\n renderedData: dataToMeasure,\n resizeDirection: undefined,\n dataToMeasure: undefined,\n };\n }\n /**\n * This function should be called when the state changes in a manner that might allow for more content to fit\n * on the screen, such as the window width/height growing.\n * @param data - The initial data point to start measuring.\n * @param onGrowData - Function that transforms the data into something that may take up more space when rendering.\n * @param getElementToMeasureDimension - A function that returns the measurement of the rendered data.\n * Only called when the measurement is not in the cache.\n */\n function _growDataUntilItDoesNotFit(data, onGrowData, getElementToMeasureDimension, onReduceData) {\n var dataToMeasure = data;\n var measuredDimension = _getMeasuredDimension(data, getElementToMeasureDimension);\n while (measuredDimension < _containerDimension) {\n var nextMeasuredData = onGrowData(dataToMeasure);\n // We don't want to get stuck in an infinite render loop when there are no more\n // scaling steps, so implementations of onGrowData should return undefined when\n // there are no more scaling states to apply.\n if (nextMeasuredData === undefined) {\n return {\n renderedData: dataToMeasure,\n resizeDirection: undefined,\n dataToMeasure: undefined,\n };\n }\n measuredDimension = _measurementCache.getCachedMeasurement(nextMeasuredData);\n // If the measurement isn't in the cache, we need to re-render with some data in a hidden div\n if (measuredDimension === undefined) {\n return {\n dataToMeasure: nextMeasuredData,\n };\n }\n dataToMeasure = nextMeasuredData;\n }\n // Once the loop is done, we should now shrink until the contents fit.\n return __assign({ resizeDirection: 'shrink' }, _shrinkContentsUntilTheyFit(dataToMeasure, onReduceData, getElementToMeasureDimension));\n }\n /**\n * Handles an update to the container width/height.\n * Should only be called when we knew the previous container width/height.\n * @param newDimension - The new width/height of the container.\n * @param fullDimensionData - The initial data passed in as a prop to resizeGroup.\n * @param renderedData - The data that was rendered prior to the container size changing.\n * @param onGrowData - Set to true if the Resize group has an onGrowData function.\n */\n function _updateContainerDimension(newDimension, fullDimensionData, renderedData, onGrowData) {\n var nextState;\n if (newDimension > _containerDimension) {\n if (onGrowData) {\n nextState = {\n resizeDirection: 'grow',\n dataToMeasure: onGrowData(renderedData),\n };\n }\n else {\n nextState = {\n resizeDirection: 'shrink',\n dataToMeasure: fullDimensionData,\n };\n }\n }\n else {\n nextState = {\n resizeDirection: 'shrink',\n dataToMeasure: renderedData,\n };\n }\n _containerDimension = newDimension;\n return __assign(__assign({}, nextState), { measureContainer: false });\n }\n function getNextState(props, currentState, getElementToMeasureDimension, newContainerDimension) {\n // If there is no new container width/height or data to measure, there is no need for a new state update\n if (newContainerDimension === undefined && currentState.dataToMeasure === undefined) {\n return undefined;\n }\n if (newContainerDimension) {\n // If we know the last container size and we rendered data at that width/height, we can do an optimized render\n if (_containerDimension && currentState.renderedData && !currentState.dataToMeasure) {\n return __assign(__assign({}, currentState), _updateContainerDimension(newContainerDimension, props.data, currentState.renderedData, props.onGrowData));\n }\n // If we are just setting the container width/height for the first time, we can't do any optimizations\n _containerDimension = newContainerDimension;\n }\n var nextState = __assign(__assign({}, currentState), { measureContainer: false });\n if (currentState.dataToMeasure) {\n if (currentState.resizeDirection === 'grow' && props.onGrowData) {\n nextState = __assign(__assign({}, nextState), _growDataUntilItDoesNotFit(currentState.dataToMeasure, props.onGrowData, getElementToMeasureDimension, props.onReduceData));\n }\n else {\n nextState = __assign(__assign({}, nextState), _shrinkContentsUntilTheyFit(currentState.dataToMeasure, props.onReduceData, getElementToMeasureDimension));\n }\n }\n return nextState;\n }\n /** Function that determines if we need to render content for measurement based on the measurement cache contents. */\n function shouldRenderDataForMeasurement(dataToMeasure) {\n if (!dataToMeasure || _measurementCache.getCachedMeasurement(dataToMeasure) !== undefined) {\n return false;\n }\n return true;\n }\n function getInitialResizeGroupState(data) {\n return {\n dataToMeasure: __assign({}, data),\n resizeDirection: 'grow',\n measureContainer: true,\n };\n }\n return {\n getNextState: getNextState,\n shouldRenderDataForMeasurement: shouldRenderDataForMeasurement,\n getInitialResizeGroupState: getInitialResizeGroupState,\n };\n};\n// Provides a context property that (if true) tells any child components that\n// they are only being used for measurement purposes and will not be visible.\nexport var MeasuredContext = React.createContext({ isMeasured: false });\n// Styles for the hidden div used for measurement\nvar hiddenDivStyles = { position: 'fixed', visibility: 'hidden' };\nvar hiddenParentStyles = { position: 'relative' };\nvar COMPONENT_NAME = 'ResizeGroup';\n/**\n * Use useReducer instead of userState because React is not batching the state updates\n * when state is set in callbacks of setTimeout or requestAnimationFrame.\n * See issue: https://github.com/facebook/react/issues/14259\n */\nfunction resizeDataReducer(state, action) {\n var _a;\n switch (action.type) {\n case 'resizeData':\n return __assign({}, action.value);\n case 'dataToMeasure':\n return __assign(__assign({}, state), { dataToMeasure: action.value, resizeDirection: 'grow', measureContainer: true });\n default:\n return __assign(__assign({}, state), (_a = {}, _a[action.type] = action.value, _a));\n }\n}\nfunction useResizeState(props, nextResizeGroupStateProvider, rootRef) {\n var initialStateData = useConst(function () { return nextResizeGroupStateProvider.getInitialResizeGroupState(props.data); });\n var _a = React.useReducer(resizeDataReducer, initialStateData), resizeData = _a[0], dispatchResizeDataAction = _a[1];\n // Reset state when new data is provided\n React.useEffect(function () {\n dispatchResizeDataAction({\n type: 'dataToMeasure',\n value: props.data,\n });\n }, [props.data]);\n // Because it's possible that we may force more than one re-render per animation frame, we\n // want to make sure that the RAF request is using the most recent data.\n var stateRef = React.useRef(initialStateData);\n stateRef.current = __assign({}, resizeData);\n var updateResizeState = React.useCallback(function (nextState) {\n if (nextState) {\n dispatchResizeDataAction({\n type: 'resizeData',\n value: nextState,\n });\n }\n }, []);\n var remeasure = React.useCallback(function () {\n if (rootRef.current) {\n dispatchResizeDataAction({\n type: 'measureContainer',\n value: true,\n });\n }\n }, [rootRef]);\n return [stateRef, updateResizeState, remeasure];\n}\nfunction useResizingBehavior(props, rootRef) {\n var nextResizeGroupStateProvider = useConst(getNextResizeGroupStateProvider);\n // A div that can be used for the initial measurement so that we can avoid mounting a second instance\n // of the component being measured for the initial render.\n var initialHiddenDiv = React.useRef(null);\n // A hidden div that is used for mounting a new instance of the component for measurement in a hidden\n // div without unmounting the currently visible content.\n var updateHiddenDiv = React.useRef(null);\n // Tracks if any content has been rendered to the user. This enables us to do some performance optimizations\n // for the initial render.\n var hasRenderedContent = React.useRef(false);\n var async = useAsync();\n var _a = useResizeState(props, nextResizeGroupStateProvider, rootRef), stateRef = _a[0], updateResizeState = _a[1], remeasure = _a[2];\n React.useEffect(function () {\n var _a;\n if (stateRef.current.renderedData) {\n hasRenderedContent.current = true;\n (_a = props.dataDidRender) === null || _a === void 0 ? void 0 : _a.call(props, stateRef.current.renderedData);\n }\n });\n React.useEffect(function () {\n async.requestAnimationFrame(function () {\n var containerDimension = undefined;\n if (stateRef.current.measureContainer && rootRef.current) {\n var boundingRect = rootRef.current.getBoundingClientRect();\n containerDimension =\n props.direction === ResizeGroupDirection.vertical ? boundingRect.height : boundingRect.width;\n }\n var nextState = nextResizeGroupStateProvider.getNextState(props, stateRef.current, function () {\n var refToMeasure = !hasRenderedContent.current ? initialHiddenDiv : updateHiddenDiv;\n if (!refToMeasure.current) {\n return 0;\n }\n var measuredBoundingRect = refToMeasure.current.getBoundingClientRect();\n return props.direction === ResizeGroupDirection.vertical\n ? measuredBoundingRect.height\n : measuredBoundingRect.width;\n }, containerDimension);\n updateResizeState(nextState);\n }, rootRef.current);\n });\n var win = useWindow();\n useOnEvent(win, 'resize', async.debounce(remeasure, RESIZE_DELAY, { leading: true }));\n var dataNeedsMeasuring = nextResizeGroupStateProvider.shouldRenderDataForMeasurement(stateRef.current.dataToMeasure);\n var isInitialMeasure = !hasRenderedContent.current && dataNeedsMeasuring;\n return [\n stateRef.current.dataToMeasure,\n stateRef.current.renderedData,\n remeasure,\n initialHiddenDiv,\n updateHiddenDiv,\n dataNeedsMeasuring,\n isInitialMeasure,\n ];\n}\nfunction useDebugWarnings(props) {\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks -- build-time conditional\n useWarnings({\n name: COMPONENT_NAME,\n props: props,\n deprecations: { styles: 'className' },\n });\n }\n}\nvar measuredContextValue = { isMeasured: true };\nexport var ResizeGroupBase = React.forwardRef(function (props, forwardedRef) {\n var rootRef = React.useRef(null);\n // The root div which is the container inside of which we are trying to fit content.\n var mergedRootRef = useMergedRefs(rootRef, forwardedRef);\n var _a = useResizingBehavior(props, rootRef), dataToMeasure = _a[0], renderedData = _a[1], remeasure = _a[2], initialHiddenDiv = _a[3], updateHiddenDiv = _a[4], dataNeedsMeasuring = _a[5], isInitialMeasure = _a[6];\n React.useImperativeHandle(props.componentRef, function () { return ({ remeasure: remeasure }); }, [remeasure]);\n useDebugWarnings(props);\n var className = props.className, onRenderData = props.onRenderData;\n var divProps = getNativeProps(props, divProperties, ['data']);\n // We only ever render the final content to the user. All measurements are done in a hidden div.\n // For the initial render, we want this to be as fast as possible, so we need to make sure that we only mount one\n // version of the component for measurement and the final render. For renders that update what is on screen, we\n // want to make sure that there are no jarring effects such as the screen flashing as we apply scaling steps for\n // measurement. In the update case, we mount a second version of the component just for measurement purposes and\n // leave the rendered content untouched until we know the next state to show to the user.\n return (React.createElement(\"div\", __assign({}, divProps, { className: className, ref: mergedRootRef }),\n React.createElement(\"div\", { style: hiddenParentStyles },\n dataNeedsMeasuring && !isInitialMeasure && (React.createElement(\"div\", { style: hiddenDivStyles, ref: updateHiddenDiv },\n React.createElement(MeasuredContext.Provider, { value: measuredContextValue }, onRenderData(dataToMeasure)))),\n React.createElement(\"div\", { ref: initialHiddenDiv, style: isInitialMeasure ? hiddenDivStyles : undefined, \"data-automation-id\": \"visibleContent\" }, isInitialMeasure ? onRenderData(dataToMeasure) : renderedData && onRenderData(renderedData)))));\n});\nResizeGroupBase.displayName = 'ResizeGroupBase';\n//# sourceMappingURL=ResizeGroup.base.js.map","import { ResizeGroupBase } from './ResizeGroup.base';\nexport var ResizeGroup = ResizeGroupBase;\n//# sourceMappingURL=ResizeGroup.js.map","import * as React from 'react';\nimport { Icon, FontIcon } from '../../Icon';\nimport { classNamesFunction } from '../../Utilities';\nvar getClassNames = classNamesFunction();\nexport var CheckBase = React.forwardRef(function (props, ref) {\n var _a = props.checked, checked = _a === void 0 ? false : _a, className = props.className, theme = props.theme, styles = props.styles, _b = props.useFastIcons, useFastIcons = _b === void 0 ? true : _b;\n var classNames = getClassNames(styles, { theme: theme, className: className, checked: checked });\n var IconComponent = useFastIcons ? FontIcon : Icon;\n return (React.createElement(\"div\", { className: classNames.root, ref: ref },\n React.createElement(IconComponent, { iconName: \"CircleRing\", className: classNames.circle }),\n React.createElement(IconComponent, { iconName: \"StatusCircleCheckmark\", className: classNames.check })));\n});\nCheckBase.displayName = 'CheckBase';\n//# sourceMappingURL=Check.base.js.map","import { __assign } from \"tslib\";\nimport { HighContrastSelector, getGlobalClassNames, IconFontSizes, getHighContrastNoAdjustStyle } from '../../Styling';\nimport { getRTL } from '../../Utilities';\nexport var CheckGlobalClassNames = {\n root: 'ms-Check',\n circle: 'ms-Check-circle',\n check: 'ms-Check-check',\n /** Must be manually applied to the parent element of the check. */\n checkHost: 'ms-Check-checkHost',\n};\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e;\n // eslint-disable-next-line deprecation/deprecation\n var _f = props.height, height = _f === void 0 ? props.checkBoxHeight || '18px' : _f, checked = props.checked, className = props.className, theme = props.theme;\n var palette = theme.palette, semanticColors = theme.semanticColors, fonts = theme.fonts;\n var isRTL = getRTL(theme);\n var classNames = getGlobalClassNames(CheckGlobalClassNames, theme);\n var sharedCircleCheck = {\n fontSize: height,\n position: 'absolute',\n left: 0,\n top: 0,\n width: height,\n height: height,\n textAlign: 'center',\n // inline-flex prevents the check from shifting with custom line height styles\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n verticalAlign: 'middle',\n };\n return {\n root: [\n classNames.root,\n fonts.medium,\n {\n // lineHeight currently needs to be a string to output without 'px'\n lineHeight: '1',\n width: height,\n height: height,\n verticalAlign: 'top',\n position: 'relative',\n userSelect: 'none',\n selectors: (_a = {\n ':before': {\n content: '\"\"',\n position: 'absolute',\n top: '1px',\n right: '1px',\n bottom: '1px',\n left: '1px',\n borderRadius: '50%',\n opacity: 1,\n background: semanticColors.bodyBackground,\n }\n },\n _a[\".\" + classNames.checkHost + \":hover &, .\" + classNames.checkHost + \":focus &, &:hover, &:focus\"] = {\n opacity: 1,\n },\n _a),\n },\n checked && [\n 'is-checked',\n {\n selectors: {\n ':before': {\n background: palette.themePrimary,\n opacity: 1,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n background: 'Window',\n },\n _b),\n },\n },\n },\n ],\n className,\n ],\n circle: [\n classNames.circle,\n sharedCircleCheck,\n {\n color: palette.neutralSecondary,\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n color: 'WindowText',\n },\n _c),\n },\n checked && {\n color: palette.white,\n },\n ],\n check: [\n classNames.check,\n sharedCircleCheck,\n {\n opacity: 0,\n color: palette.neutralSecondary,\n fontSize: IconFontSizes.medium,\n left: isRTL ? '-0.5px' : '.5px',\n top: '-1px',\n selectors: (_d = {\n ':hover': {\n opacity: 1,\n }\n },\n _d[HighContrastSelector] = __assign({}, getHighContrastNoAdjustStyle()),\n _d),\n },\n checked && {\n opacity: 1,\n color: palette.white,\n fontWeight: 900,\n selectors: (_e = {},\n _e[HighContrastSelector] = {\n border: 'none',\n color: 'WindowText',\n },\n _e),\n },\n ],\n checkHost: classNames.checkHost,\n };\n};\n//# sourceMappingURL=Check.styles.js.map","import { styled } from '../../Utilities';\nimport { CheckBase } from './Check.base';\nimport { getStyles } from './Check.styles';\nexport var Check = styled(CheckBase, getStyles, undefined, {\n scope: 'Check',\n}, true);\n//# sourceMappingURL=Check.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { useControllableValue, useId, useMergedRefs, useWarnings } from '@fluentui/react-hooks';\nimport { useFocusRects, classNamesFunction } from '@fluentui/utilities';\nimport { Icon } from '../Icon/Icon';\nvar getClassNames = classNamesFunction();\nexport var CheckboxBase = React.forwardRef(function (props, forwardedRef) {\n var disabled = props.disabled, required = props.required, inputProps = props.inputProps, name = props.name, ariaLabel = props.ariaLabel, ariaLabelledBy = props.ariaLabelledBy, ariaDescribedBy = props.ariaDescribedBy, ariaPositionInSet = props.ariaPositionInSet, ariaSetSize = props.ariaSetSize, title = props.title, checkmarkIconProps = props.checkmarkIconProps, styles = props.styles, theme = props.theme, className = props.className, _a = props.boxSide, boxSide = _a === void 0 ? 'start' : _a;\n var id = useId('checkbox-', props.id);\n var rootRef = React.useRef(null);\n var mergedRootRefs = useMergedRefs(rootRef, forwardedRef);\n var inputRef = React.useRef(null);\n var _b = useControllableValue(props.checked, props.defaultChecked, props.onChange), isChecked = _b[0], setIsChecked = _b[1];\n var _c = useControllableValue(props.indeterminate, props.defaultIndeterminate), isIndeterminate = _c[0], setIsIndeterminate = _c[1];\n useFocusRects(rootRef);\n useDebugWarning(props);\n useComponentRef(props, isChecked, isIndeterminate, inputRef);\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n disabled: disabled,\n indeterminate: isIndeterminate,\n checked: isChecked,\n reversed: boxSide !== 'start',\n isUsingCustomLabelRender: !!props.onRenderLabel,\n });\n var onChange = function (ev) {\n if (isIndeterminate) {\n // If indeterminate, clicking the checkbox *only* removes the indeterminate state (or if\n // controlled, lets the consumer know to change it by calling onChange). It doesn't\n // change the checked state.\n setIsChecked(!!isChecked, ev);\n setIsIndeterminate(false);\n }\n else {\n setIsChecked(!isChecked, ev);\n }\n };\n var defaultLabelRenderer = React.useCallback(function (checkboxProps) {\n if (!checkboxProps) {\n return null;\n }\n return checkboxProps.label ? (React.createElement(\"span\", { className: classNames.text, title: checkboxProps.title }, checkboxProps.label)) : null;\n }, [classNames.text]);\n var onRenderLabel = props.onRenderLabel || defaultLabelRenderer;\n var ariaChecked = isIndeterminate\n ? 'mixed'\n : undefined;\n var mergedInputProps = __assign(__assign({ className: classNames.input, type: 'checkbox' }, inputProps), { checked: !!isChecked, disabled: disabled, required: required, name: name, id: id, title: title, onChange: onChange, 'aria-disabled': disabled, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-posinset': ariaPositionInSet, 'aria-setsize': ariaSetSize, 'aria-checked': ariaChecked });\n return (React.createElement(\"div\", { className: classNames.root, title: title, ref: mergedRootRefs },\n React.createElement(\"input\", __assign({}, mergedInputProps, { ref: inputRef, title: title, \"data-ktp-execute-target\": true })),\n React.createElement(\"label\", { className: classNames.label, htmlFor: id },\n React.createElement(\"div\", { className: classNames.checkbox, \"data-ktp-target\": true },\n React.createElement(Icon, __assign({ iconName: \"CheckMark\" }, checkmarkIconProps, { className: classNames.checkmark }))),\n onRenderLabel(props, defaultLabelRenderer))));\n});\nCheckboxBase.displayName = 'CheckboxBase';\nfunction useDebugWarning(props) {\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks -- build-time conditional\n useWarnings({\n name: 'Checkbox',\n props: props,\n mutuallyExclusive: {\n checked: 'defaultChecked',\n indeterminate: 'defaultIndeterminate',\n },\n });\n }\n}\nfunction useComponentRef(props, isChecked, isIndeterminate, checkBoxRef) {\n React.useImperativeHandle(props.componentRef, function () { return ({\n get checked() {\n return !!isChecked;\n },\n get indeterminate() {\n return !!isIndeterminate;\n },\n focus: function () {\n if (checkBoxRef.current) {\n checkBoxRef.current.focus();\n }\n },\n }); }, [checkBoxRef, isChecked, isIndeterminate]);\n}\n//# sourceMappingURL=Checkbox.base.js.map","import { __assign } from \"tslib\";\nimport { HighContrastSelector, getGlobalClassNames, getHighContrastNoAdjustStyle } from '@fluentui/style-utilities';\nimport { IsFocusVisibleClassName } from '@fluentui/utilities';\nvar GlobalClassNames = {\n root: 'ms-Checkbox',\n label: 'ms-Checkbox-label',\n checkbox: 'ms-Checkbox-checkbox',\n checkmark: 'ms-Checkbox-checkmark',\n text: 'ms-Checkbox-text',\n};\nvar MS_CHECKBOX_LABEL_SIZE = '20px';\nvar MS_CHECKBOX_TRANSITION_DURATION = '200ms';\nvar MS_CHECKBOX_TRANSITION_TIMING = 'cubic-bezier(.4, 0, .23, 1)';\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;\n var className = props.className, theme = props.theme, reversed = props.reversed, checked = props.checked, disabled = props.disabled, isUsingCustomLabelRender = props.isUsingCustomLabelRender, indeterminate = props.indeterminate;\n var semanticColors = theme.semanticColors, effects = theme.effects, palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var checkmarkFontColor = semanticColors.inputForegroundChecked;\n // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.inputBorder\n var checkmarkFontColorHovered = palette.neutralSecondary;\n // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.smallInputBorder\n var checkboxBorderColor = palette.neutralPrimary;\n var checkboxBorderIndeterminateColor = semanticColors.inputBackgroundChecked;\n var checkboxBorderColorChecked = semanticColors.inputBackgroundChecked;\n var checkboxBorderColorDisabled = semanticColors.disabledBodySubtext;\n var checkboxBorderHoveredColor = semanticColors.inputBorderHovered;\n var checkboxBorderIndeterminateHoveredColor = semanticColors.inputBackgroundCheckedHovered;\n var checkboxBackgroundChecked = semanticColors.inputBackgroundChecked;\n // TODO: after updating the semanticColors slots mapping the following 2 tokens need to be\n // semanticColors.inputBackgroundCheckedHovered\n var checkboxBackgroundCheckedHovered = semanticColors.inputBackgroundCheckedHovered;\n var checkboxBorderColorCheckedHovered = semanticColors.inputBackgroundCheckedHovered;\n var checkboxHoveredTextColor = semanticColors.inputTextHovered;\n var checkboxBackgroundDisabledChecked = semanticColors.disabledBodySubtext;\n var checkboxTextColor = semanticColors.bodyText;\n var checkboxTextColorDisabled = semanticColors.disabledText;\n var indeterminateDotStyles = [\n (_a = {\n content: '\"\"',\n borderRadius: effects.roundedCorner2,\n position: 'absolute',\n width: 10,\n height: 10,\n top: 4,\n left: 4,\n boxSizing: 'border-box',\n borderWidth: 5,\n borderStyle: 'solid',\n borderColor: disabled ? checkboxBorderColorDisabled : checkboxBorderIndeterminateColor,\n transitionProperty: 'border-width, border, border-color',\n transitionDuration: MS_CHECKBOX_TRANSITION_DURATION,\n transitionTimingFunction: MS_CHECKBOX_TRANSITION_TIMING\n },\n _a[HighContrastSelector] = {\n borderColor: 'WindowText',\n },\n _a),\n ];\n return {\n root: [\n classNames.root,\n {\n position: 'relative',\n display: 'flex',\n },\n reversed && 'reversed',\n checked && 'is-checked',\n !disabled && 'is-enabled',\n disabled && 'is-disabled',\n !disabled && [\n !checked && (_b = {},\n _b[\":hover .\" + classNames.checkbox] = (_c = {\n borderColor: checkboxBorderHoveredColor\n },\n _c[HighContrastSelector] = {\n borderColor: 'Highlight',\n },\n _c),\n _b[\":focus .\" + classNames.checkbox] = { borderColor: checkboxBorderHoveredColor },\n _b[\":hover .\" + classNames.checkmark] = (_d = {\n color: checkmarkFontColorHovered,\n opacity: '1'\n },\n _d[HighContrastSelector] = {\n color: 'Highlight',\n },\n _d),\n _b),\n checked &&\n !indeterminate && (_e = {},\n _e[\":hover .\" + classNames.checkbox] = {\n background: checkboxBackgroundCheckedHovered,\n borderColor: checkboxBorderColorCheckedHovered,\n },\n _e[\":focus .\" + classNames.checkbox] = {\n background: checkboxBackgroundCheckedHovered,\n borderColor: checkboxBorderColorCheckedHovered,\n },\n _e[HighContrastSelector] = (_f = {},\n _f[\":hover .\" + classNames.checkbox] = {\n background: 'Highlight',\n borderColor: 'Highlight',\n },\n _f[\":focus .\" + classNames.checkbox] = {\n background: 'Highlight',\n },\n _f[\":focus:hover .\" + classNames.checkbox] = {\n background: 'Highlight',\n },\n _f[\":focus:hover .\" + classNames.checkmark] = {\n color: 'Window',\n },\n _f[\":hover .\" + classNames.checkmark] = {\n color: 'Window',\n },\n _f),\n _e),\n indeterminate && (_g = {},\n _g[\":hover .\" + classNames.checkbox + \", :hover .\" + classNames.checkbox + \":after\"] = (_h = {\n borderColor: checkboxBorderIndeterminateHoveredColor\n },\n _h[HighContrastSelector] = {\n borderColor: 'WindowText',\n },\n _h),\n _g[\":focus .\" + classNames.checkbox] = {\n borderColor: checkboxBorderIndeterminateHoveredColor,\n },\n _g[\":hover .\" + classNames.checkmark] = {\n opacity: '0',\n },\n _g),\n (_j = {},\n _j[\":hover .\" + classNames.text + \", :focus .\" + classNames.text] = (_k = {\n color: checkboxHoveredTextColor\n },\n _k[HighContrastSelector] = {\n color: disabled ? 'GrayText' : 'WindowText',\n },\n _k),\n _j),\n ],\n className,\n ],\n input: (_l = {\n position: 'absolute',\n background: 'none',\n opacity: 0\n },\n _l[\".\" + IsFocusVisibleClassName + \" &:focus + label::before\"] = (_m = {\n outline: '1px solid ' + theme.palette.neutralSecondary,\n outlineOffset: '2px'\n },\n _m[HighContrastSelector] = {\n outline: '1px solid WindowText',\n },\n _m),\n _l),\n label: [\n classNames.label,\n theme.fonts.medium,\n {\n display: 'flex',\n alignItems: isUsingCustomLabelRender ? 'center' : 'flex-start',\n cursor: disabled ? 'default' : 'pointer',\n position: 'relative',\n userSelect: 'none',\n },\n reversed && {\n flexDirection: 'row-reverse',\n justifyContent: 'flex-end',\n },\n {\n '&::before': {\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n content: '\"\"',\n pointerEvents: 'none',\n },\n },\n ],\n checkbox: [\n classNames.checkbox,\n (_o = {\n position: 'relative',\n display: 'flex',\n flexShrink: 0,\n alignItems: 'center',\n justifyContent: 'center',\n height: MS_CHECKBOX_LABEL_SIZE,\n width: MS_CHECKBOX_LABEL_SIZE,\n border: \"1px solid \" + checkboxBorderColor,\n borderRadius: effects.roundedCorner2,\n boxSizing: 'border-box',\n transitionProperty: 'background, border, border-color',\n transitionDuration: MS_CHECKBOX_TRANSITION_DURATION,\n transitionTimingFunction: MS_CHECKBOX_TRANSITION_TIMING,\n /* in case the icon is bigger than the box */\n overflow: 'hidden',\n ':after': indeterminate ? indeterminateDotStyles : null\n },\n _o[HighContrastSelector] = __assign({ borderColor: 'WindowText' }, getHighContrastNoAdjustStyle()),\n _o),\n indeterminate && {\n borderColor: checkboxBorderIndeterminateColor,\n },\n !reversed\n ? // This margin on the checkbox is for backwards compat. Notably it has the effect where a customRender\n // is used, there will be only a 4px margin from checkbox to label. The label by default would have\n // another 4px margin for a total of 8px margin between checkbox and label. We don't combine the two\n // (and move it into the text) to not incur a breaking change for everyone using custom render atm.\n {\n marginRight: 4,\n }\n : {\n marginLeft: 4,\n },\n !disabled &&\n !indeterminate &&\n checked && (_p = {\n background: checkboxBackgroundChecked,\n borderColor: checkboxBorderColorChecked\n },\n _p[HighContrastSelector] = {\n background: 'Highlight',\n borderColor: 'Highlight',\n },\n _p),\n disabled && (_q = {\n borderColor: checkboxBorderColorDisabled\n },\n _q[HighContrastSelector] = {\n borderColor: 'GrayText',\n },\n _q),\n checked &&\n disabled && (_r = {\n background: checkboxBackgroundDisabledChecked,\n borderColor: checkboxBorderColorDisabled\n },\n _r[HighContrastSelector] = {\n background: 'Window',\n },\n _r),\n ],\n checkmark: [\n classNames.checkmark,\n (_s = {\n opacity: checked && !indeterminate ? '1' : '0',\n color: checkmarkFontColor\n },\n _s[HighContrastSelector] = __assign({ color: disabled ? 'GrayText' : 'Window' }, getHighContrastNoAdjustStyle()),\n _s),\n ],\n text: [\n classNames.text,\n (_t = {\n color: disabled ? checkboxTextColorDisabled : checkboxTextColor,\n fontSize: fonts.medium.fontSize,\n lineHeight: '20px'\n },\n _t[HighContrastSelector] = __assign({ color: disabled ? 'GrayText' : 'WindowText' }, getHighContrastNoAdjustStyle()),\n _t),\n !reversed\n ? {\n marginLeft: 4,\n }\n : {\n marginRight: 4,\n },\n ],\n };\n};\n//# sourceMappingURL=Checkbox.styles.js.map","import { styled } from '@fluentui/utilities';\nimport { CheckboxBase } from './Checkbox.base';\nimport { getStyles } from './Checkbox.styles';\nexport var Checkbox = styled(CheckboxBase, getStyles, undefined, { scope: 'Checkbox' });\n//# sourceMappingURL=Checkbox.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { divProperties, getNativeProps } from '../../Utilities';\nimport { classNamesFunction } from '../../Utilities';\nvar getClassNames = classNamesFunction({\n // Label is used a lot by other components.\n // It's likely to see expected cases which pass different className to the Label.\n // Therefore setting a larger cache size.\n cacheSize: 100,\n});\nvar LabelBase = /** @class */ (function (_super) {\n __extends(LabelBase, _super);\n function LabelBase() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n LabelBase.prototype.render = function () {\n var _a = this.props, _b = _a.as, RootType = _b === void 0 ? 'label' : _b, children = _a.children, className = _a.className, disabled = _a.disabled, styles = _a.styles, required = _a.required, theme = _a.theme;\n var classNames = getClassNames(styles, {\n className: className,\n disabled: disabled,\n required: required,\n theme: theme,\n });\n return (React.createElement(RootType, __assign({}, getNativeProps(this.props, divProperties), { className: classNames.root }), children));\n };\n return LabelBase;\n}(React.Component));\nexport { LabelBase };\n//# sourceMappingURL=Label.base.js.map","import { __assign } from \"tslib\";\nimport { HighContrastSelector, FontWeights, getHighContrastNoAdjustStyle } from '../../Styling';\nexport var getStyles = function (props) {\n var _a;\n var theme = props.theme, className = props.className, disabled = props.disabled, required = props.required;\n var semanticColors = theme.semanticColors;\n // Tokens\n var labelFontWeight = FontWeights.semibold;\n var labelColor = semanticColors.bodyText;\n var labelDisabledColor = semanticColors.disabledBodyText;\n var labelRequiredStarColor = semanticColors.errorText;\n return {\n root: [\n 'ms-Label',\n theme.fonts.medium,\n {\n fontWeight: labelFontWeight,\n color: labelColor,\n boxSizing: 'border-box',\n boxShadow: 'none',\n margin: 0,\n display: 'block',\n padding: '5px 0',\n wordWrap: 'break-word',\n overflowWrap: 'break-word',\n },\n disabled && {\n color: labelDisabledColor,\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign({ color: 'GrayText' }, getHighContrastNoAdjustStyle()),\n _a),\n },\n required && {\n selectors: {\n '::after': {\n content: \"' *'\",\n color: labelRequiredStarColor,\n paddingRight: 12,\n },\n },\n },\n className,\n ],\n };\n};\n//# sourceMappingURL=Label.styles.js.map","import { styled } from '../../Utilities';\nimport { LabelBase } from './Label.base';\nimport { getStyles } from './Label.styles';\nexport var Label = styled(LabelBase, getStyles, undefined, {\n scope: 'Label',\n});\n//# sourceMappingURL=Label.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { Label } from '../../Label';\nimport { Icon } from '../../Icon';\nimport { Async, classNamesFunction, DelayedRender, getId, getNativeProps, getWindow, initializeComponentRef, inputProperties, isControlled, isIE11, textAreaProperties, warn, warnControlledUsage, warnMutuallyExclusive, } from '../../Utilities';\nvar getClassNames = classNamesFunction();\nvar DEFAULT_STATE_VALUE = '';\nvar COMPONENT_NAME = 'TextField';\nvar REVEAL_ICON_NAME = 'RedEye';\nvar HIDE_ICON_NAME = 'Hide';\nvar TextFieldBase = /** @class */ (function (_super) {\n __extends(TextFieldBase, _super);\n function TextFieldBase(props) {\n var _this = _super.call(this, props) || this;\n _this._textElement = React.createRef();\n _this._onFocus = function (ev) {\n if (_this.props.onFocus) {\n _this.props.onFocus(ev);\n }\n _this.setState({ isFocused: true }, function () {\n if (_this.props.validateOnFocusIn) {\n _this._validate(_this.value);\n }\n });\n };\n _this._onBlur = function (ev) {\n if (_this.props.onBlur) {\n _this.props.onBlur(ev);\n }\n _this.setState({ isFocused: false }, function () {\n if (_this.props.validateOnFocusOut) {\n _this._validate(_this.value);\n }\n });\n };\n _this._onRenderLabel = function (props) {\n var label = props.label, required = props.required;\n // IProcessedStyleSet definition requires casting for what Label expects as its styles prop\n var labelStyles = _this._classNames.subComponentStyles\n ? _this._classNames.subComponentStyles.label\n : undefined;\n if (label) {\n return (React.createElement(Label, { required: required, htmlFor: _this._id, styles: labelStyles, disabled: props.disabled, id: _this._labelId }, props.label));\n }\n return null;\n };\n _this._onRenderDescription = function (props) {\n if (props.description) {\n return React.createElement(\"span\", { className: _this._classNames.description }, props.description);\n }\n return null;\n };\n _this._onRevealButtonClick = function (event) {\n _this.setState(function (prevState) { return ({ isRevealingPassword: !prevState.isRevealingPassword }); });\n };\n _this._onInputChange = function (event) {\n // Previously, we needed to call both onInput and onChange due to some weird IE/React issues,\n // which have *probably* been fixed now:\n // - https://github.com/microsoft/fluentui/issues/744 (likely fixed)\n // - https://github.com/microsoft/fluentui/issues/824 (confirmed fixed)\n var _a, _b;\n // TODO (Fabric 8?) - Switch to calling only onChange. This switch is pretty disruptive for\n // tests (ours and maybe consumers' too), so it seemed best to do the switch in a major bump.\n var element = event.target;\n var value = element.value;\n // Ignore this event if any of the following are true:\n // - the value is undefined (in case one of the IE bugs comes back)\n // - it's a duplicate event (important since onInputChange is called twice per actual user event)\n // - it's the same as the previous value\n var previousValue = _getValue(_this.props, _this.state) || '';\n if (value === undefined || value === _this._lastChangeValue || value === previousValue) {\n _this._lastChangeValue = undefined;\n return;\n }\n _this._lastChangeValue = value;\n (_b = (_a = _this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, event, value);\n if (!_this._isControlled) {\n // ONLY if this is an uncontrolled component, update the displayed value.\n // (Controlled components must update the `value` prop from `onChange`.)\n _this.setState({ uncontrolledValue: value });\n }\n };\n initializeComponentRef(_this);\n _this._async = new Async(_this);\n if (process.env.NODE_ENV !== 'production') {\n warnMutuallyExclusive(COMPONENT_NAME, props, {\n errorMessage: 'onGetErrorMessage',\n });\n }\n _this._fallbackId = getId(COMPONENT_NAME);\n _this._descriptionId = getId(COMPONENT_NAME + 'Description');\n _this._labelId = getId(COMPONENT_NAME + 'Label');\n _this._prefixId = getId(COMPONENT_NAME + 'Prefix');\n _this._suffixId = getId(COMPONENT_NAME + 'Suffix');\n _this._warnControlledUsage();\n var _a = props.defaultValue, defaultValue = _a === void 0 ? DEFAULT_STATE_VALUE : _a;\n if (typeof defaultValue === 'number') {\n // This isn't allowed per the props, but happens anyway.\n defaultValue = String(defaultValue);\n }\n _this.state = {\n uncontrolledValue: _this._isControlled ? undefined : defaultValue,\n isFocused: false,\n errorMessage: '',\n };\n _this._delayedValidate = _this._async.debounce(_this._validate, _this.props.deferredValidationTime);\n _this._lastValidation = 0;\n return _this;\n }\n Object.defineProperty(TextFieldBase.prototype, \"value\", {\n /**\n * Gets the current value of the text field.\n */\n get: function () {\n return _getValue(this.props, this.state);\n },\n enumerable: false,\n configurable: true\n });\n TextFieldBase.prototype.componentDidMount = function () {\n this._adjustInputHeight();\n if (this.props.validateOnLoad) {\n this._validate(this.value);\n }\n };\n TextFieldBase.prototype.componentWillUnmount = function () {\n this._async.dispose();\n };\n TextFieldBase.prototype.getSnapshotBeforeUpdate = function (prevProps, prevState) {\n return {\n selection: [this.selectionStart, this.selectionEnd],\n };\n };\n TextFieldBase.prototype.componentDidUpdate = function (prevProps, prevState, snapshot) {\n var props = this.props;\n var _a = (snapshot || {}).selection, selection = _a === void 0 ? [null, null] : _a;\n var start = selection[0], end = selection[1];\n if (!!prevProps.multiline !== !!props.multiline && prevState.isFocused) {\n // The text field has just changed between single- and multi-line, so we need to reset focus\n // and selection/cursor.\n this.focus();\n if (start !== null && end !== null && start >= 0 && end >= 0) {\n this.setSelectionRange(start, end);\n }\n }\n if (prevProps.value !== props.value) {\n // Only if the value in props changed, reset the record of the last value seen by a\n // change/input event (don't do this if the value in state changed, since at least in tests\n // the state update may happen before the second event in a series)\n this._lastChangeValue = undefined;\n }\n var prevValue = _getValue(prevProps, prevState);\n var value = this.value;\n if (prevValue !== value) {\n // Handle controlled/uncontrolled warnings and status\n this._warnControlledUsage(prevProps);\n // Clear error message if needed\n // TODO: is there any way to do this without an extra render?\n if (this.state.errorMessage && !props.errorMessage) {\n this.setState({ errorMessage: '' });\n }\n // Adjust height if needed based on new value\n this._adjustInputHeight();\n // TODO: #5875 added logic to trigger validation in componentWillReceiveProps and other places.\n // This seems a bit odd and hard to integrate with the new approach.\n // (Starting to think we should just put the validation logic in a separate wrapper component...?)\n if (_shouldValidateAllChanges(props)) {\n this._delayedValidate(value);\n }\n }\n };\n TextFieldBase.prototype.render = function () {\n var _a = this.props, borderless = _a.borderless, className = _a.className, disabled = _a.disabled, invalid = _a.invalid, iconProps = _a.iconProps, inputClassName = _a.inputClassName, label = _a.label, multiline = _a.multiline, required = _a.required, underlined = _a.underlined, prefix = _a.prefix, resizable = _a.resizable, suffix = _a.suffix, theme = _a.theme, styles = _a.styles, autoAdjustHeight = _a.autoAdjustHeight, canRevealPassword = _a.canRevealPassword, revealPasswordAriaLabel = _a.revealPasswordAriaLabel, type = _a.type, _b = _a.onRenderPrefix, onRenderPrefix = _b === void 0 ? this._onRenderPrefix : _b, _c = _a.onRenderSuffix, onRenderSuffix = _c === void 0 ? this._onRenderSuffix : _c, _d = _a.onRenderLabel, onRenderLabel = _d === void 0 ? this._onRenderLabel : _d, _e = _a.onRenderDescription, onRenderDescription = _e === void 0 ? this._onRenderDescription : _e;\n var _f = this.state, isFocused = _f.isFocused, isRevealingPassword = _f.isRevealingPassword;\n var errorMessage = this._errorMessage;\n var isInvalid = typeof invalid === 'boolean' ? invalid : !!errorMessage;\n var hasRevealButton = !!canRevealPassword && type === 'password' && _browserNeedsRevealButton();\n var classNames = (this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n disabled: disabled,\n focused: isFocused,\n required: required,\n multiline: multiline,\n hasLabel: !!label,\n hasErrorMessage: isInvalid,\n borderless: borderless,\n resizable: resizable,\n hasIcon: !!iconProps,\n underlined: underlined,\n inputClassName: inputClassName,\n autoAdjustHeight: autoAdjustHeight,\n hasRevealButton: hasRevealButton,\n }));\n return (\n // eslint-disable-next-line deprecation/deprecation\n React.createElement(\"div\", { ref: this.props.elementRef, className: classNames.root },\n React.createElement(\"div\", { className: classNames.wrapper },\n onRenderLabel(this.props, this._onRenderLabel),\n React.createElement(\"div\", { className: classNames.fieldGroup },\n (prefix !== undefined || this.props.onRenderPrefix) && (React.createElement(\"div\", { className: classNames.prefix, id: this._prefixId }, onRenderPrefix(this.props, this._onRenderPrefix))),\n multiline ? this._renderTextArea() : this._renderInput(),\n iconProps && React.createElement(Icon, __assign({ className: classNames.icon }, iconProps)),\n hasRevealButton && (\n // Explicitly set type=\"button\" since the default button type within a form is \"submit\"\n React.createElement(\"button\", { \"aria-label\": revealPasswordAriaLabel, className: classNames.revealButton, onClick: this._onRevealButtonClick, \"aria-pressed\": !!isRevealingPassword, type: \"button\" },\n React.createElement(\"span\", { className: classNames.revealSpan },\n React.createElement(Icon, { className: classNames.revealIcon, iconName: isRevealingPassword ? HIDE_ICON_NAME : REVEAL_ICON_NAME })))),\n (suffix !== undefined || this.props.onRenderSuffix) && (React.createElement(\"div\", { className: classNames.suffix, id: this._suffixId }, onRenderSuffix(this.props, this._onRenderSuffix))))),\n this._isDescriptionAvailable && (React.createElement(\"span\", { id: this._descriptionId },\n onRenderDescription(this.props, this._onRenderDescription),\n errorMessage && (React.createElement(\"div\", { role: \"alert\" },\n React.createElement(DelayedRender, null, this._renderErrorMessage())))))));\n };\n /**\n * Sets focus on the text field\n */\n TextFieldBase.prototype.focus = function () {\n if (this._textElement.current) {\n this._textElement.current.focus();\n }\n };\n /**\n * Blurs the text field.\n */\n TextFieldBase.prototype.blur = function () {\n if (this._textElement.current) {\n this._textElement.current.blur();\n }\n };\n /**\n * Selects the text field\n */\n TextFieldBase.prototype.select = function () {\n if (this._textElement.current) {\n this._textElement.current.select();\n }\n };\n /**\n * Sets the selection start of the text field to a specified value\n */\n TextFieldBase.prototype.setSelectionStart = function (value) {\n if (this._textElement.current) {\n this._textElement.current.selectionStart = value;\n }\n };\n /**\n * Sets the selection end of the text field to a specified value\n */\n TextFieldBase.prototype.setSelectionEnd = function (value) {\n if (this._textElement.current) {\n this._textElement.current.selectionEnd = value;\n }\n };\n Object.defineProperty(TextFieldBase.prototype, \"selectionStart\", {\n /**\n * Gets the selection start of the text field\n */\n get: function () {\n return this._textElement.current ? this._textElement.current.selectionStart : -1;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(TextFieldBase.prototype, \"selectionEnd\", {\n /**\n * Gets the selection end of the text field\n */\n get: function () {\n return this._textElement.current ? this._textElement.current.selectionEnd : -1;\n },\n enumerable: false,\n configurable: true\n });\n /**\n * Sets the start and end positions of a selection in a text field.\n * @param start - Index of the start of the selection.\n * @param end - Index of the end of the selection.\n */\n TextFieldBase.prototype.setSelectionRange = function (start, end) {\n if (this._textElement.current) {\n this._textElement.current.setSelectionRange(start, end);\n }\n };\n TextFieldBase.prototype._warnControlledUsage = function (prevProps) {\n // Show warnings if props are being used in an invalid way\n warnControlledUsage({\n componentId: this._id,\n componentName: COMPONENT_NAME,\n props: this.props,\n oldProps: prevProps,\n valueProp: 'value',\n defaultValueProp: 'defaultValue',\n onChangeProp: 'onChange',\n readOnlyProp: 'readOnly',\n });\n if (this.props.value === null && !this._hasWarnedNullValue) {\n this._hasWarnedNullValue = true;\n warn(\"Warning: 'value' prop on '\" + COMPONENT_NAME + \"' should not be null. Consider using an \" +\n 'empty string to clear the component or undefined to indicate an uncontrolled component.');\n }\n };\n Object.defineProperty(TextFieldBase.prototype, \"_id\", {\n /** Returns `props.id` if available, or a fallback if not. */\n get: function () {\n return this.props.id || this._fallbackId;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(TextFieldBase.prototype, \"_isControlled\", {\n get: function () {\n return isControlled(this.props, 'value');\n },\n enumerable: false,\n configurable: true\n });\n TextFieldBase.prototype._onRenderPrefix = function (props) {\n var prefix = props.prefix;\n return React.createElement(\"span\", { style: { paddingBottom: '1px' } }, prefix);\n };\n TextFieldBase.prototype._onRenderSuffix = function (props) {\n var suffix = props.suffix;\n return React.createElement(\"span\", { style: { paddingBottom: '1px' } }, suffix);\n };\n Object.defineProperty(TextFieldBase.prototype, \"_errorMessage\", {\n /**\n * Current error message from either `props.errorMessage` or the result of `props.onGetErrorMessage`.\n *\n * - If there is no validation error or we have not validated the input value, errorMessage is an empty string.\n * - If we have done the validation and there is validation error, errorMessage is the validation error message.\n */\n get: function () {\n var _a = this.props.errorMessage, errorMessage = _a === void 0 ? this.state.errorMessage : _a;\n return errorMessage || '';\n },\n enumerable: false,\n configurable: true\n });\n /**\n * Renders error message based on the type of the message.\n *\n * - If error message is string, it will render using the built in styles.\n * - If error message is an element, user has full control over how it's rendered.\n */\n TextFieldBase.prototype._renderErrorMessage = function () {\n var errorMessage = this._errorMessage;\n return errorMessage ? (typeof errorMessage === 'string' ? (React.createElement(\"p\", { className: this._classNames.errorMessage },\n React.createElement(\"span\", { \"data-automation-id\": \"error-message\" }, errorMessage))) : (React.createElement(\"div\", { className: this._classNames.errorMessage, \"data-automation-id\": \"error-message\" }, errorMessage))) : null;\n };\n Object.defineProperty(TextFieldBase.prototype, \"_isDescriptionAvailable\", {\n /**\n * If a custom description render function is supplied then treat description as always available.\n * Otherwise defer to the presence of description or error message text.\n */\n get: function () {\n var props = this.props;\n return !!(props.onRenderDescription || props.description || this._errorMessage);\n },\n enumerable: false,\n configurable: true\n });\n TextFieldBase.prototype._renderTextArea = function () {\n var _a = this.props.invalid, invalid = _a === void 0 ? !!this._errorMessage : _a;\n var textAreaProps = getNativeProps(this.props, textAreaProperties, ['defaultValue']);\n var ariaLabelledBy = this.props['aria-labelledby'] || (this.props.label ? this._labelId : undefined);\n return (React.createElement(\"textarea\", __assign({ id: this._id }, textAreaProps, { ref: this._textElement, value: this.value || '', onInput: this._onInputChange, onChange: this._onInputChange, className: this._classNames.field, \"aria-labelledby\": ariaLabelledBy, \"aria-describedby\": this._isDescriptionAvailable ? this._descriptionId : this.props['aria-describedby'], \"aria-invalid\": invalid, \"aria-label\": this.props.ariaLabel, readOnly: this.props.readOnly, onFocus: this._onFocus, onBlur: this._onBlur })));\n };\n TextFieldBase.prototype._renderInput = function () {\n var _a = this.props, ariaLabel = _a.ariaLabel, _b = _a.invalid, invalid = _b === void 0 ? !!this._errorMessage : _b, onRenderPrefix = _a.onRenderPrefix, onRenderSuffix = _a.onRenderSuffix, prefix = _a.prefix, suffix = _a.suffix, _c = _a.type, type = _c === void 0 ? 'text' : _c, label = _a.label;\n // build aria-labelledby list from label, prefix, and suffix\n var labelIds = [];\n label && labelIds.push(this._labelId);\n (prefix !== undefined || onRenderPrefix) && labelIds.push(this._prefixId);\n (suffix !== undefined || onRenderSuffix) && labelIds.push(this._suffixId);\n var inputProps = __assign(__assign({ type: this.state.isRevealingPassword ? 'text' : type, id: this._id }, getNativeProps(this.props, inputProperties, ['defaultValue', 'type'])), { 'aria-labelledby': this.props['aria-labelledby'] || (labelIds.length > 0 ? labelIds.join(' ') : undefined), ref: this._textElement, value: this.value || '', onInput: this._onInputChange, onChange: this._onInputChange, className: this._classNames.field, 'aria-label': ariaLabel, 'aria-describedby': this._isDescriptionAvailable ? this._descriptionId : this.props['aria-describedby'], 'aria-invalid': invalid, onFocus: this._onFocus, onBlur: this._onBlur });\n var defaultRender = function (updatedInputProps) {\n return React.createElement(\"input\", __assign({}, updatedInputProps));\n };\n var onRenderInput = this.props.onRenderInput || defaultRender;\n return onRenderInput(inputProps, defaultRender);\n };\n TextFieldBase.prototype._validate = function (value) {\n var _this = this;\n // In case _validate is called again while validation promise is executing\n if (this._latestValidateValue === value && _shouldValidateAllChanges(this.props)) {\n return;\n }\n this._latestValidateValue = value;\n var onGetErrorMessage = this.props.onGetErrorMessage;\n var result = onGetErrorMessage && onGetErrorMessage(value || '');\n if (result !== undefined) {\n if (typeof result === 'string' || !('then' in result)) {\n this.setState({ errorMessage: result });\n this._notifyAfterValidate(value, result);\n }\n else {\n var currentValidation_1 = ++this._lastValidation;\n result.then(function (errorMessage) {\n if (currentValidation_1 === _this._lastValidation) {\n _this.setState({ errorMessage: errorMessage });\n }\n _this._notifyAfterValidate(value, errorMessage);\n });\n }\n }\n else {\n this._notifyAfterValidate(value, '');\n }\n };\n TextFieldBase.prototype._notifyAfterValidate = function (value, errorMessage) {\n if (value === this.value && this.props.onNotifyValidationResult) {\n this.props.onNotifyValidationResult(errorMessage, value);\n }\n };\n TextFieldBase.prototype._adjustInputHeight = function () {\n if (this._textElement.current && this.props.autoAdjustHeight && this.props.multiline) {\n var textField = this._textElement.current;\n textField.style.height = '';\n textField.style.height = textField.scrollHeight + 'px';\n }\n };\n TextFieldBase.defaultProps = {\n resizable: true,\n deferredValidationTime: 200,\n validateOnLoad: true,\n };\n return TextFieldBase;\n}(React.Component));\nexport { TextFieldBase };\n/** Get the value from the given state and props (converting from number to string if needed) */\nfunction _getValue(props, state) {\n var _a = props.value, value = _a === void 0 ? state.uncontrolledValue : _a;\n if (typeof value === 'number') {\n // not allowed per typings, but happens anyway\n return String(value);\n }\n return value;\n}\n/**\n * If `validateOnFocusIn` or `validateOnFocusOut` is true, validation should run **only** on that event.\n * Otherwise, validation should run on every change.\n */\nfunction _shouldValidateAllChanges(props) {\n return !(props.validateOnFocusIn || props.validateOnFocusOut);\n}\n// Only calculate this once across all TextFields, since will stay the same\nvar __browserNeedsRevealButton;\nfunction _browserNeedsRevealButton() {\n if (typeof __browserNeedsRevealButton !== 'boolean') {\n var win = getWindow();\n if (win === null || win === void 0 ? void 0 : win.navigator) {\n // Edge, Chromium Edge\n var isEdge = /^Edg/.test(win.navigator.userAgent || '');\n __browserNeedsRevealButton = !(isIE11() || isEdge);\n }\n else {\n __browserNeedsRevealButton = true;\n }\n }\n return __browserNeedsRevealButton;\n}\n//# sourceMappingURL=TextField.base.js.map","import { __assign } from \"tslib\";\nimport { AnimationClassNames, getFocusStyle, getGlobalClassNames, getInputFocusStyle, HighContrastSelector, normalize, getPlaceholderStyles, IconFontSizes, getHighContrastNoAdjustStyle, } from '../../Styling';\nvar globalClassNames = {\n root: 'ms-TextField',\n description: 'ms-TextField-description',\n errorMessage: 'ms-TextField-errorMessage',\n field: 'ms-TextField-field',\n fieldGroup: 'ms-TextField-fieldGroup',\n prefix: 'ms-TextField-prefix',\n suffix: 'ms-TextField-suffix',\n wrapper: 'ms-TextField-wrapper',\n revealButton: 'ms-TextField-reveal',\n multiline: 'ms-TextField--multiline',\n borderless: 'ms-TextField--borderless',\n underlined: 'ms-TextField--underlined',\n unresizable: 'ms-TextField--unresizable',\n required: 'is-required',\n disabled: 'is-disabled',\n active: 'is-active',\n};\nfunction getLabelStyles(props) {\n var underlined = props.underlined, disabled = props.disabled, focused = props.focused, theme = props.theme;\n var palette = theme.palette, fonts = theme.fonts;\n return function () {\n var _a;\n return ({\n root: [\n underlined &&\n disabled && {\n color: palette.neutralTertiary,\n },\n underlined && {\n fontSize: fonts.medium.fontSize,\n marginRight: 8,\n paddingLeft: 12,\n paddingRight: 0,\n lineHeight: '22px',\n height: 32,\n },\n underlined &&\n focused && {\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n height: 31, // -1px to prevent jumpiness in HC with the increased border-width to 2px\n },\n _a),\n },\n ],\n });\n };\n}\nexport function getStyles(props) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;\n var theme = props.theme, className = props.className, disabled = props.disabled, focused = props.focused, required = props.required, multiline = props.multiline, hasLabel = props.hasLabel, borderless = props.borderless, underlined = props.underlined, hasIcon = props.hasIcon, resizable = props.resizable, hasErrorMessage = props.hasErrorMessage, inputClassName = props.inputClassName, autoAdjustHeight = props.autoAdjustHeight, hasRevealButton = props.hasRevealButton;\n var semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;\n var classNames = getGlobalClassNames(globalClassNames, theme);\n var fieldPrefixSuffix = {\n // Suffix/Prefix are not editable so the disabled slot perfectly fits.\n background: semanticColors.disabledBackground,\n color: !disabled ? semanticColors.inputPlaceholderText : semanticColors.disabledText,\n display: 'flex',\n alignItems: 'center',\n padding: '0 10px',\n lineHeight: 1,\n whiteSpace: 'nowrap',\n flexShrink: 0,\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n background: 'Window',\n color: disabled ? 'GrayText' : 'WindowText',\n },\n _a),\n };\n // placeholder style constants\n var placeholderStyles = [\n {\n color: semanticColors.inputPlaceholderText,\n opacity: 1,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n color: 'GrayText',\n },\n _b),\n },\n ];\n var disabledPlaceholderStyles = {\n color: semanticColors.disabledText,\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n color: 'GrayText',\n },\n _c),\n };\n return {\n root: [\n classNames.root,\n fonts.medium,\n required && classNames.required,\n disabled && classNames.disabled,\n focused && classNames.active,\n multiline && classNames.multiline,\n borderless && classNames.borderless,\n underlined && classNames.underlined,\n normalize,\n {\n position: 'relative',\n },\n className,\n ],\n wrapper: [\n classNames.wrapper,\n underlined && [\n {\n display: 'flex',\n borderBottom: \"1px solid \" + (!hasErrorMessage ? semanticColors.inputBorder : semanticColors.errorText),\n width: '100%',\n },\n disabled && {\n borderBottomColor: semanticColors.disabledBackground,\n selectors: (_d = {},\n _d[HighContrastSelector] = __assign({ borderColor: 'GrayText' }, getHighContrastNoAdjustStyle()),\n _d),\n },\n !disabled && {\n selectors: {\n ':hover': {\n borderBottomColor: !hasErrorMessage ? semanticColors.inputBorderHovered : semanticColors.errorText,\n selectors: (_e = {},\n _e[HighContrastSelector] = __assign({ borderBottomColor: 'Highlight' }, getHighContrastNoAdjustStyle()),\n _e),\n },\n },\n },\n focused && [\n {\n position: 'relative',\n },\n getInputFocusStyle(!hasErrorMessage ? semanticColors.inputFocusBorderAlt : semanticColors.errorText, 0, 'borderBottom'),\n ],\n ],\n ],\n fieldGroup: [\n classNames.fieldGroup,\n normalize,\n {\n border: \"1px solid \" + semanticColors.inputBorder,\n borderRadius: effects.roundedCorner2,\n background: semanticColors.inputBackground,\n cursor: 'text',\n height: 32,\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'stretch',\n position: 'relative',\n },\n multiline && {\n minHeight: '60px',\n height: 'auto',\n display: 'flex',\n },\n !focused &&\n !disabled && {\n selectors: {\n ':hover': {\n borderColor: semanticColors.inputBorderHovered,\n selectors: (_f = {},\n _f[HighContrastSelector] = __assign({ borderColor: 'Highlight' }, getHighContrastNoAdjustStyle()),\n _f),\n },\n },\n },\n focused &&\n !underlined &&\n getInputFocusStyle(!hasErrorMessage ? semanticColors.inputFocusBorderAlt : semanticColors.errorText, effects.roundedCorner2),\n disabled && {\n borderColor: semanticColors.disabledBackground,\n selectors: (_g = {},\n _g[HighContrastSelector] = __assign({ borderColor: 'GrayText' }, getHighContrastNoAdjustStyle()),\n _g),\n cursor: 'default',\n },\n borderless && {\n border: 'none',\n },\n borderless &&\n focused && {\n border: 'none',\n selectors: {\n ':after': {\n border: 'none',\n },\n },\n },\n underlined && {\n flex: '1 1 0px',\n border: 'none',\n textAlign: 'left',\n },\n underlined &&\n disabled && {\n backgroundColor: 'transparent',\n },\n hasErrorMessage &&\n !underlined && {\n borderColor: semanticColors.errorText,\n selectors: {\n '&:hover': {\n borderColor: semanticColors.errorText,\n },\n },\n },\n !hasLabel &&\n required && {\n selectors: (_h = {\n ':before': {\n content: \"'*'\",\n color: semanticColors.errorText,\n position: 'absolute',\n top: -5,\n right: -10,\n }\n },\n _h[HighContrastSelector] = {\n selectors: {\n ':before': {\n color: 'WindowText',\n right: -14, // moving the * 4 pixel to right to alleviate border clipping in HC mode.\n },\n },\n },\n _h),\n },\n ],\n field: [\n fonts.medium,\n classNames.field,\n normalize,\n {\n borderRadius: 0,\n border: 'none',\n background: 'none',\n backgroundColor: 'transparent',\n color: semanticColors.inputText,\n padding: '0 8px',\n width: '100%',\n minWidth: 0,\n textOverflow: 'ellipsis',\n outline: 0,\n selectors: (_j = {\n '&:active, &:focus, &:hover': { outline: 0 },\n '::-ms-clear': {\n display: 'none',\n }\n },\n _j[HighContrastSelector] = {\n background: 'Window',\n color: disabled ? 'GrayText' : 'WindowText',\n },\n _j),\n },\n getPlaceholderStyles(placeholderStyles),\n multiline &&\n !resizable && [\n classNames.unresizable,\n {\n resize: 'none',\n },\n ],\n multiline && {\n minHeight: 'inherit',\n lineHeight: 17,\n flexGrow: 1,\n paddingTop: 6,\n paddingBottom: 6,\n overflow: 'auto',\n width: '100%',\n },\n multiline &&\n autoAdjustHeight && {\n overflow: 'hidden',\n },\n hasIcon &&\n !hasRevealButton && {\n paddingRight: 24,\n },\n multiline &&\n hasIcon && {\n paddingRight: 40,\n },\n disabled && [\n {\n backgroundColor: semanticColors.disabledBackground,\n color: semanticColors.disabledText,\n borderColor: semanticColors.disabledBackground,\n },\n getPlaceholderStyles(disabledPlaceholderStyles),\n ],\n underlined && {\n textAlign: 'left',\n },\n focused &&\n !borderless && {\n selectors: (_k = {},\n _k[HighContrastSelector] = {\n paddingLeft: 11,\n paddingRight: 11,\n },\n _k),\n },\n focused &&\n multiline &&\n !borderless && {\n selectors: (_l = {},\n _l[HighContrastSelector] = {\n paddingTop: 4, // take into consideration the 2px increased border-width (not when borderless).\n },\n _l),\n },\n inputClassName,\n ],\n icon: [\n multiline && {\n paddingRight: 24,\n alignItems: 'flex-end',\n },\n {\n pointerEvents: 'none',\n position: 'absolute',\n bottom: 6,\n right: 8,\n top: 'auto',\n fontSize: IconFontSizes.medium,\n lineHeight: 18,\n },\n disabled && {\n color: semanticColors.disabledText,\n },\n ],\n description: [\n classNames.description,\n {\n color: semanticColors.bodySubtext,\n fontSize: fonts.xSmall.fontSize,\n },\n ],\n errorMessage: [\n classNames.errorMessage,\n AnimationClassNames.slideDownIn20,\n fonts.small,\n {\n color: semanticColors.errorText,\n margin: 0,\n paddingTop: 5,\n display: 'flex',\n alignItems: 'center',\n },\n ],\n prefix: [classNames.prefix, fieldPrefixSuffix],\n suffix: [classNames.suffix, fieldPrefixSuffix],\n revealButton: [\n classNames.revealButton,\n 'ms-Button',\n 'ms-Button--icon',\n getFocusStyle(theme, { inset: 1 }),\n {\n height: 30,\n width: 32,\n border: 'none',\n padding: '0px 4px',\n backgroundColor: 'transparent',\n color: semanticColors.link,\n selectors: {\n ':hover': {\n outline: 0,\n color: semanticColors.primaryButtonBackgroundHovered,\n backgroundColor: semanticColors.buttonBackgroundHovered,\n selectors: (_m = {},\n _m[HighContrastSelector] = {\n borderColor: 'Highlight',\n color: 'Highlight',\n },\n _m),\n },\n ':focus': { outline: 0 },\n },\n },\n hasIcon && {\n marginRight: 28,\n },\n ],\n revealSpan: {\n display: 'flex',\n height: '100%',\n alignItems: 'center',\n },\n revealIcon: {\n margin: '0px 4px',\n pointerEvents: 'none',\n bottom: 6,\n right: 8,\n top: 'auto',\n fontSize: IconFontSizes.medium,\n lineHeight: 18,\n },\n subComponentStyles: {\n label: getLabelStyles(props),\n },\n };\n}\n//# sourceMappingURL=TextField.styles.js.map","import { styled } from '../../Utilities';\nimport { TextFieldBase } from './TextField.base';\nimport { getStyles } from './TextField.styles';\nexport var TextField = styled(TextFieldBase, getStyles, undefined, {\n scope: 'TextField',\n});\n//# sourceMappingURL=TextField.js.map","export function getAllSelectedOptions(options, selectedIndices) {\n var selectedOptions = [];\n for (var _i = 0, selectedIndices_1 = selectedIndices; _i < selectedIndices_1.length; _i++) {\n var index = selectedIndices_1[_i];\n var option = options[index];\n if (option) {\n selectedOptions.push(option);\n }\n }\n return selectedOptions;\n}\n//# sourceMappingURL=SelectableOption.js.map","export var SelectableOptionMenuItemType;\n(function (SelectableOptionMenuItemType) {\n SelectableOptionMenuItemType[SelectableOptionMenuItemType[\"Normal\"] = 0] = \"Normal\";\n SelectableOptionMenuItemType[SelectableOptionMenuItemType[\"Divider\"] = 1] = \"Divider\";\n SelectableOptionMenuItemType[SelectableOptionMenuItemType[\"Header\"] = 2] = \"Header\";\n SelectableOptionMenuItemType[SelectableOptionMenuItemType[\"SelectAll\"] = 3] = \"SelectAll\";\n})(SelectableOptionMenuItemType || (SelectableOptionMenuItemType = {}));\n//# sourceMappingURL=SelectableOption.types.js.map","/**\n * {@docCategory List}\n */\nexport var ScrollToMode = {\n /**\n * Does not make any consideration to where in the viewport the item should align to.\n */\n auto: 0,\n /**\n * Attempts to scroll the list so the top of the desired item is aligned with the top of the viewport.\n */\n top: 1,\n /**\n * Attempts to scroll the list so the bottom of the desired item is aligned with the bottom of the viewport.\n */\n bottom: 2,\n /**\n * Attempts to scroll the list so the desired item is in the exact center of the viewport.\n */\n center: 3,\n};\n//# sourceMappingURL=List.types.js.map","import { __assign, __extends, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { Async, EventGroup, css, divProperties, findIndex, findScrollableParent, getNativeProps, getParent, getWindow, initializeComponentRef, } from '../../Utilities';\nimport { ScrollToMode } from './List.types';\nimport { composeRenderFunction } from '../../Utilities';\nvar RESIZE_DELAY = 16;\nvar MIN_SCROLL_UPDATE_DELAY = 100;\nvar MAX_SCROLL_UPDATE_DELAY = 500;\nvar IDLE_DEBOUNCE_DELAY = 200;\n// The amount of time to wait before declaring that the list isn't scrolling\nvar DONE_SCROLLING_WAIT = 500;\nvar DEFAULT_ITEMS_PER_PAGE = 10;\nvar DEFAULT_PAGE_HEIGHT = 30;\nvar DEFAULT_RENDERED_WINDOWS_BEHIND = 2;\nvar DEFAULT_RENDERED_WINDOWS_AHEAD = 2;\nvar PAGE_KEY_PREFIX = 'page-';\nvar SPACER_KEY_PREFIX = 'spacer-';\nvar EMPTY_RECT = {\n top: -1,\n bottom: -1,\n left: -1,\n right: -1,\n width: 0,\n height: 0,\n};\n// Naming expensive measures so that they're named in profiles.\nvar _measurePageRect = function (element) { return element.getBoundingClientRect(); };\nvar _measureSurfaceRect = _measurePageRect;\nvar _measureScrollRect = _measurePageRect;\n/**\n * The List renders virtualized pages of items. Each page's item count is determined by the getItemCountForPage callback\n * if provided by the caller, or 10 as default. Each page's height is determined by the getPageHeight callback if\n * provided by the caller, or by cached measurements if available, or by a running average, or a default fallback.\n *\n * The algorithm for rendering pages works like this:\n *\n * 1. Predict visible pages based on \"current measure data\" (page heights, surface position, visible window)\n * 2. If changes are necessary, apply changes (add/remove pages)\n * 3. For pages that are added, measure the page heights if we need to using getBoundingClientRect\n * 4. If measurements don't match predictions, update measure data and goto step 1 asynchronously\n *\n * Measuring too frequently can pull performance down significantly. To compensate, we cache measured values so that\n * we can avoid re-measuring during operations that should not alter heights, like scrolling.\n *\n * To optimize glass rendering performance, onShouldVirtualize can be set. When onShouldVirtualize return false,\n * List will run in fast mode (not virtualized) to render all items without any measurements to improve page load time.\n * And we start doing measurements and rendering in virtualized mode when items grows larger than this threshold.\n *\n * However, certain operations can make measure data stale. For example, resizing the list, or passing in new props,\n * or forcing an update change cause pages to shrink/grow. When these operations occur, we increment a measureVersion\n * number, which we associate with cached measurements and use to determine if a remeasure should occur.\n */\nvar List = /** @class */ (function (_super) {\n __extends(List, _super);\n function List(props) {\n var _this = _super.call(this, props) || this;\n _this._root = React.createRef();\n _this._surface = React.createRef();\n _this._pageRefs = {};\n _this._getDerivedStateFromProps = function (nextProps, previousState) {\n if (nextProps.items !== _this.props.items ||\n nextProps.renderCount !== _this.props.renderCount ||\n nextProps.startIndex !== _this.props.startIndex ||\n nextProps.version !== _this.props.version) {\n // We have received new items so we want to make sure that initially we only render a single window to\n // fill the currently visible rect, and then later render additional windows.\n _this._resetRequiredWindows();\n _this._requiredRect = null;\n _this._measureVersion++;\n _this._invalidatePageCache();\n return _this._updatePages(nextProps, previousState);\n }\n return previousState;\n };\n _this._onRenderRoot = function (props) {\n var rootRef = props.rootRef, surfaceElement = props.surfaceElement, divProps = props.divProps;\n return (React.createElement(\"div\", __assign({ ref: rootRef }, divProps), surfaceElement));\n };\n _this._onRenderSurface = function (props) {\n var surfaceRef = props.surfaceRef, pageElements = props.pageElements, divProps = props.divProps;\n return (React.createElement(\"div\", __assign({ ref: surfaceRef }, divProps), pageElements));\n };\n _this._onRenderPage = function (pageProps, defaultRender) {\n var _a = _this.props, onRenderCell = _a.onRenderCell, role = _a.role;\n var _b = pageProps.page, _c = _b.items, items = _c === void 0 ? [] : _c, startIndex = _b.startIndex, divProps = __rest(pageProps, [\"page\"]);\n // only assign list item role if no role is assigned\n var cellRole = role === undefined ? 'listitem' : 'presentation';\n var cells = [];\n for (var i = 0; i < items.length; i++) {\n var index = startIndex + i;\n var item = items[i];\n var itemKey = _this.props.getKey ? _this.props.getKey(item, index) : item && item.key;\n if (itemKey === null || itemKey === undefined) {\n itemKey = index;\n }\n cells.push(React.createElement(\"div\", { role: cellRole, className: 'ms-List-cell', key: itemKey, \"data-list-index\": index, \"data-automationid\": \"ListCell\" }, onRenderCell &&\n onRenderCell(item, index, !_this.props.ignoreScrollingState ? _this.state.isScrolling : undefined)));\n }\n return React.createElement(\"div\", __assign({}, divProps), cells);\n };\n initializeComponentRef(_this);\n _this.state = {\n pages: [],\n isScrolling: false,\n getDerivedStateFromProps: _this._getDerivedStateFromProps,\n };\n _this._async = new Async(_this);\n _this._events = new EventGroup(_this);\n _this._estimatedPageHeight = 0;\n _this._totalEstimates = 0;\n _this._requiredWindowsAhead = 0;\n _this._requiredWindowsBehind = 0;\n // Track the measure version for everything.\n _this._measureVersion = 0;\n // Ensure that scrolls are lazy updated.\n _this._onAsyncScroll = _this._async.debounce(_this._onAsyncScroll, MIN_SCROLL_UPDATE_DELAY, {\n leading: false,\n maxWait: MAX_SCROLL_UPDATE_DELAY,\n });\n _this._onAsyncIdle = _this._async.debounce(_this._onAsyncIdle, IDLE_DEBOUNCE_DELAY, {\n leading: false,\n });\n _this._onAsyncResize = _this._async.debounce(_this._onAsyncResize, RESIZE_DELAY, {\n leading: false,\n });\n _this._onScrollingDone = _this._async.debounce(_this._onScrollingDone, DONE_SCROLLING_WAIT, {\n leading: false,\n });\n _this._cachedPageHeights = {};\n _this._estimatedPageHeight = 0;\n _this._focusedIndex = -1;\n _this._pageCache = {};\n return _this;\n }\n List.getDerivedStateFromProps = function (nextProps, previousState) {\n return previousState.getDerivedStateFromProps(nextProps, previousState);\n };\n Object.defineProperty(List.prototype, \"pageRefs\", {\n get: function () {\n return this._pageRefs;\n },\n enumerable: false,\n configurable: true\n });\n /**\n * Scroll to the given index. By default will bring the page the specified item is on into the view. If a callback\n * to measure the height of an individual item is specified, will only scroll to bring the specific item into view.\n *\n * Note: with items of variable height and no passed in `getPageHeight` method, the list might jump after scrolling\n * when windows before/ahead are being rendered, and the estimated height is replaced using actual elements.\n *\n * @param index - Index of item to scroll to\n * @param measureItem - Optional callback to measure the height of an individual item\n * @param scrollToMode - Optional defines where in the window the item should be positioned to when scrolling\n */\n List.prototype.scrollToIndex = function (index, measureItem, scrollToMode) {\n if (scrollToMode === void 0) { scrollToMode = ScrollToMode.auto; }\n var startIndex = this.props.startIndex;\n var renderCount = this._getRenderCount();\n var endIndex = startIndex + renderCount;\n var allowedRect = this._allowedRect;\n var scrollTop = 0;\n var itemsPerPage = 1;\n for (var itemIndex = startIndex; itemIndex < endIndex; itemIndex += itemsPerPage) {\n var pageSpecification = this._getPageSpecification(itemIndex, allowedRect);\n var pageHeight = pageSpecification.height;\n itemsPerPage = pageSpecification.itemCount;\n var requestedIndexIsInPage = itemIndex <= index && itemIndex + itemsPerPage > index;\n if (requestedIndexIsInPage) {\n // We have found the page. If the user provided a way to measure an individual item, we will try to scroll in\n // just the given item, otherwise we'll only bring the page into view\n if (measureItem && this._scrollElement) {\n var scrollRect = _measureScrollRect(this._scrollElement);\n var scrollWindow = {\n top: this._scrollElement.scrollTop,\n bottom: this._scrollElement.scrollTop + scrollRect.height,\n };\n // Adjust for actual item position within page\n var itemPositionWithinPage = index - itemIndex;\n for (var itemIndexInPage = 0; itemIndexInPage < itemPositionWithinPage; ++itemIndexInPage) {\n scrollTop += measureItem(itemIndex + itemIndexInPage);\n }\n var scrollBottom = scrollTop + measureItem(index);\n // If scrollToMode is set to something other than auto, we always want to\n // scroll the item into a specific position on the page.\n switch (scrollToMode) {\n case ScrollToMode.top:\n this._scrollElement.scrollTop = scrollTop;\n return;\n case ScrollToMode.bottom:\n this._scrollElement.scrollTop = scrollBottom - scrollRect.height;\n return;\n case ScrollToMode.center:\n this._scrollElement.scrollTop = (scrollTop + scrollBottom - scrollRect.height) / 2;\n return;\n case ScrollToMode.auto:\n default:\n break;\n }\n var itemIsFullyVisible = scrollTop >= scrollWindow.top && scrollBottom <= scrollWindow.bottom;\n if (itemIsFullyVisible) {\n // Item is already visible, do nothing.\n return;\n }\n var itemIsPartiallyAbove = scrollTop < scrollWindow.top;\n var itemIsPartiallyBelow = scrollBottom > scrollWindow.bottom;\n if (itemIsPartiallyAbove) {\n // We will just scroll to 'scrollTop'\n // .------. - scrollTop\n // |Item |\n // | .----|-. - scrollWindow.top\n // '------' |\n // | |\n // '------'\n }\n else if (itemIsPartiallyBelow) {\n // Adjust scrollTop position to just bring in the element\n // .------. - scrollTop\n // | |\n // | .------.\n // '-|----' | - scrollWindow.bottom\n // | Item |\n // '------' - scrollBottom\n scrollTop = scrollBottom - scrollRect.height;\n }\n }\n if (this._scrollElement) {\n this._scrollElement.scrollTop = scrollTop;\n }\n return;\n }\n scrollTop += pageHeight;\n }\n };\n List.prototype.getStartItemIndexInView = function (measureItem) {\n var pages = this.state.pages || [];\n for (var _i = 0, pages_1 = pages; _i < pages_1.length; _i++) {\n var page = pages_1[_i];\n var isPageVisible = !page.isSpacer && (this._scrollTop || 0) >= page.top && (this._scrollTop || 0) <= page.top + page.height;\n if (isPageVisible) {\n if (!measureItem) {\n var rowHeight = Math.floor(page.height / page.itemCount);\n return page.startIndex + Math.floor((this._scrollTop - page.top) / rowHeight);\n }\n else {\n var totalRowHeight = 0;\n for (var itemIndex = page.startIndex; itemIndex < page.startIndex + page.itemCount; itemIndex++) {\n var rowHeight = measureItem(itemIndex);\n if (page.top + totalRowHeight <= this._scrollTop &&\n this._scrollTop < page.top + totalRowHeight + rowHeight) {\n return itemIndex;\n }\n else {\n totalRowHeight += rowHeight;\n }\n }\n }\n }\n }\n return 0;\n };\n List.prototype.componentDidMount = function () {\n this.setState(this._updatePages(this.props, this.state));\n this._measureVersion++;\n this._scrollElement = findScrollableParent(this._root.current);\n this._events.on(window, 'resize', this._onAsyncResize);\n if (this._root.current) {\n this._events.on(this._root.current, 'focus', this._onFocus, true);\n }\n if (this._scrollElement) {\n this._events.on(this._scrollElement, 'scroll', this._onScroll);\n this._events.on(this._scrollElement, 'scroll', this._onAsyncScroll);\n }\n };\n List.prototype.componentDidUpdate = function (previousProps, previousState) {\n // Multiple updates may have been queued, so the callback will reflect all of them.\n // Re-fetch the current props and states to avoid using a stale props or state captured in the closure.\n var finalProps = this.props;\n var finalState = this.state;\n if (this.state.pagesVersion !== previousState.pagesVersion) {\n // If we weren't provided with the page height, measure the pages\n if (!finalProps.getPageHeight) {\n // If measured version is invalid since we've updated the DOM\n var heightsChanged = this._updatePageMeasurements(finalState.pages);\n // On first render, we should re-measure so that we don't get a visual glitch.\n if (heightsChanged) {\n this._materializedRect = null;\n if (!this._hasCompletedFirstRender) {\n this._hasCompletedFirstRender = true;\n this.setState(this._updatePages(finalProps, finalState));\n }\n else {\n this._onAsyncScroll();\n }\n }\n else {\n // Enqueue an idle bump.\n this._onAsyncIdle();\n }\n }\n else {\n // Enqueue an idle bump\n this._onAsyncIdle();\n }\n // Notify the caller that rendering the new pages has completed\n if (finalProps.onPagesUpdated) {\n finalProps.onPagesUpdated(finalState.pages);\n }\n }\n };\n List.prototype.componentWillUnmount = function () {\n this._async.dispose();\n this._events.dispose();\n delete this._scrollElement;\n };\n List.prototype.shouldComponentUpdate = function (newProps, newState) {\n var oldPages = this.state.pages;\n var newPages = newState.pages;\n var shouldComponentUpdate = false;\n // Update if the page stops scrolling\n if (!newState.isScrolling && this.state.isScrolling) {\n return true;\n }\n if (newProps.version !== this.props.version) {\n return true;\n }\n if (newProps.items === this.props.items && oldPages.length === newPages.length) {\n for (var i = 0; i < oldPages.length; i++) {\n var oldPage = oldPages[i];\n var newPage = newPages[i];\n if (oldPage.key !== newPage.key || oldPage.itemCount !== newPage.itemCount) {\n shouldComponentUpdate = true;\n break;\n }\n }\n }\n else {\n shouldComponentUpdate = true;\n }\n return shouldComponentUpdate;\n };\n List.prototype.forceUpdate = function () {\n this._invalidatePageCache();\n // Ensure that when the list is force updated we update the pages first before render.\n this._updateRenderRects(this.props, this.state, true);\n this.setState(this._updatePages(this.props, this.state));\n this._measureVersion++;\n _super.prototype.forceUpdate.call(this);\n };\n /**\n * Get the current height the list and it's pages.\n */\n List.prototype.getTotalListHeight = function () {\n return this._surfaceRect.height;\n };\n List.prototype.render = function () {\n var _a = this.props, className = _a.className, _b = _a.role, role = _b === void 0 ? 'list' : _b, onRenderSurface = _a.onRenderSurface, onRenderRoot = _a.onRenderRoot;\n var _c = this.state.pages, pages = _c === void 0 ? [] : _c;\n var pageElements = [];\n var divProps = getNativeProps(this.props, divProperties);\n for (var _i = 0, pages_2 = pages; _i < pages_2.length; _i++) {\n var page = pages_2[_i];\n pageElements.push(this._renderPage(page));\n }\n var finalOnRenderSurface = onRenderSurface\n ? composeRenderFunction(onRenderSurface, this._onRenderSurface)\n : this._onRenderSurface;\n var finalOnRenderRoot = onRenderRoot\n ? composeRenderFunction(onRenderRoot, this._onRenderRoot)\n : this._onRenderRoot;\n return finalOnRenderRoot({\n rootRef: this._root,\n pages: pages,\n surfaceElement: finalOnRenderSurface({\n surfaceRef: this._surface,\n pages: pages,\n pageElements: pageElements,\n divProps: {\n role: 'presentation',\n className: 'ms-List-surface',\n },\n }),\n divProps: __assign(__assign({}, divProps), { className: css('ms-List', className), role: pageElements.length > 0 ? role : undefined, 'aria-label': pageElements.length > 0 ? divProps['aria-label'] : undefined }),\n });\n };\n List.prototype._shouldVirtualize = function (props) {\n if (props === void 0) { props = this.props; }\n var onShouldVirtualize = props.onShouldVirtualize;\n return !onShouldVirtualize || onShouldVirtualize(props);\n };\n /**\n * when props.items change or forceUpdate called, throw away cached pages\n */\n List.prototype._invalidatePageCache = function () {\n this._pageCache = {};\n };\n List.prototype._renderPage = function (page) {\n var _this = this;\n var usePageCache = this.props.usePageCache;\n var cachedPage;\n // if usePageCache is set and cached page element can be found, just return cached page\n if (usePageCache) {\n cachedPage = this._pageCache[page.key];\n if (cachedPage && cachedPage.pageElement) {\n return cachedPage.pageElement;\n }\n }\n var pageStyle = this._getPageStyle(page);\n var _a = this.props.onRenderPage, onRenderPage = _a === void 0 ? this._onRenderPage : _a;\n var pageElement = onRenderPage({\n page: page,\n className: 'ms-List-page',\n key: page.key,\n ref: function (newRef) {\n _this._pageRefs[page.key] = newRef;\n },\n style: pageStyle,\n role: 'presentation',\n }, this._onRenderPage);\n // cache the first page for now since it is re-rendered a lot times unnecessarily.\n // todo: a more aggresive caching mechanism is to cache pages constaining the items not changed.\n // now we re-render pages too frequently, for example, props.items increased from 30 to 60, although the\n // first 30 items did not change, we still re-rendered all of them in this props.items change.\n if (usePageCache && page.startIndex === 0) {\n this._pageCache[page.key] = {\n page: page,\n pageElement: pageElement,\n };\n }\n return pageElement;\n };\n /** Generate the style object for the page. */\n List.prototype._getPageStyle = function (page) {\n var getPageStyle = this.props.getPageStyle;\n return __assign(__assign({}, (getPageStyle ? getPageStyle(page) : {})), (!page.items\n ? {\n height: page.height,\n }\n : {}));\n };\n /** Track the last item index focused so that we ensure we keep it rendered. */\n List.prototype._onFocus = function (ev) {\n var target = ev.target;\n while (target !== this._surface.current) {\n var indexString = target.getAttribute('data-list-index');\n if (indexString) {\n this._focusedIndex = Number(indexString);\n break;\n }\n target = getParent(target);\n }\n };\n /**\n * Called synchronously to reset the required render range to 0 on scrolling. After async scroll has executed,\n * we will call onAsyncIdle which will reset it back to it's correct value.\n */\n List.prototype._onScroll = function () {\n if (!this.state.isScrolling && !this.props.ignoreScrollingState) {\n this.setState({ isScrolling: true });\n }\n this._resetRequiredWindows();\n this._onScrollingDone();\n };\n List.prototype._resetRequiredWindows = function () {\n this._requiredWindowsAhead = 0;\n this._requiredWindowsBehind = 0;\n };\n /**\n * Debounced method to asynchronously update the visible region on a scroll event.\n */\n List.prototype._onAsyncScroll = function () {\n this._updateRenderRects(this.props, this.state);\n // Only update pages when the visible rect falls outside of the materialized rect.\n if (!this._materializedRect || !_isContainedWithin(this._requiredRect, this._materializedRect)) {\n this.setState(this._updatePages(this.props, this.state));\n }\n else {\n // console.log('requiredRect contained in materialized', this._requiredRect, this._materializedRect);\n }\n };\n /**\n * This is an async debounced method that will try and increment the windows we render. If we can increment\n * either, we increase the amount we render and re-evaluate.\n */\n List.prototype._onAsyncIdle = function () {\n var _a = this.props, renderedWindowsAhead = _a.renderedWindowsAhead, renderedWindowsBehind = _a.renderedWindowsBehind;\n var _b = this, requiredWindowsAhead = _b._requiredWindowsAhead, requiredWindowsBehind = _b._requiredWindowsBehind;\n var windowsAhead = Math.min(renderedWindowsAhead, requiredWindowsAhead + 1);\n var windowsBehind = Math.min(renderedWindowsBehind, requiredWindowsBehind + 1);\n if (windowsAhead !== requiredWindowsAhead || windowsBehind !== requiredWindowsBehind) {\n // console.log('idling', windowsBehind, windowsAhead);\n this._requiredWindowsAhead = windowsAhead;\n this._requiredWindowsBehind = windowsBehind;\n this._updateRenderRects(this.props, this.state);\n this.setState(this._updatePages(this.props, this.state));\n }\n if (renderedWindowsAhead > windowsAhead || renderedWindowsBehind > windowsBehind) {\n // Async increment on next tick.\n this._onAsyncIdle();\n }\n };\n /**\n * Function to call when the list is done scrolling.\n * This function is debounced.\n */\n List.prototype._onScrollingDone = function () {\n if (!this.props.ignoreScrollingState) {\n this.setState({ isScrolling: false });\n }\n };\n List.prototype._onAsyncResize = function () {\n this.forceUpdate();\n };\n List.prototype._updatePages = function (nextProps, previousState) {\n // console.log('updating pages');\n if (!this._requiredRect) {\n this._updateRenderRects(nextProps, previousState);\n }\n var newListState = this._buildPages(nextProps, previousState);\n var oldListPages = previousState.pages;\n this._notifyPageChanges(oldListPages, newListState.pages, this.props);\n return __assign(__assign(__assign({}, previousState), newListState), { pagesVersion: {} });\n };\n /**\n * Notify consumers that the rendered pages have changed\n * @param oldPages - The old pages\n * @param newPages - The new pages\n * @param props - The props to use\n */\n List.prototype._notifyPageChanges = function (oldPages, newPages, props) {\n var onPageAdded = props.onPageAdded, onPageRemoved = props.onPageRemoved;\n if (onPageAdded || onPageRemoved) {\n var renderedIndexes = {};\n for (var _i = 0, oldPages_1 = oldPages; _i < oldPages_1.length; _i++) {\n var page = oldPages_1[_i];\n if (page.items) {\n renderedIndexes[page.startIndex] = page;\n }\n }\n for (var _a = 0, newPages_1 = newPages; _a < newPages_1.length; _a++) {\n var page = newPages_1[_a];\n if (page.items) {\n if (!renderedIndexes[page.startIndex]) {\n this._onPageAdded(page);\n }\n else {\n delete renderedIndexes[page.startIndex];\n }\n }\n }\n for (var index in renderedIndexes) {\n if (renderedIndexes.hasOwnProperty(index)) {\n this._onPageRemoved(renderedIndexes[index]);\n }\n }\n }\n };\n List.prototype._updatePageMeasurements = function (pages) {\n var heightChanged = false;\n // when not in virtualize mode, we render all the items without page measurement\n if (!this._shouldVirtualize()) {\n return heightChanged;\n }\n for (var i = 0; i < pages.length; i++) {\n var page = pages[i];\n if (page.items) {\n heightChanged = this._measurePage(page) || heightChanged;\n }\n }\n return heightChanged;\n };\n /**\n * Given a page, measure its dimensions, update cache.\n * @returns True if the height has changed.\n */\n List.prototype._measurePage = function (page) {\n var hasChangedHeight = false;\n var pageElement = this._pageRefs[page.key];\n var cachedHeight = this._cachedPageHeights[page.startIndex];\n // console.log(' * measure attempt', page.startIndex, cachedHeight);\n if (pageElement &&\n this._shouldVirtualize() &&\n (!cachedHeight || cachedHeight.measureVersion !== this._measureVersion)) {\n var newClientRect = {\n width: pageElement.clientWidth,\n height: pageElement.clientHeight,\n };\n if (newClientRect.height || newClientRect.width) {\n hasChangedHeight = page.height !== newClientRect.height;\n // console.warn(' *** expensive page measure', page.startIndex, page.height, newClientRect.height);\n page.height = newClientRect.height;\n this._cachedPageHeights[page.startIndex] = {\n height: newClientRect.height,\n measureVersion: this._measureVersion,\n };\n this._estimatedPageHeight = Math.round((this._estimatedPageHeight * this._totalEstimates + newClientRect.height) / (this._totalEstimates + 1));\n this._totalEstimates++;\n }\n }\n return hasChangedHeight;\n };\n /** Called when a page has been added to the DOM. */\n List.prototype._onPageAdded = function (page) {\n var onPageAdded = this.props.onPageAdded;\n // console.log('page added', page.startIndex, this.state.pages.map(page => page.key).join(', '));\n if (onPageAdded) {\n onPageAdded(page);\n }\n };\n /** Called when a page has been removed from the DOM. */\n List.prototype._onPageRemoved = function (page) {\n var onPageRemoved = this.props.onPageRemoved;\n // console.log(' --- page removed', page.startIndex, this.state.pages.map(page => page.key).join(', '));\n if (onPageRemoved) {\n onPageRemoved(page);\n }\n };\n /** Build up the pages that should be rendered. */\n List.prototype._buildPages = function (props, state) {\n var renderCount = props.renderCount;\n var items = props.items, startIndex = props.startIndex, getPageHeight = props.getPageHeight;\n renderCount = this._getRenderCount(props);\n var materializedRect = __assign({}, EMPTY_RECT);\n var pages = [];\n var itemsPerPage = 1;\n var pageTop = 0;\n var currentSpacer = null;\n var focusedIndex = this._focusedIndex;\n var endIndex = startIndex + renderCount;\n var shouldVirtualize = this._shouldVirtualize(props);\n // First render is very important to track; when we render cells, we have no idea of estimated page height.\n // So we should default to rendering only the first page so that we can get information.\n // However if the user provides a measure function, let's just assume they know the right heights.\n var isFirstRender = this._estimatedPageHeight === 0 && !getPageHeight;\n var allowedRect = this._allowedRect;\n var _loop_1 = function (itemIndex) {\n var pageSpecification = this_1._getPageSpecification(itemIndex, allowedRect);\n var pageHeight = pageSpecification.height;\n var pageData = pageSpecification.data;\n var key = pageSpecification.key;\n itemsPerPage = pageSpecification.itemCount;\n var pageBottom = pageTop + pageHeight - 1;\n var isPageRendered = findIndex(state.pages, function (page) { return !!page.items && page.startIndex === itemIndex; }) > -1;\n var isPageInAllowedRange = !allowedRect || (pageBottom >= allowedRect.top && pageTop <= allowedRect.bottom);\n var isPageInRequiredRange = !this_1._requiredRect || (pageBottom >= this_1._requiredRect.top && pageTop <= this_1._requiredRect.bottom);\n var isPageVisible = (!isFirstRender && (isPageInRequiredRange || (isPageInAllowedRange && isPageRendered))) || !shouldVirtualize;\n var isPageFocused = focusedIndex >= itemIndex && focusedIndex < itemIndex + itemsPerPage;\n var isFirstPage = itemIndex === startIndex;\n // console.log('building page', itemIndex, 'pageTop: ' + pageTop, 'inAllowed: ' +\n // isPageInAllowedRange, 'inRequired: ' + isPageInRequiredRange);\n // Only render whats visible, focused, or first page,\n // or when running in fast rendering mode (not in virtualized mode), we render all current items in pages\n if (isPageVisible || isPageFocused || isFirstPage) {\n if (currentSpacer) {\n pages.push(currentSpacer);\n currentSpacer = null;\n }\n var itemsInPage = Math.min(itemsPerPage, endIndex - itemIndex);\n var newPage = this_1._createPage(key, items.slice(itemIndex, itemIndex + itemsInPage), itemIndex, undefined, undefined, pageData);\n newPage.top = pageTop;\n newPage.height = pageHeight;\n if (this_1._visibleRect && this_1._visibleRect.bottom) {\n newPage.isVisible = pageBottom >= this_1._visibleRect.top && pageTop <= this_1._visibleRect.bottom;\n }\n pages.push(newPage);\n if (isPageInRequiredRange && this_1._allowedRect) {\n _mergeRect(materializedRect, {\n top: pageTop,\n bottom: pageBottom,\n height: pageHeight,\n left: allowedRect.left,\n right: allowedRect.right,\n width: allowedRect.width,\n });\n }\n }\n else {\n if (!currentSpacer) {\n currentSpacer = this_1._createPage(SPACER_KEY_PREFIX + itemIndex, undefined, itemIndex, 0, undefined, pageData, true /*isSpacer*/);\n }\n currentSpacer.height = (currentSpacer.height || 0) + (pageBottom - pageTop) + 1;\n currentSpacer.itemCount += itemsPerPage;\n }\n pageTop += pageBottom - pageTop + 1;\n // in virtualized mode, we render need to render first page then break and measure,\n // otherwise, we render all items without measurement to make rendering fast\n if (isFirstRender && shouldVirtualize) {\n return \"break\";\n }\n };\n var this_1 = this;\n for (var itemIndex = startIndex; itemIndex < endIndex; itemIndex += itemsPerPage) {\n var state_1 = _loop_1(itemIndex);\n if (state_1 === \"break\")\n break;\n }\n if (currentSpacer) {\n currentSpacer.key = SPACER_KEY_PREFIX + 'end';\n pages.push(currentSpacer);\n }\n this._materializedRect = materializedRect;\n // console.log('materialized: ', materializedRect);\n return __assign(__assign({}, state), { pages: pages, measureVersion: this._measureVersion });\n };\n List.prototype._getPageSpecification = function (itemIndex, visibleRect) {\n var getPageSpecification = this.props.getPageSpecification;\n if (getPageSpecification) {\n var pageData = getPageSpecification(itemIndex, visibleRect);\n var _a = pageData.itemCount, itemCount = _a === void 0 ? this._getItemCountForPage(itemIndex, visibleRect) : _a;\n var _b = pageData.height, height = _b === void 0 ? this._getPageHeight(itemIndex, visibleRect, itemCount) : _b;\n return {\n itemCount: itemCount,\n height: height,\n data: pageData.data,\n key: pageData.key,\n };\n }\n else {\n var itemCount = this._getItemCountForPage(itemIndex, visibleRect);\n return {\n itemCount: itemCount,\n height: this._getPageHeight(itemIndex, visibleRect, itemCount),\n };\n }\n };\n /**\n * Get the pixel height of a give page. Will use the props getPageHeight first, and if not provided, fallback to\n * cached height, or estimated page height, or default page height.\n */\n List.prototype._getPageHeight = function (itemIndex, visibleRect, itemsPerPage) {\n if (this.props.getPageHeight) {\n return this.props.getPageHeight(itemIndex, visibleRect, itemsPerPage);\n }\n else {\n var cachedHeight = this._cachedPageHeights[itemIndex];\n return cachedHeight ? cachedHeight.height : this._estimatedPageHeight || DEFAULT_PAGE_HEIGHT;\n }\n };\n List.prototype._getItemCountForPage = function (itemIndex, visibileRect) {\n var itemsPerPage = this.props.getItemCountForPage\n ? this.props.getItemCountForPage(itemIndex, visibileRect)\n : DEFAULT_ITEMS_PER_PAGE;\n return itemsPerPage ? itemsPerPage : DEFAULT_ITEMS_PER_PAGE;\n };\n List.prototype._createPage = function (pageKey, items, startIndex, count, style, data, isSpacer) {\n if (startIndex === void 0) { startIndex = -1; }\n if (count === void 0) { count = items ? items.length : 0; }\n if (style === void 0) { style = {}; }\n pageKey = pageKey || PAGE_KEY_PREFIX + startIndex;\n var cachedPage = this._pageCache[pageKey];\n if (cachedPage && cachedPage.page) {\n return cachedPage.page;\n }\n return {\n key: pageKey,\n startIndex: startIndex,\n itemCount: count,\n items: items,\n style: style,\n top: 0,\n height: 0,\n data: data,\n isSpacer: isSpacer || false,\n };\n };\n List.prototype._getRenderCount = function (props) {\n var _a = props || this.props, items = _a.items, startIndex = _a.startIndex, renderCount = _a.renderCount;\n return renderCount === undefined ? (items ? items.length - startIndex : 0) : renderCount;\n };\n /** Calculate the visible rect within the list where top: 0 and left: 0 is the top/left of the list. */\n List.prototype._updateRenderRects = function (props, state, forceUpdate) {\n var renderedWindowsAhead = props.renderedWindowsAhead, renderedWindowsBehind = props.renderedWindowsBehind;\n var pages = state.pages;\n // when not in virtualize mode, we render all items without measurement to optimize page rendering perf\n if (!this._shouldVirtualize(props)) {\n return;\n }\n var surfaceRect = this._surfaceRect || __assign({}, EMPTY_RECT);\n var scrollHeight = this._scrollElement && this._scrollElement.scrollHeight;\n var scrollTop = this._scrollElement ? this._scrollElement.scrollTop : 0;\n // WARNING: EXPENSIVE CALL! We need to know the surface top relative to the window.\n // This needs to be called to recalculate when new pages should be loaded.\n // We check to see how far we've scrolled and if it's further than a third of a page we run it again.\n if (this._surface.current &&\n (forceUpdate ||\n !pages ||\n !this._surfaceRect ||\n !scrollHeight ||\n scrollHeight !== this._scrollHeight ||\n Math.abs(this._scrollTop - scrollTop) > this._estimatedPageHeight / 3)) {\n surfaceRect = this._surfaceRect = _measureSurfaceRect(this._surface.current);\n this._scrollTop = scrollTop;\n }\n // If the scroll height has changed, something in the container likely resized and\n // we should redo the page heights incase their content resized.\n if (forceUpdate || !scrollHeight || scrollHeight !== this._scrollHeight) {\n this._measureVersion++;\n }\n this._scrollHeight = scrollHeight || 0;\n // If the surface is above the container top or below the container bottom, or if this is not the first\n // render return empty rect.\n // The first time the list gets rendered we need to calculate the rectangle. The width of the list is\n // used to calculate the width of the list items.\n var visibleTop = Math.max(0, -surfaceRect.top);\n var win = getWindow(this._root.current);\n var visibleRect = {\n top: visibleTop,\n left: surfaceRect.left,\n bottom: visibleTop + win.innerHeight,\n right: surfaceRect.right,\n width: surfaceRect.width,\n height: win.innerHeight,\n };\n // The required/allowed rects are adjusted versions of the visible rect.\n this._requiredRect = _expandRect(visibleRect, this._requiredWindowsBehind, this._requiredWindowsAhead);\n this._allowedRect = _expandRect(visibleRect, renderedWindowsBehind, renderedWindowsAhead);\n // store the visible rect for later use.\n this._visibleRect = visibleRect;\n };\n List.defaultProps = {\n startIndex: 0,\n onRenderCell: function (item, index, containsFocus) { return React.createElement(React.Fragment, null, (item && item.name) || ''); },\n renderedWindowsAhead: DEFAULT_RENDERED_WINDOWS_AHEAD,\n renderedWindowsBehind: DEFAULT_RENDERED_WINDOWS_BEHIND,\n };\n return List;\n}(React.Component));\nexport { List };\nfunction _expandRect(rect, pagesBefore, pagesAfter) {\n var top = rect.top - pagesBefore * rect.height;\n var height = rect.height + (pagesBefore + pagesAfter) * rect.height;\n return {\n top: top,\n bottom: top + height,\n height: height,\n left: rect.left,\n right: rect.right,\n width: rect.width,\n };\n}\nfunction _isContainedWithin(innerRect, outerRect) {\n return (innerRect.top >= outerRect.top &&\n innerRect.left >= outerRect.left &&\n innerRect.bottom <= outerRect.bottom &&\n innerRect.right <= outerRect.right);\n}\nfunction _mergeRect(targetRect, newRect) {\n targetRect.top = newRect.top < targetRect.top || targetRect.top === -1 ? newRect.top : targetRect.top;\n targetRect.left = newRect.left < targetRect.left || targetRect.left === -1 ? newRect.left : targetRect.left;\n targetRect.bottom =\n newRect.bottom > targetRect.bottom || targetRect.bottom === -1 ? newRect.bottom : targetRect.bottom;\n targetRect.right = newRect.right > targetRect.right || targetRect.right === -1 ? newRect.right : targetRect.right;\n targetRect.width = targetRect.right - targetRect.left + 1;\n targetRect.height = targetRect.bottom - targetRect.top + 1;\n return targetRect;\n}\n//# sourceMappingURL=List.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { KeytipManager } from '../../utilities/keytips/KeytipManager';\nimport { useConst, usePrevious } from '@fluentui/react-hooks';\nvar registerPersistedKeytips = function (keytipsToRegister, keytipManager, registeredPersistedKeytips) {\n for (var _i = 0, keytipsToRegister_1 = keytipsToRegister; _i < keytipsToRegister_1.length; _i++) {\n var keytip = keytipsToRegister_1[_i];\n var uniqueID = keytipManager.register(keytip, true);\n // Update map\n registeredPersistedKeytips[uniqueID] = keytip;\n }\n};\nvar unregisterPersistedKeytips = function (keytipManager, registeredPersistedKeytips) {\n for (var _i = 0, _a = Object.keys(registeredPersistedKeytips); _i < _a.length; _i++) {\n var uniqueID = _a[_i];\n keytipManager.unregister(registeredPersistedKeytips[uniqueID], uniqueID, true);\n delete registeredPersistedKeytips[uniqueID];\n }\n};\nvar useKeytipRegistrations = function (registeredPersistedKeytips, keytipsToRegister, keytipManager) {\n var prevPersistedKeytips = usePrevious(registeredPersistedKeytips);\n // Update\n React.useEffect(function () {\n if (prevPersistedKeytips) {\n // Unregister old keytips\n unregisterPersistedKeytips(keytipManager, prevPersistedKeytips);\n // Register new keytips\n registerPersistedKeytips(keytipsToRegister, keytipManager, registeredPersistedKeytips);\n }\n });\n // Mount/Unmount\n React.useEffect(function () {\n // Register on mount\n registerPersistedKeytips(keytipsToRegister, keytipManager, registeredPersistedKeytips);\n return function () {\n // Unregister on unmount\n unregisterPersistedKeytips(keytipManager, registeredPersistedKeytips);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n};\nexport var OverflowButton = function (props) {\n var keytipManager = KeytipManager.getInstance();\n var className = props.className, overflowItems = props.overflowItems, keytipSequences = props.keytipSequences, itemSubMenuProvider = props.itemSubMenuProvider, onRenderOverflowButton = props.onRenderOverflowButton;\n var persistedKeytips = useConst({});\n // Gets the subMenu for an overflow item\n var getSubMenuForItem = React.useCallback(function (item) {\n // Checks if itemSubMenuProvider has been defined, if not defaults to subMenuProps\n if (itemSubMenuProvider) {\n return itemSubMenuProvider(item);\n }\n if (item.subMenuProps) {\n return item.subMenuProps.items;\n }\n return undefined;\n }, [itemSubMenuProvider]);\n var _a = React.useMemo(function () {\n var newKeytipsToRegister = [];\n var newOverflowItems = [];\n if (keytipSequences) {\n overflowItems === null || overflowItems === void 0 ? void 0 : overflowItems.forEach(function (overflowItem) {\n var _a;\n var keytip = overflowItem.keytipProps;\n if (keytip) {\n // Create persisted keytip\n var persistedKeytip = {\n content: keytip.content,\n keySequences: keytip.keySequences,\n disabled: keytip.disabled || !!(overflowItem.disabled || overflowItem.isDisabled),\n hasDynamicChildren: keytip.hasDynamicChildren,\n hasMenu: keytip.hasMenu,\n };\n if (keytip.hasDynamicChildren || getSubMenuForItem(overflowItem)) {\n // If the keytip has a submenu or children nodes, change onExecute to persistedKeytipExecute\n persistedKeytip.onExecute = keytipManager.menuExecute.bind(keytipManager, keytipSequences, (_a = overflowItem === null || overflowItem === void 0 ? void 0 : overflowItem.keytipProps) === null || _a === void 0 ? void 0 : _a.keySequences);\n persistedKeytip.hasOverflowSubMenu = true;\n }\n else {\n // If the keytip doesn't have a submenu, just execute the original function\n persistedKeytip.onExecute = keytip.onExecute;\n }\n newKeytipsToRegister.push(persistedKeytip);\n // Add the overflow sequence to this item\n var newOverflowItem = __assign(__assign({}, overflowItem), { keytipProps: __assign(__assign({}, keytip), { overflowSetSequence: keytipSequences }) });\n newOverflowItems === null || newOverflowItems === void 0 ? void 0 : newOverflowItems.push(newOverflowItem);\n }\n else {\n // Nothing to change, add overflowItem to list\n newOverflowItems === null || newOverflowItems === void 0 ? void 0 : newOverflowItems.push(overflowItem);\n }\n });\n }\n else {\n newOverflowItems = overflowItems;\n }\n return { modifiedOverflowItems: newOverflowItems, keytipsToRegister: newKeytipsToRegister };\n }, [overflowItems, getSubMenuForItem, keytipManager, keytipSequences]), modifiedOverflowItems = _a.modifiedOverflowItems, keytipsToRegister = _a.keytipsToRegister;\n useKeytipRegistrations(persistedKeytips, keytipsToRegister, keytipManager);\n return React.createElement(\"div\", { className: className }, onRenderOverflowButton(modifiedOverflowItems));\n};\n//# sourceMappingURL=OverflowButton.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { useMergedRefs } from '@fluentui/react-hooks';\nimport { classNamesFunction, divProperties, elementContains, getNativeProps, focusFirstChild } from '../../Utilities';\nimport { OverflowButton } from './OverflowButton';\nvar getClassNames = classNamesFunction();\nvar COMPONENT_NAME = 'OverflowSet';\nvar useComponentRef = function (props, divContainer) {\n React.useImperativeHandle(props.componentRef, function () { return ({\n focus: function () {\n var focusSucceeded = false;\n if (divContainer.current) {\n focusSucceeded = focusFirstChild(divContainer.current);\n }\n return focusSucceeded;\n },\n focusElement: function (childElement) {\n var focusSucceeded = false;\n if (!childElement) {\n return false;\n }\n if (divContainer.current && elementContains(divContainer.current, childElement)) {\n childElement.focus();\n focusSucceeded = document.activeElement === childElement;\n }\n return focusSucceeded;\n },\n }); }, [divContainer]);\n};\nexport var OverflowSetBase = React.forwardRef(function (props, forwardedRef) {\n var divContainer = React.useRef(null);\n var mergedRef = useMergedRefs(divContainer, forwardedRef);\n useComponentRef(props, divContainer);\n var items = props.items, overflowItems = props.overflowItems, className = props.className, styles = props.styles, vertical = props.vertical, role = props.role, _a = props.overflowSide, overflowSide = _a === void 0 ? 'end' : _a, onRenderItem = props.onRenderItem;\n var classNames = getClassNames(styles, { className: className, vertical: vertical });\n var showOverflow = !!overflowItems && overflowItems.length > 0;\n return (React.createElement(\"div\", __assign({}, getNativeProps(props, divProperties), { role: role || 'group', \"aria-orientation\": role === 'menubar' ? (vertical === true ? 'vertical' : 'horizontal') : undefined, className: classNames.root, ref: mergedRef }),\n overflowSide === 'start' && showOverflow && React.createElement(OverflowButton, __assign({}, props, { className: classNames.overflowButton })),\n items &&\n items.map(function (item, i) { return (React.createElement(\"div\", { className: classNames.item, key: item.key, role: \"none\" }, onRenderItem(item))); }),\n overflowSide === 'end' && showOverflow && React.createElement(OverflowButton, __assign({}, props, { className: classNames.overflowButton }))));\n});\nOverflowSetBase.displayName = COMPONENT_NAME;\n//# sourceMappingURL=OverflowSet.base.js.map","var overflowItemStyle = {\n flexShrink: 0,\n display: 'inherit',\n};\nexport var getStyles = function (props) {\n var className = props.className, vertical = props.vertical;\n return {\n root: [\n 'ms-OverflowSet',\n {\n position: 'relative',\n display: 'flex',\n flexWrap: 'nowrap',\n },\n vertical && { flexDirection: 'column' },\n className,\n ],\n item: ['ms-OverflowSet-item', overflowItemStyle],\n overflowButton: ['ms-OverflowSet-overflowButton', overflowItemStyle],\n };\n};\n//# sourceMappingURL=OverflowSet.styles.js.map","import { styled } from '../../Utilities';\nimport { OverflowSetBase } from './OverflowSet.base';\nimport { getStyles } from './OverflowSet.styles';\nexport var OverflowSet = styled(OverflowSetBase, getStyles, undefined, {\n scope: 'OverflowSet',\n});\n//# sourceMappingURL=OverflowSet.js.map","import { __assign, __rest } from \"tslib\";\nimport { memoizeFunction } from '../../Utilities';\nvar COMMAND_BAR_HEIGHT = 44;\nexport var getStyles = function (props) {\n var className = props.className, theme = props.theme;\n var semanticColors = theme.semanticColors;\n return {\n root: [\n theme.fonts.medium,\n 'ms-CommandBar',\n {\n display: 'flex',\n backgroundColor: semanticColors.bodyBackground,\n padding: '0 14px 0 24px',\n height: COMMAND_BAR_HEIGHT,\n },\n className,\n ],\n primarySet: [\n 'ms-CommandBar-primaryCommand',\n {\n flexGrow: '1',\n display: 'flex',\n alignItems: 'stretch',\n },\n ],\n secondarySet: [\n 'ms-CommandBar-secondaryCommand',\n {\n flexShrink: '0',\n display: 'flex',\n alignItems: 'stretch',\n },\n ],\n };\n};\nexport var getCommandButtonStyles = memoizeFunction(function (customStyles) {\n var rootStyles = {\n height: '100%',\n };\n var labelStyles = {\n whiteSpace: 'nowrap',\n };\n var _a = customStyles || {}, root = _a.root, label = _a.label, restCustomStyles = __rest(_a, [\"root\", \"label\"]);\n return __assign(__assign({}, restCustomStyles), { root: root ? [rootStyles, root] : rootStyles, label: label ? [labelStyles, label] : labelStyles });\n});\n//# sourceMappingURL=CommandBar.styles.js.map","import { __assign, __extends, __spreadArray } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, css, nullRender, getNativeProps, divProperties, composeComponentAs, initializeComponentRef, } from '../../Utilities';\nimport { OverflowSet } from '../../OverflowSet';\nimport { ResizeGroup } from '../../ResizeGroup';\nimport { FocusZone, FocusZoneDirection } from '../../FocusZone';\nimport { CommandBarButton } from '../../Button';\nimport { TooltipHost } from '../../Tooltip';\nimport { getCommandButtonStyles } from './CommandBar.styles';\nvar getClassNames = classNamesFunction();\nvar CommandBarBase = /** @class */ (function (_super) {\n __extends(CommandBarBase, _super);\n function CommandBarBase(props) {\n var _this = _super.call(this, props) || this;\n _this._overflowSet = React.createRef();\n _this._resizeGroup = React.createRef();\n _this._onRenderData = function (data) {\n var _a = _this.props, ariaLabel = _a.ariaLabel, primaryGroupAriaLabel = _a.primaryGroupAriaLabel, farItemsGroupAriaLabel = _a.farItemsGroupAriaLabel;\n var hasSecondSet = data.farItems && data.farItems.length > 0;\n return (React.createElement(FocusZone, { className: css(_this._classNames.root), direction: FocusZoneDirection.horizontal, role: 'menubar', \"aria-label\": ariaLabel },\n React.createElement(OverflowSet, { role: hasSecondSet ? 'group' : 'none', \"aria-label\": hasSecondSet ? primaryGroupAriaLabel : undefined, componentRef: _this._overflowSet, className: css(_this._classNames.primarySet), items: data.primaryItems, overflowItems: data.overflowItems.length ? data.overflowItems : undefined, onRenderItem: _this._onRenderItem, onRenderOverflowButton: _this._onRenderOverflowButton }),\n hasSecondSet && (React.createElement(OverflowSet, { role: \"group\", \"aria-label\": farItemsGroupAriaLabel, className: css(_this._classNames.secondarySet), items: data.farItems, onRenderItem: _this._onRenderItem, onRenderOverflowButton: nullRender }))));\n };\n _this._onRenderItem = function (item) {\n if (item.onRender) {\n // These are the top level items, there is no relevant menu dismissing function to\n // provide for the IContextualMenuItem onRender function. Pass in a no op function instead.\n return item.onRender(item, function () { return undefined; });\n }\n // eslint-disable-next-line deprecation/deprecation\n var itemText = item.text || item.name;\n var commandButtonProps = __assign(__assign({ allowDisabledFocus: true, role: 'menuitem' }, item), { styles: getCommandButtonStyles(item.buttonStyles), className: css('ms-CommandBarItem-link', item.className), text: !item.iconOnly ? itemText : undefined, menuProps: item.subMenuProps, onClick: _this._onButtonClick(item) });\n if (item.iconOnly && (itemText !== undefined || item.tooltipHostProps)) {\n return (React.createElement(TooltipHost, __assign({ role: \"none\", content: itemText, setAriaDescribedBy: false }, item.tooltipHostProps), _this._commandButton(item, commandButtonProps)));\n }\n return _this._commandButton(item, commandButtonProps);\n };\n _this._commandButton = function (item, props) {\n var ButtonAs = _this.props.buttonAs;\n var CommandBarButtonAs = item.commandBarButtonAs;\n var DefaultButtonAs = CommandBarButton;\n // The prop types between these three possible implementations overlap enough that a force-cast is safe.\n var Type = DefaultButtonAs;\n if (CommandBarButtonAs) {\n Type = composeComponentAs(CommandBarButtonAs, Type);\n }\n if (ButtonAs) {\n Type = composeComponentAs(ButtonAs, Type);\n }\n // Always pass the default implementation to the override so it may be composed.\n return React.createElement(Type, __assign({}, props));\n };\n _this._onRenderOverflowButton = function (overflowItems) {\n var _a = _this.props.overflowButtonProps, overflowButtonProps = _a === void 0 ? {} : _a;\n var combinedOverflowItems = __spreadArray(__spreadArray([], (overflowButtonProps.menuProps ? overflowButtonProps.menuProps.items : [])), overflowItems);\n var overflowProps = __assign(__assign({ role: 'menuitem' }, overflowButtonProps), { styles: __assign({ menuIcon: { fontSize: '17px' } }, overflowButtonProps.styles), className: css('ms-CommandBar-overflowButton', overflowButtonProps.className), menuProps: __assign(__assign({}, overflowButtonProps.menuProps), { items: combinedOverflowItems }), menuIconProps: __assign({ iconName: 'More' }, overflowButtonProps.menuIconProps) });\n var OverflowButtonType = _this.props.overflowButtonAs\n ? composeComponentAs(_this.props.overflowButtonAs, CommandBarButton)\n : CommandBarButton;\n return React.createElement(OverflowButtonType, __assign({}, overflowProps));\n };\n _this._onReduceData = function (data) {\n var _a = _this.props, shiftOnReduce = _a.shiftOnReduce, onDataReduced = _a.onDataReduced;\n var primaryItems = data.primaryItems, overflowItems = data.overflowItems, cacheKey = data.cacheKey;\n // Use first item if shiftOnReduce, otherwise use last item\n var movedItem = primaryItems[shiftOnReduce ? 0 : primaryItems.length - 1];\n if (movedItem !== undefined) {\n movedItem.renderedInOverflow = true;\n overflowItems = __spreadArray([movedItem], overflowItems);\n primaryItems = shiftOnReduce ? primaryItems.slice(1) : primaryItems.slice(0, -1);\n var newData = __assign(__assign({}, data), { primaryItems: primaryItems, overflowItems: overflowItems });\n cacheKey = _this._computeCacheKey({ primaryItems: primaryItems, overflow: overflowItems.length > 0 });\n if (onDataReduced) {\n onDataReduced(movedItem);\n }\n newData.cacheKey = cacheKey;\n return newData;\n }\n return undefined;\n };\n _this._onGrowData = function (data) {\n var _a = _this.props, shiftOnReduce = _a.shiftOnReduce, onDataGrown = _a.onDataGrown;\n var minimumOverflowItems = data.minimumOverflowItems;\n var primaryItems = data.primaryItems, overflowItems = data.overflowItems, cacheKey = data.cacheKey;\n var movedItem = overflowItems[0];\n // Make sure that moved item exists and is not one of the original overflow items\n if (movedItem !== undefined && overflowItems.length > minimumOverflowItems) {\n movedItem.renderedInOverflow = false;\n overflowItems = overflowItems.slice(1);\n // if shiftOnReduce, movedItem goes first, otherwise, last.\n primaryItems = shiftOnReduce ? __spreadArray([movedItem], primaryItems) : __spreadArray(__spreadArray([], primaryItems), [movedItem]);\n var newData = __assign(__assign({}, data), { primaryItems: primaryItems, overflowItems: overflowItems });\n cacheKey = _this._computeCacheKey({ primaryItems: primaryItems, overflow: overflowItems.length > 0 });\n if (onDataGrown) {\n onDataGrown(movedItem);\n }\n newData.cacheKey = cacheKey;\n return newData;\n }\n return undefined;\n };\n initializeComponentRef(_this);\n return _this;\n }\n CommandBarBase.prototype.render = function () {\n var _a = this.props, items = _a.items, overflowItems = _a.overflowItems, farItems = _a.farItems, styles = _a.styles, theme = _a.theme, dataDidRender = _a.dataDidRender, _b = _a.onReduceData, onReduceData = _b === void 0 ? this._onReduceData : _b, _c = _a.onGrowData, onGrowData = _c === void 0 ? this._onGrowData : _c, _d = _a.resizeGroupAs, ResizeGroupAs = _d === void 0 ? ResizeGroup : _d;\n var commandBarData = {\n primaryItems: __spreadArray([], items),\n overflowItems: __spreadArray([], overflowItems),\n minimumOverflowItems: __spreadArray([], overflowItems).length,\n farItems: farItems,\n cacheKey: this._computeCacheKey({\n primaryItems: __spreadArray([], items),\n overflow: overflowItems && overflowItems.length > 0,\n }),\n };\n this._classNames = getClassNames(styles, { theme: theme });\n // ResizeGroup will render these attributes to the root

.\n // TODO We may need to elevate classNames from into ?\n var nativeProps = getNativeProps(this.props, divProperties);\n return (React.createElement(ResizeGroupAs, __assign({}, nativeProps, { componentRef: this._resizeGroup, data: commandBarData, onReduceData: onReduceData, onGrowData: onGrowData, onRenderData: this._onRenderData, dataDidRender: dataDidRender })));\n };\n CommandBarBase.prototype.focus = function () {\n var overflowSet = this._overflowSet.current;\n overflowSet && overflowSet.focus();\n };\n CommandBarBase.prototype.remeasure = function () {\n this._resizeGroup.current && this._resizeGroup.current.remeasure();\n };\n CommandBarBase.prototype._onButtonClick = function (item) {\n return function (ev) {\n // inactive is deprecated. remove check in 7.0\n // eslint-disable-next-line deprecation/deprecation\n if (item.inactive) {\n return;\n }\n if (item.onClick) {\n item.onClick(ev, item);\n }\n };\n };\n CommandBarBase.prototype._computeCacheKey = function (data) {\n var primaryItems = data.primaryItems, overflow = data.overflow;\n var returnKey = function (acc, current) {\n var _a = current.cacheKey, cacheKey = _a === void 0 ? current.key : _a;\n return acc + cacheKey;\n };\n var primaryKey = primaryItems && primaryItems.reduce(returnKey, '');\n var overflowKey = overflow ? 'overflow' : '';\n return [primaryKey, overflowKey].join('');\n };\n CommandBarBase.defaultProps = {\n items: [],\n overflowItems: [],\n };\n return CommandBarBase;\n}(React.Component));\nexport { CommandBarBase };\n//# sourceMappingURL=CommandBar.base.js.map","import { styled } from '../../Utilities';\nimport { CommandBarBase } from './CommandBar.base';\nimport { getStyles } from './CommandBar.styles';\n// Create a CommandBar variant which uses these default styles and this styled subcomponent.\nexport var CommandBar = styled(CommandBarBase, getStyles, undefined, {\n scope: 'CommandBar',\n});\n//# sourceMappingURL=CommandBar.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { Async, EventGroup, KeyCodes, elementContains, findScrollableParent, getParent, getDocument, getWindow, isElementTabbable, css, initializeComponentRef, FocusRects, } from '../../Utilities';\nimport { SelectionMode } from './interfaces';\n// Selection definitions:\n//\n// Anchor index: the point from which a range selection starts.\n// Focus index: the point from which layout movement originates from.\n//\n// These two can differ. Tests:\n//\n// If you start at index 5\n// Shift click to index 10\n// The focus is 10, the anchor is 5.\n// If you shift click at index 0\n// The anchor remains at 5, the items between 0 and 5 are selected and everything else is cleared.\n// If you click index 8\n// The anchor and focus are set to 8.\nvar SELECTION_DISABLED_ATTRIBUTE_NAME = 'data-selection-disabled';\nvar SELECTION_INDEX_ATTRIBUTE_NAME = 'data-selection-index';\nvar SELECTION_TOGGLE_ATTRIBUTE_NAME = 'data-selection-toggle';\nvar SELECTION_INVOKE_ATTRIBUTE_NAME = 'data-selection-invoke';\nvar SELECTION_INVOKE_TOUCH_ATTRIBUTE_NAME = 'data-selection-touch-invoke';\nvar SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME = 'data-selection-all-toggle';\nvar SELECTION_SELECT_ATTRIBUTE_NAME = 'data-selection-select';\n/**\n * {@docCategory Selection}\n */\nvar SelectionZone = /** @class */ (function (_super) {\n __extends(SelectionZone, _super);\n function SelectionZone(props) {\n var _this = _super.call(this, props) || this;\n _this._root = React.createRef();\n /**\n * In some cases, the consuming scenario requires to set focus on a row without having SelectionZone\n * react to the event. Note that focus events in IE \\<= 11 will occur asynchronously after .focus() has\n * been called on an element, so we need a flag to store the idea that we will bypass the \"next\"\n * focus event that occurs. This method does that.\n */\n _this.ignoreNextFocus = function () {\n _this._handleNextFocus(false);\n };\n _this._onSelectionChange = function () {\n var selection = _this.props.selection;\n var isModal = selection.isModal && selection.isModal();\n _this.setState({\n isModal: isModal,\n });\n };\n _this._onMouseDownCapture = function (ev) {\n var target = ev.target;\n if (document.activeElement !== target && !elementContains(document.activeElement, target)) {\n _this.ignoreNextFocus();\n return;\n }\n if (!elementContains(target, _this._root.current)) {\n return;\n }\n while (target !== _this._root.current) {\n if (_this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {\n _this.ignoreNextFocus();\n break;\n }\n target = getParent(target);\n }\n };\n /**\n * When we focus an item, for single/multi select scenarios, we should try to select it immediately\n * as long as the focus did not originate from a mouse down/touch event. For those cases, we handle them\n * specially.\n */\n _this._onFocus = function (ev) {\n var target = ev.target;\n var selection = _this.props.selection;\n var isToggleModifierPressed = _this._isCtrlPressed || _this._isMetaPressed;\n var selectionMode = _this._getSelectionMode();\n if (_this._shouldHandleFocus && selectionMode !== SelectionMode.none) {\n var isToggle = _this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME);\n var itemRoot = _this._findItemRoot(target);\n if (!isToggle && itemRoot) {\n var index = _this._getItemIndex(itemRoot);\n if (isToggleModifierPressed) {\n // set anchor only.\n selection.setIndexSelected(index, selection.isIndexSelected(index), true);\n if (_this.props.enterModalOnTouch && _this._isTouch && selection.setModal) {\n selection.setModal(true);\n _this._setIsTouch(false);\n }\n }\n else {\n if (_this.props.isSelectedOnFocus) {\n _this._onItemSurfaceClick(ev, index);\n }\n }\n }\n }\n _this._handleNextFocus(false);\n };\n _this._onMouseDown = function (ev) {\n _this._updateModifiers(ev);\n var target = ev.target;\n var itemRoot = _this._findItemRoot(target);\n // No-op if selection is disabled\n if (_this._isSelectionDisabled(target)) {\n return;\n }\n while (target !== _this._root.current) {\n if (_this._hasAttribute(target, SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME)) {\n break;\n }\n else if (itemRoot) {\n if (_this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) {\n break;\n }\n else if (_this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {\n break;\n }\n else if ((target === itemRoot || _this._shouldAutoSelect(target)) &&\n !_this._isShiftPressed &&\n !_this._isCtrlPressed &&\n !_this._isMetaPressed) {\n _this._onInvokeMouseDown(ev, _this._getItemIndex(itemRoot));\n break;\n }\n else if (_this.props.disableAutoSelectOnInputElements &&\n (target.tagName === 'A' || target.tagName === 'BUTTON' || target.tagName === 'INPUT')) {\n return;\n }\n }\n target = getParent(target);\n }\n };\n _this._onTouchStartCapture = function (ev) {\n _this._setIsTouch(true);\n };\n _this._onClick = function (ev) {\n var _a = _this.props.enableTouchInvocationTarget, enableTouchInvocationTarget = _a === void 0 ? false : _a;\n _this._updateModifiers(ev);\n var target = ev.target;\n var itemRoot = _this._findItemRoot(target);\n var isSelectionDisabled = _this._isSelectionDisabled(target);\n while (target !== _this._root.current) {\n if (_this._hasAttribute(target, SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME)) {\n if (!isSelectionDisabled) {\n _this._onToggleAllClick(ev);\n }\n break;\n }\n else if (itemRoot) {\n var index = _this._getItemIndex(itemRoot);\n if (_this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) {\n if (!isSelectionDisabled) {\n if (_this._isShiftPressed) {\n _this._onItemSurfaceClick(ev, index);\n }\n else {\n _this._onToggleClick(ev, index);\n }\n }\n break;\n }\n else if ((_this._isTouch &&\n enableTouchInvocationTarget &&\n _this._hasAttribute(target, SELECTION_INVOKE_TOUCH_ATTRIBUTE_NAME)) ||\n _this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {\n // Items should be invokable even if selection is disabled.\n _this._onInvokeClick(ev, index);\n break;\n }\n else if (target === itemRoot) {\n if (!isSelectionDisabled) {\n _this._onItemSurfaceClick(ev, index);\n }\n break;\n }\n else if (target.tagName === 'A' || target.tagName === 'BUTTON' || target.tagName === 'INPUT') {\n return;\n }\n }\n target = getParent(target);\n }\n };\n _this._onContextMenu = function (ev) {\n var target = ev.target;\n var _a = _this.props, onItemContextMenu = _a.onItemContextMenu, selection = _a.selection;\n if (onItemContextMenu) {\n var itemRoot = _this._findItemRoot(target);\n if (itemRoot) {\n var index = _this._getItemIndex(itemRoot);\n _this._onInvokeMouseDown(ev, index);\n var skipPreventDefault = onItemContextMenu(selection.getItems()[index], index, ev.nativeEvent);\n // In order to keep back compat, if the value here is undefined, then we should still\n // call preventDefault(). Only in the case where true is explicitly returned should\n // the call be skipped.\n if (!skipPreventDefault) {\n ev.preventDefault();\n }\n }\n }\n };\n /**\n * In multi selection, if you double click within an item's root (but not within the invoke element or\n * input elements), we should execute the invoke handler.\n */\n _this._onDoubleClick = function (ev) {\n var target = ev.target;\n var onItemInvoked = _this.props.onItemInvoked;\n var itemRoot = _this._findItemRoot(target);\n if (itemRoot && onItemInvoked && !_this._isInputElement(target)) {\n var index = _this._getItemIndex(itemRoot);\n while (target !== _this._root.current) {\n if (_this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME) ||\n _this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {\n break;\n }\n else if (target === itemRoot) {\n _this._onInvokeClick(ev, index);\n break;\n }\n target = getParent(target);\n }\n target = getParent(target);\n }\n };\n _this._onKeyDownCapture = function (ev) {\n _this._updateModifiers(ev);\n _this._handleNextFocus(true);\n };\n _this._onKeyDown = function (ev) {\n _this._updateModifiers(ev);\n var target = ev.target;\n var isSelectionDisabled = _this._isSelectionDisabled(target);\n var selection = _this.props.selection;\n // eslint-disable-next-line deprecation/deprecation\n var isSelectAllKey = ev.which === KeyCodes.a && (_this._isCtrlPressed || _this._isMetaPressed);\n // eslint-disable-next-line deprecation/deprecation\n var isClearSelectionKey = ev.which === KeyCodes.escape;\n // Ignore key downs from input elements.\n if (_this._isInputElement(target)) {\n // A key was pressed while an item in this zone was focused.\n return;\n }\n var selectionMode = _this._getSelectionMode();\n // If ctrl-a is pressed, select all (if all are not already selected.)\n if (isSelectAllKey && selectionMode === SelectionMode.multiple && !selection.isAllSelected()) {\n if (!isSelectionDisabled) {\n selection.setAllSelected(true);\n }\n ev.stopPropagation();\n ev.preventDefault();\n return;\n }\n // If escape is pressed, clear selection (if any are selected.)\n if (isClearSelectionKey && selection.getSelectedCount() > 0) {\n if (!isSelectionDisabled) {\n selection.setAllSelected(false);\n }\n ev.stopPropagation();\n ev.preventDefault();\n return;\n }\n var itemRoot = _this._findItemRoot(target);\n // If a key was pressed within an item, we should treat \"enters\" as invokes and \"space\" as toggle\n if (itemRoot) {\n var index = _this._getItemIndex(itemRoot);\n while (target !== _this._root.current) {\n if (_this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) {\n // For toggle elements, assuming they are rendered as buttons, they will generate a click event,\n // so we can no-op for any keydowns in this case.\n break;\n }\n else if (_this._shouldAutoSelect(target)) {\n if (!isSelectionDisabled) {\n // If the event went to an element which should trigger auto-select, select it and then let\n // the default behavior kick in.\n _this._onInvokeMouseDown(ev, index);\n }\n break;\n }\n else if (\n // eslint-disable-next-line deprecation/deprecation\n (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) &&\n (target.tagName === 'BUTTON' || target.tagName === 'A' || target.tagName === 'INPUT')) {\n return false;\n }\n else if (target === itemRoot) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n // Items should be invokable even if selection is disabled.\n _this._onInvokeClick(ev, index);\n ev.preventDefault();\n return;\n // eslint-disable-next-line deprecation/deprecation\n }\n else if (ev.which === KeyCodes.space) {\n if (!isSelectionDisabled) {\n _this._onToggleClick(ev, index);\n }\n ev.preventDefault();\n return;\n }\n break;\n }\n target = getParent(target);\n }\n }\n };\n _this._events = new EventGroup(_this);\n _this._async = new Async(_this);\n initializeComponentRef(_this);\n var selection = _this.props.selection;\n // Reflect the initial modal state of selection into the state.\n var isModal = selection.isModal && selection.isModal();\n _this.state = {\n isModal: isModal,\n };\n return _this;\n }\n SelectionZone.getDerivedStateFromProps = function (nextProps, prevState) {\n var isModal = nextProps.selection.isModal && nextProps.selection.isModal();\n return __assign(__assign({}, prevState), { isModal: isModal });\n };\n SelectionZone.prototype.componentDidMount = function () {\n var win = getWindow(this._root.current);\n // Track the latest modifier keys globally.\n this._events.on(win, 'keydown, keyup', this._updateModifiers, true);\n this._events.on(document, 'click', this._findScrollParentAndTryClearOnEmptyClick);\n this._events.on(document.body, 'touchstart', this._onTouchStartCapture, true);\n this._events.on(document.body, 'touchend', this._onTouchStartCapture, true);\n // Subscribe to the selection to keep modal state updated.\n this._events.on(this.props.selection, 'change', this._onSelectionChange);\n };\n SelectionZone.prototype.render = function () {\n var isModal = this.state.isModal;\n return (React.createElement(\"div\", { className: css('ms-SelectionZone', this.props.className, {\n 'ms-SelectionZone--modal': !!isModal,\n }), ref: this._root, onKeyDown: this._onKeyDown, onMouseDown: this._onMouseDown, onKeyDownCapture: this._onKeyDownCapture, onClick: this._onClick, role: \"presentation\", onDoubleClick: this._onDoubleClick, onContextMenu: this._onContextMenu, onMouseDownCapture: this._onMouseDownCapture, onFocusCapture: this._onFocus, \"data-selection-is-modal\": isModal ? true : undefined },\n this.props.children,\n React.createElement(FocusRects, null)));\n };\n SelectionZone.prototype.componentDidUpdate = function (previousProps) {\n var selection = this.props.selection;\n if (selection !== previousProps.selection) {\n // Whenever selection changes, update the subscripton to keep modal state updated.\n this._events.off(previousProps.selection);\n this._events.on(selection, 'change', this._onSelectionChange);\n }\n };\n SelectionZone.prototype.componentWillUnmount = function () {\n this._events.dispose();\n this._async.dispose();\n };\n SelectionZone.prototype._isSelectionDisabled = function (target) {\n if (this._getSelectionMode() === SelectionMode.none) {\n return true;\n }\n while (target !== this._root.current) {\n if (this._hasAttribute(target, SELECTION_DISABLED_ATTRIBUTE_NAME)) {\n return true;\n }\n target = getParent(target);\n }\n return false;\n };\n SelectionZone.prototype._onToggleAllClick = function (ev) {\n var selection = this.props.selection;\n var selectionMode = this._getSelectionMode();\n if (selectionMode === SelectionMode.multiple) {\n selection.toggleAllSelected();\n ev.stopPropagation();\n ev.preventDefault();\n }\n };\n SelectionZone.prototype._onToggleClick = function (ev, index) {\n var selection = this.props.selection;\n var selectionMode = this._getSelectionMode();\n selection.setChangeEvents(false);\n if (this.props.enterModalOnTouch && this._isTouch && !selection.isIndexSelected(index) && selection.setModal) {\n selection.setModal(true);\n this._setIsTouch(false);\n }\n if (selectionMode === SelectionMode.multiple) {\n selection.toggleIndexSelected(index);\n }\n else if (selectionMode === SelectionMode.single) {\n var isSelected = selection.isIndexSelected(index);\n var isModal = selection.isModal && selection.isModal();\n selection.setAllSelected(false);\n selection.setIndexSelected(index, !isSelected, true);\n if (isModal && selection.setModal) {\n // Since the above call to setAllSelected(false) clears modal state,\n // restore it. This occurs because the SelectionMode of the Selection\n // may differ from the SelectionZone.\n selection.setModal(true);\n }\n }\n else {\n selection.setChangeEvents(true);\n return;\n }\n selection.setChangeEvents(true);\n ev.stopPropagation();\n // NOTE: ev.preventDefault is not called for toggle clicks, because this will kill the browser behavior\n // for checkboxes if you use a checkbox for the toggle.\n };\n SelectionZone.prototype._onInvokeClick = function (ev, index) {\n var _a = this.props, selection = _a.selection, onItemInvoked = _a.onItemInvoked;\n if (onItemInvoked) {\n onItemInvoked(selection.getItems()[index], index, ev.nativeEvent);\n ev.preventDefault();\n ev.stopPropagation();\n }\n };\n SelectionZone.prototype._onItemSurfaceClick = function (ev, index) {\n var selection = this.props.selection;\n var isToggleModifierPressed = this._isCtrlPressed || this._isMetaPressed;\n var selectionMode = this._getSelectionMode();\n if (selectionMode === SelectionMode.multiple) {\n if (this._isShiftPressed && !this._isTabPressed) {\n selection.selectToIndex(index, !isToggleModifierPressed);\n }\n else if (isToggleModifierPressed) {\n selection.toggleIndexSelected(index);\n }\n else {\n this._clearAndSelectIndex(index);\n }\n }\n else if (selectionMode === SelectionMode.single) {\n this._clearAndSelectIndex(index);\n }\n };\n SelectionZone.prototype._onInvokeMouseDown = function (ev, index) {\n var selection = this.props.selection;\n // Only do work if item is not selected.\n if (selection.isIndexSelected(index)) {\n return;\n }\n this._clearAndSelectIndex(index);\n };\n /**\n * To avoid high startup cost of traversing the DOM on component mount,\n * defer finding the scrollable parent until a click interaction.\n *\n * The styles will probably already calculated since we're running in a click handler,\n * so this is less likely to cause layout thrashing then doing it in mount.\n */\n SelectionZone.prototype._findScrollParentAndTryClearOnEmptyClick = function (ev) {\n var scrollParent = findScrollableParent(this._root.current);\n // unbind this handler and replace binding with a binding on the actual scrollable parent\n this._events.off(document, 'click', this._findScrollParentAndTryClearOnEmptyClick);\n this._events.on(scrollParent, 'click', this._tryClearOnEmptyClick);\n // If we clicked inside the scrollable parent, call through to the handler on this click.\n if ((scrollParent && ev.target instanceof Node && scrollParent.contains(ev.target)) || scrollParent === ev.target) {\n this._tryClearOnEmptyClick(ev);\n }\n };\n SelectionZone.prototype._tryClearOnEmptyClick = function (ev) {\n if (!this.props.selectionPreservedOnEmptyClick && this._isNonHandledClick(ev.target)) {\n this.props.selection.setAllSelected(false);\n }\n };\n SelectionZone.prototype._clearAndSelectIndex = function (index) {\n var _a = this.props, selection = _a.selection, _b = _a.selectionClearedOnSurfaceClick, selectionClearedOnSurfaceClick = _b === void 0 ? true : _b;\n var isAlreadySingleSelected = selection.getSelectedCount() === 1 && selection.isIndexSelected(index);\n if (!isAlreadySingleSelected && selectionClearedOnSurfaceClick) {\n var isModal = selection.isModal && selection.isModal();\n selection.setChangeEvents(false);\n selection.setAllSelected(false);\n selection.setIndexSelected(index, true, true);\n if (isModal || (this.props.enterModalOnTouch && this._isTouch)) {\n if (selection.setModal) {\n selection.setModal(true);\n }\n if (this._isTouch) {\n this._setIsTouch(false);\n }\n }\n selection.setChangeEvents(true);\n }\n };\n /**\n * We need to track the modifier key states so that when focus events occur, which do not contain\n * modifier states in the Event object, we know how to behave.\n */\n SelectionZone.prototype._updateModifiers = function (ev) {\n this._isShiftPressed = ev.shiftKey;\n this._isCtrlPressed = ev.ctrlKey;\n this._isMetaPressed = ev.metaKey;\n // eslint-disable-next-line deprecation/deprecation\n var keyCode = ev.keyCode;\n this._isTabPressed = keyCode ? keyCode === KeyCodes.tab : false;\n };\n SelectionZone.prototype._findItemRoot = function (target) {\n var selection = this.props.selection;\n while (target !== this._root.current) {\n var indexValue = target.getAttribute(SELECTION_INDEX_ATTRIBUTE_NAME);\n var index = Number(indexValue);\n if (indexValue !== null && index >= 0 && index < selection.getItems().length) {\n break;\n }\n target = getParent(target);\n }\n if (target === this._root.current) {\n return undefined;\n }\n return target;\n };\n SelectionZone.prototype._getItemIndex = function (itemRoot) {\n return Number(itemRoot.getAttribute(SELECTION_INDEX_ATTRIBUTE_NAME));\n };\n SelectionZone.prototype._shouldAutoSelect = function (element) {\n return this._hasAttribute(element, SELECTION_SELECT_ATTRIBUTE_NAME);\n };\n SelectionZone.prototype._hasAttribute = function (element, attributeName) {\n var isToggle = false;\n while (!isToggle && element !== this._root.current) {\n isToggle = element.getAttribute(attributeName) === 'true';\n element = getParent(element);\n }\n return isToggle;\n };\n SelectionZone.prototype._isInputElement = function (element) {\n return element.tagName === 'INPUT' || element.tagName === 'TEXTAREA';\n };\n SelectionZone.prototype._isNonHandledClick = function (element) {\n var doc = getDocument();\n if (doc && element) {\n while (element && element !== doc.documentElement) {\n if (isElementTabbable(element)) {\n return false;\n }\n element = getParent(element);\n }\n }\n return true;\n };\n SelectionZone.prototype._handleNextFocus = function (handleFocus) {\n var _this = this;\n if (this._shouldHandleFocusTimeoutId) {\n this._async.clearTimeout(this._shouldHandleFocusTimeoutId);\n this._shouldHandleFocusTimeoutId = undefined;\n }\n this._shouldHandleFocus = handleFocus;\n if (handleFocus) {\n this._async.setTimeout(function () {\n _this._shouldHandleFocus = false;\n }, 100);\n }\n };\n SelectionZone.prototype._setIsTouch = function (isTouch) {\n var _this = this;\n if (this._isTouchTimeoutId) {\n this._async.clearTimeout(this._isTouchTimeoutId);\n this._isTouchTimeoutId = undefined;\n }\n this._isTouch = true;\n if (isTouch) {\n this._async.setTimeout(function () {\n _this._isTouch = false;\n }, 300);\n }\n };\n SelectionZone.prototype._getSelectionMode = function () {\n var selection = this.props.selection;\n var _a = this.props.selectionMode, selectionMode = _a === void 0 ? selection ? selection.mode : SelectionMode.none : _a;\n return selectionMode;\n };\n SelectionZone.defaultProps = {\n isSelectedOnFocus: true,\n selectionMode: SelectionMode.multiple,\n };\n return SelectionZone;\n}(React.Component));\nexport { SelectionZone };\n//# sourceMappingURL=SelectionZone.js.map","/**\n * {@docCategory GroupedList}\n */\nexport var CollapseAllVisibility;\n(function (CollapseAllVisibility) {\n CollapseAllVisibility[CollapseAllVisibility[\"hidden\"] = 0] = \"hidden\";\n CollapseAllVisibility[CollapseAllVisibility[\"visible\"] = 1] = \"visible\";\n})(CollapseAllVisibility || (CollapseAllVisibility = {}));\n//# sourceMappingURL=GroupedList.types.js.map","/**\n * Enum to describe how a particular column header behaves.\n * This is used to to specify the property `IColumn.columnActionsMode`.\n * If `IColumn.columnActionsMode` is undefined, it's equivalent to `ColumnActionsMode.clickable`.\n * {@docCategory DetailsList}\n */\nexport var ColumnActionsMode;\n(function (ColumnActionsMode) {\n /** Renders the column header as disabled. */\n ColumnActionsMode[ColumnActionsMode[\"disabled\"] = 0] = \"disabled\";\n /** Renders the column header as clickable. Default value. */\n ColumnActionsMode[ColumnActionsMode[\"clickable\"] = 1] = \"clickable\";\n /** Renders the column header as clickable and displays the dropdown chevron. */\n ColumnActionsMode[ColumnActionsMode[\"hasDropdown\"] = 2] = \"hasDropdown\";\n})(ColumnActionsMode || (ColumnActionsMode = {}));\n/**\n * {@docCategory DetailsList}\n */\nexport var ConstrainMode;\n(function (ConstrainMode) {\n /** Lets the content grow which allows the page to manage scrolling. */\n ConstrainMode[ConstrainMode[\"unconstrained\"] = 0] = \"unconstrained\";\n /** Constrains the list to the given layout space. */\n ConstrainMode[ConstrainMode[\"horizontalConstrained\"] = 1] = \"horizontalConstrained\";\n})(ConstrainMode || (ConstrainMode = {}));\n/**\n * Enum to describe where the column has been dropped, after starting the drag\n * {@docCategory DetailsList}\n */\nexport var ColumnDragEndLocation;\n(function (ColumnDragEndLocation) {\n /** Drag ended outside of current list */\n ColumnDragEndLocation[ColumnDragEndLocation[\"outside\"] = 0] = \"outside\";\n /** Drag ended within current list */\n ColumnDragEndLocation[ColumnDragEndLocation[\"surface\"] = 1] = \"surface\";\n /** Drag ended on header */\n ColumnDragEndLocation[ColumnDragEndLocation[\"header\"] = 2] = \"header\";\n})(ColumnDragEndLocation || (ColumnDragEndLocation = {}));\n/**\n * {@docCategory DetailsList}\n */\nexport var DetailsListLayoutMode;\n(function (DetailsListLayoutMode) {\n /**\n * Lets the user resize columns and makes not attempt to fit them.\n */\n DetailsListLayoutMode[DetailsListLayoutMode[\"fixedColumns\"] = 0] = \"fixedColumns\";\n /**\n * Manages which columns are visible, tries to size them according to their min/max rules and drops\n * off columns that can't fit and have isCollapsible set.\n */\n DetailsListLayoutMode[DetailsListLayoutMode[\"justified\"] = 1] = \"justified\";\n})(DetailsListLayoutMode || (DetailsListLayoutMode = {}));\n/**\n * {@docCategory DetailsList}\n */\nexport var CheckboxVisibility;\n(function (CheckboxVisibility) {\n /** Visible on hover. */\n CheckboxVisibility[CheckboxVisibility[\"onHover\"] = 0] = \"onHover\";\n /** Visible always. */\n CheckboxVisibility[CheckboxVisibility[\"always\"] = 1] = \"always\";\n /** Hide checkboxes. */\n CheckboxVisibility[CheckboxVisibility[\"hidden\"] = 2] = \"hidden\";\n})(CheckboxVisibility || (CheckboxVisibility = {}));\n//# sourceMappingURL=DetailsList.types.js.map","import * as React from 'react';\nexport var SPACER_WIDTH = 36;\nexport var GroupSpacer = function (props) {\n var count = props.count, _a = props.indentWidth, indentWidth = _a === void 0 ? SPACER_WIDTH : _a, _b = props.role, role = _b === void 0 ? 'presentation' : _b;\n var width = count * indentWidth;\n return count > 0 ? (React.createElement(\"span\", { className: 'ms-GroupSpacer', style: { display: 'inline-block', width: width }, role: role })) : null;\n};\n//# sourceMappingURL=GroupSpacer.js.map","import { getGlobalClassNames, AnimationVariables } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-GroupedList',\n compact: 'ms-GroupedList--Compact',\n group: 'ms-GroupedList-group',\n link: 'ms-Link',\n listCell: 'ms-List-cell',\n};\nvar beziers = {\n easeInOutSine: 'cubic-bezier(0.445, 0.050, 0.550, 0.950)',\n};\nexport var getStyles = function (props) {\n var _a, _b;\n var theme = props.theme, className = props.className, compact = props.compact;\n var palette = theme.palette;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n theme.fonts.small,\n {\n position: 'relative',\n selectors: (_a = {},\n _a[\".\" + classNames.listCell] = {\n minHeight: 38, // be consistent with DetailsList styles\n },\n _a),\n },\n compact && [\n classNames.compact,\n {\n selectors: (_b = {},\n _b[\".\" + classNames.listCell] = {\n minHeight: 32, // be consistent with DetailsList styles\n },\n _b),\n },\n ],\n className,\n ],\n group: [\n classNames.group,\n {\n transition: \"background-color \" + AnimationVariables.durationValue2 + \" \" + beziers.easeInOutSine,\n },\n ],\n groupIsDropping: {\n backgroundColor: palette.neutralLight,\n },\n };\n};\n//# sourceMappingURL=GroupedList.styles.js.map","import { __assign } from \"tslib\";\nimport { AnimationClassNames, AnimationStyles, HighContrastSelector, getFocusStyle, getGlobalClassNames, FontWeights, getHighContrastNoAdjustStyle, } from '../../Styling';\nimport { IsFocusVisibleClassName } from '../../Utilities';\nimport { GlobalClassNames as LinkGlobalClassNames } from '../../components/Link/Link.styles';\nexport var DetailsRowGlobalClassNames = {\n root: 'ms-DetailsRow',\n // TODO: in Fabric 7.0 lowercase the 'Compact' for consistency across other components.\n compact: 'ms-DetailsList--Compact',\n cell: 'ms-DetailsRow-cell',\n cellAnimation: 'ms-DetailsRow-cellAnimation',\n cellCheck: 'ms-DetailsRow-cellCheck',\n check: 'ms-DetailsRow-check',\n cellMeasurer: 'ms-DetailsRow-cellMeasurer',\n listCellFirstChild: 'ms-List-cell:first-child',\n isContentUnselectable: 'is-contentUnselectable',\n isSelected: 'is-selected',\n isCheckVisible: 'is-check-visible',\n isRowHeader: 'is-row-header',\n fields: 'ms-DetailsRow-fields',\n};\nvar IsFocusableSelector = \"[data-is-focusable='true']\";\nexport var DEFAULT_CELL_STYLE_PROPS = {\n cellLeftPadding: 12,\n cellRightPadding: 8,\n cellExtraRightPadding: 24,\n};\n// Source of default row heights to share.\nexport var DEFAULT_ROW_HEIGHTS = {\n rowHeight: 42,\n compactRowHeight: 32,\n};\n// Constant values\nvar values = __assign(__assign({}, DEFAULT_ROW_HEIGHTS), { rowVerticalPadding: 11, compactRowVerticalPadding: 6 });\nexport var getDetailsRowStyles = function (props) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;\n var theme = props.theme, isSelected = props.isSelected, canSelect = props.canSelect, droppingClassName = props.droppingClassName, anySelected = props.anySelected, isCheckVisible = props.isCheckVisible, checkboxCellClassName = props.checkboxCellClassName, compact = props.compact, className = props.className, _q = props.cellStyleProps, cellStyleProps = _q === void 0 ? DEFAULT_CELL_STYLE_PROPS : _q, enableUpdateAnimations = props.enableUpdateAnimations, disabled = props.disabled;\n var palette = theme.palette, fonts = theme.fonts;\n var neutralPrimary = palette.neutralPrimary, white = palette.white, neutralSecondary = palette.neutralSecondary, neutralLighter = palette.neutralLighter, neutralLight = palette.neutralLight, neutralDark = palette.neutralDark, neutralQuaternaryAlt = palette.neutralQuaternaryAlt;\n var _r = theme.semanticColors, focusBorder = _r.focusBorder, focusedLinkColor = _r.linkHovered;\n var classNames = getGlobalClassNames(DetailsRowGlobalClassNames, theme);\n var colors = {\n // Default\n defaultHeaderText: neutralPrimary,\n defaultMetaText: neutralSecondary,\n defaultBackground: white,\n // Default Hover\n defaultHoverHeaderText: neutralDark,\n defaultHoverMetaText: neutralPrimary,\n defaultHoverBackground: neutralLighter,\n // Selected\n selectedHeaderText: neutralDark,\n selectedMetaText: neutralPrimary,\n selectedBackground: neutralLight,\n // Selected Hover\n selectedHoverHeaderText: neutralDark,\n selectedHoverMetaText: neutralPrimary,\n selectedHoverBackground: neutralQuaternaryAlt,\n // Focus\n focusHeaderText: neutralDark,\n focusMetaText: neutralPrimary,\n focusBackground: neutralLight,\n focusHoverBackground: neutralQuaternaryAlt,\n };\n var rowHighContrastFocus = {\n top: 2,\n right: 2,\n bottom: 2,\n left: 2,\n };\n // Selected row styles\n var selectedStyles = [\n getFocusStyle(theme, {\n inset: -1,\n borderColor: focusBorder,\n outlineColor: white,\n highContrastStyle: rowHighContrastFocus,\n }),\n classNames.isSelected,\n {\n color: colors.selectedMetaText,\n background: colors.selectedBackground,\n borderBottom: \"1px solid \" + white,\n selectors: (_a = {\n '&:before': {\n position: 'absolute',\n display: 'block',\n top: -1,\n height: 1,\n bottom: 0,\n left: 0,\n right: 0,\n content: '',\n borderTop: \"1px solid \" + white,\n }\n },\n _a[\".\" + classNames.cell + \" > .\" + LinkGlobalClassNames.root] = {\n color: focusedLinkColor,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n color: 'HighlightText',\n },\n _b),\n },\n // Selected State hover\n _a['&:hover'] = {\n background: colors.selectedHoverBackground,\n color: colors.selectedHoverMetaText,\n selectors: (_c = {},\n // Selected State hover meta cell\n _c[HighContrastSelector] = {\n background: 'Highlight',\n selectors: (_d = {},\n _d[\".\" + classNames.cell] = {\n color: 'HighlightText',\n },\n _d[\".\" + classNames.cell + \" > .\" + LinkGlobalClassNames.root] = {\n forcedColorAdjust: 'none',\n color: 'HighlightText',\n },\n _d),\n },\n // Selected State hover Header cell\n _c[\".\" + classNames.isRowHeader] = {\n color: colors.selectedHoverHeaderText,\n selectors: (_e = {},\n _e[HighContrastSelector] = {\n color: 'HighlightText',\n },\n _e),\n },\n _c),\n },\n // Focus state\n _a['&:focus'] = {\n background: colors.focusBackground,\n selectors: (_f = {},\n // Selected State hover meta cell\n _f[\".\" + classNames.cell] = {\n color: colors.focusMetaText,\n selectors: (_g = {},\n _g[HighContrastSelector] = {\n color: 'HighlightText',\n selectors: {\n '> a': {\n color: 'HighlightText',\n },\n },\n },\n _g),\n },\n // Row header cell\n _f[\".\" + classNames.isRowHeader] = {\n color: colors.focusHeaderText,\n selectors: (_h = {},\n _h[HighContrastSelector] = {\n color: 'HighlightText',\n },\n _h),\n },\n // Ensure high-contrast mode overrides default focus background\n _f[HighContrastSelector] = {\n background: 'Highlight',\n },\n _f),\n },\n _a[HighContrastSelector] = __assign(__assign({ background: 'Highlight', color: 'HighlightText' }, getHighContrastNoAdjustStyle()), { selectors: {\n a: {\n color: 'HighlightText',\n },\n } }),\n // Focus and hover state\n _a['&:focus:hover'] = {\n background: colors.focusHoverBackground,\n },\n _a),\n },\n ];\n var cannotSelectStyles = [\n classNames.isContentUnselectable,\n {\n userSelect: 'none',\n cursor: 'default',\n },\n ];\n var rootCompactStyles = {\n minHeight: values.compactRowHeight,\n border: 0,\n };\n var cellCompactStyles = {\n minHeight: values.compactRowHeight,\n paddingTop: values.compactRowVerticalPadding,\n paddingBottom: values.compactRowVerticalPadding,\n paddingLeft: cellStyleProps.cellLeftPadding + \"px\",\n };\n var defaultCellStyles = [\n getFocusStyle(theme, { inset: -1 }),\n classNames.cell,\n {\n display: 'inline-block',\n position: 'relative',\n boxSizing: 'border-box',\n minHeight: values.rowHeight,\n verticalAlign: 'top',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n paddingTop: values.rowVerticalPadding,\n paddingBottom: values.rowVerticalPadding,\n paddingLeft: cellStyleProps.cellLeftPadding + \"px\",\n selectors: (_j = {\n '& > button': {\n maxWidth: '100%',\n }\n },\n _j[IsFocusableSelector] = getFocusStyle(theme, { inset: -1, borderColor: neutralSecondary, outlineColor: white }),\n _j),\n },\n isSelected && {\n selectors: (_k = {},\n _k[HighContrastSelector] = __assign({ background: 'Highlight', color: 'HighlightText' }, getHighContrastNoAdjustStyle()),\n _k),\n },\n compact && cellCompactStyles,\n disabled && { opacity: 0.5 },\n ];\n return {\n root: [\n classNames.root,\n AnimationClassNames.fadeIn400,\n droppingClassName,\n theme.fonts.small,\n isCheckVisible && classNames.isCheckVisible,\n getFocusStyle(theme, { borderColor: focusBorder, outlineColor: white }),\n {\n borderBottom: \"1px solid \" + neutralLighter,\n background: colors.defaultBackground,\n color: colors.defaultMetaText,\n // This ensures that the row always tries to consume is minimum width and does not compress.\n display: 'inline-flex',\n minWidth: '100%',\n minHeight: values.rowHeight,\n whiteSpace: 'nowrap',\n padding: 0,\n boxSizing: 'border-box',\n verticalAlign: 'top',\n textAlign: 'left',\n selectors: (_l = {},\n _l[\".\" + classNames.listCellFirstChild + \" &:before\"] = {\n display: 'none',\n },\n _l['&:hover'] = {\n background: colors.defaultHoverBackground,\n color: colors.defaultHoverMetaText,\n selectors: (_m = {},\n _m[\".\" + classNames.isRowHeader] = {\n color: colors.defaultHoverHeaderText,\n },\n _m[\".\" + classNames.cell + \" > .\" + LinkGlobalClassNames.root] = {\n color: focusedLinkColor,\n },\n _m),\n },\n _l[\"&:hover .\" + classNames.check] = {\n opacity: 1,\n },\n _l[\".\" + IsFocusVisibleClassName + \" &:focus .\" + classNames.check] = {\n opacity: 1,\n },\n _l['.ms-GroupSpacer'] = {\n flexShrink: 0,\n flexGrow: 0,\n },\n _l),\n },\n isSelected && selectedStyles,\n !canSelect && cannotSelectStyles,\n compact && rootCompactStyles,\n className,\n ],\n cellUnpadded: {\n paddingRight: cellStyleProps.cellRightPadding + \"px\",\n },\n cellPadded: {\n paddingRight: cellStyleProps.cellExtraRightPadding + cellStyleProps.cellRightPadding + \"px\",\n selectors: (_o = {},\n _o[\"&.\" + classNames.cellCheck] = {\n paddingRight: 0,\n },\n _o),\n },\n cell: defaultCellStyles,\n cellAnimation: enableUpdateAnimations && AnimationStyles.slideLeftIn40,\n cellMeasurer: [\n classNames.cellMeasurer,\n {\n overflow: 'visible',\n whiteSpace: 'nowrap',\n },\n ],\n checkCell: [\n defaultCellStyles,\n classNames.cellCheck,\n checkboxCellClassName,\n {\n padding: 0,\n // Ensure that the check cell covers the top border of the cell.\n // This ensures the click target does not leave a spot which would\n // cause other items to be deselected.\n paddingTop: 1,\n marginTop: -1,\n flexShrink: 0,\n },\n ],\n checkCover: {\n position: 'absolute',\n top: -1,\n left: 0,\n bottom: 0,\n right: 0,\n display: anySelected ? 'block' : 'none',\n },\n fields: [\n classNames.fields,\n {\n display: 'flex',\n alignItems: 'stretch',\n },\n ],\n isRowHeader: [\n classNames.isRowHeader,\n {\n color: colors.defaultHeaderText,\n fontSize: fonts.medium.fontSize,\n },\n isSelected && {\n color: colors.selectedHeaderText,\n fontWeight: FontWeights.semibold,\n selectors: (_p = {},\n _p[HighContrastSelector] = {\n color: 'HighlightText',\n },\n _p),\n },\n ],\n isMultiline: [\n defaultCellStyles,\n {\n whiteSpace: 'normal',\n wordBreak: 'break-word',\n textOverflow: 'clip',\n },\n ],\n check: [classNames.check],\n };\n};\n//# sourceMappingURL=DetailsRow.styles.js.map","import { __assign } from \"tslib\";\nimport { getFocusStyle, focusClear, getGlobalClassNames, HighContrastSelector, hiddenContentStyle, getHighContrastNoAdjustStyle, } from '../../Styling';\nimport { getRTL, IsFocusVisibleClassName } from '../../Utilities';\nimport { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles';\n// For every group level there is a GroupSpacer added. Importing this const to have the source value in one place.\nimport { SPACER_WIDTH as GROUP_EXPANDER_WIDTH } from '../GroupedList/GroupSpacer';\nvar GlobalClassNames = {\n tooltipHost: 'ms-TooltipHost',\n root: 'ms-DetailsHeader',\n cell: 'ms-DetailsHeader-cell',\n cellIsCheck: 'ms-DetailsHeader-cellIsCheck',\n collapseButton: 'ms-DetailsHeader-collapseButton',\n isCollapsed: 'is-collapsed',\n isAllSelected: 'is-allSelected',\n isSelectAllHidden: 'is-selectAllHidden',\n isResizingColumn: 'is-resizingColumn',\n cellSizer: 'ms-DetailsHeader-cellSizer',\n isResizing: 'is-resizing',\n dropHintCircleStyle: 'ms-DetailsHeader-dropHintCircleStyle',\n dropHintCaretStyle: 'ms-DetailsHeader-dropHintCaretStyle',\n dropHintLineStyle: 'ms-DetailsHeader-dropHintLineStyle',\n cellTitle: 'ms-DetailsHeader-cellTitle',\n cellName: 'ms-DetailsHeader-cellName',\n filterChevron: 'ms-DetailsHeader-filterChevron',\n gripperBarVertical: 'ms-DetailsColumn-gripperBarVertical',\n checkTooltip: 'ms-DetailsHeader-checkTooltip',\n check: 'ms-DetailsHeader-check',\n};\nexport var HEADER_HEIGHT = 42;\nexport var getCellStyles = function (props) {\n var theme = props.theme, _a = props.cellStyleProps, cellStyleProps = _a === void 0 ? DEFAULT_CELL_STYLE_PROPS : _a;\n var semanticColors = theme.semanticColors;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return [\n classNames.cell,\n getFocusStyle(theme),\n {\n color: semanticColors.bodyText,\n position: 'relative',\n display: 'inline-block',\n boxSizing: 'border-box',\n padding: \"0 \" + cellStyleProps.cellRightPadding + \"px 0 \" + cellStyleProps.cellLeftPadding + \"px\",\n lineHeight: 'inherit',\n margin: '0',\n height: HEADER_HEIGHT,\n verticalAlign: 'top',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n textAlign: 'left',\n },\n ];\n};\nexport var getStyles = function (props) {\n var _a, _b, _c, _d;\n var theme = props.theme, className = props.className, isAllSelected = props.isAllSelected, isResizingColumn = props.isResizingColumn, isSizing = props.isSizing, isAllCollapsed = props.isAllCollapsed, _e = props.cellStyleProps, cellStyleProps = _e === void 0 ? DEFAULT_CELL_STYLE_PROPS : _e;\n var semanticColors = theme.semanticColors, palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var colors = {\n iconForegroundColor: semanticColors.bodySubtext,\n headerForegroundColor: semanticColors.bodyText,\n headerBackgroundColor: semanticColors.bodyBackground,\n resizerColor: palette.neutralTertiaryAlt,\n };\n var cellSizerFadeInStyles = {\n opacity: 1,\n transition: 'opacity 0.3s linear',\n };\n var cellStyles = getCellStyles(props);\n return {\n root: [\n classNames.root,\n fonts.small,\n {\n display: 'inline-block',\n background: colors.headerBackgroundColor,\n position: 'relative',\n minWidth: '100%',\n verticalAlign: 'top',\n height: HEADER_HEIGHT,\n lineHeight: HEADER_HEIGHT,\n whiteSpace: 'nowrap',\n boxSizing: 'content-box',\n paddingBottom: '1px',\n paddingTop: '16px',\n borderBottom: \"1px solid \" + semanticColors.bodyDivider,\n cursor: 'default',\n userSelect: 'none',\n selectors: (_a = {},\n _a[\"&:hover .\" + classNames.check] = {\n opacity: 1,\n },\n _a[\"& .\" + classNames.tooltipHost + \" .\" + classNames.checkTooltip] = {\n display: 'block',\n },\n _a),\n },\n isAllSelected && classNames.isAllSelected,\n isResizingColumn && classNames.isResizingColumn,\n className,\n ],\n check: [\n classNames.check,\n {\n height: HEADER_HEIGHT,\n },\n {\n selectors: (_b = {},\n _b[\".\" + IsFocusVisibleClassName + \" &:focus\"] = {\n opacity: 1,\n },\n _b),\n },\n ],\n cellWrapperPadded: {\n paddingRight: cellStyleProps.cellExtraRightPadding + cellStyleProps.cellRightPadding,\n },\n cellIsCheck: [\n cellStyles,\n classNames.cellIsCheck,\n {\n position: 'relative',\n padding: 0,\n margin: 0,\n display: 'inline-flex',\n alignItems: 'center',\n border: 'none',\n },\n isAllSelected && {\n opacity: 1,\n },\n ],\n cellIsGroupExpander: [\n cellStyles,\n {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n fontSize: fonts.small.fontSize,\n padding: 0,\n border: 'none',\n width: GROUP_EXPANDER_WIDTH,\n color: palette.neutralSecondary,\n selectors: {\n ':hover': {\n backgroundColor: palette.neutralLighter,\n },\n ':active': {\n backgroundColor: palette.neutralLight,\n },\n },\n },\n ],\n cellIsActionable: {\n selectors: {\n ':hover': {\n color: semanticColors.bodyText,\n background: semanticColors.listHeaderBackgroundHovered,\n },\n ':active': {\n background: semanticColors.listHeaderBackgroundPressed,\n },\n },\n },\n cellIsEmpty: {\n textOverflow: 'clip',\n },\n cellSizer: [\n classNames.cellSizer,\n focusClear(),\n {\n display: 'inline-block',\n position: 'relative',\n cursor: 'ew-resize',\n bottom: 0,\n top: 0,\n overflow: 'hidden',\n height: 'inherit',\n background: 'transparent',\n zIndex: 1,\n width: 16,\n selectors: (_c = {\n ':after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n bottom: 0,\n width: 1,\n background: colors.resizerColor,\n opacity: 0,\n left: '50%',\n },\n ':focus:after': cellSizerFadeInStyles,\n ':hover:after': cellSizerFadeInStyles\n },\n _c[\"&.\" + classNames.isResizing + \":after\"] = [\n cellSizerFadeInStyles,\n {\n boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.4)',\n },\n ],\n _c),\n },\n ],\n cellIsResizing: classNames.isResizing,\n cellSizerStart: {\n margin: '0 -8px',\n },\n cellSizerEnd: {\n margin: 0,\n marginLeft: -16,\n },\n collapseButton: [\n classNames.collapseButton,\n {\n transformOrigin: '50% 50%',\n transition: 'transform .1s linear',\n },\n isAllCollapsed\n ? [\n classNames.isCollapsed,\n {\n transform: 'rotate(0deg)',\n },\n ]\n : {\n transform: getRTL(theme) ? 'rotate(-90deg)' : 'rotate(90deg)',\n },\n ],\n checkTooltip: classNames.checkTooltip,\n sizingOverlay: isSizing && {\n position: 'absolute',\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n cursor: 'ew-resize',\n background: 'rgba(255, 255, 255, 0)',\n selectors: (_d = {},\n _d[HighContrastSelector] = __assign({ background: 'transparent' }, getHighContrastNoAdjustStyle()),\n _d),\n },\n accessibleLabel: hiddenContentStyle,\n dropHintCircleStyle: [\n classNames.dropHintCircleStyle,\n {\n display: 'inline-block',\n visibility: 'hidden',\n position: 'absolute',\n bottom: 0,\n height: 9,\n width: 9,\n borderRadius: '50%',\n marginLeft: -5,\n top: 34,\n overflow: 'visible',\n zIndex: 10,\n border: \"1px solid \" + palette.themePrimary,\n background: palette.white,\n },\n ],\n dropHintCaretStyle: [\n classNames.dropHintCaretStyle,\n {\n display: 'none',\n position: 'absolute',\n top: -28,\n left: -6.5,\n fontSize: fonts.medium.fontSize,\n color: palette.themePrimary,\n overflow: 'visible',\n zIndex: 10,\n },\n ],\n dropHintLineStyle: [\n classNames.dropHintLineStyle,\n {\n display: 'none',\n position: 'absolute',\n bottom: 0,\n top: 0,\n overflow: 'hidden',\n height: 42,\n width: 1,\n background: palette.themePrimary,\n zIndex: 10,\n },\n ],\n dropHintStyle: {\n display: 'inline-block',\n position: 'absolute',\n },\n };\n};\n//# sourceMappingURL=DetailsHeader.styles.js.map","import { getGlobalClassNames, getFocusStyle } from '../../Styling';\nimport { DEFAULT_ROW_HEIGHTS } from './DetailsRow.styles';\nimport { HEADER_HEIGHT } from './DetailsHeader.styles';\nimport { CheckGlobalClassNames } from '../../components/Check/Check.styles';\nvar GlobalClassNames = {\n root: 'ms-DetailsRow-check',\n isDisabled: 'ms-DetailsRow-check--isDisabled',\n isHeader: 'ms-DetailsRow-check--isHeader',\n};\nexport var CHECK_CELL_WIDTH = 48;\nexport var getStyles = function (props) {\n var theme = props.theme, className = props.className, isHeader = props.isHeader, selected = props.selected, anySelected = props.anySelected, canSelect = props.canSelect, compact = props.compact, isVisible = props.isVisible;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var rowHeight = DEFAULT_ROW_HEIGHTS.rowHeight, compactRowHeight = DEFAULT_ROW_HEIGHTS.compactRowHeight;\n var height = isHeader ? HEADER_HEIGHT : compact ? compactRowHeight : rowHeight;\n var isCheckVisible = isVisible || selected || anySelected;\n return {\n root: [classNames.root, className],\n check: [\n !canSelect && classNames.isDisabled,\n isHeader && classNames.isHeader,\n getFocusStyle(theme),\n theme.fonts.small,\n CheckGlobalClassNames.checkHost,\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n cursor: 'default',\n boxSizing: 'border-box',\n verticalAlign: 'top',\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n opacity: isCheckVisible ? 1 : 0,\n height: height,\n width: CHECK_CELL_WIDTH,\n padding: 0,\n margin: 0,\n },\n ],\n isDisabled: [],\n };\n};\n//# sourceMappingURL=DetailsRowCheck.styles.js.map","import { getGlobalClassNames, getFocusStyle, AnimationVariables, FontWeights, IconFontSizes } from '../../Styling';\nimport { getRTL, IsFocusVisibleClassName } from '../../Utilities';\nimport { DEFAULT_CELL_STYLE_PROPS } from '../DetailsList/DetailsRow.styles';\nimport { CHECK_CELL_WIDTH } from '../DetailsList/DetailsRowCheck.styles';\n// For every group level there is a GroupSpacer added. Importing this const to have the source value in one place.\nimport { SPACER_WIDTH as EXPAND_BUTTON_WIDTH } from './GroupSpacer';\nvar GlobalClassNames = {\n root: 'ms-GroupHeader',\n compact: 'ms-GroupHeader--compact',\n check: 'ms-GroupHeader-check',\n dropIcon: 'ms-GroupHeader-dropIcon',\n expand: 'ms-GroupHeader-expand',\n isCollapsed: 'is-collapsed',\n title: 'ms-GroupHeader-title',\n isSelected: 'is-selected',\n iconTag: 'ms-Icon--Tag',\n group: 'ms-GroupedList-group',\n isDropping: 'is-dropping',\n};\nvar beziers = {\n easeOutCirc: 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',\n easeOutSine: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n easeInBack: 'cubic-bezier(0.600, -0.280, 0.735, 0.045)',\n};\nvar DEFAULT_GROUP_HEADER_HEIGHT = 48;\nvar COMPACT_GROUP_HEADER_HEIGHT = 40;\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e;\n var theme = props.theme, className = props.className, selected = props.selected, isCollapsed = props.isCollapsed, compact = props.compact;\n // padding from the source to align GroupHeader title with DetailsRow's first cell.\n var cellLeftPadding = DEFAULT_CELL_STYLE_PROPS.cellLeftPadding;\n var finalRowHeight = compact ? COMPACT_GROUP_HEADER_HEIGHT : DEFAULT_GROUP_HEADER_HEIGHT;\n var semanticColors = theme.semanticColors, palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var checkExpandResetStyles = [\n getFocusStyle(theme),\n {\n cursor: 'default',\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n padding: 0, // cancel default