> {\n return _getGlobalClassNames(classNames, disableGlobalClassNames !== undefined ? disableGlobalClassNames : theme.disableGlobalClassNames);\n}\n","import { Customizations, mergeSettings, ICustomizerContext } from '@uifabric/utilities';\nimport { ISchemeNames, ITheme } from '../interfaces/index';\n\n/**\n * @internal\n * This function is still in experimental phase in support of Foundation experimental development. Its API signature and existence\n * are subject to change.\n *\n * Modify context to activate the specified scheme or theme. For schemes, look in context (if available) and fall back to global\n * Customizations. If both scheme and theme are specified, scheme will be looked up in theme. In this case, scheme must be\n * present in theme arg, otherwise new context will default to theme arg (there is no fallback to settings to look up scheme.)\n *\n * @param context - Context in which to get schemed customizations.\n * @param scheme - Scheme to get customizations for from theme arg (if supplied) OR from context and global settings.\n * @param theme - Theme to merge into context.\n * @returns modified schemed context if scheme is valid and not already applied, unmodified context otherwise.\n */\nexport function getThemedContext(context: ICustomizerContext, scheme?: ISchemeNames, theme?: ITheme): ICustomizerContext {\n let newContext: ICustomizerContext = context;\n let newSettings;\n\n // Only fall back to context and customizations when theme arg is not provided.\n let schemeSource = theme || Customizations.getSettings(['theme'], undefined, context.customizations).theme;\n\n if (theme) {\n newSettings = { theme };\n }\n\n const schemeTheme: ITheme | undefined = scheme && schemeSource && schemeSource.schemes && schemeSource.schemes[scheme];\n\n // These first two checks are logically redundant but TS doesn't infer schemeSource.schemes is defined when schemeTheme is defined.\n if (schemeSource && schemeTheme && schemeSource !== schemeTheme) {\n newSettings = { theme: schemeTheme };\n newSettings.theme.schemes = schemeSource.schemes;\n }\n\n if (newSettings) {\n newContext = {\n customizations: {\n settings: mergeSettings(context.customizations.settings, newSettings),\n scopedSettings: context.customizations.scopedSettings\n }\n };\n }\n\n return newContext;\n}\n","import { ISpacing } from '../interfaces/index';\n\nexport const DefaultSpacing: ISpacing = {\n s2: '4px',\n s1: '8px',\n m: '16px',\n l1: '20px',\n l2: '32px'\n};\n","import { Customizations, merge, getWindow } from '@uifabric/utilities';\nimport { IPalette, ISemanticColors, ITheme, IPartialTheme, IFontStyles } from '../interfaces/index';\nimport { DefaultFontStyles } from './DefaultFontStyles';\nimport { DefaultPalette } from './DefaultPalette';\nimport { DefaultSpacing } from './DefaultSpacing';\nimport { loadTheme as legacyLoadTheme } from '@microsoft/load-themed-styles';\nimport { DefaultEffects } from './DefaultEffects';\n\nlet _theme: ITheme = createTheme({\n palette: DefaultPalette,\n semanticColors: _makeSemanticColorsFromPalette(DefaultPalette, false, false),\n fonts: DefaultFontStyles,\n isInverted: false,\n disableGlobalClassNames: false\n});\nlet _onThemeChangeCallbacks: Array<(theme: ITheme) => void> = [];\n\nexport const ThemeSettingName = 'theme';\n\nif (!Customizations.getSettings([ThemeSettingName]).theme) {\n const win = getWindow();\n\n // tslint:disable:no-string-literal no-any\n if (win && (win as any)['FabricConfig'] && (win as any)['FabricConfig'].theme) {\n _theme = createTheme((win as any)['FabricConfig'].theme);\n }\n // tslint:enable:no-string-literal no-any\n\n // Set the default theme.\n Customizations.applySettings({ [ThemeSettingName]: _theme });\n}\n\n/**\n * Gets the theme object\n * @param depComments - Whether to include deprecated tags as comments for deprecated slots.\n */\nexport function getTheme(depComments: boolean = false): ITheme {\n if (depComments === true) {\n _theme = createTheme({}, depComments);\n }\n return _theme;\n}\n\n/**\n * Registers a callback that gets called whenever the theme changes.\n * This should only be used when the component cannot automatically get theme changes through its state.\n * This will not register duplicate callbacks.\n */\nexport function registerOnThemeChangeCallback(callback: (theme: ITheme) => void): void {\n if (_onThemeChangeCallbacks.indexOf(callback) === -1) {\n _onThemeChangeCallbacks.push(callback);\n }\n}\n\n/**\n * See registerOnThemeChangeCallback().\n * Removes previously registered callbacks.\n */\nexport function removeOnThemeChangeCallback(callback: (theme: ITheme) => void): void {\n const i = _onThemeChangeCallbacks.indexOf(callback);\n if (i === -1) {\n return;\n }\n\n _onThemeChangeCallbacks.splice(i, 1);\n}\n\n/**\n * Applies the theme, while filling in missing slots.\n * @param theme - Partial theme object.\n * @param depComments - Whether to include deprecated tags as comments for deprecated slots.\n */\nexport function loadTheme(theme: IPartialTheme, depComments: boolean = false): ITheme {\n _theme = createTheme(theme, depComments);\n\n // Invoke the legacy method of theming the page as well.\n legacyLoadTheme({ ..._theme.palette, ..._theme.semanticColors, ..._theme.effects, ..._loadFonts(_theme) });\n\n Customizations.applySettings({ [ThemeSettingName]: _theme });\n\n _onThemeChangeCallbacks.forEach((callback: (theme: ITheme) => void) => {\n try {\n callback(_theme);\n } catch (e) {\n // don't let a bad callback break everything else\n }\n });\n\n return _theme;\n}\n\n/**\n * Loads font variables into a JSON object.\n * @param theme - The theme object\n */\nfunction _loadFonts(theme: ITheme): { [name: string]: string } {\n const lines = {};\n\n for (const fontName of Object.keys(theme.fonts)) {\n const font = theme.fonts[fontName];\n for (const propName of Object.keys(font)) {\n const name = fontName + propName.charAt(0).toUpperCase() + propName.slice(1);\n let 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] = value;\n }\n }\n return lines;\n}\n\n/**\n * Creates a custom theme definition which can be used with the Customizer.\n * @param theme - Partial theme object.\n * @param depComments - Whether to include deprecated tags as comments for deprecated slots.\n */\nexport function createTheme(theme: IPartialTheme, depComments: boolean = false): ITheme {\n let newPalette = { ...DefaultPalette, ...theme.palette };\n\n if (!theme.palette || !theme.palette.accent) {\n newPalette.accent = newPalette.themePrimary;\n }\n\n // mix in custom overrides with good slots first, since custom overrides might be used in fixing deprecated slots\n let newSemanticColors = {\n ..._makeSemanticColorsFromPalette(newPalette, !!theme.isInverted, depComments),\n ...theme.semanticColors\n };\n\n let defaultFontStyles: IFontStyles = { ...DefaultFontStyles };\n\n if (theme.defaultFontStyle) {\n for (const fontStyle of Object.keys(defaultFontStyles)) {\n defaultFontStyles[fontStyle] = merge({}, defaultFontStyles[fontStyle], theme.defaultFontStyle);\n }\n }\n\n if (theme.fonts) {\n for (const fontStyle of Object.keys(theme.fonts)) {\n defaultFontStyles[fontStyle] = merge({}, defaultFontStyles[fontStyle], theme.fonts[fontStyle]);\n }\n }\n\n return {\n palette: newPalette,\n fonts: {\n ...defaultFontStyles\n },\n semanticColors: newSemanticColors,\n isInverted: !!theme.isInverted,\n disableGlobalClassNames: !!theme.disableGlobalClassNames,\n spacing: {\n ...DefaultSpacing,\n ...theme.spacing\n },\n effects: {\n ...DefaultEffects,\n ...theme.effects\n }\n };\n}\n\n/**\n * Helper to pull a given property name from a given set of sources, in order, if available. Otherwise returns the property name.\n */\nfunction _expandFrom(propertyName: string | TRetVal | undefined, ...maps: TMapType[]): TRetVal {\n if (propertyName) {\n for (const map of maps) {\n if (map[propertyName as string]) {\n return map[propertyName as string];\n }\n }\n }\n\n return propertyName as TRetVal;\n}\n\n// Generates all the semantic slot colors based on the Fabric palette.\n// We'll use these as fallbacks for semantic slots that the passed in theme did not define.\nfunction _makeSemanticColorsFromPalette(p: IPalette, isInverted: boolean, depComments: boolean): ISemanticColors {\n let toReturn: ISemanticColors = {\n // DEFAULTS\n bodyBackground: p.white,\n bodyBackgroundHovered: p.neutralLighter,\n bodyBackgroundChecked: p.neutralLight,\n bodyStandoutBackground: p.neutralLighterAlt,\n bodyFrameBackground: p.white,\n bodyFrameDivider: p.neutralLight,\n bodyText: p.neutralPrimary,\n bodyTextChecked: p.black,\n bodySubtext: p.neutralSecondary,\n bodyDivider: p.neutralLight,\n disabledBodyText: p.neutralTertiary,\n disabledBodySubtext: p.neutralTertiaryAlt,\n disabledBorder: p.neutralTertiaryAlt,\n focusBorder: p.neutralSecondary,\n variantBorder: p.neutralLight,\n variantBorderHovered: p.neutralTertiary,\n defaultStateBackground: p.neutralLighterAlt,\n\n // LINKS\n actionLink: p.neutralPrimary,\n actionLinkHovered: p.neutralDark,\n link: p.themePrimary,\n linkHovered: p.themeDarker,\n\n // BUTTONS\n buttonBackground: p.white,\n buttonBackgroundChecked: p.neutralTertiaryAlt,\n buttonBackgroundHovered: p.neutralLighter,\n buttonBackgroundCheckedHovered: p.neutralLight,\n buttonBackgroundPressed: p.neutralLight,\n buttonBackgroundDisabled: p.neutralLighter,\n buttonBorder: p.neutralSecondaryAlt,\n buttonText: p.neutralPrimary,\n buttonTextHovered: p.neutralDark,\n buttonTextChecked: p.neutralDark,\n buttonTextCheckedHovered: p.black,\n buttonTextPressed: p.neutralDark,\n buttonTextDisabled: p.neutralTertiary,\n buttonBorderDisabled: p.neutralLighter,\n\n primaryButtonBackground: p.themePrimary,\n primaryButtonBackgroundHovered: p.themeDarkAlt,\n primaryButtonBackgroundPressed: p.themeDark,\n primaryButtonBackgroundDisabled: p.neutralLighter,\n primaryButtonBorder: 'transparent',\n primaryButtonText: p.white,\n primaryButtonTextHovered: p.white,\n primaryButtonTextPressed: p.white,\n primaryButtonTextDisabled: p.neutralQuaternary,\n\n accentButtonBackground: p.accent,\n accentButtonText: p.white,\n\n // INPUTS\n inputBorder: p.neutralSecondary,\n inputBorderHovered: p.neutralPrimary,\n inputBackground: p.white,\n inputBackgroundChecked: p.themePrimary,\n inputBackgroundCheckedHovered: p.themeDark,\n inputPlaceholderBackgroundChecked: p.themeLighter,\n inputForegroundChecked: p.white,\n inputIcon: p.themePrimary,\n inputIconHovered: p.themeDark,\n inputIconDisabled: p.neutralTertiary,\n inputFocusBorderAlt: p.themePrimary,\n smallInputBorder: p.neutralSecondary,\n inputText: p.neutralPrimary,\n inputTextHovered: p.neutralDark,\n inputPlaceholderText: p.neutralSecondary,\n disabledBackground: p.neutralLighter,\n disabledText: p.neutralTertiary,\n disabledSubtext: p.neutralQuaternary,\n\n // LISTS\n listBackground: p.white,\n listText: p.neutralPrimary,\n listItemBackgroundHovered: p.neutralLighter,\n listItemBackgroundChecked: p.neutralLight,\n listItemBackgroundCheckedHovered: p.neutralQuaternaryAlt,\n\n listHeaderBackgroundHovered: p.neutralLighter,\n listHeaderBackgroundPressed: p.neutralLight,\n\n // MENUS\n menuBackground: p.white,\n menuDivider: p.neutralTertiaryAlt,\n menuIcon: p.themePrimary,\n menuHeader: p.themePrimary,\n menuItemBackgroundHovered: p.neutralLighter,\n menuItemBackgroundPressed: p.neutralLight,\n menuItemText: p.neutralPrimary,\n menuItemTextHovered: p.neutralDark,\n\n errorText: !isInverted ? p.redDark : '#ff5f5f',\n warningText: !isInverted ? '#333333' : '#ffffff',\n successText: !isInverted ? '#107C10' : '#92c353',\n errorBackground: !isInverted ? 'rgba(245, 135, 145, .2)' : 'rgba(232, 17, 35, .5)',\n blockingBackground: !isInverted ? 'rgba(250, 65, 0, .2)' : 'rgba(234, 67, 0, .5)',\n warningBackground: !isInverted ? 'rgba(255, 200, 10, .2)' : 'rgba(255, 251, 0, .6)',\n warningHighlight: !isInverted ? '#ffb900' : '#fff100',\n successBackground: !isInverted ? 'rgba(95, 210, 85, .2)' : 'rgba(186, 216, 10, .4)',\n\n // Deprecated slots, second pass by _fixDeprecatedSlots() later for self-referential slots\n listTextColor: '',\n menuItemBackgroundChecked: p.neutralLight\n };\n\n return _fixDeprecatedSlots(toReturn, depComments!);\n}\n\nfunction _fixDeprecatedSlots(s: ISemanticColors, depComments: boolean): ISemanticColors {\n // Add @deprecated tag as comment if enabled\n let dep = '';\n if (depComments === true) {\n dep = ' /* @deprecated */';\n }\n\n s.listTextColor = s.listText + dep;\n s.menuItemBackgroundChecked += dep;\n return s;\n}\n","// This file mimics styles and mixins from _General.Mixins.scss\n\nimport { IRawStyle } from '@uifabric/merge-styles';\n\nexport const normalize: IRawStyle = {\n boxShadow: 'none',\n margin: 0,\n padding: 0,\n boxSizing: 'border-box'\n};\n\nexport const noWrap: IRawStyle = {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap'\n};\n","import { IRawStyle } from '@uifabric/merge-styles';\nimport { ITheme, ISemanticColors, IPalette } from '../interfaces/index';\n\ninterface IRGB {\n r: number;\n g: number;\n b: number;\n}\n\nconst DEFAULT_HEIGHT = '50%';\nconst DEFAULT_WIDTH = 20;\n\n/**\n * - Generates a style used to fade out an overflowing content by defining a style for an :after pseudo element.\n * - Apply it to the :after selector for all combination of states the parent of content might have (normal, hover, selected, focus).\n * - Requires the target to have position set to relative and overflow set to hidden.\n *\n * @example\n * ```tsx\n * // Assuming the following DOM structure and the different background colors coming from the parent holding the content.\n * \n * Overflown Content\n *
\n * ```\n * ```ts\n * // This is how the style set would look in Component.styles.ts\n * const { bodyBackground } = theme.semanticColors;\n * const { neutralLighter } = theme.palette;\n *\n * // The second argument of getFadedOverflowStyle function is a string representing a key of ISemanticColors or IPalette.\n *\n * const styles = {\n * parent: [\n * backgroundColor: bodyBackground,\n * selectors: {\n * '&:hover: {\n * backgroundColor: neutralLighter\n * },\n * '$content:after': {\n * ...getFadedOverflowStyle(theme, 'bodyBackground')\n * },\n * '&:hover $content:after': {\n * ...getFadedOverflowStyle(theme, 'neutralLighter')\n * }\n * }\n * ],\n * content: [\n * width: '100%',\n * display: 'inline-block',\n * position: 'relative',\n * overflow: 'hidden'\n * ]\n * }\n * ```\n * @param theme - The theme object to use.\n * @param color - The background color to fade out to. Accepts only keys of ISemanticColors or IPalette. Defaults to 'bodyBackground'.\n * @param direction - The direction of the overflow. Defaults to horizontal.\n * @param width - The width of the fading overflow. Vertical direction defaults it to 100% vs 20px when horizontal.\n * @param height - The Height of the fading overflow. Vertical direction defaults it to 50% vs 100% when horizontal.\n * @returns The style object.\n */\nexport function getFadedOverflowStyle(\n theme: ITheme,\n color: keyof ISemanticColors | keyof IPalette = 'bodyBackground',\n direction: 'horizontal' | 'vertical' = 'horizontal',\n width: string | number = getDefaultValue('width', direction),\n height: string | number = getDefaultValue('height', direction)\n): IRawStyle {\n // Get the color value string from the theme semanticColors or palette.\n const colorValue: string = theme.semanticColors[color as keyof ISemanticColors] || theme.palette[color as keyof IPalette];\n // Get the red, green, blue values of the colorValue.\n const rgbColor: IRGB = color2rgb(colorValue);\n // Apply opacity 0 to serve as a start color of the gradient.\n const rgba = `rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, 0)`;\n // Get the direction of the gradient.\n const gradientDirection = direction === 'vertical' ? 'to bottom' : 'to right'; // mergeStyles take care of RTL direction.\n\n return {\n content: '\"\"',\n position: 'absolute',\n right: 0,\n bottom: 0,\n width: width,\n height: height,\n pointerEvents: 'none',\n backgroundImage: `linear-gradient(${gradientDirection}, ${rgba} 0%, ${colorValue} 100%)`\n };\n}\n\n// TODO consider moving this to a separate module along with some more color functions from OUFR/utilities.\n/**\n * Helper function to convert a string hex color to an RGB object.\n *\n * @param colorValue - Color to be converted from hex to rgba.\n */\nfunction color2rgb(colorValue: string): IRGB {\n if (colorValue[0] === '#') {\n // If it's a hex code\n return {\n r: parseInt(colorValue.slice(1, 3), 16),\n g: parseInt(colorValue.slice(3, 5), 16),\n b: parseInt(colorValue.slice(5, 7), 16)\n };\n } else if (colorValue.indexOf('rgba(') === 0) {\n // If it's an rgba color string\n colorValue = colorValue.match(/rgba\\(([^)]+)\\)/)![1];\n const parts = colorValue.split(/ *, */).map(Number);\n\n return {\n r: parts[0],\n g: parts[1],\n b: parts[2]\n };\n }\n // The only remaining possibility is transparent.\n return {\n r: 255,\n g: 255,\n b: 255\n };\n}\n\n/**\n * Helper function to get the default values for parameters of main function.\n *\n * @param style - Which style to get the default value for.\n * @param direction - What direction to take into consideration.\n */\nfunction getDefaultValue(style: 'width' | 'height', direction: string): number | string {\n if (style === 'width') {\n return direction === 'horizontal' ? DEFAULT_WIDTH : '100%';\n } else {\n return direction === 'vertical' ? DEFAULT_HEIGHT : '100%';\n }\n}\n","import { IStyle } from '@uifabric/merge-styles';\n\n/**\n * Generates placeholder style for each of the browsers supported by office-ui-fabric-react.\n * @param styles - The style to use.\n * @returns The placeholder style object for each browser depending on the placeholder directive it uses.\n */\nexport function getPlaceholderStyles(styles: IStyle): IStyle {\n return {\n selectors: {\n '::placeholder': styles, // Chrome, Safari, Opera, Firefox\n ':-ms-input-placeholder': styles, // IE 10+\n '::-ms-input-placeholder': styles // Edge\n }\n };\n}\n","import { buildClassMap } from '../utilities/index';\nimport { AnimationStyles } from '../styles/index';\nimport { IAnimationStyles } from '../interfaces/index';\n\n/**\n * {@docCategory AnimationClassNames}\n */\nexport const AnimationClassNames: { [key in keyof IAnimationStyles]?: string } = buildClassMap(AnimationStyles);\n","import { buildClassMap } from '../utilities/buildClassMap';\nimport { IFontStyles } from '../interfaces/IFontStyles';\nimport { DefaultFontStyles } from '../styles/DefaultFontStyles';\n\n/**\n * {@docCategory FontClassNames}\n */\nexport const FontClassNames: { [key in keyof IFontStyles]?: string } = buildClassMap(DefaultFontStyles);\n","import { IRawStyle, mergeStyles } from '@uifabric/merge-styles';\nimport { DefaultPalette } from '../styles/DefaultPalette';\nimport { getTheme } from '../styles/index';\n\n/**\n * {@docCategory IColorClassNames}\n */\nexport interface IColorClassNames {\n themeDarker: string;\n themeDarkerHover: string;\n themeDarkerBackground: string;\n themeDarkerBackgroundHover: string;\n themeDarkerBorder: string;\n themeDarkerBorderHover: string;\n themeDark: string;\n themeDarkHover: string;\n themeDarkBackground: string;\n themeDarkBackgroundHover: string;\n themeDarkBorder: string;\n themeDarkBorderHover: string;\n themeDarkAlt: string;\n themeDarkAltHover: string;\n themeDarkAltBackground: string;\n themeDarkAltBackgroundHover: string;\n themeDarkAltBorder: string;\n themeDarkAltBorderHover: string;\n themePrimary: string;\n themePrimaryHover: string;\n themePrimaryBackground: string;\n themePrimaryBackgroundHover: string;\n themePrimaryBorder: string;\n themePrimaryBorderHover: string;\n themeSecondary: string;\n themeSecondaryHover: string;\n themeSecondaryBackground: string;\n themeSecondaryBackgroundHover: string;\n themeSecondaryBorder: string;\n themeSecondaryBorderHover: string;\n themeTertiary: string;\n themeTertiaryHover: string;\n themeTertiaryBackground: string;\n themeTertiaryBackgroundHover: string;\n themeTertiaryBorder: string;\n themeTertiaryBorderHover: string;\n themeLight: string;\n themeLightHover: string;\n themeLightBackground: string;\n themeLightBackgroundHover: string;\n themeLightBorder: string;\n themeLightBorderHover: string;\n themeLighter: string;\n themeLighterHover: string;\n themeLighterBackground: string;\n themeLighterBackgroundHover: string;\n themeLighterBorder: string;\n themeLighterBorderHover: string;\n themeLighterAlt: string;\n themeLighterAltHover: string;\n themeLighterAltBackground: string;\n themeLighterAltBackgroundHover: string;\n themeLighterAltBorder: string;\n themeLighterAltBorderHover: string;\n black: string;\n blackHover: string;\n blackBackground: string;\n blackBackgroundHover: string;\n blackBorder: string;\n blackBorderHover: string;\n blackTranslucent40: string;\n blackTranslucent40Hover: string;\n blackTranslucent40Background: string;\n blackTranslucent40BackgroundHover: string;\n blackTranslucent40Border: string;\n blackTranslucent40BorderHover: string;\n neutralDark: string;\n neutralDarkHover: string;\n neutralDarkBackground: string;\n neutralDarkBackgroundHover: string;\n neutralDarkBorder: string;\n neutralDarkBorderHover: string;\n neutralPrimary: string;\n neutralPrimaryHover: string;\n neutralPrimaryBackground: string;\n neutralPrimaryBackgroundHover: string;\n neutralPrimaryBorder: string;\n neutralPrimaryBorderHover: string;\n neutralPrimaryAlt: string;\n neutralPrimaryAltHover: string;\n neutralPrimaryAltBackground: string;\n neutralPrimaryAltBackgroundHover: string;\n neutralPrimaryAltBorder: string;\n neutralPrimaryAltBorderHover: string;\n neutralSecondary: string;\n neutralSecondaryHover: string;\n neutralSecondaryBackground: string;\n neutralSecondaryBackgroundHover: string;\n neutralSecondaryBorder: string;\n neutralSecondaryBorderHover: string;\n neutralSecondaryAlt: string;\n neutralSecondaryAltHover: string;\n neutralSecondaryAltBackground: string;\n neutralSecondaryAltBackgroundHover: string;\n neutralSecondaryAltBorder: string;\n neutralSecondaryAltBorderHover: string;\n neutralTertiary: string;\n neutralTertiaryHover: string;\n neutralTertiaryBackground: string;\n neutralTertiaryBackgroundHover: string;\n neutralTertiaryBorder: string;\n neutralTertiaryBorderHover: string;\n neutralTertiaryAlt: string;\n neutralTertiaryAltHover: string;\n neutralTertiaryAltBackground: string;\n neutralTertiaryAltBackgroundHover: string;\n neutralTertiaryAltBorder: string;\n neutralTertiaryAltBorderHover: string;\n neutralQuaternary: string;\n neutralQuaternaryHover: string;\n neutralQuaternaryBackground: string;\n neutralQuaternaryBackgroundHover: string;\n neutralQuaternaryBorder: string;\n neutralQuaternaryBorderHover: string;\n neutralQuaternaryAlt: string;\n neutralQuaternaryAltHover: string;\n neutralQuaternaryAltBackground: string;\n neutralQuaternaryAltBackgroundHover: string;\n neutralQuaternaryAltBorder: string;\n neutralQuaternaryAltBorderHover: string;\n neutralLight: string;\n neutralLightHover: string;\n neutralLightBackground: string;\n neutralLightBackgroundHover: string;\n neutralLightBorder: string;\n neutralLightBorderHover: string;\n neutralLighter: string;\n neutralLighterHover: string;\n neutralLighterBackground: string;\n neutralLighterBackgroundHover: string;\n neutralLighterBorder: string;\n neutralLighterBorderHover: string;\n neutralLighterAlt: string;\n neutralLighterAltHover: string;\n neutralLighterAltBackground: string;\n neutralLighterAltBackgroundHover: string;\n neutralLighterAltBorder: string;\n neutralLighterAltBorderHover: string;\n white: string;\n whiteHover: string;\n whiteBackground: string;\n whiteBackgroundHover: string;\n whiteBorder: string;\n whiteBorderHover: string;\n whiteTranslucent40: string;\n whiteTranslucent40Hover: string;\n whiteTranslucent40Background: string;\n whiteTranslucent40BackgroundHover: string;\n whiteTranslucent40Border: string;\n whiteTranslucent40BorderHover: string;\n yellow: string;\n yellowHover: string;\n yellowBackground: string;\n yellowBackgroundHover: string;\n yellowBorder: string;\n yellowBorderHover: string;\n yellowLight: string;\n yellowLightHover: string;\n yellowLightBackground: string;\n yellowLightBackgroundHover: string;\n yellowLightBorder: string;\n yellowLightBorderHover: string;\n orange: string;\n orangeHover: string;\n orangeBackground: string;\n orangeBackgroundHover: string;\n orangeBorder: string;\n orangeBorderHover: string;\n orangeLight: string;\n orangeLightHover: string;\n orangeLightBackground: string;\n orangeLightBackgroundHover: string;\n orangeLightBorder: string;\n orangeLightBorderHover: string;\n orangeLighter: string;\n orangeLighterHover: string;\n orangeLighterBackground: string;\n orangeLighterBackgroundHover: string;\n orangeLighterBorder: string;\n orangeLighterBorderHover: string;\n redDark: string;\n redDarkHover: string;\n redDarkBackground: string;\n redDarkBackgroundHover: string;\n redDarkBorder: string;\n redDarkBorderHover: string;\n red: string;\n redHover: string;\n redBackground: string;\n redBackgroundHover: string;\n redBorder: string;\n redBorderHover: string;\n magentaDark: string;\n magentaDarkHover: string;\n magentaDarkBackground: string;\n magentaDarkBackgroundHover: string;\n magentaDarkBorder: string;\n magentaDarkBorderHover: string;\n magenta: string;\n magentaHover: string;\n magentaBackground: string;\n magentaBackgroundHover: string;\n magentaBorder: string;\n magentaBorderHover: string;\n magentaLight: string;\n magentaLightHover: string;\n magentaLightBackground: string;\n magentaLightBackgroundHover: string;\n magentaLightBorder: string;\n magentaLightBorderHover: string;\n purpleDark: string;\n purpleDarkHover: string;\n purpleDarkBackground: string;\n purpleDarkBackgroundHover: string;\n purpleDarkBorder: string;\n purpleDarkBorderHover: string;\n purple: string;\n purpleHover: string;\n purpleBackground: string;\n purpleBackgroundHover: string;\n purpleBorder: string;\n purpleBorderHover: string;\n purpleLight: string;\n purpleLightHover: string;\n purpleLightBackground: string;\n purpleLightBackgroundHover: string;\n purpleLightBorder: string;\n purpleLightBorderHover: string;\n blueDark: string;\n blueDarkHover: string;\n blueDarkBackground: string;\n blueDarkBackgroundHover: string;\n blueDarkBorder: string;\n blueDarkBorderHover: string;\n blueMid: string;\n blueMidHover: string;\n blueMidBackground: string;\n blueMidBackgroundHover: string;\n blueMidBorder: string;\n blueMidBorderHover: string;\n blue: string;\n blueHover: string;\n blueBackground: string;\n blueBackgroundHover: string;\n blueBorder: string;\n blueBorderHover: string;\n blueLight: string;\n blueLightHover: string;\n blueLightBackground: string;\n blueLightBackgroundHover: string;\n blueLightBorder: string;\n blueLightBorderHover: string;\n tealDark: string;\n tealDarkHover: string;\n tealDarkBackground: string;\n tealDarkBackgroundHover: string;\n tealDarkBorder: string;\n tealDarkBorderHover: string;\n teal: string;\n tealHover: string;\n tealBackground: string;\n tealBackgroundHover: string;\n tealBorder: string;\n tealBorderHover: string;\n tealLight: string;\n tealLightHover: string;\n tealLightBackground: string;\n tealLightBackgroundHover: string;\n tealLightBorder: string;\n tealLightBorderHover: string;\n greenDark: string;\n greenDarkHover: string;\n greenDarkBackground: string;\n greenDarkBackgroundHover: string;\n greenDarkBorder: string;\n greenDarkBorderHover: string;\n green: string;\n greenHover: string;\n greenBackground: string;\n greenBackgroundHover: string;\n greenBorder: string;\n greenBorderHover: string;\n greenLight: string;\n greenLightHover: string;\n greenLightBackground: string;\n greenLightBackgroundHover: string;\n greenLightBorder: string;\n greenLightBorderHover: string;\n}\n\nexport const ColorClassNames: IColorClassNames = {} as IColorClassNames;\n\nfor (const colorName in DefaultPalette) {\n if (DefaultPalette.hasOwnProperty(colorName)) {\n // Foreground color\n _defineGetter(ColorClassNames, colorName, '', false, 'color');\n\n // Hover color\n _defineGetter(ColorClassNames, colorName, 'Hover', true, 'color');\n\n // Background color\n _defineGetter(ColorClassNames, colorName, 'Background', false, 'background');\n\n // Background hover\n _defineGetter(ColorClassNames, colorName, 'BackgroundHover', true, 'background');\n\n // Border color\n _defineGetter(ColorClassNames, colorName, 'Border', false, 'borderColor');\n\n // Border hover color\n _defineGetter(ColorClassNames, colorName, 'BorderHover', true, 'borderColor');\n }\n}\n\n/**\n * Defines a getter for the given class configuration.\n */\nfunction _defineGetter(obj: IColorClassNames, colorName: string, suffix: string, isHover: boolean, cssProperty: string): void {\n Object.defineProperty(obj, colorName + suffix, {\n get: (): string => {\n // tslint:disable-next-line:no-any\n const style: IRawStyle = { [cssProperty]: (getTheme().palette as any)[colorName] };\n\n return mergeStyles(isHover ? { selectors: { ':hover': style } } : style).toString();\n },\n enumerable: true,\n configurable: true\n });\n}\n","// @uifabric/icons@7.3.0\n// Do not modify this file, the file is generated as part of publish. The checked in version is a placeholder only.\nimport { setVersion } from '@uifabric/set-version';\nsetVersion('@uifabric/icons', '7.3.0');","import * as React from 'react';\nimport { IRefObject, IRenderFunction } from '../../Utilities';\nimport { PersonaBase } from './Persona.base';\nimport { ImageLoadState } from '../../Image';\nimport { IStyle, ITheme } from '../../Styling';\nimport { IStyleFunctionOrObject } from '../../Utilities';\nimport { PersonaCoinBase } from './PersonaCoin/PersonaCoin.base';\n\n/**\n * {@docCategory Persona}\n */\nexport interface IPersona {}\n\n/**\n * {@docCategory Persona}\n */\nexport interface IPersonaSharedProps extends React.HTMLAttributes {\n /**\n * Primary text to display, usually the name of the person.\n */\n text?: string;\n\n /**\n * Decides the size of the control.\n * @defaultvalue PersonaSize.size48\n */\n size?: PersonaSize;\n\n /**\n * Optional custom renderer for the coin\n * @deprecated Use `onRenderPersonaCoin` for custom rendering instead\n */\n onRenderCoin?: IRenderFunction;\n\n /**\n * Optional custom renderer for the coin\n */\n onRenderPersonaCoin?: IRenderFunction;\n\n /**\n * If true, adds the css class 'is-fadeIn' to the image.\n */\n imageShouldFadeIn?: boolean;\n\n /**\n * If true, the image starts as visible and is hidden on error. Otherwise, the image is hidden until\n * it is successfully loaded. This disables imageShouldFadeIn.\n * @defaultvalue false\n */\n imageShouldStartVisible?: boolean;\n\n /**\n * Url to the image to use, should be a square aspect ratio and big enough to fit in the image area.\n */\n imageUrl?: string;\n\n /**\n * Alt text for the image to use. Defaults to an empty string.\n */\n imageAlt?: string;\n\n /**\n * The user's initials to display in the image area when there is no image.\n * @defaultvalue [Derived from text]\n */\n imageInitials?: string;\n\n /**\n * Whether initials are calculated for phone numbers and number sequences.\n * Example: Set property to true to get initials for project names consisting of numbers only.\n * @defaultvalue false\n */\n allowPhoneInitials?: boolean;\n\n /**\n * Optional custom renderer for the initials\n */\n onRenderInitials?: IRenderFunction;\n\n /**\n * Optional callback for when loading state of the photo changes\n */\n onPhotoLoadingStateChange?: (newImageLoadState: ImageLoadState) => void;\n\n /**\n * The background color when the user's initials are displayed.\n * @defaultvalue [Derived from text]\n */\n initialsColor?: PersonaInitialsColor | string;\n\n /**\n * Presence of the person to display - will not display presence if undefined.\n * @defaultvalue PersonaPresence.none\n */\n presence?: PersonaPresence;\n\n /**\n * Presence title to be shown as a tooltip on hover over the presence icon.\n */\n presenceTitle?: string;\n\n /**\n * This flag can be used to signal the persona is out of office.\n * This will change the way the presence icon looks for statuses that support dual-presence.\n */\n isOutOfOffice?: boolean;\n\n /**\n * Secondary text to display, usually the role of the user.\n */\n secondaryText?: string;\n\n /**\n * Tertiary text to display, usually the status of the user. The tertiary text will only be shown when using Size72 or Size100.\n */\n tertiaryText?: string;\n\n /**\n * Optional text to display, usually a custom message set. The optional text will only be shown when using Size100.\n */\n optionalText?: string;\n\n /**\n * Whether to not render persona details, and just render the persona image/initials.\n */\n hidePersonaDetails?: boolean;\n\n /*\n * If true, show the secondary text line regardless of the size of the persona\n */\n showSecondaryText?: boolean;\n\n /**\n * If true, show the special coin for unknown persona.\n * It has '?' in place of initials, with static font and background colors\n */\n showUnknownPersonaCoin?: boolean;\n\n /**\n * If true renders the initials while the image is loading.\n * This only applies when an imageUrl is provided.\n * @defaultvalue false\n */\n showInitialsUntilImageLoads?: boolean;\n\n /**\n * Optional custom persona coin size in pixel.\n */\n coinSize?: number;\n\n /**\n * Optional HTML element props for Persona coin.\n */\n coinProps?: IPersonaCoinProps;\n\n /**\n * Theme provided by High-Order Component.\n */\n theme?: ITheme;\n\n /**\n * Primary text to display, usually the name of the person.\n * @deprecated Use `text` instead.\n */\n primaryText?: string;\n}\n\n/**\n * {@docCategory Persona}\n */\nexport interface IPersonaProps extends IPersonaSharedProps {\n /**\n * Optional callback to access the IPersona interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject;\n\n /**\n * Additional CSS class(es) to apply to the Persona\n */\n className?: string;\n\n /**\n * Call to provide customized styling that will layer on top of variant rules\n */\n styles?: IStyleFunctionOrObject;\n\n /**\n * Optional custom renderer for the primary text.\n */\n onRenderPrimaryText?: IRenderFunction;\n\n /**\n * Optional custom renderer for the secondary text.\n */\n onRenderSecondaryText?: IRenderFunction;\n\n /**\n * Optional custom renderer for the tertiary text.\n */\n onRenderTertiaryText?: IRenderFunction;\n\n /**\n * Optional custom renderer for the optional text.\n */\n onRenderOptionalText?: IRenderFunction;\n}\n\n/**\n * {@docCategory Persona}\n */\nexport interface IPersonaStyleProps {\n /**\n * Theme provided by High-Order Component.\n */\n theme: ITheme;\n\n /**\n * Custom class name.\n */\n className?: string;\n\n /**\n * Optional custom persona coin size in pixel.\n */\n coinSize?: number;\n\n /**\n * Decides the size of the control.\n * @defaultvalue PersonaSize.size48\n */\n size?: PersonaSize;\n\n /**\n * Presence of the person to display - will not display presence if undefined.\n * @defaultvalue PersonaPresence.none\n */\n presence?: PersonaPresence;\n\n /*\n * If true, show the secondary text line regardless of the size of the persona\n */\n showSecondaryText?: boolean;\n}\n\n/**\n * {@docCategory Persona}\n */\nexport interface IPersonaStyles {\n root: IStyle;\n details: IStyle;\n primaryText: IStyle;\n secondaryText: IStyle;\n tertiaryText: IStyle;\n optionalText: IStyle;\n textContent: IStyle;\n}\n\n/**\n * {@docCategory Persona}\n */\nexport interface IPersonaCoinProps extends IPersonaSharedProps {\n /**\n * Gets the component ref.\n */\n componentRef?: IRefObject<{}>;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules\n */\n styles?: IStyleFunctionOrObject;\n\n /**\n * Additional css class to apply to the PersonaCoin\n * @defaultvalue undefined\n */\n className?: string;\n}\n\n/**\n * {@docCategory Persona}\n */\nexport interface IPersonaCoinStyleProps {\n /**\n * Theme provided by High-Order Component.\n */\n theme: ITheme;\n\n /**\n * Custom class name.\n */\n className?: string;\n\n /**\n * Decides the size of the control.\n * @defaultvalue PersonaSize.size48\n */\n size?: PersonaSize;\n\n /**\n * Optional custom persona coin size in pixel.\n */\n coinSize?: number;\n\n /**\n * Decides whether to display coin for unknown persona\n */\n showUnknownPersonaCoin?: boolean;\n}\n\n/**\n * {@docCategory Persona}\n */\nexport interface IPersonaCoinStyles {\n coin: IStyle;\n imageArea: IStyle;\n image: IStyle;\n initials: IStyle;\n size10WithoutPresenceIcon: IStyle;\n}\n\n/**\n * {@docCategory Persona}\n */\nexport interface IPersonaPresenceProps extends IPersonaSharedProps {\n /**\n * Gets the component ref.\n */\n componentRef?: IRefObject<{}>;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules\n */\n styles?: IStyleFunctionOrObject;\n}\n\n/**\n * {@docCategory Persona}\n */\nexport type IPersonaPresenceStyleProps = Required> &\n Pick &\n Pick;\n\n/**\n * {@docCategory Persona}\n */\nexport interface IPersonaPresenceStyles {\n presence: IStyle;\n presenceIcon: IStyle;\n}\n\n/**\n * {@docCategory Persona}\n */\nexport enum PersonaSize {\n /**\n * `tiny` size has been deprecated in favor of standardized numeric sizing. Use `size8` instead.\n * @deprecated Use `size8` instead.\n */\n tiny = 0,\n\n /**\n *\n * `extraExtraSmall` size has been deprecated in favor of standardized numeric sizing. Use `size24` instead.\n * @deprecated Use `size24` instead.\n */\n extraExtraSmall = 1,\n\n /**\n * `extraSmall` size has been deprecated in favor of standardized numeric sizing. Use `size32` instead.\n * @deprecated Use `size32` instead.\n */\n extraSmall = 2,\n\n /**\n * `small` size has been deprecated in favor of standardized numeric sizing. Use `size40` instead.\n * @deprecated Use `size40` instead.\n */\n small = 3,\n\n /**\n * `regular` size has been deprecated in favor of standardized numeric sizing. Use `size48` instead.\n * @deprecated Use `size48` instead.\n */\n regular = 4,\n\n /**\n * `large` size has been deprecated in favor of standardized numeric sizing. Use `size72` instead.\n * @deprecated Use `size72` instead.\n */\n large = 5,\n\n /**\n * `extraLarge` size has been deprecated in favor of standardized numeric sizing. Use `size100` instead.\n * @deprecated Use `size100` instead.\n */\n extraLarge = 6,\n\n /**\n * No `PersonaCoin` is rendered.\n */\n size8 = 17,\n\n /**\n * No `PersonaCoin` is rendered. Deprecated in favor of `size8` to align with design specifications.\n * @deprecated Use `size8` instead. Will be removed in a future major release.\n */\n size10 = 9,\n\n /**\n * Renders a 16px `PersonaCoin`. Deprecated due to not being in the design specification.\n * @deprecated Will be removed in a future major release.\n */\n size16 = 8,\n\n /**\n * Renders a 24px `PersonaCoin`.\n */\n size24 = 10,\n\n /**\n * Renders a 28px `PersonaCoin`. Deprecated due to not being in the design specification.\n * @deprecated Will be removed in a future major release.\n */\n size28 = 7,\n\n /**\n * Renders a 32px `PersonaCoin`.\n */\n size32 = 11,\n\n /**\n * Renders a 40px `PersonaCoin`.\n */\n size40 = 12,\n\n /**\n * Renders a 48px `PersonaCoin`.\n */\n size48 = 13,\n\n /**\n * Renders a 56px `PersonaCoin`.\n */\n size56 = 16,\n\n /**\n * Renders a 72px `PersonaCoin`.\n */\n size72 = 14,\n\n /**\n * Renders a 100px `PersonaCoin`.\n */\n size100 = 15,\n\n /**\n * Renders a 120px `PersonaCoin`.\n */\n size120 = 18\n}\n\n/**\n * {@docCategory Persona}\n */\nexport enum PersonaPresence {\n none = 0,\n offline = 1,\n online = 2,\n away = 3,\n dnd = 4,\n blocked = 5,\n busy = 6\n}\n\n/**\n * {@docCategory Persona}\n */\nexport enum PersonaInitialsColor {\n lightBlue = 0,\n blue = 1,\n darkBlue = 2,\n teal = 3,\n lightGreen = 4,\n green = 5,\n darkGreen = 6,\n lightPink = 7,\n pink = 8,\n magenta = 9,\n purple = 10,\n /**\n * `black` is a color that can result in offensive persona coins with some initials combinations, so it can only be set with overrides.\n * @deprecated will be removed in a future major release.\n */\n black = 11,\n orange = 12,\n /**\n * `red` is a color that often has a special meaning, so it is considered a reserved color and can only be set with overrides\n * @deprecated will be removed in a future major release.\n */\n red = 13,\n darkRed = 14,\n /**\n * Transparent is not intended to be used with typical initials due to accessibility issues.\n * Its primary use is for overflow buttons, so it is considered a reserved color and can only be set with overrides.\n */\n transparent = 15,\n violet = 16,\n lightRed = 17,\n gold = 18,\n burgundy = 19,\n warmGray = 20,\n coolGray = 21,\n /**\n * `gray` is a color that can result in offensive persona coins with some initials combinations, so it can only be set with overrides\n */\n gray = 22,\n cyan = 23,\n rust = 24\n}\n","export * from \"./widget\"\r\n\r\nexport * from \"./primitives/text_area\"\r\nexport * from \"./primitives/string\"\r\nexport * from \"./primitives/markup\"\r\nexport * from \"./primitives/checkbox\"\r\nexport * from \"./primitives/number\"\r\nexport * from \"./primitives/label\"\r\nexport * from \"./primitives/h_n\"\r\nexport * from \"./primitives/div\"\r\nexport * from \"./primitives/button\"\r\nexport * from \"./primitives/a\"\r\nexport * from \"./primitives/dropdown\"\r\nexport * from \"./primitives/unordered_list\"\r\nexport * from \"./primitives/wait\"\r\nexport * from \"./primitives/dangerous_inline_html\"\r\nexport * from \"./primitives/promise\"\r\nexport * from \"./primitives/radio\"\r\nexport * from \"./primitives/image\"\r\nexport * from \"./primitives/movable\"\r\nexport * from \"./primitives/router\"\r\n\r\nexport * from \"./combinators/stateful\"\r\nexport * from \"./combinators/transform\"\r\nexport * from \"./combinators/both\"\r\nexport * from \"./combinators/either\"\r\nexport * from \"./combinators/all\"\r\nexport * from \"./combinators/any\"\r\nexport * from \"./combinators/choice\"\r\nexport * from \"./combinators/only_if\"\r\nexport * from \"./combinators/shouldComponentUpdate\"\r\nexport * from \"./combinators/modal\"\r\nexport * from \"./combinators/async\"\r\nexport * from \"./combinators/wizardBuilder\"\r\n","import { PersonaPresence, PersonaSize } from './Persona.types';\n\n// Persona Sizes\nexport namespace personaSize {\n export const size8 = '20px';\n // TODO: remove in a future major release as it's deprecated.\n export const size10 = '20px';\n // TODO: remove in a future major release as it's deprecated.\n export const size16 = '16px';\n export const size24 = '24px';\n // TODO: remove in a future major release as it's deprecated.\n export const size28 = '28px';\n export const size32 = '32px';\n export const size40 = '40px';\n export const size48 = '48px';\n export const size56 = '56px';\n export const size72 = '72px';\n export const size100 = '100px';\n export const size120 = '120px';\n}\n\n// Persona Presence Sizes\nexport namespace personaPresenceSize {\n export const size6 = '6px';\n export const size8 = '8px';\n export const size12 = '12px';\n export const size16 = '16px';\n export const size20 = '20px';\n export const size28 = '28px';\n export const size32 = '32px';\n\n /**\n * @deprecated This is now unused\n */\n export const border = '2px';\n}\n\n// TODO: remove the deprecated parts in a future major release.\nexport const sizeBoolean = (size: PersonaSize) => ({\n isSize8: size === PersonaSize.size8,\n isSize10: size === PersonaSize.size10 || size === PersonaSize.tiny,\n isSize16: size === PersonaSize.size16,\n isSize24: size === PersonaSize.size24 || size === PersonaSize.extraExtraSmall,\n isSize28: size === PersonaSize.size28 || size === PersonaSize.extraSmall,\n isSize32: size === PersonaSize.size32,\n isSize40: size === PersonaSize.size40 || size === PersonaSize.small,\n isSize48: size === PersonaSize.size48 || size === PersonaSize.regular,\n isSize56: size === PersonaSize.size56,\n isSize72: size === PersonaSize.size72 || size === PersonaSize.large,\n isSize100: size === PersonaSize.size100 || size === PersonaSize.extraLarge,\n isSize120: size === PersonaSize.size120\n});\n\nexport const sizeToPixels: { [key: number]: number } = {\n // Old deprecated sizes\n [PersonaSize.tiny]: 10,\n [PersonaSize.extraExtraSmall]: 24,\n [PersonaSize.extraSmall]: 28,\n [PersonaSize.small]: 40,\n [PersonaSize.regular]: 48,\n [PersonaSize.large]: 72,\n [PersonaSize.extraLarge]: 100,\n // New sizes\n [PersonaSize.size8]: 8,\n [PersonaSize.size10]: 10, // TODO: deprecated (not in the design specs)\n [PersonaSize.size16]: 16, // TODO: deprecated (not in the design specs)\n [PersonaSize.size24]: 24,\n [PersonaSize.size28]: 28, // TODO: deprecated (not in the design specs)\n [PersonaSize.size32]: 32,\n [PersonaSize.size40]: 40,\n [PersonaSize.size48]: 48,\n [PersonaSize.size56]: 56,\n [PersonaSize.size72]: 72,\n [PersonaSize.size100]: 100,\n [PersonaSize.size120]: 120\n};\n\nexport const presenceBoolean = (presence: PersonaPresence) => ({\n isAvailable: presence === PersonaPresence.online,\n isAway: presence === PersonaPresence.away,\n isBlocked: presence === PersonaPresence.blocked,\n isBusy: presence === PersonaPresence.busy,\n isDoNotDisturb: presence === PersonaPresence.dnd,\n isOffline: presence === PersonaPresence.offline\n});\n","export const DirectionalHint = {\n /**\n * Appear above the target element, with the left edges of the callout and target aligning.\n */\n topLeftEdge: 0 as 0,\n\n /**\n * Appear above the target element, with the centers of the callout and target aligning.\n */\n topCenter: 1 as 1,\n\n /**\n * Appear above the target element, with the right edges of the callout and target aligning.\n */\n topRightEdge: 2 as 2,\n\n /**\n * Appear above the target element, aligning with the target element such that the callout tends toward the center of the screen.\n */\n topAutoEdge: 3 as 3,\n\n /**\n * Appear below the target element, with the left edges of the callout and target aligning.\n */\n bottomLeftEdge: 4 as 4,\n\n /**\n * Appear below the target element, with the centers of the callout and target aligning.\n */\n bottomCenter: 5 as 5,\n\n /**\n * Appear below the target element, with the right edges of the callout and target aligning.\n */\n bottomRightEdge: 6 as 6,\n\n /**\n * Appear below the target element, aligning with the target element such that the callout tends toward the center of the screen.\n */\n bottomAutoEdge: 7 as 7,\n\n /**\n * Appear to the left of the target element, with the top edges of the callout and target aligning.\n */\n leftTopEdge: 8 as 8,\n\n /**\n * Appear to the left of the target element, with the centers of the callout and target aligning.\n */\n leftCenter: 9 as 9,\n\n /**\n * Appear to the left of the target element, with the bottom edges of the callout and target aligning.\n */\n leftBottomEdge: 10 as 10,\n\n /**\n * Appear to the right of the target element, with the top edges of the callout and target aligning.\n */\n rightTopEdge: 11 as 11,\n\n /**\n * Appear to the right of the target element, with the centers of the callout and target aligning.\n */\n rightCenter: 12 as 12,\n\n /**\n * Appear to the right of the target element, with the bottom edges of the callout and target aligning.\n */\n rightBottomEdge: 13 as 13\n};\n\nexport type DirectionalHint = typeof DirectionalHint[keyof typeof DirectionalHint];\n","import { DirectionalHint } from '../../common/DirectionalHint';\nimport { IRectangle } from '../../Utilities';\n\nexport enum RectangleEdge {\n top = 1,\n bottom = -1,\n left = 2,\n right = -2\n}\n\nexport enum Position {\n top = 0,\n bottom = 1,\n start = 2,\n end = 3\n}\nexport interface IPositionProps {\n target?: Element | MouseEvent | IPoint;\n /** how the element should be positioned */\n directionalHint?: DirectionalHint;\n /**\n * How the element should be positioned in RTL layouts.\n * If not specified, a mirror of `directionalHint` will be used instead\n */\n directionalHintForRTL?: DirectionalHint;\n /** The gap between the callout and the target */\n gapSpace?: number;\n /**\n * The bounding rectangle for which the contextual menu can appear in.\n */\n bounds?: IRectangle;\n /**\n * If true the position returned will have the menu element cover the target.\n * If false then it will position next to the target;\n */\n coverTarget?: boolean;\n /**\n * If true the position will not change edges in an attempt to fit the rectangle within bounds.\n * It will still attempt to align it to whatever bounds are given.\n * @defaultvalue false\n */\n directionalHintFixed?: boolean;\n\n /**\n * If true the positioning logic will prefer flipping edges over nudging the rectangle to fit within bounds,\n * thus making sure the element align perfectly with target.\n */\n alignTargetEdge?: boolean;\n}\n\nexport interface ICalloutPositionProps extends IPositionProps {\n /**\n * The width of the beak.\n */\n beakWidth?: number;\n\n /**\n * Whether or not the beak is visible\n */\n isBeakVisible?: boolean;\n}\n\nexport interface IPositionedData {\n /**\n * The new position of the element.\n */\n elementPosition: IPosition;\n /**\n * The finalized target edge that element is aligning to. For instance RectangleEdge.bottom would mean\n * that the bottom edge of the target is being aligned to by the RectangleEdge.top of the element\n * that is being positioned.\n */\n targetEdge: RectangleEdge;\n /**\n * The finalized alignment edge that the element is aligning too. For instance, RectangleEdge.left means\n * that the left edge of the target should be in line with the left edge of the element being positioned.\n */\n alignmentEdge?: RectangleEdge;\n}\n\nexport interface ICalloutPositionedInfo extends IPositionedData {\n beakPosition: ICalloutBeakPositionedInfo;\n}\n\nexport interface ICalloutBeakPositionedInfo extends IPositionedData {\n closestEdge: RectangleEdge;\n}\n\n/**\n * Gives the position of some element on the page. Only a pair of vertical and horizontal edges need to be\n * given. So top/left or bottom/left is sufficient.\n * The number given is the distance in pixels from whatever host was given..\n * So bottom: 100 would be 100px up from the bottom of the host while top: 100px from the top.\n */\nexport interface IPosition {\n top?: number;\n left?: number;\n bottom?: number;\n right?: number;\n [key: string]: number | undefined;\n}\n\nexport interface IPoint {\n x: number;\n y: number;\n}\n\nexport interface IPositionDirectionalHintData {\n targetEdge: RectangleEdge;\n alignmentEdge?: RectangleEdge;\n isAuto?: boolean;\n alignTargetEdge?: boolean;\n}\n\nexport interface IRelativePositions {\n calloutPosition: IPosition;\n beakPosition: { position: IPosition | undefined; display: 'block' };\n directionalClassName: string;\n submenuDirection: DirectionalHint;\n}\n","var isObject = require('./_is-object');\nmodule.exports = function (it) {\n if (!isObject(it)) throw TypeError(it + ' is not an object!');\n return it;\n};\n","export const KTP_PREFIX = 'ktp';\nexport const KTP_SEPARATOR = '-';\nexport const KTP_FULL_PREFIX = KTP_PREFIX + KTP_SEPARATOR;\nexport const DATAKTP_TARGET = 'data-ktp-target';\nexport const DATAKTP_EXECUTE_TARGET = 'data-ktp-execute-target';\nexport const KTP_LAYER_ID = 'ktp-layer-id';\nexport const KTP_ARIA_SEPARATOR = ', ';\n\n// Events\nexport namespace KeytipEvents {\n export const KEYTIP_ADDED = 'keytipAdded';\n export const KEYTIP_REMOVED = 'keytipRemoved';\n export const KEYTIP_UPDATED = 'keytipUpdated';\n export const PERSISTED_KEYTIP_ADDED = 'persistedKeytipAdded';\n export const PERSISTED_KEYTIP_REMOVED = 'persistedKeytipRemoved';\n export const PERSISTED_KEYTIP_EXECUTE = 'persistedKeytipExecute';\n export const ENTER_KEYTIP_MODE = 'enterKeytipMode';\n export const EXIT_KEYTIP_MODE = 'exitKeytipMode';\n}\n","/**\n * Simulated enum for keycodes. These will get inlined by uglify when used much like an enum\n *\n * @public\n * {@docCategory KeyCodes}\n */\nexport const KeyCodes = {\n backspace: 8 as 8,\n tab: 9 as 9,\n enter: 13 as 13,\n shift: 16 as 16,\n ctrl: 17 as 17,\n alt: 18 as 18,\n pauseBreak: 19 as 19,\n capslock: 20 as 20,\n escape: 27 as 27,\n space: 32 as 32,\n pageUp: 33 as 33,\n pageDown: 34 as 34,\n end: 35 as 35,\n home: 36 as 36,\n left: 37 as 37,\n up: 38 as 38,\n right: 39 as 39,\n down: 40 as 40,\n insert: 45 as 45,\n del: 46 as 46,\n zero: 48 as 48,\n one: 49 as 49,\n two: 50 as 50,\n three: 51 as 51,\n four: 52 as 52,\n five: 53 as 53,\n six: 54 as 54,\n seven: 55 as 55,\n eight: 56 as 56,\n nine: 57 as 57,\n a: 65 as 65,\n b: 66 as 66,\n c: 67 as 67,\n d: 68 as 68,\n e: 69 as 69,\n f: 70 as 70,\n g: 71 as 71,\n h: 72 as 72,\n i: 73 as 73,\n j: 74 as 74,\n k: 75 as 75,\n l: 76 as 76,\n m: 77 as 77,\n n: 78 as 78,\n o: 79 as 79,\n p: 80 as 80,\n q: 81 as 81,\n r: 82 as 82,\n s: 83 as 83,\n t: 84 as 84,\n u: 85 as 85,\n v: 86 as 86,\n w: 87 as 87,\n x: 88 as 88,\n y: 89 as 89,\n z: 90 as 90,\n leftWindow: 91 as 91,\n rightWindow: 92 as 92,\n select: 93 as 93,\n zero_numpad: 96 as 96,\n one_numpad: 97 as 97,\n two_numpad: 98 as 98,\n three_numpad: 99 as 99,\n four_numpad: 100 as 100,\n five_numpad: 101 as 101,\n six_numpad: 102 as 102,\n seven_numpad: 103 as 103,\n eight_numpad: 104 as 104,\n nine_numpad: 105 as 105,\n multiply: 106 as 106,\n add: 107 as 107,\n subtract: 109 as 109,\n decimalPoint: 110 as 110,\n divide: 111 as 111,\n f1: 112 as 112,\n f2: 113 as 113,\n f3: 114 as 114,\n f4: 115 as 115,\n f5: 116 as 116,\n f6: 117 as 117,\n f7: 118 as 118,\n f8: 119 as 119,\n f9: 120 as 120,\n f10: 121 as 121,\n f11: 122 as 122,\n f12: 123 as 123,\n numlock: 144 as 144,\n scrollLock: 145 as 145,\n semicolon: 186 as 186,\n equalSign: 187 as 187,\n comma: 188 as 188,\n dash: 189 as 189,\n period: 190 as 190,\n forwardSlash: 191 as 191,\n graveAccent: 192 as 192,\n openBracket: 219 as 219,\n backSlash: 220 as 220,\n closeBracket: 221 as 221,\n singleQuote: 222 as 222\n};\nexport type KeyCodes = number;\n","// https://github.com/zloirock/core-js/issues/86#issuecomment-115759028\nvar global = module.exports = typeof window != 'undefined' && window.Math == Math\n ? window : typeof self != 'undefined' && self.Math == Math ? self\n // eslint-disable-next-line no-new-func\n : Function('return this')();\nif (typeof __g == 'number') __g = global; // eslint-disable-line no-undef\n","import { _isSSR } from './setSSR';\n\nlet _window: Window | undefined = undefined;\n\n// Note: Accessing \"window\" in IE11 is somewhat expensive, and calling \"typeof window\"\n// hits a memory leak, whereas aliasing it and calling \"typeof _window\" does not.\n// Caching the window value at the file scope lets us minimize the impact.\ntry {\n _window = window;\n} catch (e) {\n /* no-op */\n}\n\n/**\n * Helper to get the window object. The helper will make sure to use a cached variable\n * of \"window\", to avoid overhead and memory leaks in IE11. Note that in popup scenarios the\n * window object won't match the \"global\" window object, and for these scenarios, you should\n * pass in an element hosted within the popup.\n *\n * @public\n */\nexport function getWindow(rootElement?: Element | null): Window | undefined {\n if (_isSSR || typeof _window === 'undefined') {\n return undefined;\n } else {\n const el = rootElement as Element;\n\n return el && el.ownerDocument && el.ownerDocument.defaultView ? el.ownerDocument.defaultView : _window;\n }\n}\n","import * as React from 'react';\nimport { DetailsListBase } from './DetailsList.base';\nimport { ISelection, SelectionMode, ISelectionZoneProps } from '../../utilities/selection/index';\nimport { IRefObject, IBaseProps, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities';\nimport { IDragDropEvents, IDragDropContext, IDragDropHelper, IDragDropOptions } from './../../utilities/dragdrop/index';\nimport { IGroup, IGroupRenderProps, IGroupDividerProps, IGroupedListProps } from '../GroupedList/index';\nimport { IDetailsRowProps, IDetailsRowBaseProps } from '../DetailsList/DetailsRow';\nimport { IDetailsHeaderProps, IDetailsHeaderBaseProps } from './DetailsHeader';\nimport { IDetailsFooterProps, IDetailsFooterBaseProps } from './DetailsFooter.types';\nimport { IWithViewportProps, IViewport } from '../../utilities/decorators/withViewport';\nimport { IList, IListProps, ScrollToMode } from '../List/index';\nimport { ITheme, IStyle } from '../../Styling';\nimport { ICellStyleProps, IDetailsItemProps } from './DetailsRow.types';\nimport { IDetailsCheckboxProps } from './DetailsRowCheck.types';\nimport { IDetailsColumnStyleProps, IDetailsColumnProps, IDetailsColumnStyles } from './DetailsColumn.types';\n\nexport {\n IDetailsHeaderProps,\n IDetailsRowBaseProps,\n IDetailsHeaderBaseProps,\n IDetailsFooterBaseProps,\n IDragDropContext,\n IDragDropEvents,\n IDragDropHelper,\n IDragDropOptions,\n IViewport,\n IWithViewportProps\n};\n\n/**\n * {@docCategory DetailsList}\n */\nexport interface IDetailsList extends IList {\n /**\n * Ensures that the list content is updated. Call this in cases where the list prop updates don't change, but the list\n * still needs to be re-evaluated. For example, if a sizer bar is adjusted and causes the list width to change, you can\n * call this to force a re-evaluation. Be aware that this can be an expensive operation and should be done sparingly.\n */\n forceUpdate: () => void;\n\n /**\n * Scroll to and focus the item at the given index. focusIndex will call scrollToIndex on the specified index.\n *\n * @param index - Index of item to scroll to\n * @param forceIntoFirstElement - If true, focus will be set to the first focusable child element of the item rather\n * than the item itself.\n * @param measureItem - Optional callback to measure the height of an individual item\n * @param scrollToMode - Optional setting to determine where in the window the item should be scrolled to when focused.\n */\n focusIndex: (\n index: number,\n forceIntoFirstElement?: boolean,\n measureItem?: (itemIndex: number) => number,\n scrollToMode?: ScrollToMode\n ) => void;\n\n /**\n * Get the start index of the page that is currently in view\n */\n getStartItemIndexInView: () => number;\n}\n\n/**\n * {@docCategory DetailsList}\n */\nexport interface IDetailsListProps extends IBaseProps, IWithViewportProps {\n /**\n * Theme provided by the Higher Order Component\n */\n theme?: ITheme;\n\n /**\n * Style function to be passed in to override the themed or default styles\n */\n styles?: IStyleFunctionOrObject;\n\n /**\n * Optional callback to access the IDetailsList interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject;\n\n /** A key that uniquely identifies the given items. If provided, the selection will be reset when the key changes. */\n setKey?: string;\n\n /** The items to render. */\n items: any[];\n\n /** Set this to true to indicate that the items being displayed is placeholder data. */\n isPlaceholderData?: boolean;\n\n /** Optional properties to pass through to the list components being rendered. */\n listProps?: IListProps;\n\n /**\n * Optional default focused index to set focus to once the items have rendered and the index exists.\n */\n initialFocusedIndex?: number;\n\n /** Optional class name to add to the root element. */\n className?: string;\n\n /** Optional grouping instructions. The definition for IGroup can be found under the GroupedList component. */\n groups?: IGroup[];\n\n /** Optional override properties to render groups. The definition for IGroupRenderProps can be found under the GroupedList component. */\n groupProps?: IDetailsGroupRenderProps;\n\n /** Optional override for the indent width used for group nesting. */\n indentWidth?: number;\n\n /** Optional selection model to track selection state. */\n selection?: ISelection;\n\n /** Controls how/if the details list manages selection. Options include none, single, multiple */\n selectionMode?: SelectionMode;\n\n /**\n * By default, selection is cleared when clicking on an empty (non-focusable) section of the screen. Setting this value to true\n * overrides that behavior and maintains selection.\n * @defaultvalue false\n **/\n selectionPreservedOnEmptyClick?: boolean;\n\n /**\n * Addition props to pass through to the selection zone created by default.\n */\n selectionZoneProps?: ISelectionZoneProps;\n\n /** Controls how the columns are adjusted. */\n layoutMode?: DetailsListLayoutMode;\n\n /**\n * Controls the visibility of selection check box.\n * @defaultvalue CheckboxVisibility.onHover\n */\n checkboxVisibility?: CheckboxVisibility;\n\n /**\n * Controls the visibility of the details header.\n * @defaultvalue true\n */\n isHeaderVisible?: boolean;\n\n /** Given column defitions. If none are provided, default columns will be created based on the item's properties. */\n columns?: IColumn[];\n\n /** Controls how the list contrains overflow. */\n constrainMode?: ConstrainMode;\n\n /** Event names and corresponding callbacks that will be registered to rendered row elements. */\n rowElementEventMap?: { eventName: string; callback: (context: IDragDropContext, event?: any) => void }[];\n\n /** Callback for when the details list has been updated. Useful for telemetry tracking externally. */\n onDidUpdate?: (detailsList?: DetailsListBase) => void;\n\n /** Callback for when a given row has been mounted. Useful for identifying when a row has been rendered on the page. */\n onRowDidMount?: (item?: any, index?: number) => void;\n\n /** Callback for when a given row has been unmounted. Useful for identifying when a row has been removed from the page. */\n onRowWillUnmount?: (item?: any, index?: number) => void;\n\n /** Callback for when the user clicks on the column header. */\n onColumnHeaderClick?: (ev?: React.MouseEvent, column?: IColumn) => void;\n\n /** Callback for when the user asks for a contextual menu (usually via right click) from a column header. */\n onColumnHeaderContextMenu?: (column?: IColumn, ev?: React.MouseEvent) => void;\n\n /** Callback fired on column resize */\n onColumnResize?: (column?: IColumn, newWidth?: number, columnIndex?: number) => void;\n\n /** Callback for when a given row has been invoked (by pressing enter while it is selected.) */\n onItemInvoked?: (item?: any, index?: number, ev?: Event) => void;\n\n /**\n * Callback for when the context menu of an item has been accessed.\n * If undefined or false are returned, ev.preventDefault() will be called.\n */\n onItemContextMenu?: (item?: any, index?: number, ev?: Event) => void | boolean;\n\n /**\n * If provided, will allow the caller to override the default row rendering.\n */\n onRenderRow?: IRenderFunction;\n\n /**\n * If provided, will be the \"default\" item column renderer method. This affects cells within the rows; not the rows themselves.\n * If a column definition provides its own onRender method, that will be used instead of this.\n */\n onRenderItemColumn?: (item?: any, index?: number, column?: IColumn) => React.ReactNode;\n\n /**\n * If provided, will be the \"default\" item column cell value return. column getValueKey can override getCellValue.\n */\n getCellValueKey?: (item?: any, index?: number, column?: IColumn) => string;\n\n /** Map of callback functions related to row drag and drop functionality. */\n dragDropEvents?: IDragDropEvents;\n\n /** Callback for what to render when the item is missing. */\n onRenderMissingItem?: (index?: number, rowProps?: IDetailsRowProps) => React.ReactNode;\n\n /**\n * An override to render the details header.\n */\n onRenderDetailsHeader?: IRenderFunction;\n\n /**\n * An override to render the details footer.\n */\n onRenderDetailsFooter?: IRenderFunction;\n\n /**\n * If provided, can be used to render a custom checkbox\n */\n onRenderCheckbox?: IRenderFunction;\n\n /** Viewport, provided by the withViewport decorator. */\n viewport?: IViewport;\n\n /** Callback for when an item in the list becomes active by clicking anywhere inside the row or navigating to it with keyboard. */\n onActiveItemChanged?: (item?: any, index?: number, ev?: React.FocusEvent) => void;\n\n /** The aria-label attribute to stamp out on the list header */\n ariaLabelForListHeader?: string;\n\n /** The aria-label attribute to stamp out on select all checkbox for the list */\n ariaLabelForSelectAllCheckbox?: string;\n\n /**\n * An ARIA label for the name of the selection column, for localization.\n */\n ariaLabelForSelectionColumn?: string;\n\n /** Optional callback to get the aria-label string for a given item. */\n getRowAriaLabel?: (item: any) => string;\n\n /** Optional callback to get the aria-describedby IDs (space separated strings) of the elements that describe the item. */\n getRowAriaDescribedBy?: (item: any) => string;\n\n /**\n * Optional callback to get the item key, to be used in the selection and on render.\n * Must be provided if sorting or filtering is enabled.\n */\n getKey?: (item: any, index?: number) => string;\n\n /** A text summary of the table set via aria-label. */\n ariaLabel?: string;\n\n /** Check button aria label for details list. */\n checkButtonAriaLabel?: string;\n\n /** Aria label for grid in details list. */\n ariaLabelForGrid?: string;\n\n /** Boolean value to indicate if the role application should be applied on details list. Set to false by default */\n shouldApplyApplicationRole?: boolean;\n\n /**\n * The minimum mouse move distance to interpret the action as drag event.\n * @defaultvalue 5\n */\n minimumPixelsForDrag?: number;\n\n /** Boolean value to indicate if the component should render in compact mode. Set to false by default */\n compact?: boolean;\n\n /**\n * Boolean value to enable render page caching. This is an experimental performance optimization\n * that is off by default.\n * @defaultvalue false\n */\n usePageCache?: boolean;\n\n /**\n * Optional callback to determine whether the list should be rendered in full, or virtualized.\n * Virtualization will add and remove pages of items as the user scrolls them into the visible range.\n * This benefits larger list scenarios by reducing the DOM on the screen, but can negatively affect performance for smaller lists.\n * The default implementation will virtualize when this callback is not provided.\n */\n onShouldVirtualize?: (props: IListProps) => boolean;\n\n /**\n * Optional class name to add to the cell of a checkbox\n */\n checkboxCellClassName?: string;\n\n /**\n * Whether or not the selection zone should enter modal state on touch.\n */\n enterModalSelectionOnTouch?: boolean;\n\n /**\n * Options for column re-order using drag and drop\n */\n columnReorderOptions?: IColumnReorderOptions;\n\n /**\n * Optional function to override default group height calculation used by list virtualization.\n */\n getGroupHeight?: IGroupedListProps['getGroupHeight'];\n\n /**\n * Rerender DetailsRow only when props changed. Might cause regression when depending on external updates.\n * @defaultvalue false\n */\n useReducedRowRenderer?: boolean;\n\n /**\n * Props impacting the render style of cells. Since these have an impact on calculated column widths, they are\n * handled separately from normal theme styling, but they are passed to the styling system.\n */\n cellStyleProps?: ICellStyleProps;\n\n /**\n * Whether or not to disable the built-in SelectionZone, so the host component can provide its own.\n */\n disableSelectionZone?: boolean;\n\n /**\n * Whether to animate updates\n */\n enableUpdateAnimations?: boolean;\n\n /**\n * Whether to use fast icon and check components. The icons can't be targeted by customization\n * but are still customizable via class names.\n * @defaultvalue true\n */\n useFastIcons?: boolean;\n}\n\n/**\n * {@docCategory DetailsList}\n */\nexport interface IColumn {\n /**\n * A unique key for identifying the column.\n */\n key: string;\n\n /**\n * Name to render on the column header.\n */\n name: string;\n\n /**\n * The field to pull the text value from for the column. This can be null if a custom\n * onRender method is provided.\n */\n fieldName?: string;\n\n /**\n * An optional class name to stick on the column cell within each row.\n */\n className?: string;\n\n /**\n * Style function to be passed in to override the themed or default styles\n */\n styles?: IStyleFunctionOrObject;\n\n /**\n * Minimum width for the column.\n */\n minWidth: number;\n\n /**\n * Optional accessibility label (aria-label) attribute that will be stamped on to the element.\n * If none is specified, the arai-label attribute will contain the column name\n */\n ariaLabel?: string;\n\n /**\n * Optional flag on whether the column is a header for the given row. There should be only one column with\n * row header set to true.\n * @defaultvalue false\n */\n isRowHeader?: boolean;\n\n /**\n * Maximum width for the column, if stretching is allowed in justified scenarios.\n */\n maxWidth?: number;\n\n /**\n * Defines how the column's header should render.\n * @defaultvalue ColumnActionsMode.clickable\n */\n columnActionsMode?: ColumnActionsMode;\n\n /**\n * Optional iconName to use for the column header.\n */\n iconName?: string;\n\n /**\n * Whether or not only the icon is used in the column header.\n * Set this to true so the column name and dropdown chevron are not displayed.\n */\n isIconOnly?: boolean;\n\n /**\n * Class name to add to the Icon component.\n */\n iconClassName?: string;\n\n /**\n * If specified will allow the column to be collapsed when rendered in justified layout.\n * @deprecated Use `isCollapsible`\n */\n isCollapsable?: boolean;\n\n /**\n * If specified will allow the column to be collapsed when rendered in justified layout.\n */\n isCollapsible?: boolean;\n\n /**\n * Determines if the column is currently sorted. Renders a sort arrow in the column header.\n */\n isSorted?: boolean;\n\n /**\n * Determines if the arrow is pointed down (descending) or up.\n */\n isSortedDescending?: boolean;\n\n /**\n * Determines if the column can be resized.\n */\n isResizable?: boolean;\n\n /**\n * Determines if the column can render multi-line text.\n */\n isMultiline?: boolean;\n\n /**\n * If provided uses this method to render custom cell content, rather than the default text rendering.\n */\n onRender?: (item?: any, index?: number, column?: IColumn) => any;\n\n /**\n * If set, parent getCellValueKey will return this value.\n */\n getValueKey?: (item?: any, index?: number, column?: IColumn) => string;\n\n /**\n * If provider, can be used to render a custom column header divider\n */\n onRenderDivider?: IRenderFunction;\n\n /**\n * Determines if the column is filtered, and if so shows a filter icon.\n */\n isFiltered?: boolean;\n\n /**\n * If provided, will be executed when the user clicks on the column header.\n */\n onColumnClick?: (ev: React.MouseEvent, column: IColumn) => void;\n\n /**\n * If provided, will be executed when the user accesses the contextmenu on a column header.\n */\n onColumnContextMenu?: (column?: IColumn, ev?: React.MouseEvent) => void;\n\n /**\n * If provided, will be executed when the column is resized with the column's current width.\n * Prefer this callback over `DetailsList` `onColumnResize` if you require the `IColumn` to\n * report its width after every resize event. Consider debouncing the callback if resize events\n * occur frequently.\n */\n onColumnResize?: (width?: number) => void;\n\n /**\n * If set will show a grouped icon next to the column header name.\n */\n isGrouped?: boolean;\n\n /**\n * Arbitrary data passthrough which can be used by the caller.\n */\n data?: any;\n\n /**\n * Internal only value.\n */\n calculatedWidth?: number;\n\n /**\n * Internal only value.\n * Remembers the actual witdh of the column on any case.\n * On the other hand, calculatedWidth is only saved when it's defined by user, not for justified calculations.\n */\n currentWidth?: number;\n\n /**\n * An optional class name to stick on the column cell within each header.\n */\n headerClassName?: string;\n\n /**\n * If set, will add additional LTR padding-right to column and cells.\n */\n isPadded?: boolean;\n\n /**\n * ARIA label for the sort order of this column when sorted ascending.\n */\n sortAscendingAriaLabel?: string;\n /**\n * ARIA label for the sort order of this column when sorted descending.\n */\n sortDescendingAriaLabel?: string;\n /**\n * ARIA label for the status of this column when grouped.\n */\n groupAriaLabel?: string;\n /**\n * ARIA label for the status of this column when filtered.\n */\n filterAriaLabel?: string;\n /**\n * Indicates whether a dropdown menu is open so that the appropriate ARIA attributes are rendered.\n */\n isMenuOpen?: boolean;\n}\n\n/**\n * Enum to describe how a particular column header behaves.... This enum is used to\n * to specify the property IColumn:columnActionsMode.\n * If IColumn:columnActionsMode is undefined, then it's equivalent to ColumnActionsMode.clickable\n * {@docCategory DetailsList}\n */\nexport enum ColumnActionsMode {\n /**\n * Renders the column header as disabled.\n */\n disabled = 0,\n\n /**\n * Renders the column header is clickable.\n */\n clickable = 1,\n\n /**\n * Renders the column header ias clickable and displays the dropdown cheveron.\n */\n hasDropdown = 2\n}\n\n/**\n * {@docCategory DetailsList}\n */\nexport enum ConstrainMode {\n /** If specified, lets the content grow which allows the page to manage scrolling. */\n unconstrained = 0,\n\n /**\n * If specified, constrains the list to the given layout space.\n */\n horizontalConstrained = 1\n}\n\n/**\n * {@docCategory DetailsList}\n */\nexport interface IColumnReorderOptions {\n /**\n * Specifies the number fixed columns from left(0th index)\n * @defaultvalue 0\n */\n frozenColumnCountFromStart?: number;\n\n /**\n * Specifies the number fixed columns from right\n * @defaultvalue 0\n */\n frozenColumnCountFromEnd?: number;\n\n /**\n * Callback to handle the column dragstart\n * draggedStarted indicates that the column drag has been started on DetailsHeader\n */\n onColumnDragStart?: (dragStarted: boolean) => void;\n\n /**\n * Callback to handle the column reorder\n * draggedIndex is the source column index, that need to be placed in targetIndex\n * Deprecated, use `onColumnDrop` instead.\n * @deprecated Use `onColumnDrop` instead.\n */\n handleColumnReorder?: (draggedIndex: number, targetIndex: number) => void;\n\n /**\n * Callback to handle the column reorder\n * draggedIndex is the source column index, that need to be placed in targetIndex\n */\n onColumnDrop?: (dragDropDetails: IColumnDragDropDetails) => void;\n\n /**\n * Callback to handle the column reorder\n */\n onDragEnd?: (columnDropLocationDetails: ColumnDragEndLocation) => void;\n}\n\n/**\n * {@docCategory DetailsList}\n */\nexport interface IColumnDragDropDetails {\n /**\n * Specifies the source column index\n * @defaultvalue -1\n */\n draggedIndex: number;\n\n /**\n * Specifies the target column index\n * @defaultvalue -1\n */\n targetIndex: number;\n}\n\n/**\n * Enum to describe where the column has been dropped, after starting the drag\n * {@docCategory DetailsList}\n */\nexport enum ColumnDragEndLocation {\n /**\n * Drag ended outside of current list\n */\n outside = 0,\n\n /**\n * Drag ended on current List\n */\n surface = 1,\n\n /**\n * Drag ended on Header\n */\n header = 2\n}\n\n/**\n * {@docCategory DetailsList}\n */\nexport enum DetailsListLayoutMode {\n /**\n * Lets the user resize columns and makes not attempt to fit them.\n */\n fixedColumns = 0,\n\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 justified = 1\n}\n\n/**\n * {@docCategory DetailsList}\n */\nexport enum CheckboxVisibility {\n /**\n * Visible on hover.\n */\n onHover = 0,\n\n /**\n * Visible always.\n */\n always = 1,\n\n /**\n * Hide checkboxes.\n */\n hidden = 2\n}\n\n/**\n * {@docCategory DetailsList}\n */\nexport type IDetailsListStyleProps = Required> &\n Pick & {\n /** Whether the list is horizontally constrained */\n isHorizontalConstrained?: boolean;\n\n /** Whether the list is in compact mode */\n compact?: boolean;\n\n /** Whether the list is fixed in size */\n isFixed?: boolean;\n };\n\n/**\n * {@docCategory DetailsList}\n */\nexport interface IDetailsListStyles {\n root: IStyle;\n focusZone: IStyle;\n headerWrapper: IStyle;\n contentWrapper: IStyle;\n}\n\n/**\n * {@docCategory DetailsList}\n */\nexport interface IDetailsGroupRenderProps extends IGroupRenderProps {\n onRenderFooter?: IRenderFunction;\n onRenderHeader?: IRenderFunction;\n}\n\n/**\n * {@docCategory DetailsList}\n */\nexport interface IDetailsGroupDividerProps extends IGroupDividerProps, IDetailsItemProps {}\n\nexport interface IDetailsListCheckboxProps extends IDetailsCheckboxProps {}\n","import { KTP_SEPARATOR, KTP_PREFIX, DATAKTP_TARGET, DATAKTP_EXECUTE_TARGET, KTP_LAYER_ID } from './KeytipConstants';\nimport { addElementAtIndex } from '../../Utilities';\n\n/**\n * Converts a whole set of KeySequences into one keytip ID, which will be the ID for the last keytip sequence specified\n * keySequences should not include the initial keytip 'start' sequence.\n *\n * @param keySequences - Full path of IKeySequences for one keytip.\n * @returns {string} String to use for the keytip ID.\n */\nexport function sequencesToID(keySequences: string[]): string {\n return keySequences.reduce((prevValue: string, keySequence: string): string => {\n return prevValue + KTP_SEPARATOR + keySequence.split('').join(KTP_SEPARATOR);\n }, KTP_PREFIX);\n}\n\n/**\n * Merges an overflow sequence with a key sequence.\n *\n * @param keySequences - Full sequence for one keytip.\n * @param overflowKeySequences - Full overflow keytip sequence.\n * @returns {string[]} Sequence that will be used by the keytip when in the overflow.\n */\nexport function mergeOverflows(keySequences: string[], overflowKeySequences: string[]): string[] {\n const overflowSequenceLen = overflowKeySequences.length;\n const overflowSequence = [...overflowKeySequences].pop();\n const newKeySequences = [...keySequences];\n return addElementAtIndex(newKeySequences, overflowSequenceLen - 1, overflowSequence!);\n}\n\n/**\n * Constructs the data-ktp-target attribute selector from a full key sequence.\n *\n * @param keySequences - Full string[] for a Keytip.\n * @returns {string} String selector to use to query for the keytip target.\n */\nexport function ktpTargetFromSequences(keySequences: string[]): string {\n return '[' + DATAKTP_TARGET + '=\"' + sequencesToID(keySequences) + '\"]';\n}\n\n/**\n * Constructs the data-ktp-execute-target attribute selector from a keytip ID.\n *\n * @param keytipId - ID of the Keytip.\n * @returns {string} String selector to use to query for the keytip execute target.\n */\nexport function ktpTargetFromId(keytipId: string): string {\n return '[' + DATAKTP_EXECUTE_TARGET + '=\"' + keytipId + '\"]';\n}\n\n/**\n * Gets the aria-describedby value to put on the component with this keytip.\n *\n * @param keySequences - KeySequences of the keytip.\n * @returns {string} The aria-describedby value to set on the component with this keytip.\n */\nexport function getAriaDescribedBy(keySequences: string[]): string {\n const describedby = ' ' + KTP_LAYER_ID;\n if (!keySequences.length) {\n // Return just the layer ID\n return describedby;\n }\n\n return describedby + ' ' + sequencesToID(keySequences);\n}\n","import { elementContainsAttribute } from './dom/elementContainsAttribute';\nimport { elementContains } from './dom/elementContains';\nimport { getParent } from './dom/getParent';\nimport { getWindow } from './dom/getWindow';\nimport { getDocument } from './dom/getDocument';\n\nconst IS_FOCUSABLE_ATTRIBUTE = 'data-is-focusable';\nconst IS_VISIBLE_ATTRIBUTE = 'data-is-visible';\nconst FOCUSZONE_ID_ATTRIBUTE = 'data-focuszone-id';\nconst FOCUSZONE_SUB_ATTRIBUTE = 'data-is-sub-focuszone';\n\n/**\n * Gets the first focusable element.\n *\n * @public\n */\nexport function getFirstFocusable(\n rootElement: HTMLElement,\n currentElement: HTMLElement,\n includeElementsInFocusZones?: boolean\n): HTMLElement | null {\n return getNextElement(\n rootElement,\n currentElement,\n true /*checkNode*/,\n false /*suppressParentTraversal*/,\n false /*suppressChildTraversal*/,\n includeElementsInFocusZones\n );\n}\n\n/**\n * Gets the last focusable element.\n *\n * @public\n */\nexport function getLastFocusable(\n rootElement: HTMLElement,\n currentElement: HTMLElement,\n includeElementsInFocusZones?: boolean\n): HTMLElement | null {\n return getPreviousElement(\n rootElement,\n currentElement,\n true /*checkNode*/,\n false /*suppressParentTraversal*/,\n true /*traverseChildren*/,\n includeElementsInFocusZones\n );\n}\n\n/**\n * Gets the first tabbable element.\n * The difference between focusable and tabbable is that tabbable elements are focusable elements that also have tabIndex != -1.\n * @param rootElement - The parent element to search beneath.\n * @param currentElement - The descendant of rootElement to start the search at. This element is the first one checked,\n * and iteration continues forward. Typical use passes rootElement.firstChild.\n * @param includeElementsInFocusZones - true if traversal should go into FocusZone descendants.\n * @param checkNode - Include currentElement in search when true. Defaults to true.\n * @public\n */\nexport function getFirstTabbable(\n rootElement: HTMLElement,\n currentElement: HTMLElement,\n includeElementsInFocusZones?: boolean,\n checkNode: boolean = true\n): HTMLElement | null {\n return getNextElement(\n rootElement,\n currentElement,\n checkNode,\n false /*suppressParentTraversal*/,\n false /*suppressChildTraversal*/,\n includeElementsInFocusZones,\n false /*allowFocusRoot*/,\n true /*tabbable*/\n );\n}\n\n/**\n * Gets the last tabbable element.\n * The difference between focusable and tabbable is that tabbable elements are focusable elements that also have tabIndex != -1.\n * @param rootElement - The parent element to search beneath.\n * @param currentElement - The descendant of rootElement to start the search at. This element is the first one checked,\n * and iteration continues in reverse. Typical use passes rootElement.lastChild.\n * @param includeElementsInFocusZones - true if traversal should go into FocusZone descendants.\n * @param checkNode - Include currentElement in search when true. Defaults to true.\n * @public\n */\nexport function getLastTabbable(\n rootElement: HTMLElement,\n currentElement: HTMLElement,\n includeElementsInFocusZones?: boolean,\n checkNode: boolean = true\n): HTMLElement | null {\n return getPreviousElement(\n rootElement,\n currentElement,\n checkNode,\n false /*suppressParentTraversal*/,\n true /*traverseChildren*/,\n includeElementsInFocusZones,\n false /*allowFocusRoot*/,\n true /*tabbable*/\n );\n}\n\n/**\n * Attempts to focus the first focusable element that is a child or child's child of the rootElement.\n *\n * @public\n * @param rootElement - Element to start the search for a focusable child.\n * @returns True if focus was set, false if it was not.\n */\nexport function focusFirstChild(rootElement: HTMLElement): boolean {\n let element: HTMLElement | null = getNextElement(rootElement, rootElement, true, false, false, true);\n\n if (element) {\n focusAsync(element);\n return true;\n }\n return false;\n}\n\n/**\n * Traverse to find the previous element.\n * If tabbable is true, the element must have tabIndex != -1.\n *\n * @public\n */\nexport function getPreviousElement(\n rootElement: HTMLElement,\n currentElement: HTMLElement | null,\n checkNode?: boolean,\n suppressParentTraversal?: boolean,\n traverseChildren?: boolean,\n includeElementsInFocusZones?: boolean,\n allowFocusRoot?: boolean,\n tabbable?: boolean\n): HTMLElement | null {\n if (!currentElement || (!allowFocusRoot && currentElement === rootElement)) {\n return null;\n }\n\n let isCurrentElementVisible = isElementVisible(currentElement);\n\n // Check its children.\n if (\n traverseChildren &&\n isCurrentElementVisible &&\n (includeElementsInFocusZones || !(isElementFocusZone(currentElement) || isElementFocusSubZone(currentElement)))\n ) {\n const childMatch = getPreviousElement(\n rootElement,\n currentElement.lastElementChild as HTMLElement,\n true,\n true,\n true,\n includeElementsInFocusZones,\n allowFocusRoot,\n tabbable\n );\n\n if (childMatch) {\n if ((tabbable && isElementTabbable(childMatch, true)) || !tabbable) {\n return childMatch;\n }\n\n const childMatchSiblingMatch = getPreviousElement(\n rootElement,\n childMatch.previousElementSibling as HTMLElement,\n true,\n true,\n true,\n includeElementsInFocusZones,\n allowFocusRoot,\n tabbable\n );\n if (childMatchSiblingMatch) {\n return childMatchSiblingMatch;\n }\n\n let childMatchParent = childMatch.parentElement;\n\n // At this point if we have not found any potential matches\n // start looking at the rest of the subtree under the currentParent.\n // NOTE: We do not want to recurse here because doing so could\n // cause elements to get skipped.\n while (childMatchParent && childMatchParent !== currentElement) {\n const childMatchParentMatch = getPreviousElement(\n rootElement,\n childMatchParent.previousElementSibling as HTMLElement,\n true,\n true,\n true,\n includeElementsInFocusZones,\n allowFocusRoot,\n tabbable\n );\n\n if (childMatchParentMatch) {\n return childMatchParentMatch;\n }\n\n childMatchParent = childMatchParent.parentElement;\n }\n }\n }\n\n // Check the current node, if it's not the first traversal.\n if (checkNode && isCurrentElementVisible && isElementTabbable(currentElement, tabbable)) {\n return currentElement;\n }\n\n // Check its previous sibling.\n const siblingMatch = getPreviousElement(\n rootElement,\n currentElement.previousElementSibling as HTMLElement,\n true,\n true,\n true,\n includeElementsInFocusZones,\n allowFocusRoot,\n tabbable\n );\n\n if (siblingMatch) {\n return siblingMatch;\n }\n\n // Check its parent.\n if (!suppressParentTraversal) {\n return getPreviousElement(\n rootElement,\n currentElement.parentElement,\n true,\n false,\n false,\n includeElementsInFocusZones,\n allowFocusRoot,\n tabbable\n );\n }\n\n return null;\n}\n\n/**\n * Traverse to find the next focusable element.\n * If tabbable is true, the element must have tabIndex != -1.\n *\n * @public\n * @param checkNode - Include currentElement in search when true.\n */\nexport function getNextElement(\n rootElement: HTMLElement,\n currentElement: HTMLElement | null,\n checkNode?: boolean,\n suppressParentTraversal?: boolean,\n suppressChildTraversal?: boolean,\n includeElementsInFocusZones?: boolean,\n allowFocusRoot?: boolean,\n tabbable?: boolean\n): HTMLElement | null {\n if (!currentElement || (currentElement === rootElement && suppressChildTraversal && !allowFocusRoot)) {\n return null;\n }\n\n let isCurrentElementVisible = isElementVisible(currentElement);\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\n // Check its children.\n if (\n !suppressChildTraversal &&\n isCurrentElementVisible &&\n (includeElementsInFocusZones || !(isElementFocusZone(currentElement) || isElementFocusSubZone(currentElement)))\n ) {\n const childMatch = getNextElement(\n rootElement,\n currentElement.firstElementChild as HTMLElement,\n true,\n true,\n false,\n includeElementsInFocusZones,\n allowFocusRoot,\n tabbable\n );\n\n if (childMatch) {\n return childMatch;\n }\n }\n\n if (currentElement === rootElement) {\n return null;\n }\n\n // Check its sibling.\n const siblingMatch = getNextElement(\n rootElement,\n currentElement.nextElementSibling as HTMLElement,\n true,\n true,\n false,\n includeElementsInFocusZones,\n allowFocusRoot,\n tabbable\n );\n\n if (siblingMatch) {\n return siblingMatch;\n }\n\n if (!suppressParentTraversal) {\n return getNextElement(\n rootElement,\n currentElement.parentElement,\n false,\n false,\n true,\n includeElementsInFocusZones,\n allowFocusRoot,\n tabbable\n );\n }\n\n return null;\n}\n\n/**\n * Determines if an element is visible.\n *\n * @public\n */\nexport function isElementVisible(element: HTMLElement | undefined | null): boolean {\n // If the element is not valid, return false.\n if (!element || !element.getAttribute) {\n return false;\n }\n\n const visibilityAttribute = element.getAttribute(IS_VISIBLE_ATTRIBUTE);\n\n // If the element is explicitly marked with the visibility attribute, return that value as boolean.\n if (visibilityAttribute !== null && visibilityAttribute !== undefined) {\n return visibilityAttribute === 'true';\n }\n\n // Fallback to other methods of determining actual visibility.\n return (\n element.offsetHeight !== 0 ||\n element.offsetParent !== null ||\n // tslint:disable-next-line:no-any\n (element as any).isVisible === true\n ); // used as a workaround for testing.\n}\n\n/**\n * Determines if an element can receive focus programmatically or via a mouse click.\n * If checkTabIndex is true, additionally checks to ensure the element can be focused with the tab key, meaning tabIndex != -1.\n *\n * @public\n */\nexport function isElementTabbable(element: HTMLElement, checkTabIndex?: boolean): boolean {\n // If this element is null or is disabled, it is not considered tabbable.\n if (!element || (element as HTMLButtonElement).disabled) {\n return false;\n }\n\n let tabIndex = 0;\n let tabIndexAttributeValue = null;\n\n if (element && element.getAttribute) {\n tabIndexAttributeValue = element.getAttribute('tabIndex');\n\n if (tabIndexAttributeValue) {\n tabIndex = parseInt(tabIndexAttributeValue, 10);\n }\n }\n\n let isFocusableAttribute = element.getAttribute ? element.getAttribute(IS_FOCUSABLE_ATTRIBUTE) : null;\n let isTabIndexSet = tabIndexAttributeValue !== null && tabIndex >= 0;\n\n const result =\n !!element &&\n isFocusableAttribute !== 'false' &&\n (element.tagName === 'A' ||\n element.tagName === 'BUTTON' ||\n element.tagName === 'INPUT' ||\n element.tagName === 'TEXTAREA' ||\n isFocusableAttribute === 'true' ||\n isTabIndexSet);\n\n return checkTabIndex ? tabIndex !== -1 && result : result;\n}\n\n/**\n * Determines if a given element is a focus zone.\n *\n * @public\n */\nexport function isElementFocusZone(element?: HTMLElement): boolean {\n return !!(element && element.getAttribute && !!element.getAttribute(FOCUSZONE_ID_ATTRIBUTE));\n}\n\n/**\n * Determines if a given element is a focus sub zone.\n *\n * @public\n */\nexport function isElementFocusSubZone(element?: HTMLElement): boolean {\n return !!(element && element.getAttribute && element.getAttribute(FOCUSZONE_SUB_ATTRIBUTE) === 'true');\n}\n\n/**\n * Determines if an element, or any of its children, contain focus.\n *\n * @public\n */\nexport function doesElementContainFocus(element: HTMLElement): boolean {\n let document = getDocument(element);\n let currentActiveElement: HTMLElement | undefined = document && (document.activeElement as HTMLElement);\n if (currentActiveElement && elementContains(element, currentActiveElement)) {\n return true;\n }\n return false;\n}\n\n/**\n * Determines if an, or any of its ancestors, sepcificies that it doesn't want focus to wrap\n * @param element - element to start searching from\n * @param noWrapDataAttribute - the no wrap data attribute to match (either)\n * @returns true if focus should wrap, false otherwise\n */\nexport function shouldWrapFocus(element: HTMLElement, noWrapDataAttribute: 'data-no-vertical-wrap' | 'data-no-horizontal-wrap'): boolean {\n return elementContainsAttribute(element, noWrapDataAttribute) === 'true' ? false : true;\n}\n\nlet targetToFocusOnNextRepaint: HTMLElement | { focus: () => void } | null | undefined = undefined;\n\n/**\n * Sets focus to an element asynchronously. The focus will be set at the next browser repaint,\n * meaning it won't cause any extra recalculations. If more than one focusAsync is called during one frame,\n * only the latest called focusAsync element will actually be focused\n * @param element - The element to focus\n */\nexport function focusAsync(element: HTMLElement | { focus: () => void } | undefined | null): void {\n if (element) {\n // 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\n targetToFocusOnNextRepaint = element;\n\n const win = getWindow(element as Element);\n\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(() => {\n targetToFocusOnNextRepaint && targetToFocusOnNextRepaint.focus();\n\n // We are done focusing for this frame, so reset the queued focus element\n targetToFocusOnNextRepaint = undefined;\n });\n }\n }\n}\n\n/**\n * Finds the closest focusable element via an index path from a parent. See\n * `getElementIndexPath` for getting an index path from an element to a child.\n */\nexport function getFocusableByIndexPath(parent: HTMLElement, path: number[]): HTMLElement | undefined {\n let element = parent;\n\n for (const index of path) {\n const nextChild = element.children[Math.min(index, element.children.length - 1)] as HTMLElement;\n\n if (!nextChild) {\n break;\n }\n element = nextChild;\n }\n\n element =\n isElementTabbable(element) && isElementVisible(element)\n ? element\n : getNextElement(parent, element, true) || getPreviousElement(parent, element)!;\n\n return element as HTMLElement;\n}\n\n/**\n * Finds the element index path from a parent element to a child element.\n *\n * If you had this node structure: \"A has children [B, C] and C has child D\",\n * the index path from A to D would be [1, 0], or `parent.chidren[1].children[0]`.\n */\nexport function getElementIndexPath(fromElement: HTMLElement, toElement: HTMLElement): number[] {\n const path: number[] = [];\n\n while (toElement && fromElement && toElement !== fromElement) {\n const parent = getParent(toElement, true);\n\n if (parent === null) {\n return [];\n }\n\n path.unshift(Array.prototype.indexOf.call(parent.children, toElement));\n toElement = parent;\n }\n\n return path;\n}\n","module.exports = function (exec) {\n try {\n return !!exec();\n } catch (e) {\n return true;\n }\n};\n","// Utilities\n//\n'use strict';\n\n\nfunction _class(obj) { return Object.prototype.toString.call(obj); }\n\nfunction isString(obj) { return _class(obj) === '[object String]'; }\n\nvar _hasOwnProperty = Object.prototype.hasOwnProperty;\n\nfunction has(object, key) {\n return _hasOwnProperty.call(object, key);\n}\n\n// Merge objects\n//\nfunction assign(obj /*from1, from2, from3, ...*/) {\n var sources = Array.prototype.slice.call(arguments, 1);\n\n sources.forEach(function (source) {\n if (!source) { return; }\n\n if (typeof source !== 'object') {\n throw new TypeError(source + 'must be object');\n }\n\n Object.keys(source).forEach(function (key) {\n obj[key] = source[key];\n });\n });\n\n return obj;\n}\n\n// Remove element from array and put another array at those position.\n// Useful for some operations with tokens\nfunction arrayReplaceAt(src, pos, newElements) {\n return [].concat(src.slice(0, pos), newElements, src.slice(pos + 1));\n}\n\n////////////////////////////////////////////////////////////////////////////////\n\nfunction isValidEntityCode(c) {\n /*eslint no-bitwise:0*/\n // broken sequence\n if (c >= 0xD800 && c <= 0xDFFF) { return false; }\n // never used\n if (c >= 0xFDD0 && c <= 0xFDEF) { return false; }\n if ((c & 0xFFFF) === 0xFFFF || (c & 0xFFFF) === 0xFFFE) { return false; }\n // control codes\n if (c >= 0x00 && c <= 0x08) { return false; }\n if (c === 0x0B) { return false; }\n if (c >= 0x0E && c <= 0x1F) { return false; }\n if (c >= 0x7F && c <= 0x9F) { return false; }\n // out of range\n if (c > 0x10FFFF) { return false; }\n return true;\n}\n\nfunction fromCodePoint(c) {\n /*eslint no-bitwise:0*/\n if (c > 0xffff) {\n c -= 0x10000;\n var surrogate1 = 0xd800 + (c >> 10),\n surrogate2 = 0xdc00 + (c & 0x3ff);\n\n return String.fromCharCode(surrogate1, surrogate2);\n }\n return String.fromCharCode(c);\n}\n\n\nvar UNESCAPE_MD_RE = /\\\\([!\"#$%&'()*+,\\-.\\/:;<=>?@[\\\\\\]^_`{|}~])/g;\nvar ENTITY_RE = /&([a-z#][a-z0-9]{1,31});/gi;\nvar UNESCAPE_ALL_RE = new RegExp(UNESCAPE_MD_RE.source + '|' + ENTITY_RE.source, 'gi');\n\nvar DIGITAL_ENTITY_TEST_RE = /^#((?:x[a-f0-9]{1,8}|[0-9]{1,8}))/i;\n\nvar entities = require('./entities');\n\nfunction replaceEntityPattern(match, name) {\n var code = 0;\n\n if (has(entities, name)) {\n return entities[name];\n }\n\n if (name.charCodeAt(0) === 0x23/* # */ && DIGITAL_ENTITY_TEST_RE.test(name)) {\n code = name[1].toLowerCase() === 'x' ?\n parseInt(name.slice(2), 16)\n :\n parseInt(name.slice(1), 10);\n if (isValidEntityCode(code)) {\n return fromCodePoint(code);\n }\n }\n\n return match;\n}\n\n/*function replaceEntities(str) {\n if (str.indexOf('&') < 0) { return str; }\n\n return str.replace(ENTITY_RE, replaceEntityPattern);\n}*/\n\nfunction unescapeMd(str) {\n if (str.indexOf('\\\\') < 0) { return str; }\n return str.replace(UNESCAPE_MD_RE, '$1');\n}\n\nfunction unescapeAll(str) {\n if (str.indexOf('\\\\') < 0 && str.indexOf('&') < 0) { return str; }\n\n return str.replace(UNESCAPE_ALL_RE, function (match, escaped, entity) {\n if (escaped) { return escaped; }\n return replaceEntityPattern(match, entity);\n });\n}\n\n////////////////////////////////////////////////////////////////////////////////\n\nvar HTML_ESCAPE_TEST_RE = /[&<>\"]/;\nvar HTML_ESCAPE_REPLACE_RE = /[&<>\"]/g;\nvar HTML_REPLACEMENTS = {\n '&': '&',\n '<': '<',\n '>': '>',\n '\"': '"'\n};\n\nfunction replaceUnsafeChar(ch) {\n return HTML_REPLACEMENTS[ch];\n}\n\nfunction escapeHtml(str) {\n if (HTML_ESCAPE_TEST_RE.test(str)) {\n return str.replace(HTML_ESCAPE_REPLACE_RE, replaceUnsafeChar);\n }\n return str;\n}\n\n////////////////////////////////////////////////////////////////////////////////\n\nvar REGEXP_ESCAPE_RE = /[.?*+^$[\\]\\\\(){}|-]/g;\n\nfunction escapeRE(str) {\n return str.replace(REGEXP_ESCAPE_RE, '\\\\$&');\n}\n\n////////////////////////////////////////////////////////////////////////////////\n\nfunction isSpace(code) {\n switch (code) {\n case 0x09:\n case 0x20:\n return true;\n }\n return false;\n}\n\n// Zs (unicode class) || [\\t\\f\\v\\r\\n]\nfunction isWhiteSpace(code) {\n if (code >= 0x2000 && code <= 0x200A) { return true; }\n switch (code) {\n case 0x09: // \\t\n case 0x0A: // \\n\n case 0x0B: // \\v\n case 0x0C: // \\f\n case 0x0D: // \\r\n case 0x20:\n case 0xA0:\n case 0x1680:\n case 0x202F:\n case 0x205F:\n case 0x3000:\n return true;\n }\n return false;\n}\n\n////////////////////////////////////////////////////////////////////////////////\n\n/*eslint-disable max-len*/\nvar UNICODE_PUNCT_RE = require('uc.micro/categories/P/regex');\n\n// Currently without astral characters support.\nfunction isPunctChar(ch) {\n return UNICODE_PUNCT_RE.test(ch);\n}\n\n\n// Markdown ASCII punctuation characters.\n//\n// !, \", #, $, %, &, ', (, ), *, +, ,, -, ., /, :, ;, <, =, >, ?, @, [, \\, ], ^, _, `, {, |, }, or ~\n// http://spec.commonmark.org/0.15/#ascii-punctuation-character\n//\n// Don't confuse with unicode punctuation !!! It lacks some chars in ascii range.\n//\nfunction isMdAsciiPunct(ch) {\n switch (ch) {\n case 0x21/* ! */:\n case 0x22/* \" */:\n case 0x23/* # */:\n case 0x24/* $ */:\n case 0x25/* % */:\n case 0x26/* & */:\n case 0x27/* ' */:\n case 0x28/* ( */:\n case 0x29/* ) */:\n case 0x2A/* * */:\n case 0x2B/* + */:\n case 0x2C/* , */:\n case 0x2D/* - */:\n case 0x2E/* . */:\n case 0x2F/* / */:\n case 0x3A/* : */:\n case 0x3B/* ; */:\n case 0x3C/* < */:\n case 0x3D/* = */:\n case 0x3E/* > */:\n case 0x3F/* ? */:\n case 0x40/* @ */:\n case 0x5B/* [ */:\n case 0x5C/* \\ */:\n case 0x5D/* ] */:\n case 0x5E/* ^ */:\n case 0x5F/* _ */:\n case 0x60/* ` */:\n case 0x7B/* { */:\n case 0x7C/* | */:\n case 0x7D/* } */:\n case 0x7E/* ~ */:\n return true;\n default:\n return false;\n }\n}\n\n// Hepler to unify [reference labels].\n//\nfunction normalizeReference(str) {\n // use .toUpperCase() instead of .toLowerCase()\n // here to avoid a conflict with Object.prototype\n // members (most notably, `__proto__`)\n return str.trim().replace(/\\s+/g, ' ').toUpperCase();\n}\n\n////////////////////////////////////////////////////////////////////////////////\n\n// Re-export libraries commonly used in both markdown-it and its plugins,\n// so plugins won't have to depend on them explicitly, which reduces their\n// bundled size (e.g. a browser build).\n//\nexports.lib = {};\nexports.lib.mdurl = require('mdurl');\nexports.lib.ucmicro = require('uc.micro');\n\nexports.assign = assign;\nexports.isString = isString;\nexports.has = has;\nexports.unescapeMd = unescapeMd;\nexports.unescapeAll = unescapeAll;\nexports.isValidEntityCode = isValidEntityCode;\nexports.fromCodePoint = fromCodePoint;\n// exports.replaceEntities = replaceEntities;\nexports.escapeHtml = escapeHtml;\nexports.arrayReplaceAt = arrayReplaceAt;\nexports.isSpace = isSpace;\nexports.isWhiteSpace = isWhiteSpace;\nexports.isMdAsciiPunct = isMdAsciiPunct;\nexports.isPunctChar = isPunctChar;\nexports.escapeRE = escapeRE;\nexports.normalizeReference = normalizeReference;\n","import { IDetailsRowStyleProps, IDetailsRowStyles, ICellStyleProps } from './DetailsRow.types';\nimport {\n AnimationClassNames,\n AnimationStyles,\n HighContrastSelector,\n IStyle,\n getFocusStyle,\n getGlobalClassNames,\n FontWeights\n} from '../../Styling';\nimport { IsFocusVisibleClassName } from '../../Utilities';\n\nexport const DetailsRowGlobalClassNames = {\n root: 'ms-DetailsRow',\n compact: 'ms-DetailsList--Compact', // TODO: in Fabric 7.0 lowercase the 'Compact' for consistency across other components.\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};\nconst IsFocusableSelector = \"[data-is-focusable='true']\";\n\nexport const DEFAULT_CELL_STYLE_PROPS: ICellStyleProps = {\n cellLeftPadding: 12,\n cellRightPadding: 8,\n cellExtraRightPadding: 24\n};\n\n// Source of default row heights to share.\nexport const DEFAULT_ROW_HEIGHTS = {\n rowHeight: 42,\n compactRowHeight: 32\n};\n\n// Constant values\nconst values = {\n ...DEFAULT_ROW_HEIGHTS,\n rowVerticalPadding: 11,\n compactRowVerticalPadding: 6\n};\n\nexport const getStyles = (props: IDetailsRowStyleProps): IDetailsRowStyles => {\n const {\n theme,\n isSelected,\n canSelect,\n droppingClassName,\n anySelected,\n isCheckVisible,\n checkboxCellClassName,\n compact,\n className,\n cellStyleProps = DEFAULT_CELL_STYLE_PROPS,\n enableUpdateAnimations\n } = props;\n\n const { palette, fonts } = theme;\n const { neutralPrimary, white, neutralSecondary, neutralLighter, neutralLight, neutralDark, neutralQuaternaryAlt } = palette;\n const { focusBorder } = theme.semanticColors;\n\n const classNames = getGlobalClassNames(DetailsRowGlobalClassNames, theme);\n\n const colors = {\n // Default\n defaultHeaderText: neutralPrimary,\n defaultMetaText: neutralSecondary,\n defaultBackground: white,\n\n // Default Hover\n defaultHoverHeaderText: neutralDark,\n defaultHoverMetaText: neutralPrimary,\n defaultHoverBackground: neutralLighter,\n\n // Selected\n selectedHeaderText: neutralDark,\n selectedMetaText: neutralPrimary,\n selectedBackground: neutralLight,\n\n // Selected Hover\n selectedHoverHeaderText: neutralDark,\n selectedHoverMetaText: neutralPrimary,\n selectedHoverBackground: neutralQuaternaryAlt,\n\n // Focus\n focusHeaderText: neutralDark,\n focusMetaText: neutralPrimary,\n focusBackground: neutralLight,\n focusHoverBackground: neutralQuaternaryAlt\n };\n\n // Selected row styles\n const selectedStyles: IStyle = [\n getFocusStyle(theme, { inset: -1, borderColor: focusBorder, outlineColor: white }),\n classNames.isSelected,\n {\n color: colors.selectedMetaText,\n background: colors.selectedBackground,\n borderBottom: `1px solid ${white}`,\n selectors: {\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 // Selected State hover\n '&:hover': {\n background: colors.selectedHoverBackground,\n color: colors.selectedHoverMetaText,\n selectors: {\n // Selected State hover meta cell\n [`.${classNames.cell} ${HighContrastSelector}`]: {\n color: 'HighlightText',\n selectors: {\n '> a': {\n color: 'HighlightText'\n }\n }\n },\n\n // Selected State hover Header cell\n [`.${classNames.isRowHeader}`]: {\n color: colors.selectedHoverHeaderText,\n selectors: {\n [HighContrastSelector]: {\n color: 'HighlightText'\n }\n }\n },\n\n // Ensure high-contrast mode overrides default hover background\n [HighContrastSelector]: {\n background: 'Highlight'\n }\n }\n },\n\n // Focus state\n '&:focus': {\n background: colors.focusBackground,\n selectors: {\n // Selected State hover meta cell\n [`.${classNames.cell}`]: {\n color: colors.focusMetaText,\n selectors: {\n [HighContrastSelector]: {\n color: 'HighlightText',\n selectors: {\n '> a': {\n color: 'HighlightText'\n }\n }\n }\n }\n },\n\n // Row header cell\n [`.${classNames.isRowHeader}`]: {\n color: colors.focusHeaderText,\n selectors: {\n [HighContrastSelector]: {\n color: 'HighlightText'\n }\n }\n },\n\n // Ensure high-contrast mode overrides default focus background\n [HighContrastSelector]: {\n background: 'Highlight'\n }\n }\n },\n\n [HighContrastSelector]: {\n background: 'Highlight',\n color: 'HighlightText',\n MsHighContrastAdjust: 'none',\n selectors: {\n a: {\n color: 'HighlightText'\n }\n }\n },\n\n // Focus and hover state\n '&:focus:hover': {\n background: colors.focusHoverBackground\n }\n }\n }\n ];\n\n const cannotSelectStyles: IStyle = [\n classNames.isContentUnselectable,\n {\n userSelect: 'none',\n cursor: 'default'\n }\n ];\n\n const rootCompactStyles: IStyle = {\n minHeight: values.compactRowHeight,\n border: 0\n };\n\n const cellCompactStyles: IStyle = {\n minHeight: values.compactRowHeight,\n paddingTop: values.compactRowVerticalPadding,\n paddingBottom: values.compactRowVerticalPadding,\n paddingLeft: `${cellStyleProps.cellLeftPadding}px`\n };\n\n const defaultCellStyles: IStyle = [\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: {\n '& > button': {\n maxWidth: '100%'\n },\n\n [IsFocusableSelector]: getFocusStyle(theme, { inset: -1, borderColor: neutralSecondary, outlineColor: white })\n }\n },\n\n isSelected && {\n selectors: {\n [HighContrastSelector]: {\n background: 'Highlight',\n color: 'HighlightText',\n MsHighContrastAdjust: 'none',\n selectors: {\n a: {\n color: 'HighlightText'\n }\n }\n }\n }\n },\n\n compact && cellCompactStyles\n ];\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 display: 'inline-flex', // This ensures that the row always tries to consume is minimum width and does not compress.\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: {\n [`.${classNames.listCellFirstChild} &:before`]: {\n display: 'none'\n },\n\n '&:hover': {\n background: colors.defaultHoverBackground,\n color: colors.defaultHoverMetaText,\n selectors: {\n [`.${classNames.isRowHeader}`]: {\n color: colors.defaultHoverHeaderText\n }\n }\n },\n\n [`&:hover .${classNames.check}`]: {\n opacity: 1\n },\n\n [`.${IsFocusVisibleClassName} &:focus .${classNames.check}`]: {\n opacity: 1\n }\n }\n },\n isSelected && selectedStyles,\n !canSelect && cannotSelectStyles,\n compact && rootCompactStyles,\n className\n ],\n\n cellUnpadded: {\n paddingRight: `${cellStyleProps.cellRightPadding}px`\n },\n\n cellPadded: {\n paddingRight: `${cellStyleProps.cellExtraRightPadding + cellStyleProps.cellRightPadding}px`,\n selectors: {\n [`&.${classNames.cellCheck}`]: {\n paddingRight: 0\n }\n }\n },\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: {\n [HighContrastSelector]: {\n color: 'HighlightText'\n }\n }\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","import * as React from 'react';\nimport { IStyle, ITheme } from '../../Styling';\nimport { IStyleFunctionOrObject } from '../../Utilities';\n\n/**\n * {@docCategory Image}\n */\nexport interface IImage {}\n\n/**\n * {@docCategory Image}\n */\nexport interface IImageProps extends React.ImgHTMLAttributes {\n /**\n * Call to provide customized styling that will layer on top of the variant rules\n */\n styles?: IStyleFunctionOrObject;\n\n /**\n * Theme provided by HOC.\n */\n theme?: ITheme;\n\n /**\n * Additional css class to apply to the Component\n * @defaultvalue undefined\n */\n className?: string;\n\n /**\n * If true, fades the image in when loaded.\n * @defaultvalue true\n */\n shouldFadeIn?: boolean;\n\n /**\n * If true, the image starts as visible and is hidden on error. Otherwise, the image is hidden until\n * it is successfully loaded. This disables shouldFadeIn.\n * @defaultvalue false;\n */\n shouldStartVisible?: boolean;\n\n /**\n * Used to determine how the image is scaled and cropped to fit the frame.\n *\n * @defaultvalue If both dimensions are provided, then the image is fit using ImageFit.scale.\n * Otherwise, the image won't be scaled or cropped.\n */\n imageFit?: ImageFit;\n\n /**\n * Deprecated at v1.3.6, to replace the src in case of errors, use `onLoadingStateChange` instead and\n * rerender the Image with a difference src.\n * @deprecated Use `onLoadingStateChange` instead and\n * rerender the Image with a difference src.\n */\n errorSrc?: string;\n\n /**\n * If true, the image frame will expand to fill its parent container.\n */\n maximizeFrame?: boolean;\n\n /**\n * Optional callback method for when the image load state has changed.\n * The 'loadState' parameter indicates the current state of the Image.\n */\n onLoadingStateChange?: (loadState: ImageLoadState) => void;\n\n /**\n * Specifies the cover style to be used for this image. If not\n * specified, this will be dynamically calculated based on the\n * aspect ratio for the image.\n */\n coverStyle?: ImageCoverStyle;\n}\n\n/**\n * The possible methods that can be used to fit the image.\n * {@docCategory Image}\n */\nexport enum ImageFit {\n /**\n * The image is not scaled. The image is centered and cropped within the content box.\n */\n center = 0,\n\n /**\n * The image is scaled to maintain its aspect ratio while being fully contained within the frame. The image will\n * be centered horizontally and vertically within the frame. The space in the top and bottom or in the sides of\n * the frame will be empty depending on the difference in aspect ratio between the image and the frame.\n */\n contain = 1,\n\n /**\n * The image is scaled to maintain its aspect ratio while filling the frame. Portions of the image will be cropped from\n * the top and bottom, or from the sides, depending on the difference in aspect ratio between the image and the frame.\n */\n cover = 2,\n\n /**\n * Neither the image nor the frame are scaled. If their sizes do not match, the image will either be cropped or the\n * frame will have empty space.\n */\n none = 3,\n\n /**\n * The image will be centered horizontally and vertically within the frame and maintains its aspect ratio. It will\n * behave as ImageFit.center if the image's natural height or width is less than the Image frame's height or width,\n * but if both natural height and width are larger than the frame it will behave as ImageFit.cover.\n */\n centerCover = 4,\n\n /**\n * The image will be centered horizontally and vertically within the frame and maintains its aspect ratio. It will\n * behave as ImageFit.center if the image's natural height and width is less than the Image frame's height and width,\n * but if either natural height or width are larger than the frame it will behave as ImageFit.contain.\n */\n centerContain = 5\n}\n\n/**\n * The cover style to be used on the image\n * {@docCategory Image}\n */\nexport enum ImageCoverStyle {\n /**\n * The image will be shown at 100% height of container and the width will be scaled accordingly\n */\n landscape = 0,\n\n /**\n * The image will be shown at 100% width of container and the height will be scaled accordingly\n */\n portrait = 1\n}\n\n/**\n * {@docCategory Image}\n */\nexport enum ImageLoadState {\n /**\n * The image has not yet been loaded, and there is no error yet.\n */\n notLoaded = 0,\n\n /**\n * The image has been loaded successfully.\n */\n loaded = 1,\n\n /**\n * An error has been encountered while loading the image.\n */\n error = 2,\n\n /**\n * Deprecated at v1.3.6, to replace the src in case of errors, use `onLoadingStateChange` instead\n * and rerender the Image with a difference src.\n * @deprecated Use `onLoadingStateChange` instead\n * and rerender the Image with a difference src.\n */\n errorLoaded = 3\n}\n\n/**\n * {@docCategory Image}\n */\nexport interface IImageStyleProps {\n /**\n * Accept theme prop.\n */\n theme: ITheme;\n\n /**\n * Accept custom classNames\n */\n className?: string;\n\n /**\n * If true, the image frame will expand to fill its parent container.\n */\n maximizeFrame?: boolean;\n\n /**\n * If true, the image is loaded\n */\n isLoaded?: boolean;\n\n /**\n * If true, fades the image in when loaded.\n * @defaultvalue true\n */\n shouldFadeIn?: boolean;\n\n /**\n * If true, the image starts as visible and is hidden on error. Otherwise, the image is hidden until\n * it is successfully loaded. This disables shouldFadeIn.\n * @defaultvalue false;\n */\n shouldStartVisible?: boolean;\n\n /**\n * If true the image is coverStyle landscape instead of portrait\n */\n isLandscape?: boolean;\n\n /**\n * ImageFit booleans for center, cover, contain, centerContain, centerCover, none\n */\n isCenter?: boolean;\n isContain?: boolean;\n isCover?: boolean;\n isCenterContain?: boolean;\n isCenterCover?: boolean;\n isNone?: boolean;\n\n /**\n * if true image load is in error\n */\n isError?: boolean;\n\n /**\n * if true, imageFit is undefined\n */\n isNotImageFit?: boolean;\n\n /**\n * Image width value\n */\n width?: number | string;\n\n /**\n * Image height value\n */\n height?: number | string;\n}\n\n/**\n * {@docCategory Image}\n */\nexport interface IImageStyles {\n /**\n * Style set for the root div element.\n */\n root: IStyle;\n /**\n * Style set for the img element.\n */\n image: IStyle;\n}\n","module.exports = function (it) {\n return typeof it === 'object' ? it !== null : typeof it === 'function';\n};\n","import * as React from \"react\";\r\n\r\n/** A shorthand type-alias to write less fugly TS syntax */\r\nexport type Fun = (_:a) => b\r\n\r\n/** An action is an updater over an object `a`.\r\ne.g.\r\n\r\n```javascript\r\nconst increaseAge : Action = (p: Person) =>\r\n ({...p, age: p.age+1})\r\n\r\nconst setAge : Fun> = (newAge) => (p) => ({...p, age:newAge})\r\n```\r\n*/\r\nexport type Action = Fun\r\n\r\n/** The terminal type of Typescript. A type synonym for the type of the **empty object** */\r\nexport type Unit = {}\r\n\r\n/** Is the reverse function composition operator. */\r\nexport const then = (f:Fun, g:Fun) : Fun => (x:a) => g(f(x))\r\n\r\n/** @todo refactor to array syntax: \r\n```\r\ntype Pair = [a,b]\r\nexport const fst = (p : P) : a => p[0]\r\nexport const snd = (p : P) : b => p[1]\r\n```\r\n*/\r\nexport type Pair = { fst:a, snd:b }\r\n\r\n/** @deprecated Will move to the array syntax directly. */\r\nexport const mk_pair = (a:a, b:b) => ({ fst:a, snd:b })\r\n\r\n/** the sum of two types, which is the discriminated union and not just the union of those types. \r\n * @todo (Breaking change): move to the shorter definition (with one less .v access):\r\n * ```typescript\r\n * export type Sum_ = {kind: \"l\", v : l} | {kind: \"r\", v: r} \r\n * ```\r\n*/\r\nexport interface Sum { v: { kind:\"l\", v:l } | { kind:\"r\", v:r } }\r\n\r\n/** is the left injection (constructor) of the Sum */\r\nexport const inl = (l:l) : Sum => ({ v: { kind:\"l\", v:l } })\r\n\r\n/** is the right injection (constructor) of the Sum */\r\nexport const inr = (r:r) : Sum => ({ v: { kind:\"r\", v:r } })\r\n\r\n/** A way to deconstruct a [[Sum]] to any value of type `c`. \r\n * @param onL the function to apply in case the Sum is left\r\n * @param onR the function to apply in case the Sum is right\r\n*/\r\nexport const deconstruct = (onL : Fun, onR: Fun, v: Sum): c => \r\n v.v.kind == \"l\" ? onL(v.v.v) : onR(v.v.v)\r\n\r\n/**\r\n * This datatype signals a \"box\" that *may* or *may not* contain a value of type a.\r\n * If its kind is `l`, then the box is empty.\r\n * If its kind is `r`, the box has a value of type `a`.\r\n * @todo Since we have the built-in `undefined` and TS can be strict on it, we can perhaps move on it instead of `Option`?\r\n */\r\nexport type Option = Sum\r\n\r\n/** The empty \"box\". \r\n * Left constructor of Option. */\r\nexport const none = function() : Option { return inl({}) }\r\n\r\n/** Creates a \"box\" and puts inside a value `v` of type `a`.\r\n * Right constructor of Option. */\r\nexport const some = function(v:a) : Option { return inr(v) }\r\n\r\n/** Applies a function over an [[Option]] \"box\".\r\n * If the original box is empty, the empty box is returned.\r\n * If the original box is full, its original contents are altered by `f` and placed into a new box, which is returned.\r\n * @param f The function to transform the value inside the box\r\n * @param o The original box\r\n */\r\nexport const mapO = (f : Fun, o: Option) : Option =>\r\n o.v.kind == \"r\" ? some(f(o.v.v)) : none()\r\n\r\n/**\r\n * Run a command `f` passing the contents of the [[Option]] box.\r\n * In case the box is empty, the `onSome` call does nothing (no-op).\r\n */\r\nexport const onSome : (f : Fun, o: Option) => void = mapO \r\n\r\n/** Tears up the outer [[Option]] box and returns its contents.\r\n * @param def In case the box is empty, this **default** value is returned instead.\r\n * @param o The box to tear up.\r\n */\r\nexport const fromOption = function(def: a, o : Option) : a {\r\n return o.v.kind == \"r\" ? o.v.v : def\r\n}\r\n\r\n/** Common HTML Options of widgets\r\n All of them are optional.\r\n*/\r\nexport type Options = Partial<{\r\n /** @deprecated */\r\n readonly:boolean\r\n /** @deprecated */\r\n autofocus:boolean\r\n /** Must be unique across the React application. React requires it. */\r\n key:string\r\n /** @deprecated */\r\n className:string\r\n /** @deprecated */\r\n role:string\r\n /** @deprecated */\r\n style:React.CSSProperties\r\n /** @deprecated */\r\n id:string\r\n /** @deprecated */\r\n extraProperties:{}\r\n}>\r\n\r\n/** Does two undefined checks, both on the existence of the object and the existence of \r\n * the property of the object\r\n * @deprecated for internal-use only, will be unexported later\r\n */\r\nexport const option = (k:k, o?:t) : t[k] | undefined =>\r\n o ? o[k] : undefined\r\n\r\n/** The basic structure of a widget, which contains a callback function\r\n * and which is renderable.\r\n * \r\n * It is the interface to be implemented when creating a custom widget using [[mkWidget]].\r\n */\r\nexport interface WidgetBase { run:(on_done:(output:o) => void) => JSX.Element }\r\n\r\n/** Is an extension of WidgetBase, plus a series of very important methods,\r\n * that simplify working/combining callbacks.\r\n */\r\nexport interface Widget extends WidgetBase {\r\n /** Wraps the `JSX.Element` of the internal widget in some extra markup.\r\n * This is a visual decorator only.\r\n * This has no impact on the data flow.\r\n * \r\n * e.g.\r\n * ```javascript\r\n * w.wrapHTML(w => {w}
)\r\n * ```\r\n * *\r\n * The given `JSX.Element` *must* appear in the returned value, otherwise\r\n * the widget will, effectively, stop working and producing data.\r\n * \r\n * e.g. that will cause a lot of issues and damage because we have killed the\r\n * widget in a misguided attempt to make it pretty\r\n * ```javascript\r\n * w.wrapHTML(w => )\r\n * ```\r\n */\r\n wrapHTML:(f:Action) => Widget,\r\n\r\n /** Maps the data output value of the Widget, \r\n * @param f The function has only access to the output result `o2` and based on its value can replace with a new result `o2`.\r\n * The function `f` however cannot alter the Widget/control/visual flow and replace it with a new widget or nothing inside there.\r\n */\r\n map:(f:Fun) => Widget,\r\n\r\n /** After the callee widget `Widget` `render`s and `run`s, its output value will be tested by the function `p`.\r\n * If this test of `p(o)` fails, the widget will not propagate its data flow to the next widget, but instead will act as a `never` widget.\r\n * There is a big difference compared to [[onlyIf]], because upon a failed test, the inner widget does not even render/run: i.e. a `nothing` widget.\r\n */\r\n filter:(p:Fun) => Widget,\r\n \r\n /** @deprecated */\r\n then:(k:Fun>) => Widget,\r\n \r\n /** Forces a widget to fake any arbitrary output, by **never** returning it. */\r\n never:() => Widget,\r\n}\r\n\r\n/** Is the smart constructor which adds all the utility methods on top of a [[WidgetBase]] in order to create a [[Widget]]. */\r\nexport const mkWidget = function(w:WidgetBase) : Widget {\r\n return mk_widget(w)\r\n}\r\n\r\n/** @deprecated User [[wrapHTML]] instead. */\r\nexport const jsxToWidget = function(jsx:JSX.Element) : Widget {\r\n return mkWidget({run: _ => jsx})\r\n}\r\n\r\n/** @deprecated Use [[mkWidget]] instead. */\r\nexport const mk_widget = ,o>(w:w) : Widget =>\r\n ({\r\n run:w.run,\r\n wrapHTML:function(f:Action) { return wrapHTML(f)(this) },\r\n map:function(f:Fun) { return map(f)(this) },\r\n filter:function(p:Fun) { return filter(p)(this) },\r\n then:function(k:Fun>) { return bind(this, k) },\r\n never:function() { return never(this) }\r\n })\r\n\r\n/** A widget that depends on some input. */\r\nexport type IOWidget = (input:i) => Widget\r\n\r\n/** This is the empty widget with no visuals and with no data flow. */\r\nexport const nothing = function() : Widget {\r\n // Note: `nothing()` cannot become a polymorphic constant, because TS does not support that (yet).\r\n return mk_widget({\r\n run:(on_done_transform:(output:o) => void) : JSX.Element => {\r\n return null!\r\n }\r\n }) }\r\n\r\n/** internal only */\r\nconst never_io = (inner_widget:IOWidget) : IOWidget =>\r\n (input:i) => mk_widget({\r\n run:(on_done_transform:(output:o2) => void) =>\r\n inner_widget(input).run(_ => {})\r\n })\r\n\r\n/** internal only */\r\nconst never = function(inner_widget:Widget<{}>) : Widget {\r\n return never_io(_ => inner_widget)({})\r\n}\r\n\r\n/** internal only */\r\nconst wrapHTML = function(wrap:Action) : Action> {\r\n return widget_a => mk_widget({\r\n ...widget_a,\r\n run:(on_done:(output:a) => void) =>\r\n wrap(widget_a.run(res_a => on_done(res_a))) }) }\r\n\r\n/** @todo just implementation, should not be exported, internal only */\r\nexport const map = (f:Fun) : Fun, Widget> => widget_a => \r\n mk_widget({\r\n ...widget_a,\r\n run:(on_done_b:(output_b:b) => void) =>\r\n widget_a.run(res_a => on_done_b(f(res_a))) })\r\n\r\n/** internal only */\r\ninterface JoinerProps {\r\n widget_a2:Widget>\r\n on_done_a:(output_a:a) => void\r\n}\r\n/** internal only */\r\ninterface JoinerState {\r\n inner_widget:Widget | undefined\r\n}\r\n/** internal only */\r\nclass Joiner extends React.Component, JoinerState> {\r\n constructor(props:JoinerProps, context:any) {\r\n super(props, context)\r\n\r\n this.state = { inner_widget:undefined }\r\n }\r\n\r\n render() {\r\n return <>\r\n {this.props.widget_a2.run(widget_a => this.setState(s => ({...s, inner_widget:widget_a})))}\r\n {this.state.inner_widget ?\r\n this.state.inner_widget.run(this.props.on_done_a)\r\n : null}\r\n \r\n }\r\n}\r\n\r\n/** internal only */\r\nconst join = function(widget_a2:Widget>) : Widget {\r\n return mk_widget({\r\n run:(on_done_a:(output_a:a) => void) =>\r\n React.createElement>(Joiner, {widget_a2, on_done_a}) })\r\n}\r\n\r\n/** @todo just implementation, should not be exported, internal only */\r\nexport const bind = (widget_a:Widget, widget_b_from_a:Fun>) : Widget =>\r\n join(map(widget_b_from_a)(widget_a))\r\n\r\n/** @todo just implementation, should not be exported, internal only */\r\nexport const filter = function(p:Fun) : Action> {\r\n return inner_widget => ({\r\n ...inner_widget,\r\n run:(on_done:(output:a) => void) =>\r\n inner_widget.run(res_a => p(res_a) ? on_done(res_a) : null) }) }\r\n\r\n\r\n","export * from './components/Icon/index';\n","import { filteredAssign } from './object';\n\n/**\n * An array of events that are allowed on every html element type.\n *\n * @public\n */\nexport const baseElementEvents = [\n 'onCopy',\n 'onCut',\n 'onPaste',\n 'onCompositionEnd',\n 'onCompositionStart',\n 'onCompositionUpdate',\n 'onFocus',\n 'onFocusCapture',\n 'onBlur',\n 'onBlurCapture',\n 'onChange',\n 'onInput',\n 'onSubmit',\n 'onLoad',\n 'onError',\n 'onKeyDown',\n 'onKeyDownCapture',\n 'onKeyPress',\n 'onKeyUp',\n 'onAbort',\n 'onCanPlay',\n 'onCanPlayThrough',\n 'onDurationChange',\n 'onEmptied',\n 'onEncrypted',\n 'onEnded',\n 'onLoadedData',\n 'onLoadedMetadata',\n 'onLoadStart',\n 'onPause',\n 'onPlay',\n 'onPlaying',\n 'onProgress',\n 'onRateChange',\n 'onSeeked',\n 'onSeeking',\n 'onStalled',\n 'onSuspend',\n 'onTimeUpdate',\n 'onVolumeChange',\n 'onWaiting',\n 'onClick',\n 'onClickCapture',\n 'onContextMenu',\n 'onDoubleClick',\n 'onDrag',\n 'onDragEnd',\n 'onDragEnter',\n 'onDragExit',\n 'onDragLeave',\n 'onDragOver',\n 'onDragStart',\n 'onDrop',\n 'onMouseDown',\n 'onMouseDownCapture',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseMove',\n 'onMouseOut',\n 'onMouseOver',\n 'onMouseUp',\n 'onMouseUpCapture',\n 'onSelect',\n 'onTouchCancel',\n 'onTouchEnd',\n 'onTouchMove',\n 'onTouchStart',\n 'onScroll',\n 'onWheel',\n 'onPointerCancel',\n 'onPointerDown',\n 'onPointerEnter',\n 'onPointerLeave',\n 'onPointerMove',\n 'onPointerOut',\n 'onPointerOver',\n 'onPointerUp',\n 'onGotPointerCapture',\n 'onLostPointerCapture'\n];\n\n/**\n * An array of element attributes which are allowed on every html element type.\n *\n * @public\n */\nexport const baseElementProperties = [\n 'accessKey', // global\n 'children', // global\n 'className', // global\n 'contentEditable', // global\n 'dir', // global\n 'draggable', // global\n 'hidden', // global\n 'htmlFor', // global\n 'id', // global\n 'lang', // global\n 'role', // global\n 'style', // global\n 'tabIndex', // global\n 'title', // global\n 'translate', // global\n 'spellCheck', // global\n 'name' // global\n];\n\n/**\n * An array of HTML element properties and events.\n *\n * @public\n */\nexport const htmlElementProperties = baseElementProperties.concat(baseElementEvents);\n\n/**\n * An array of LABEL tag properties and events.\n *\n * @public\n */\nexport const labelProperties = htmlElementProperties.concat([\n 'form' // button, fieldset, input, label, meter, object, output, select, textarea\n]);\n\n/**\n * An array of AUDIO tag properties and events.\n *\n * @public\n */\nexport const audioProperties = htmlElementProperties.concat([\n 'height', // canvas, embed, iframe, img, input, object, video\n 'loop', // audio, video\n 'muted', // audio, video\n 'preload', // audio, video\n 'src', // audio, embed, iframe, img, input, script, source, track, video\n 'width' // canvas, embed, iframe, img, input, object, video\n]);\n\n/**\n * An array of VIDEO tag properties and events.\n *\n * @public\n */\nexport const videoProperties = audioProperties.concat([\n 'poster' // video\n]);\n\n/**\n * An array of OL tag properties and events.\n *\n * @public\n */\nexport const olProperties = htmlElementProperties.concat([\n 'start' // ol\n]);\n\n/**\n * An array of LI tag properties and events.\n *\n * @public\n */\nexport const liProperties = htmlElementProperties.concat([\n 'value' // button, input, li, option, meter, progress, param\n]);\n\n/**\n * An array of A tag properties and events.\n *\n * @public\n */\nexport const anchorProperties = htmlElementProperties.concat([\n 'download', // a, area\n 'href', // a, area, base, link\n 'hrefLang', // a, area, link\n 'media', // a, area, link, source, style\n 'rel', // a, area, link\n 'target', // a, area, base, form\n 'type' // a, button, input, link, menu, object, script, source, style\n]);\n\n/**\n * An array of BUTTON tag properties and events.\n *\n * @public\n */\nexport const buttonProperties = htmlElementProperties.concat([\n 'autoFocus', // button, input, select, textarea\n 'disabled', // button, fieldset, input, optgroup, option, select, textarea\n 'form', // button, fieldset, input, label, meter, object, output, select, textarea\n 'formAction', // input, button\n 'formEncType', // input, button\n 'formMethod', // input, button\n 'formNoValidate', // input, button\n 'formTarget', // input, button\n 'type', // a, button, input, link, menu, object, script, source, style\n 'value' // button, input, li, option, meter, progress, param,\n]);\n\n/**\n * An array of INPUT tag properties and events.\n *\n * @public\n */\nexport const inputProperties = buttonProperties.concat([\n 'accept', // input\n 'alt', // area, img, input\n 'autoComplete', // form, input\n 'checked', // input\n 'dirname', // input, textarea\n 'form', // button, fieldset, input, label, meter, object, output, select, textarea\n 'height', // canvas, embed, iframe, img, input, object, video\n 'inputMode', // input\n 'list', // input\n 'max', // input, meter\n 'maxLength', // input, textarea\n 'min', // input, meter\n 'multiple', // input, select\n 'pattern', // input\n 'placeholder', // input, textarea\n 'readOnly', // input, textarea\n 'required', // input, select, textarea\n 'src', // audio, embed, iframe, img, input, script, source, track, video\n 'step', // input\n 'size', // input\n 'type', // a, button, input, link, menu, object, script, source, style\n 'value', // button, input, li, option, meter, progress, param\n 'width' // canvas, embed, iframe, img, input, object, video\n]);\n\n/**\n * An array of TEXTAREA tag properties and events.\n *\n * @public\n */\nexport const textAreaProperties = buttonProperties.concat([\n 'cols', // textarea\n 'dirname', // input, textarea\n 'form', // button, fieldset, input, label, meter, object, output, select, textarea\n 'maxLength', // input, textarea\n 'placeholder', // input, textarea\n 'readOnly', // input, textarea\n 'required', // input, select, textarea\n 'rows', // textarea\n 'wrap' // textarea\n]);\n\n/**\n * An array of SELECT tag properties and events.\n *\n * @public\n */\nexport const selectProperties = buttonProperties.concat([\n 'form', // button, fieldset, input, label, meter, object, output, select, textarea\n 'multiple', // input, select\n 'required' // input, select, textarea\n]);\n\nexport const optionProperties = htmlElementProperties.concat([\n 'selected', // option\n 'value' // button, input, li, option, meter, progress, param\n]);\n\n/**\n * An array of TABLE tag properties and events.\n *\n * @public\n */\nexport const tableProperties = htmlElementProperties.concat([\n 'cellPadding', // table\n 'cellSpacing' // table\n]);\n\n/**\n * An array of TR tag properties and events.\n *\n * @public\n */\nexport const trProperties = htmlElementProperties;\n\n/**\n * An array of TH tag properties and events.\n *\n * @public\n */\nexport const thProperties = htmlElementProperties.concat([\n 'rowSpan', // td, th\n 'scope' // th\n]);\n\n/**\n * An array of TD tag properties and events.\n *\n * @public\n */\nexport const tdProperties = htmlElementProperties.concat([\n 'colSpan', // td\n 'headers', // td\n 'rowSpan', // td, th\n 'scope' // th\n]);\n\nexport const colGroupProperties = htmlElementProperties.concat([\n 'span' // col, colgroup\n]);\n\nexport const colProperties = htmlElementProperties.concat([\n 'span' // col, colgroup\n]);\n\n/**\n * An array of FORM tag properties and events.\n *\n * @public\n */\nexport const formProperties = htmlElementProperties.concat([\n 'acceptCharset', // form\n 'action', // form\n 'encType', // form\n 'encType', // form\n 'method', // form\n 'noValidate', // form\n 'target' // form\n]);\n\n/**\n * An array of IFRAME tag properties and events.\n *\n * @public\n */\nexport const iframeProperties = htmlElementProperties.concat([\n 'allow', // iframe\n 'allowFullScreen', // iframe\n 'allowPaymentRequest', // iframe\n 'allowTransparency', // iframe\n 'csp', // iframe\n 'height', // canvas, embed, iframe, img, input, object, video\n 'importance', // iframe\n 'referrerPolicy', // iframe\n 'sandbox', // iframe\n 'src', // audio, embed, iframe, img, input, script, source, track, video\n 'srcDoc', // iframe\n 'width' // canvas, embed, iframe, img, input, object, video,\n]);\n\n/**\n * An array of IMAGE tag properties and events.\n *\n * @public\n */\nexport const imgProperties = htmlElementProperties.concat([\n 'alt', // area, img, input\n 'crossOrigin', // img\n 'height', // canvas, embed, iframe, img, input, object, video\n 'src', // audio, embed, iframe, img, input, script, source, track, video\n 'srcSet', // img, source\n 'useMap', // img, object,\n 'width' // canvas, embed, iframe, img, input, object, video\n]);\n\n/**\n * @deprecated Use imgProperties for img elements.\n */\nexport const imageProperties = imgProperties;\n\n/**\n * An array of DIV tag properties and events.\n *\n * @public\n */\nexport const divProperties = htmlElementProperties;\n\n/**\n * Gets native supported props for an html element provided the allowance set. Use one of the property\n * sets defined (divProperties, buttonPropertes, etc) to filter out supported properties from a given\n * props set. Note that all data- and aria- prefixed attributes will be allowed.\n * NOTE: getNativeProps should always be applied first when adding props to a react component. The\n * non-native props should be applied second. This will prevent getNativeProps from overriding your custom props.\n * For example, if props passed to getNativeProps has an onClick function and getNativeProps is added to\n * the component after an onClick function is added, then the getNativeProps onClick will override it.\n *\n * @public\n * @param props - The unfiltered input props\n * @param allowedPropsNames- The array of allowed propnames.\n * @returns The filtered props\n */\nexport function getNativeProps(props: {}, allowedPropNames: string[], excludedPropNames?: string[]): T {\n // It'd be great to properly type this while allowing 'aria-` and 'data-' attributes like TypeScript does for JSX attributes,\n // 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 return native props.\n // We should be able to do this once this PR is merged: https://github.com/microsoft/TypeScript/pull/26797\n return filteredAssign(\n (propName: string) => {\n return (\n (!excludedPropNames || excludedPropNames.indexOf(propName) < 0) &&\n (propName.indexOf('data-') === 0 || propName.indexOf('aria-') === 0 || allowedPropNames.indexOf(propName) >= 0)\n );\n },\n {},\n props\n ) as T;\n}\n","/**\n * {@docCategory Selection}\n */\nexport interface IObjectWithKey {\n key?: string | number;\n}\n\nexport const SELECTION_CHANGE = 'change';\n\n/**\n * {@docCategory Selection}\n */\nexport enum SelectionMode {\n none = 0,\n single = 1,\n multiple = 2\n}\n\n/**\n * {@docCategory Selection}\n */\nexport interface ISelection {\n count: number;\n mode: SelectionMode;\n\n canSelectItem: (item: IObjectWithKey, index?: number) => boolean;\n\n // Obesrvable methods.\n setChangeEvents(isEnabled: boolean, suppressChange?: boolean): void;\n\n // Initialization methods.\n\n setItems(items: IObjectWithKey[], shouldClear: boolean): void;\n getItems(): IObjectWithKey[];\n\n // Read selection methods.\n\n getSelection(): IObjectWithKey[];\n getSelectedIndices(): number[];\n getSelectedCount(): number;\n isRangeSelected(fromIndex: number, count: number): boolean;\n\n isAllSelected(): boolean;\n isKeySelected(key: string): boolean;\n isIndexSelected(index: number): boolean;\n\n isModal?(): boolean;\n\n // Write selection methods.\n\n setAllSelected(isAllSelected: boolean): void;\n setKeySelected(key: string, isSelected: boolean, shouldAnchor: boolean): void;\n setIndexSelected(index: number, isSelected: boolean, shouldAnchor: boolean): void;\n\n setModal?(isModal: boolean): void; // TODO make non-optional on next breaking change\n\n // Write range selection methods.\n\n selectToKey(key: string, clearSelection?: boolean): void;\n selectToIndex(index: number, clearSelection?: boolean): void;\n\n // Toggle helpers.\n\n toggleAllSelected(): void;\n toggleKeySelected(key: string): void;\n toggleIndexSelected(index: number): void;\n toggleRangeSelected(fromIndex: number, count: number): void;\n}\n\n/**\n * {@docCategory Selection}\n */\nexport enum SelectionDirection {\n horizontal = 0,\n vertical = 1\n}\n","import { Link as LinkComponent } from 'react-router-dom'\nimport { mkWidget } from 'widgets-for-react'\nimport React from 'react'\n\nimport { ButtonProps } from './widgets/featuredContentBlock.gen'\nimport { LinkProps } from './widgets/linkBlock.gen'\nimport { Link } from './types.gen'\nimport { t } from 'i18next'\n\nexport function jsxToWidget(jsx: JSX.Element) {\n return mkWidget({ run: _ => jsx })\n}\n\nexport function getClassName', returnEnd: true,\n subLanguage: ['css', 'xml']\n }\n },\n {\n className: 'tag',\n // See the comment in the