| 1 | {"version":3,"file":"getFocusStyle.js","sourceRoot":"../src/","sources":["styles/getFocusStyle.ts"],"names":[],"mappings":"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","sourcesContent":["import { IRawStyle } from '@uifabric/merge-styles';\nimport { IGetFocusStylesOptions, ITheme } from '../interfaces/index';\nimport { HighContrastSelector } from './CommonStyles';\nimport { IsFocusVisibleClassName } from '@uifabric/utilities';\nimport { ZIndexes } from './zIndexes';\n\n/**\n * Generates a focus style which can be used to define an :after focus border.\n *\n * @param theme - The theme object to use.\n * @param options - Options to customize the focus border.\n * @returns The style object.\n */\nexport function getFocusStyle(theme: ITheme, options?: IGetFocusStylesOptions): IRawStyle;\n/**\n * Generates a focus style which can be used to define an :after focus border.\n *\n * @param theme - The theme object to use.\n * @param inset - The number of pixels to inset the border.\n * @param position - The positioning applied to the container. Must\n * be 'relative' or 'absolute' so that the focus border can live around it.\n * @param highContrastStyle - Style for high contrast mode.\n * @param borderColor - Color of the border.\n * @param outlineColor - Color of the outline.\n * @param isFocusedOnly - If the styles should apply on focus or not.\n * @returns The style object.\n * @deprecated Use the object parameter version instead.\n */\nexport function getFocusStyle(\n theme: ITheme,\n inset?: number,\n position?: 'relative' | 'absolute',\n highContrastStyle?: IRawStyle | undefined,\n borderColor?: string,\n outlineColor?: string,\n isFocusedOnly?: boolean,\n): IRawStyle;\nexport function getFocusStyle(\n theme: ITheme,\n insetOrOptions?: number | IGetFocusStylesOptions,\n position?: 'relative' | 'absolute',\n highContrastStyle?: IRawStyle,\n borderColor?: string,\n outlineColor?: string,\n isFocusedOnly?: boolean,\n): IRawStyle {\n if (typeof insetOrOptions === 'number' || !insetOrOptions) {\n return _getFocusStyleInternal(theme, {\n inset: insetOrOptions,\n position,\n highContrastStyle,\n borderColor,\n outlineColor,\n isFocusedOnly,\n });\n } else {\n return _getFocusStyleInternal(theme, insetOrOptions);\n }\n}\n\nfunction _getFocusStyleInternal(theme: ITheme, options: IGetFocusStylesOptions = {}): IRawStyle {\n const {\n inset = 0,\n width = 1,\n position = 'relative',\n highContrastStyle,\n borderColor = theme.palette.white,\n outlineColor = theme.palette.neutralSecondary,\n isFocusedOnly = true,\n } = options;\n\n return {\n // Clear browser-specific focus styles and use 'transparent' as placeholder for focus style.\n outline: 'transparent',\n // Requirement because pseudo-element is absolutely positioned.\n position,\n\n selectors: {\n // Clear the focus border in Firefox.\n // Reference: http://stackoverflow.com/a/199319/1436671\n '::-moz-focus-inner': {\n border: '0',\n },\n\n // When the element that uses this mixin is in a :focus state, add a pseudo-element to\n // create a border.\n [`.${IsFocusVisibleClassName} &${isFocusedOnly ? ':focus' : ''}:after`]: {\n content: '\"\"',\n position: 'absolute',\n left: inset + 1,\n top: inset + 1,\n bottom: inset + 1,\n right: inset + 1,\n border: `${width}px solid ${borderColor}`,\n outline: `${width}px solid ${outlineColor}`,\n zIndex: ZIndexes.FocusStyle,\n selectors: {\n [HighContrastSelector]: highContrastStyle,\n },\n },\n },\n };\n}\n\n/**\n * Generates style to clear browser specific focus styles.\n */\nexport function focusClear(): IRawStyle {\n return {\n selectors: {\n '&::-moz-focus-inner': {\n // Clear the focus border in Firefox. Reference: http://stackoverflow.com/a/199319/1436671\n border: 0,\n },\n '&': {\n // Clear browser specific focus styles and use transparent as placeholder for focus style\n outline: 'transparent',\n },\n },\n };\n}\n\n/**\n * Generates a style which can be used to set a border on focus.\n *\n * @param theme - The theme object to use.\n * @param inset - The number of pixels to inset the border (default 0)\n * @param width - The border width in pixels (default 1)\n * @param color - Color of the outline (default `theme.palette.neutralSecondary`)\n * @returns The style object.\n */\nexport function getFocusOutlineStyle(theme: ITheme, inset: number = 0, width: number = 1, color?: string): IRawStyle {\n return {\n selectors: {\n [`:global(${IsFocusVisibleClassName}) &:focus`]: {\n outline: `${width} solid ${color || theme.palette.neutralSecondary}`,\n outlineOffset: `${-inset}px`,\n },\n },\n };\n}\n\n/**\n * Generates text input border styles on focus.\n *\n * @param borderColor - Color of the border.\n * @param borderRadius - Radius of the border.\n * @param borderType - Type of the border.\n * @param borderPosition - Position of the border relative to the input element (default to -1\n * as it's the most common border width of the input element)\n * @returns The style object.\n */\nexport const getInputFocusStyle = (\n borderColor: string,\n borderRadius: string | number,\n borderType: 'border' | 'borderBottom' = 'border',\n borderPosition: number = -1,\n): IRawStyle => {\n const isBorderBottom = borderType === 'borderBottom';\n\n return {\n borderColor,\n selectors: {\n ':after': {\n pointerEvents: 'none',\n content: \"''\",\n position: 'absolute',\n left: isBorderBottom ? 0 : borderPosition,\n top: borderPosition,\n bottom: borderPosition,\n right: isBorderBottom ? 0 : borderPosition,\n [borderType]: `2px solid ${borderColor}`,\n borderRadius,\n width: borderType === 'borderBottom' ? '100%' : undefined,\n selectors: {\n [HighContrastSelector]: {\n [borderType === 'border' ? 'borderColor' : 'borderBottomColor']: 'Highlight',\n },\n },\n },\n },\n };\n};\n"]} |