@databricks/design-system 1.12.10 → 1.12.11

package/dist/{DropdownMenu-e0c3fc1d.js → DropdownMenu-eb8788e5.js}

@@ -1,6 +1,6 @@
-import React__default, { createContext, useContext, useMemo, useEffect, forwardRef, useRef, useImperativeHandle, Children } from 'react';
-import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
-import { useTheme, ThemeProvider, css } from '@emotion/react';
+import React__default, { createContext, useContext, useMemo, useEffect, useLayoutEffect, forwardRef, useRef, useImperativeHandle, Children } from 'react';
+import { jsx, Fragment, jsxs } from '@emotion/react/jsx-runtime';
+import { useTheme, ThemeProvider, css, keyframes } from '@emotion/react';
 import { notification, ConfigProvider, Button as Button$1, Tooltip as Tooltip$1, Input as Input$1, Typography as Typography$1 } from 'antd';
 import * as DropdownMenu$1 from '@radix-ui/react-dropdown-menu';
 import chroma from 'chroma-js';
@@ -12,6 +12,25 @@ import _isString from 'lodash/isString';
 import _mapValues from 'lodash/mapValues';
 import unitless from '@emotion/unitless';
 import AntDIcon from '@ant-design/icons';
+import _uniqueId from 'lodash/uniqueId';
+
+/**
+ * Used to hide text visually, but still be readable by screen-readers
+ * and other assistive devices.
+ *
+ * https://www.tpgi.com/the-anatomy-of-visually-hidden/
+ */
+const visuallyHidden = {
+  '&:not(:focus):not(:active)': {
+    clip: 'rect(0 0 0 0)',
+    clipPath: 'inset(50%)',
+    height: '1px',
+    overflow: 'hidden',
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: '1px'
+  }
+};
 
 const ColorVars = {
   primary: 'textPrimary',
@@ -87,6 +106,37 @@ function getValidationStateColor(theme, validationState) {
   }
 }
 
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "g8zzui",
+  styles: "cursor:progress"
+} : {
+  name: "4y1qki-AccessibleContainer",
+  styles: "cursor:progress;label:AccessibleContainer;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+function AccessibleContainer(_ref) {
+  let {
+    children,
+    label
+  } = _ref;
+  if (!label) {
+    return jsx(Fragment, {
+      children: children
+    });
+  }
+  return jsxs("div", {
+    css: _ref2,
+    children: [jsx("span", {
+      css: visuallyHidden,
+      children: label
+    }), jsx("div", {
+      "aria-hidden": true,
+      children: children
+    })]
+  });
+}
+
 // Border variables
 const borders = {
   borderRadiusMd: 4
@@ -202,7 +252,7 @@ const newGreys = {
 const colorPaletteSecondary = {
   brown: '#A6630C',
   coral: '#C83243',
-  charcoal: '#5D7283',
+  charcoal: colorPalettePrimary.grey600,
   indigo: '#434A93',
   lemon: '#FACB66',
   lime: '#308613',
@@ -271,7 +321,7 @@ const lightColorList = {
   tagDefault: chroma(colorPalettePrimary.grey600).alpha(0.08).hex(),
   tagBrown: colorPaletteSecondary.brown,
   tagCoral: colorPaletteSecondary.coral,
-  tagCharcoal: colorPalettePrimary.grey600,
+  tagCharcoal: colorPaletteSecondary.charcoal,
   tagIndigo: colorPaletteSecondary.indigo,
   tagLemon: colorPaletteSecondary.lemon,
   tagLime: colorPaletteSecondary.lime,
@@ -348,7 +398,7 @@ const darkColorList = {
   tagDefault: chroma(colorPalettePrimary.white).alpha(0.16).hex(),
   tagBrown: chroma(colorPaletteSecondary.brown).alpha(0.84).hex(),
   tagCoral: chroma(colorPaletteSecondary.coral).alpha(0.84).hex(),
-  tagCharcoal: chroma(colorPalettePrimary.grey600).alpha(0.84).hex(),
+  tagCharcoal: chroma(colorPaletteSecondary.charcoal).alpha(0.84).hex(),
   tagIndigo: chroma(colorPaletteSecondary.indigo).alpha(0.84).hex(),
   tagLemon: chroma(colorPaletteSecondary.lemon).alpha(0.84).hex(),
   tagLime: chroma(colorPaletteSecondary.lime).alpha(0.84).hex(),
@@ -370,6 +420,38 @@ const darkColorList = {
   backgroundDanger: 'rgba(200,45,76,0.08)',
   backgroundWarning: 'rgba(222,121,33,0.08)'
 };
+const secondaryColorsUsingNewGreys = {
+  charcoal: newGreys.grey600
+};
+const lightColorsUsingNewGreys = {
+  actionDefaultBorderDefault: newGreys.grey300,
+  actionDefaultTextDefault: newGreys.grey800,
+  actionDisabledBackground: newGreys.grey200,
+  actionDisabledText: newGreys.grey400,
+  backgroundSecondary: newGreys.grey100,
+  border: newGreys.grey300,
+  borderDecorative: newGreys.grey200,
+  textPrimary: newGreys.grey800,
+  textSecondary: newGreys.grey600,
+  textPlaceholder: newGreys.grey400,
+  textValidationInfo: newGreys.grey600,
+  overlayOverlay: chroma(newGreys.grey100).alpha(0.72).hex(),
+  tagDefault: chroma(newGreys.grey600).alpha(0.08).hex(),
+  tagCharcoal: newGreys.grey600,
+  typographyCodeBg: chroma(newGreys.grey600).alpha(0.08).hex(),
+  tableRowHover: chroma(newGreys.grey600).alpha(0.04).hex(),
+  tooltipBackgroundTooltip: newGreys.grey800
+};
+const darkColorsUsingNewGreys = {
+  actionPrimaryTextDefault: newGreys.grey800,
+  actionPrimaryTextHover: newGreys.grey800,
+  actionPrimaryTextPress: newGreys.grey800,
+  backgroundPrimary: newGreys.grey800,
+  backgroundSecondary: newGreys.grey700,
+  textPlaceholder: chroma(newGreys.grey400).alpha(0.84).hex(),
+  overlayOverlay: chroma(newGreys.grey800).alpha(0.72).hex(),
+  tagCharcoal: chroma(newGreys.grey600).alpha(0.84).hex()
+};
 
 const darkColors = {
   ...darkColorList,
@@ -382,12 +464,18 @@ const lightColors = {
   ...colorPaletteSecondary
 };
 function getSemanticColors(isDarkMode) {
-  const colorList = isDarkMode ? darkColors : lightColors;
   const enableNewGreys = safex('databricks.fe.designsystem.enableNewGreys', false);
-  return enableNewGreys ? {
-    ...colorList,
-    ...newGreys
-  } : colorList;
+  const colorList = isDarkMode ? darkColors : lightColors;
+  if (enableNewGreys) {
+    return {
+      ...colorList,
+      ...newGreys,
+      ...secondaryColorsUsingNewGreys,
+      ...(isDarkMode ? darkColorsUsingNewGreys : lightColorsUsingNewGreys)
+    };
+  } else {
+    return colorList;
+  }
 }
 
 // TODO (FEINF-1674): Remove when removing USE_NEW_RADIO_STYLES
@@ -827,6 +915,7 @@ const Icon = props => {
   } : undefined, [Component]);
   return jsx(DesignSystemAntDConfigProvider, {
     children: jsx(AntDIcon, {
+      "aria-hidden": "true",
       css: getIconEmotionStyles(theme),
       component: MemoizedComponent,
       style: {
@@ -1103,6 +1192,29 @@ function InfoIcon(props) {
   });
 }
 
+function SvgLoadingIcon(props) {
+  return jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M23.212 12a.788.788 0 0 1-.789-.788 9.57 9.57 0 0 0-.757-3.751 9.662 9.662 0 0 0-5.129-5.129 9.587 9.587 0 0 0-3.749-.755.788.788 0 0 1 0-1.577c1.513 0 2.983.296 4.365.882a11.128 11.128 0 0 1 3.562 2.403 11.157 11.157 0 0 1 3.283 7.927.785.785 0 0 1-.786.788Z",
+      clipRule: "evenodd"
+    })
+  });
+}
+function LoadingIcon(props) {
+  return jsx(Icon, {
+    ...props,
+    component: SvgLoadingIcon
+  });
+}
+
 function SvgNewWindowIcon(props) {
   return jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1127,11 +1239,132 @@ function NewWindowIcon(props) {
   });
 }
 
+let sequentialCounter = 0;
+function useStableUid() {
+  return useMemo(() => sequentialCounter++, []);
+}
+
+/** Props for UI components that support a "loading" state. */
+
+/**
+ * A handler for integrating UI components with external latency instrumentation.
+ * If provided via `LoadingStateContext`, hooks will be called whenever child
+ * components in a "loading" state are mounted and unmounted.
+ */
+
+const LoadingStateContext = /*#__PURE__*/createContext(null);
+/**
+ * Indicates that the containing component is in a "loading" state, i.e. that the UI
+ * displayed to the user is semantically equivalent to them seeing a spinner or a
+ * loading indicator. This means that the UI is not in its final settled state yet.
+ *
+ * All components that are in a "loading" state should render a `<LoadingState>`
+ * component, preferrably with an appropriate description.
+ *
+ * By itself, `<LoadingState>` doesn't do anything, but if used within `LoadingStateContext`,
+ * it will call the provided `startLoading()`/`endLoading()` hooks when the component
+ * is mounted/unmounted, which can be used to integrate existing latency instrumentation.
+ */
+const LoadingState = _ref => {
+  let {
+    description = 'Generic UI loading state'
+  } = _ref;
+  const uid = useStableUid();
+  const loadingStateContext = useContext(LoadingStateContext);
+  useLayoutEffect(() => {
+    // mount
+    if (loadingStateContext) {
+      loadingStateContext.startLoading(uid, description);
+    }
+    return () => {
+      // unmount
+      if (loadingStateContext) {
+        loadingStateContext.endLoading(uid);
+      }
+    };
+  }, [uid, description, loadingStateContext]);
+  return null;
+};
+
+const rotate = keyframes({
+  '0%': {
+    transform: 'rotate(0deg) translate3d(0, 0, 0)'
+  },
+  '100%': {
+    transform: 'rotate(360deg) translate3d(0, 0, 0)'
+  }
+});
+const cssSpinner = function (theme) {
+  let frameRate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 60;
+  let delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  let animationDuration = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  let inheritColor = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  const styles = {
+    animation: `${rotate} ${animationDuration}s steps(${frameRate}, end) infinite`,
+    ...(inheritColor ? {
+      color: 'inherit'
+    } : {
+      color: theme.colors.textSecondary
+    }),
+    animationDelay: `${delay}s`,
+    '@media only percy': {
+      animation: 'none'
+    }
+  };
+  return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:cssSpinner;");
+};
+const Spinner = _ref => {
+  let {
+    frameRate,
+    size = 'default',
+    delay,
+    className: propClass,
+    label,
+    animationDuration,
+    inheritColor,
+    loading = true,
+    loadingDescription = 'Spinner',
+    ...props
+  } = _ref;
+  const {
+    classNamePrefix,
+    theme
+  } = useDesignSystemTheme();
+
+  // We use Antd classes to keep styling unchanged
+  // TODO(FEINF-1407): We want to move away from Antd classes and use Emotion for styling in the future
+  const sizeSuffix = size === 'small' ? '-sm' : size === 'large' ? '-lg' : '';
+  const sizeClass = sizeSuffix ? `${classNamePrefix}-spin${sizeSuffix}` : '';
+  const wrapperClass = `${propClass || ''} ${classNamePrefix}-spin ${sizeClass} ${classNamePrefix}-spin-spinning ${DU_BOIS_ENABLE_ANIMATION_CLASSNAME}`.trim();
+  const className = `${classNamePrefix}-spin-dot ${DU_BOIS_ENABLE_ANIMATION_CLASSNAME}`.trim();
+  return (
+    // className has to follow {...props}, otherwise is `css` prop is passed down it will overwrite our className
+    jsxs("div", {
+      ...props,
+      className: wrapperClass,
+      children: [loading && jsx(LoadingState, {
+        description: loadingDescription
+      }), jsx(AccessibleContainer, {
+        label: label,
+        children: jsx(LoadingIcon, {
+          "aria-hidden": "false",
+          css: cssSpinner(theme, frameRate, delay, animationDuration, inheritColor),
+          className: className
+        })
+      })]
+    })
+  );
+};
+
 function getDefaultStyles(theme) {
-  return {
+  let loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const defaultStyles = {
     backgroundColor: theme.colors.actionDefaultBackgroundDefault,
     borderColor: theme.colors.actionDefaultBorderDefault,
-    color: theme.colors.actionDefaultTextDefault,
+    color: theme.colors.actionDefaultTextDefault
+  };
+  return {
+    ...defaultStyles,
     lineHeight: theme.typography.lineHeightBase,
     textDecoration: 'none',
     '&:hover': {
@@ -1140,17 +1373,20 @@ function getDefaultStyles(theme) {
       color: theme.colors.actionDefaultTextHover
     },
     '&:active': {
-      backgroundColor: theme.colors.actionDefaultBackgroundPress,
+      backgroundColor: loading ? theme.colors.actionDefaultBackgroundDefault : theme.colors.actionDefaultBackgroundPress,
       borderColor: theme.colors.actionDefaultBorderPress,
       color: theme.colors.actionDefaultTextPress
     }
   };
 }
 function getPrimaryStyles(theme) {
-  return {
+  const defaultStyles = {
     backgroundColor: theme.colors.actionPrimaryBackgroundDefault,
     borderColor: 'transparent',
-    color: theme.colors.actionPrimaryTextDefault,
+    color: theme.colors.actionPrimaryTextDefault
+  };
+  return {
+    ...defaultStyles,
     textShadow: 'none',
     '&:hover': {
       backgroundColor: theme.colors.actionPrimaryBackgroundHover,
@@ -1165,10 +1401,13 @@ function getPrimaryStyles(theme) {
   };
 }
 function getLinkStyles$1(theme) {
-  return {
+  const defaultStyles = {
     backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
     borderColor: theme.colors.actionTertiaryBackgroundDefault,
-    color: theme.colors.actionTertiaryTextDefault,
+    color: theme.colors.actionTertiaryTextDefault
+  };
+  return {
+    ...defaultStyles,
     '&:hover': {
       backgroundColor: theme.colors.actionTertiaryBackgroundHover,
       borderColor: 'transparent',
@@ -1186,10 +1425,13 @@ function getLinkStyles$1(theme) {
   };
 }
 function getPrimaryDangerStyles(theme) {
-  return {
+  const defaultStyles = {
     backgroundColor: theme.colors.actionDangerPrimaryBackgroundDefault,
     borderColor: 'transparent',
-    color: theme.colors.white,
+    color: theme.colors.white
+  };
+  return {
+    ...defaultStyles,
     '&:hover': {
       backgroundColor: theme.colors.actionDangerPrimaryBackgroundHover,
       borderColor: 'transparent',
@@ -1206,10 +1448,13 @@ function getPrimaryDangerStyles(theme) {
   };
 }
 function getSecondaryDangerStyles(theme) {
-  return {
+  const defaultStyles = {
     backgroundColor: theme.colors.actionDangerDefaultBackgroundDefault,
     borderColor: theme.colors.actionDangerDefaultBorderDefault,
-    color: theme.colors.actionDangerDefaultTextDefault,
+    color: theme.colors.actionDangerDefaultTextDefault
+  };
+  return {
+    ...defaultStyles,
     '&:hover': {
       backgroundColor: theme.colors.actionDangerDefaultBackgroundHover,
       borderColor: theme.colors.actionDangerDefaultBorderHover,
@@ -1226,10 +1471,13 @@ function getSecondaryDangerStyles(theme) {
   };
 }
 function getDisabledStyles(theme) {
-  return {
+  const defaultStyles = {
     backgroundColor: theme.colors.actionDisabledBackground,
     borderColor: 'transparent',
-    color: theme.colors.actionDisabledText,
+    color: theme.colors.actionDisabledText
+  };
+  return {
+    ...defaultStyles,
     '&:hover': {
       backgroundColor: theme.colors.actionDisabledBackground,
       borderColor: 'transparent',
@@ -1243,10 +1491,13 @@ function getDisabledStyles(theme) {
   };
 }
 function getDisabledTertiaryStyles(theme) {
-  return {
+  const defaultStyles = {
     backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
     borderColor: 'transparent',
-    color: theme.colors.actionDisabledText,
+    color: theme.colors.actionDisabledText
+  };
+  return {
+    ...defaultStyles,
     '&:hover': {
       backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
       borderColor: 'transparent',
@@ -1368,7 +1619,7 @@ const getButtonEmotionStyles = _ref => {
       outlineOffset: '1px',
       outlineColor: theme.isDarkMode ? theme.colors.actionDefaultBorderFocus : theme.colors.primary
     },
-    ...getDefaultStyles(theme),
+    ...getDefaultStyles(theme, loading),
     [`&${classPrimary}`]: {
       ...getPrimaryStyles(theme)
     },
@@ -1402,11 +1653,15 @@ const getButtonEmotionStyles = _ref => {
         }
       })
     },
+    [clsLoadingIcon]: {
+      display: 'none'
+    },
     // Loading styles
     ...(loading && {
       '::before': {
         opacity: 0
       },
+      cursor: 'default',
       [`${clsLoadingIcon}`]: {
         ...(onlyIcon ? {
           // In case of only icon, the icon is already centered but vertically not aligned, this fixes that
@@ -1435,7 +1690,7 @@ const getButtonEmotionStyles = _ref => {
         visibility: 'hidden',
         // Add horizontal space for icon
         ...(withIcon && {
-          paddingLeft: theme.spacing.sm * 2 + 14
+          paddingLeft: theme.general.iconFontSize + theme.spacing.xs
         })
       }
     }),
@@ -1469,7 +1724,12 @@ const getButtonEmotionStyles = _ref => {
         },
         '&:active > .anticon': {
           color: tertiaryColors['&:active'].color
-        }
+        },
+        ...(loading && {
+          '&&, &:hover, &:active': {
+            backgroundColor: 'transparent'
+          }
+        })
       },
       [`&:enabled:not(${classLink}) > .anticon`]: {
         color: theme.colors.textSecondary
@@ -1481,6 +1741,11 @@ const getButtonEmotionStyles = _ref => {
           color: theme.colors.actionDisabledText
         }
       }),
+      ...(loading && {
+        '&&, &:hover, &:active': {
+          backgroundColor: 'transparent'
+        }
+      }),
       '&[disabled]:hover': {
         backgroundColor: 'transparent'
       }
@@ -1503,6 +1768,16 @@ const getButtonEmotionStyles = _ref => {
       padding: '0 6px',
       lineHeight: theme.typography.lineHeightSm,
       color: theme.colors.textSecondary,
+      ...(loading && {
+        '&&, &:hover, &:active': {
+          backgroundColor: 'transparent',
+          borderColor: theme.colors.actionDefaultBorderDefault
+        },
+        '&[disabled], &[disabled]:hover, &[disabled]:active': {
+          backgroundColor: 'transparent',
+          borderColor: 'transparent'
+        }
+      }),
       '& > span': {
         verticalAlign: -1,
         height: theme.general.heightSm / 2,
@@ -1539,9 +1814,13 @@ const Button = /* #__PURE__ */(() => {
       children,
       size,
       type,
+      loading,
+      loadingDescription = 'Button',
       endIcon,
+      onClick,
       dangerouslySetForceIconStyles,
       dangerouslyUseFocusPseudoClass,
+      dangerouslyAppendWrapperCss,
       ...props
     } = _ref2;
     const {
@@ -1552,15 +1831,58 @@ const Button = /* #__PURE__ */(() => {
       USE_FLEX_BUTTON: isFlex
     } = useDesignSystemFlags();
     const clsEndIcon = getEndIconClsName(theme);
+    const loadingCls = `${classNamePrefix}-btn-loading-icon`;
+    const buttonRef = useRef(null);
+    useImperativeHandle(ref, () => buttonRef.current);
+
+    // Needed to keep backwards compatibility and support existing unit tests
+    useEffect(() => {
+      if (buttonRef.current) {
+        if (loading) {
+          buttonRef.current.setAttribute('loading', 'true');
+          buttonRef.current.classList.add(`${classNamePrefix}-btn-loading`);
+        } else {
+          buttonRef.current.setAttribute('loading', 'false');
+          buttonRef.current.classList.remove(`${classNamePrefix}-btn-loading`);
+        }
+      }
+    }, [loading, classNamePrefix]);
+    const iconOnly = Boolean((props.icon || endIcon) && !children);
+    const handleClick = event => {
+      if (loading) {
+        return;
+      }
+      onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
+    const loadingSpinner = jsx(Spinner, {
+      className: loadingCls,
+      animationDuration: 8,
+      inheritColor: true,
+      label: "loading",
+      "aria-label": "loading",
+      loadingDescription: loadingDescription,
+      css: /*#__PURE__*/css({
+        color: 'inherit !important',
+        pointerEvents: 'none',
+        ...(!iconOnly && !dangerouslySetForceIconStyles && {
+          '.anticon': {
+            verticalAlign: '-0.2em'
+          }
+        }),
+        '[aria-hidden="true"]': {
+          display: 'inline'
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:loadingSpinner;")
+    });
     return jsx(DesignSystemAntDConfigProvider, {
       children: jsx(Button$1, {
         ...props,
         css: getButtonEmotionStyles({
           theme,
           classNamePrefix,
-          loading: Boolean(props.loading),
+          loading: Boolean(loading),
           withIcon: Boolean(props.icon),
-          onlyIcon: Boolean((props.icon || endIcon) && !children),
+          onlyIcon: iconOnly,
           isAnchor: Boolean(props.href && !type),
           danger: Boolean(props.danger),
           enableAnimation: theme.options.enableAnimation,
@@ -1572,15 +1894,18 @@ const Button = /* #__PURE__ */(() => {
         }),
         href: props.disabled ? undefined : props.href,
         ...dangerouslySetAntdProps,
-        ref: ref,
+        onClick: handleClick,
+        icon: loading ? loadingSpinner : props.icon,
+        ref: buttonRef,
         type: type === 'tertiary' ? 'link' : type,
         children: children && jsxs("span", {
           style: {
-            visibility: props !== null && props !== void 0 && props.loading ? 'hidden' : 'visible',
+            visibility: loading ? 'hidden' : 'visible',
             ...(isFlex && {
               display: 'inline-flex',
               alignItems: 'center'
-            })
+            }),
+            ...dangerouslyAppendWrapperCss
           },
           children: [children, endIcon && jsx("span", {
             className: clsEndIcon,
@@ -1605,6 +1930,10 @@ const Button = /* #__PURE__ */(() => {
   return Button;
 })();
 
+function useUniqueId(prefix) {
+  return useMemo(() => _uniqueId(prefix), [prefix]);
+}
+
 const Tooltip = _ref => {
   let {
     children,
@@ -1612,29 +1941,51 @@ const Tooltip = _ref => {
     placement = 'top',
     dataTestId,
     dangerouslySetAntdProps,
+    silenceScreenReader = false,
+    useAsLabel = false,
     ...props
   } = _ref;
   const {
     theme
   } = useDesignSystemTheme();
+  const id = useUniqueId('dubois-tooltip-component-');
   if (!title) {
     return jsx(React__default.Fragment, {
       children: children
     });
   }
+  const titleProps = silenceScreenReader ? {} : {
+    'aria-live': 'polite',
+    'aria-relevant': 'additions'
+  };
+  if (dataTestId) {
+    // TODO FEINF-1337 - this should turn into data-testid
+    titleProps['data-test-id'] = dataTestId;
+  }
+  const liveTitle = title && /*#__PURE__*/React__default.isValidElement(title) ? /*#__PURE__*/React__default.cloneElement(title, titleProps) : jsx("span", {
+    ...titleProps,
+    children: title
+  });
+  const ariaProps = {
+    [useAsLabel ? 'aria-labelledby' : 'aria-describedby']: id,
+    'aria-hidden': false
+  };
+  const childWithProps = /*#__PURE__*/React__default.isValidElement(children) ? /*#__PURE__*/React__default.cloneElement(children, {
+    ...ariaProps,
+    ...children.props
+  }) : _isNil(children) ? children : jsx("span", {
+    ...ariaProps,
+    children: children
+  });
   const {
     overlayInnerStyle,
     overlayStyle,
     ...delegatedDangerouslySetAntdProps
   } = dangerouslySetAntdProps || {};
   return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Tooltip$1
-    // eslint-disable-next-line react/forbid-dom-props -- FEINF-1337 - this should turn into data-testid
-    , {
-      title: jsx("span", {
-        "data-test-id": dataTestId,
-        children: title
-      }),
+    children: jsx(Tooltip$1, {
+      id: id,
+      title: liveTitle,
       placement: placement
       // Always trigger on hover and focus
       ,
@@ -1655,7 +2006,7 @@ const Tooltip = _ref => {
       }, process.env.NODE_ENV === "production" ? "" : ";label:Tooltip;"),
       ...delegatedDangerouslySetAntdProps,
       ...props,
-      children: children
+      children: childWithProps
     })
   });
 };
@@ -1940,6 +2291,7 @@ function Hint(userProps) {
 }
 
 const getLinkStyles = (theme, clsPrefix) => {
+  const centerIcons = safex('databricks.fe.designsystem.centerIconsInText', false);
   const classTypography = `.${clsPrefix}-typography`;
   const styles = {
     [`&${classTypography}, &${classTypography}:focus`]: {
@@ -1957,7 +2309,10 @@ const getLinkStyles = (theme, clsPrefix) => {
       textDecoration: 'underline'
     },
     '.anticon': {
-      fontSize: 12
+      fontSize: 12,
+      ...(centerIcons ? {
+        verticalAlign: 'baseline'
+      } : {})
     }
   };
   return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getLinkStyles;");
@@ -2034,7 +2389,8 @@ function Link(_ref) {
 const {
   Paragraph: AntDParagraph
 } = Typography$1;
-function getParagraphEmotionStyles(theme, props, centerIcons) {
+function getParagraphEmotionStyles(theme, props) {
+  const centerIcons = safex('databricks.fe.designsystem.centerIconsInText', false);
   return /*#__PURE__*/css({
     '&&': {
       fontSize: theme.typography.fontSizeBase,
@@ -2067,12 +2423,11 @@ function Paragraph(userProps) {
   const {
     theme
   } = useDesignSystemTheme();
-  const centerIconsInText = safex('databricks.fe.designsystem.centerIconsInText', false);
   return jsx(DesignSystemAntDConfigProvider, {
     children: jsx(AntDParagraph, {
       ...props,
       className: props.className,
-      css: getParagraphEmotionStyles(theme, userProps, centerIconsInText),
+      css: getParagraphEmotionStyles(theme, userProps),
       ...dangerouslySetAntdProps
     })
   });
@@ -2081,19 +2436,14 @@ function Paragraph(userProps) {
 const {
   Text: AntDText
 } = Typography$1;
-function getTextEmotionStyles(theme, props, centerIcons) {
+function getTextEmotionStyles(theme, props) {
+  const centerIcons = safex('databricks.fe.designsystem.centerIconsInText', false);
   return /*#__PURE__*/css({
     '&&': {
       fontSize: theme.typography.fontSizeBase,
       lineHeight: theme.typography.lineHeightBase,
       color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
-    },
-    ...(centerIcons && {
-      '& .anticon': {
-        lineHeight: theme.typography.lineHeightBase,
-        verticalAlign: 'middle'
-      }
-    })
+    }
   }, props.disabled && {
     '&&': {
       color: theme.colors.actionDisabledText
@@ -2129,7 +2479,8 @@ function getTextEmotionStyles(theme, props, centerIcons) {
             lineHeight: theme.typography.lineHeightXxl,
             ...(centerIcons && {
               '& .anticon': {
-                lineHeight: theme.typography.lineHeightXxl
+                lineHeight: theme.typography.lineHeightXxl,
+                verticalAlign: 'middle'
               }
             })
           };
@@ -2139,7 +2490,8 @@ function getTextEmotionStyles(theme, props, centerIcons) {
             lineHeight: theme.typography.lineHeightXl,
             ...(centerIcons && {
               '& .anticon': {
-                lineHeight: theme.typography.lineHeightXl
+                lineHeight: theme.typography.lineHeightXl,
+                verticalAlign: 'middle'
               }
             })
           };
@@ -2149,7 +2501,8 @@ function getTextEmotionStyles(theme, props, centerIcons) {
             lineHeight: theme.typography.lineHeightLg,
             ...(centerIcons && {
               '& .anticon': {
-                lineHeight: theme.typography.lineHeightLg
+                lineHeight: theme.typography.lineHeightLg,
+                verticalAlign: 'middle'
               }
             })
           };
@@ -2159,21 +2512,12 @@ function getTextEmotionStyles(theme, props, centerIcons) {
             lineHeight: theme.typography.lineHeightSm,
             ...(centerIcons && {
               '& .anticon': {
-                lineHeight: theme.typography.lineHeightSm
+                verticalAlign: '-0.219em'
               }
             })
           };
         default:
-          return {
-            fontSize: theme.typography.fontSizeMd,
-            lineHeight: theme.typography.lineHeightMd,
-            ...(centerIcons && {
-              '& .anticon': {
-                lineHeight: theme.typography.lineHeightMd,
-                verticalAlign: 'sub'
-              }
-            })
-          };
+          return {};
       }
     })()
   }, props.withoutMargins && {
@@ -2196,12 +2540,11 @@ function Text(userProps) {
   const {
     theme
   } = useDesignSystemTheme();
-  const centerIconsInText = safex('databricks.fe.designsystem.centerIconsInText', false);
   return jsx(DesignSystemAntDConfigProvider, {
     children: jsx(AntDText, {
       ...props,
       className: props.className,
-      css: getTextEmotionStyles(theme, userProps, centerIconsInText),
+      css: getTextEmotionStyles(theme, userProps),
       ...dangerouslySetAntdProps
     })
   });
@@ -2210,7 +2553,8 @@ function Text(userProps) {
 const {
   Title: AntDTitle
 } = Typography$1;
-function getLevelStyles(theme, props, centerIcons) {
+function getLevelStyles(theme, props) {
+  const centerIcons = safex('databricks.fe.designsystem.centerIconsInText', false);
   switch (props.level) {
     case 1:
       return /*#__PURE__*/css({
@@ -2220,7 +2564,7 @@ function getLevelStyles(theme, props, centerIcons) {
           fontWeight: theme.typography.typographyBoldFontWeight
         },
         ...(centerIcons && {
-          '& .anticon': {
+          '& > .anticon': {
             lineHeight: theme.typography.lineHeightXxl
           }
         })
@@ -2233,7 +2577,7 @@ function getLevelStyles(theme, props, centerIcons) {
           fontWeight: theme.typography.typographyBoldFontWeight
         },
         ...(centerIcons && {
-          '& .anticon': {
+          '& > .anticon': {
             lineHeight: theme.typography.lineHeightXl
           }
         })
@@ -2246,7 +2590,7 @@ function getLevelStyles(theme, props, centerIcons) {
           fontWeight: theme.typography.typographyBoldFontWeight
         },
         ...(centerIcons && {
-          '& .anticon': {
+          '& > .anticon': {
             lineHeight: theme.typography.lineHeightLg
           }
         })
@@ -2260,20 +2604,21 @@ function getLevelStyles(theme, props, centerIcons) {
           fontWeight: theme.typography.typographyBoldFontWeight
         },
         ...(centerIcons && {
-          '& .anticon': {
+          '& > .anticon': {
             lineHeight: theme.typography.lineHeightMd
           }
         })
       }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
   }
 }
-function getTitleEmotionStyles(theme, props, centerIcons) {
-  return /*#__PURE__*/css(getLevelStyles(theme, props, centerIcons), {
+function getTitleEmotionStyles(theme, props) {
+  const centerIcons = safex('databricks.fe.designsystem.centerIconsInText', false);
+  return /*#__PURE__*/css(getLevelStyles(theme, props), {
     '&&': {
       color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
     },
     ...(centerIcons && {
-      '& .anticon': {
+      '& > .anticon': {
         verticalAlign: 'middle'
       }
     })
@@ -2295,12 +2640,11 @@ function Title(userProps) {
   const {
     theme
   } = useDesignSystemTheme();
-  const centerIconsInText = safex('databricks.fe.designsystem.centerIconsInText', false);
   return jsx(DesignSystemAntDConfigProvider, {
     children: jsx(AntDTitle, {
       ...props,
       className: props.className,
-      css: getTitleEmotionStyles(theme, userProps, centerIconsInText),
+      css: getTitleEmotionStyles(theme, userProps),
       ...dangerouslySetAntdProps
     })
   });
@@ -2615,7 +2959,9 @@ const getNewChildren = (children, props, disabledReason, ref) => {
     },
     children: jsx("span", {
       css: theme => infoIconStyles(theme),
-      children: jsx(InfoIcon, {})
+      children: jsx(InfoIcon, {
+        "aria-hidden": "false"
+      })
     })
   });
   if (childCount === 1) {
@@ -2701,7 +3047,8 @@ const dropdownContentStyles = theme => ({
   a: importantify({
     color: theme.colors.textPrimary,
     '&:hover, &:focus': {
-      color: theme.colors.textPrimary
+      color: theme.colors.textPrimary,
+      textDecoration: 'none'
     }
   })
 });
@@ -2780,5 +3127,5 @@ var DropdownMenu = /*#__PURE__*/Object.freeze({
   dropdownSeparatorStyles: dropdownSeparatorStyles
 });
 
-export { ApplyDesignSystemContextOverrides as A, Button as B, CloseIcon as C, DesignSystemAntDConfigProvider as D, DesignSystemProvider as E, ApplyDesignSystemFlags as F, useAntDConfigProviderContext as G, DropdownMenu as H, Icon as I, CursorIcon as J, FaceFrownIcon as K, FaceNeutralIcon as L, FaceSmileIcon as M, NewWindowIcon as N, __INTERNAL_DO_NOT_USE__Password as O, __INTERNAL_DO_NOT_USE_DEDUPE__Group as P, getTypographyColor as Q, RestoreAntDDefaultClsPrefix as R, dropdownItemStyles as S, Tooltip as T, dropdownSeparatorStyles as U, WithDesignSystemThemeHoc as W, __INTERNAL_DO_NOT_USE__TextArea as _, ChevronRightIcon as a, useDesignSystemFlags as b, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as c, useDesignSystemContext as d, InfoIcon as e, Input as f, getAnimationCss as g, CheckIcon as h, importantify as i, getValidationStateColor as j, Typography as k, dropdownContentStyles as l, Title as m, ChevronLeftIcon as n, Root as o, Trigger as p, getDefaultStyles as q, getPrimaryStyles as r, safex as s, getDisabledStyles as t, useDesignSystemTheme as u, lightColorList as v, getButtonEmotionStyles as w, DesignSystemThemeContext as x, DesignSystemContext as y, DesignSystemThemeProvider as z };
-//# sourceMappingURL=DropdownMenu-e0c3fc1d.js.map
+export { dropdownItemStyles as $, ApplyDesignSystemContextOverrides as A, Button as B, CloseIcon as C, DesignSystemAntDConfigProvider as D, DesignSystemThemeContext as E, DesignSystemContext as F, DesignSystemThemeProvider as G, DesignSystemProvider as H, Icon as I, ApplyDesignSystemFlags as J, useAntDConfigProviderContext as K, LoadingState as L, DropdownMenu as M, CursorIcon as N, FaceFrownIcon as O, FaceNeutralIcon as P, FaceSmileIcon as Q, RestoreAntDDefaultClsPrefix as R, Spinner as S, Tooltip as T, NewWindowIcon as U, __INTERNAL_DO_NOT_USE__Password as V, WithDesignSystemThemeHoc as W, __INTERNAL_DO_NOT_USE_DEDUPE__Group as X, LoadingStateContext as Y, getTypographyColor as Z, __INTERNAL_DO_NOT_USE__TextArea as _, ChevronRightIcon as a, dropdownSeparatorStyles as a0, useDesignSystemFlags as b, useDesignSystemContext as c, InfoIcon as d, Input as e, CheckIcon as f, getAnimationCss as g, getValidationStateColor as h, importantify as i, Typography as j, LoadingIcon as k, dropdownContentStyles as l, Title as m, AccessibleContainer as n, ChevronLeftIcon as o, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as p, Root as q, Trigger as r, safex as s, getDefaultStyles as t, useDesignSystemTheme as u, visuallyHidden as v, getPrimaryStyles as w, getDisabledStyles as x, lightColorList as y, getButtonEmotionStyles as z };
+//# sourceMappingURL=DropdownMenu-eb8788e5.js.map